{"_id":"@material/shape","_rev":"1667-943fa41e9fdfef3ac0ead2bc4d982555","name":"@material/shape","description":"Shape utilities for Material Components for the web","dist-tags":{"next":"4.0.0-alpha.0","nightly":"12.0.0-nightly.778a0e8a.0","latest":"14.0.0","canary":"15.0.0-canary.423edc3dc.0"},"versions":{"0.35.0":{"name":"@material/shape","version":"0.35.0","keywords":["material components","material design","shape"],"license":"Apache-2.0","_id":"@material/shape@0.35.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2bd20063cef04034f9e050a2d96027bb3f645d6f","tarball":"https://registry.npmjs.org/@material/shape/-/shape-0.35.0.tgz","fileCount":6,"integrity":"sha512-WMmGLWrqRymMn8gaPybDWRIx7zNurUmaUa/OoxB++HSiLdLZf8hdEffiWLgqc5u97eRpb4IRaIi/jzcPbWxiUw==","signatures":[{"sig":"MEQCIDKTVZHi74XgVe31XJ5MGu+P6TEXTqY/7pOnCYuO0KiHAiBfS06CbGf9iV+lgn8HH6YOcxlt6+qrva6ehoPfsSempw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":10253,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa3mDsCRA9TVsSAnZWagAA2ikQAJjPhm7cnpqMXe/IyQ8p\nx/TpLUBL5EeKKtVUZSO6ge7QpcfU6AxfczoJeuPx7Ub2glgRgaIXppuXq1RN\nUGuewA5704h1VQUhQ/6qNq/wk+7Ef2EG2FIYlgD/uFq8/M4xz+TPLF2MSZaY\n1gz/lloLoFpksNu+1uyMM2uAOWqkaqJ2jtyxWqxS+rsg30QC66sBSp16A31l\n4+IwbF4t12OEy/KIzUh0WCEQmp4D1tYuVPLuOhmbu1T6fpNDZ0TZx6ULFRZK\nq58LfxkfnPxhi6hCKMYxW0h6XvVNMta/YSkGKxZg4nwm0sT+a0dIdgmg4DGS\n6DIG3cyHAlcnsFpRzbS3M4XofcSwzgfsV+8TmbScRuAmQmvH/3MYXYCa7qNl\nk/qLMyzvj9ryA4x1YUK47x8y7VMSGJcfZ+n5PNIIXjrWuMj8MG/7gKMyBgTU\nTJS/mqfb1saWQ91GMFR0U5bCYxhNLyMwf5RuC7mCBeicPDCYYKsqe6/FY2Yb\n1OQKwF3aVCRbmJEEbUy33Awoht+wopBGQ2UDEPL099qQlUOcvUimGx9dULrt\nTJZhdzGHLweNxSn3Wz2WEDZRV2T1BkfIct7XAx6JXfT3O9lM2tuWn+LkUoLa\nHY4fKCwLKtKd4sWrozJ8bxpGCRPQ+ZlN7purGK7zMbHBlqdvp+OTpkHesTm1\n7c0U\r\n=61f4\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bonniez","email":"bonniez@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.6.0","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"8.7.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/shape_0.35.0_1524523242872_0.9818902118886208","host":"s3://npm-registry-packages"}},"0.39.0":{"name":"@material/shape","version":"0.39.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@0.39.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bb763954be2e3eaa9cfb1e941bb5e18b95ecc106","tarball":"https://registry.npmjs.org/@material/shape/-/shape-0.39.0.tgz","fileCount":6,"integrity":"sha512-ZqEZuzX3lC3TYiEwqn/+kSn6G/ogFvyXT1UIUYf5auD2cQ4cKdy07XCJ/gCtlmDQz+g0Ed4Fwp10fYnvnL2hCQ==","signatures":[{"sig":"MEUCIFM+X2ExhyHfpFG31m+0jiYW7SQC/7OEAk2rj7Ryhy36AiEAlbK8g7pWZd0CeGT9q2vcXRxEM/KX8+pBcl9sFHwbbko=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":11552,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbhDd0CRA9TVsSAnZWagAATAIP/1QbCmjawvR/g7UCDgQU\n6o2KqqDJxsg9E4sxG8+eR9RXMYTzQ6mMJWVojm6vh+OY2ayJ3tLL61xDQJpk\n6ona8o3tQJuAG8OFdBurYabi2mzgQqHA9RQxXJ30/gD3+UROxqQ4C+SR2WJg\nXEyUrf9lGiJcmNDLTM+ldIUDFmRCyc6UKizjmgzzic5BBUmj3i8HgyNMY3ai\nj73uaTzi2HwJamGbmOKhO2X4lwJvin2pyf8ij6d5MA7KETKLC2K+M1DVio5O\n9PcTDG+Ok+ZqaU1tVWzKjFxEkOg3OtEccy3QVzZfLfeqn9hMch1tXaEvwnKH\nUC0AXtT3+3vZTyXsWSkCmA1++zBv0P1GRZ+su/QGYo3vYNQxQElgucL2yky3\nZSxes11bR9FGkDHRJRYCRgNc4jgaU7QsLfsfSIu/ld7twS9ULBFM70WAZzPo\nGTZzGErAHDK0REsJfOg5SQMBjrV/m6Zg/GvRlLQU0vHb7WTCDYR8Mq/EREvq\nMJioyrmoeZvQkVrv5fKDK3zUK6v22Gye5IZjOl8OCwTwPzbbF1/HShQOl/MT\nYrvdwVQfsecbcjfS0OSQMfbXZ5r9vBPDWchPNK4y+HmxgV1ZQT/YUNDgT1ID\nDkCLVTbAhfP2ON3o89FhUETONIHWdp9Y8C2ICPF4Im4cmusixrovKmYJ2AQo\nUSyP\r\n=/Vw7\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"williamernest","email":"williamernest@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.3.0","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"9.4.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/shape_0.39.0_1535391603412_0.4200082576556208","host":"s3://npm-registry-packages"}},"0.40.0":{"name":"@material/shape","version":"0.40.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@0.40.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"40f87a12c0835ae1810e90acb4004c3b74b6e2e7","tarball":"https://registry.npmjs.org/@material/shape/-/shape-0.40.0.tgz","fileCount":5,"integrity":"sha512-UsCnvCPln2//uI0YF/sqCtOWLgA5mzCl68+f/f283K4k21imGrHDAi093xDyy1LAUWyC1IVR+/RYVKXbHLtBlA==","signatures":[{"sig":"MEUCIE9tyYJGY7ujgCJo5A0XYrmEG8lmp+yHtMKx/FHGIV+XAiEAjGcBPo05B77Rhes7WT6KBuTA9i4ylkapRsGuie4sJXg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13635,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbqUJfCRA9TVsSAnZWagAAYtMP/2opd8kCiBRQFYTJurxp\n27PPstjjCkAPxmBruU3AiPgFXFV20R1vhxhlnM5Ebb2haHVpmZaD5raTJgBG\nAtOoNRJFr4IhrqpRD0tVnIMVNhR/H2mPhc9rzppFWd2VG70RTpwSgJ3TaAMn\nCm2GFSqANYA3WFhkdT0QpxiVOZx6W45rqWAj1VNWPrmnDsB5hrk8nHxiRvWh\nvZtWdoJNHLLQ0eAo7p1dc40wWmCG1GjPIPmfrZr5DJJf22oCTHydfE/h/FfR\nn+CPhXAzpBvnni+PzsIGgeBGQO8uKRytQ4CWIRBI8Arezh82/BbEk/4k3aUj\nG0TQ3DGTpuDV8VJeDlsFpnKgah8A/jsSZeY//6BR8AXnFoi5Cq4OZvUbOtBp\n7wD2Vcpejsrw+K+7K+sSLHBBOj8HY14PRWHgjWthdy5jDfgU/VVoCdWSo+uE\n2/TQrGLVrmPC8af/ccKGpH/1jFuZkbLwC8DN84/BuZbeA51JKBqJIOnfhIkf\n+FNblMGNibEfVOt7Igv0aN5S1DhKCb0mM/UTTVBdOGv9X5VcKzsQgYlhKFkl\ncqojenKYm8BV7giDB7akuBWwfffNZmdLBN3U1zRNpuTd0C1Mas5cu83j4rAm\nyc5THUXiF1/9G1YKh/EiUJwjpf2zZ/Ht9rckDN7M2rWdC6n224eXV3O53c5v\nXSwL\r\n=KRcg\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.4.1","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.9.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/shape_0.40.0_1537819230501_0.04370806352936185","host":"s3://npm-registry-packages"}},"0.40.1":{"name":"@material/shape","version":"0.40.1","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@0.40.1","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bd4224902896c3d45fab353d788fe6c4866483a8","tarball":"https://registry.npmjs.org/@material/shape/-/shape-0.40.1.tgz","fileCount":7,"integrity":"sha512-o1pw5+s/jWqsKbUAkCCaEcB8XLqJ4FlZhYfSvxZ88WRw9zoWOt9iQMMP82wLWhUX1DSzpNRI8BAD7aNLK6yRlA==","signatures":[{"sig":"MEUCIQDFiPEpHomUPj+cs+3E8PSt/P7XpBx0wNmqmarECPMUqgIgNJmMSsKtaW0apbALcFeaMqTo7yZoRprJDvhpIWur2N4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":14911,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbu8PmCRA9TVsSAnZWagAAURQP/i/E/XeODjDDSA9ocv2P\nQxPdkLJegH92KAhfns3Xq2iaLlk3jB7XvgmBNV5HpqyGS4ezU0MZy01F7AxS\ndzchgGwgfrwAl+OLeLLdjg5d5tDYeB4rf5XxjkrK0zS/H1kqAup9j0/JkKsM\nhW2HKY9BOXZ3Jhuz+X/HtIh7mzwL17OsBL2YJaQV/FNP9zlotVgoC8Uk8ILV\nFv2AqavaPxcklKx1NvQ21mbHcWpGqJfhuJmXaxyViv6Gptt1ymvQiexRyWKu\nokxNuR19dngw9525K30cnA1YYuGEAmnfnUL+PBNQrv529ZzOGDa0TED38LAE\nPgEmF6/rZKL9T/ukavp6Tz8gokrK54XFPHiBdS48Z1BYGCPsG5C2ahJuVWLY\ntp4bWWbcEhJPz+oWVfOiVweRHbHrde23OclbhD4W2Z/X+CsL/8+qXIK8Vk9W\nKPlHc/BDmDkU1cHTtjBFCnQN+ZIAdM/Fpt1dcqJqBG7Z6jaHWyS/Rf9vxrfj\n8Dw2nX3Z7hvCZjgfFBrPsSK28hbNgBur5kFkMMkDjo5E10y4Veh27uY1iHZ8\nwWMhESy2xGe5U1waGOlPecBE1H+zq+ZLroEd7phBe3o+Yf4UJtfeObFmT9tN\ndX9dg2Z/Npe85KTyMlSjNSCfEISzWrulZqVZxo3r6iO/26P0sAREr2WEKG9m\nKN4o\r\n=HgnA\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"acdvorak","email":"acdvorak@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.4.1","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"9.11.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/shape_0.40.1_1539032037479_0.008622135914899465","host":"s3://npm-registry-packages"}},"0.41.0":{"name":"@material/shape","version":"0.41.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@0.41.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2b1cb9a9e1240965ae25a107bbd6e29ca0257583","tarball":"https://registry.npmjs.org/@material/shape/-/shape-0.41.0.tgz","fileCount":5,"integrity":"sha512-k1K3CjOVxclfb/0r28cOa2oJpP7QMA2fP0SOS3Vh8ale5Q2jkaHTL60KX8VkHvV6rMqShpXW+60gPjoz5XRbDQ==","signatures":[{"sig":"MEUCIGj/PYQS8mXwiZ+RI1scsXHDadztocKT7Movwdyb91eJAiEAvQMthAVUx+r2Sg/MUCuzZsmygm+lQEADma15QB8jrQU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13365,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb12vSCRA9TVsSAnZWagAAHMkQAIy0E6ZNPUg5HgeVVrXS\ngcPbtHM50271mZe9z89DCszYzyDnsQtp4M23ZITBYXOUkSAwQv+kkeLDp/oB\nzZ+p550Ca6Y/HStZ/2bMTZ72P5seYd/YkT9hohTAPCSKPBO3Jmq3yN0UK+l9\n6VmNxDD/G6PD+S82j86oWQ7tgp74Ub2HtClyVZnjEFHJlUo1cPEVW+mWxS14\neIEjETTdylyAY7CXJpqr4nm1rGTU0UPPPUOQdaP/4YH53myynb6fbRFCN3Se\nq/0XO1pSg04emjdIPq0NAnsTmU+aK3eyuc1HDit5VOSQFqbAFgamU3VA+9KK\nf70eAWldLm4hTQxpdLirvaq+fPeUC6TJjcRMoR9LO533bntlZAN8f+1fcDmH\nX91V5uijn6WyygSr1ZteFuWjkZl1jYWBY3AGZ0AbJotaB2lW2yFaTdWHRAgF\nsgR8/VcEtPsuPMJ0g94Z/FQlehWwJePqlOeXzq5n9Bk6D7rGb91B8ifcKm2u\noBObhWlV31CFdlry4yXBWVNkbv1qrwET7nY6EfgsOgmU44i0fvIX8s4CM16X\n4WlHO6TdjxQgV4H8LQQGP2sUi8sXKLidWiHMh2ZVcoVsdpk+nfK0NhZzHC4w\nzMIQxjOaGaLe6jMNONpl5oDysBYB8zlKOhpEwIBQHrKWFSdGaY9rzCbUudEQ\nXG0w\r\n=8czi\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.4.0","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"8.11.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/shape_0.41.0_1540844497891_0.13237202095070622","host":"s3://npm-registry-packages"}},"0.42.0":{"name":"@material/shape","version":"0.42.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@0.42.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"784e117401ac5fe5f49411c34c86e62accb0f534","tarball":"https://registry.npmjs.org/@material/shape/-/shape-0.42.0.tgz","fileCount":5,"integrity":"sha512-E38QqeRoGLO38TOJT69rCBLJBnnXQ6Cmm/crjjl3TaLmqD17GiEJgPXzBdJ11lszBStSqR/gUXQX7P97LYruLw==","signatures":[{"sig":"MEUCIQDzpeeMZpmO5sRVJC+p184u6vQOUMs604nJydSmZoAUvgIgWYNxQdZx2WUP2IDOMP35B8JcV5hJou4HjMrpl761UE0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13509,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcBwWtCRA9TVsSAnZWagAALIgP/RSz98Ys3CDqLIGPI9TX\nN/ntlvW2bq1R8Ph3588FduG1YIdvMQ3TSeDinJLFI7iXrDbQxSCcMkkuIZx7\n+ilkPPayGsWKPSJFJehSV505+26+9cSVNcjhHp59iO0yVSeE2T09lelNftFe\n94GluC9p7xRBtbVZnkNaX+JH4Nt8ajBNNJeobnStzirEcAtnT29qwN4mgZB/\ntnbEB5aIOp1jQbN5jt3S+1gqFBV3sVjdYxBN6YDtzIP23b5WrH4cyG1C5ztJ\nkjg+hyiqIDtL81+o6buaNYEnuGcViB5BD4j3R4b0COaQLj83U4nXIYjXL5rY\nHohT/aTvxgUdo/9nQKv08pGrNWcGbuJv5en8rflMsfEZSd+LiDPTICKw+Wxf\nsrfRQ0/UVIlelwwQp/swqiXWY0x8NRluT2f1bjDjBhAShPT7ajpv2t3CZ01k\n06EqWHBX7kocZIo68wUqsiX81DSIfB9MjR71SGjvdCNRifIsLl6zpTARDGcE\nOgk2/3vnmUkqGrcu+asK58WcI8Ro8o8deyG+K4RbSv5ubmcwV3yL60IUpPgV\nL2SnMC8DK3fum7bkDl4nSqb35OuNFwCY7nPyYgN6Z3e4IoaqkNgjiRu5adZ5\nrdQSdq8m53dac4CinWtZSV2FT6hGU/wcUcbxl9TIIfROBhA3OkWboH8mqXPD\ntyda\r\n=LuIq\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"williamernest","email":"williamernest@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.4.1","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.13.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/shape_0.42.0_1543964076579_0.5033536531661409","host":"s3://npm-registry-packages"}},"0.43.0":{"name":"@material/shape","version":"0.43.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@0.43.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b877acfd8be8abc9ddcf6601eb60dd0588292415","tarball":"https://registry.npmjs.org/@material/shape/-/shape-0.43.0.tgz","fileCount":5,"integrity":"sha512-KGnoQV4G2OQbMe5Lr5Xbk8XNlO93Qi/juxXtd2wrAfiaPmktD8ug0CwdVDOPBOmj9a0gX3Ofi9XWcoU+tLEVjg==","signatures":[{"sig":"MEUCIQDizIvimZMMEfivDaQF+R220ahjxzrusYXaBBCRR2NQ2AIgI4BNcmnpAxA84su1AKYoN0fNjwussgvIXm4cw2bYHkU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13518,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcM60fCRA9TVsSAnZWagAAtioP/3F08lxkcbvvumlZhru8\nAioSLqP0SGjRjtIkHzppR3bQa19RLhFRXE6NXTAljnFZLGLt9jz5QDNoeJvs\ny7/foD4MK5Eb/ZWbbLocsGM8S9Zee6ICB6dXORaLtXducJBcaYQavVpTqV6j\nIsdr6dpQdzjNoAU89PBV5yw3fpp7mfnmQnYJEYvQFqdndFcVSt/kcsYkN6PL\ntECJggznlthhlYG+veyraWulPStJut0Kz3vFxNj/drzHD23j12BAkyEkrOre\nTS3dunpKDFZ0Nu25wr9jDxTrOgg9s+Lc1G+nCuD80WhPqhQx1G2UA/IVJaDe\n4PKd6Szbk5d/5+SxAR4eVr1qdJ/ganZIf/JtYSDP789qIJ1VhxFy2XFvCkY4\nTM4KQRPO688lFL4DoujIqmJnkjJnt2kC5cTvTgkE08HN9OyoY52UCubMBLul\naRzwc/Ja099gJ8ztCDARxtVB6qeyMYtnKiyskUlsKFsSuYSANaQly+smj2H+\nNGGwqK+e1dX0nAQuZK9nzRwmjimV0d0qdhssPL+Tl57wHZQr1SHHgLp0y7NL\nIpMqtqhoH5K840mUgceeZ3htSD5eb9zJzX0kxKv/WLkH8c89LzzfLE7h0V6g\nZAY+PJ3mpkGDzMrw5gnsYgCUZCFQtfjm0uf5Z+C/muYqdBZdmB07eM+Nj3i9\nRvsQ\r\n=cb3A\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"acdvorak","email":"acdvorak@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.4.1","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.14.2","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/shape_0.43.0_1546890526656_0.04504748708678652","host":"s3://npm-registry-packages"}},"0.44.1":{"name":"@material/shape","version":"0.44.1","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@0.44.1","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ff4d5d42b07c5781306677bffee43234b756ea8e","tarball":"https://registry.npmjs.org/@material/shape/-/shape-0.44.1.tgz","fileCount":5,"integrity":"sha512-8mCDQmyTEhDK+HX8Tap2Lc82QlVySlXU8zDCNkWoIn1ge+UnRezSDjE4y4P1ABegN5PrkJZPartuQ1U0ttIYXw==","signatures":[{"sig":"MEQCIDJzyE+jb0XTlQrDJDzt9QTGkNdjeFZ6L4liT9F+eVcoAiAwiQ16NbI5BGm0Ey0QSem28ilyOg5TOlNOe4ydg2T1sw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13588,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcbIsRCRA9TVsSAnZWagAA5xEP/RzEXd9cW0qj4FHkHQmA\nmVE9SerZNnQAlt4q0YjAX6sj/UwInd3lob/aFWI1oxRGPd0wm5SYtyv4ycY2\ntcv/bmWsomlsO6YXTuRYzjntCul81/wDqEDVCxFSxACAzRHLtMYInbQgs3o5\noZVazSGYRFHxva/PMg7RRZPcyEuS42gWRrPWqr9VUoZV76ts4kwLyJBtI3Ry\n+yr9gQJAsedzVwaE1t+QewF3pHF2Bz2vUWIUYdb1tz+VCrTgn8hVXHUqUSMS\nVWIwG9jCyN5wBTG/G/AHpTZKB+qMx9+j1nVKcMJaf0AeKjRHntnZZs1HRq49\nZeudU3SLYtLjGTkarPGDupiXCcDL/01CIzum+iIrqc/C+8ZErZcwOUSSqmLf\nBuDhzM5wFySPh+9dUnYFQKjUGCOEugutHKpQwZJtS0ngnM4W4yhyUyUUul7q\nvyCNQaOH8BSaMwFWSiRdSxl7+XOwDmMhXsiuZRqyB8ZYAg3ATtpIyk4rUEpr\ndL1xnE1jikJQEg3pyVesnIW+Bywlv7Y+JSFuOBZjuNPagkTs7U1y2GDlgEWV\nWTcMEm/zjFWBisuwVGPNv2w66FfejEEzFzfGISeR4wphk9Dxi0iKw+qspmrG\nd5Fi527Vw4reip4D0Dfzt1rw50D0scKx6M5XYlrXo3Ru6/RmyEURnEwyL8O5\n6I0k\r\n=KPs2\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"acdvorak","email":"acdvorak@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.8.0","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.14.2","dependencies":{"@material/feature-targeting":"^0.44.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/shape_0.44.1_1550617361155_0.11803751595216627","host":"s3://npm-registry-packages"}},"1.0.0-0":{"name":"@material/shape","version":"1.0.0-0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@1.0.0-0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fac6475f5058fddf2ef5d386f74dd39521d09601","tarball":"https://registry.npmjs.org/@material/shape/-/shape-1.0.0-0.tgz","fileCount":5,"integrity":"sha512-nSj8HGCVzpWS0msLOZSmnAMgpuOPdkEYHBinlfxEVClMox6QWPtLOkAWMhWsyzX5rx2CKHq8D2UYjFtRiujiww==","signatures":[{"sig":"MEUCIQCrV/TYjk/kphDck593dYi8aeajiWGOm4T2u4MaBPC8ywIgKp4bvTJhtNTR6gOTKkYk6TSCj7Mafe/XHOy6NtWiFJo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13855,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcdyRJCRA9TVsSAnZWagAABCEP/22+oOxBO55ocFb+LYdF\nQuGxXDgcQ8iVeLDYbLIBBzA/pD3Bb0BJDiGJCYZbCk/oyyiK7yvD6Ed4ILr7\nCDVJEjFIyM0yQsvJWCZsuNFvQusqeTP7Ll/88cuGS5yRYKJh9iCcVAgdjxBJ\nXeJW2L0PblI887y47XLUN6ZPCtRCw8pNUnntrPI4ZxK64tV6FeUA4s1dcJbG\nLo4mRb2PPQVy3s727V50V84qImj4LcQ6icc217AWNwVN47JxOuEG9096iYB3\nC6Mk+D1HF3ueih7zH96VLcHd+7MG5XqFKFOlio66bZ2qQ01G8TaqdPGUwhHb\nOjC+Qr1i3iyE6IB9KwnUwaV4hOvnulhlP7rx626+cUU5xn5UU28OJf+RS0qe\netIDnfsdoh/XhafNTnenTm0+6RSCJ3F1h5cBAsY5Gx/Pey89ElUvFCq3hgUJ\nkG9uc1bWbhBKpDtgtOUMfTSOUplBzqqslbHxX3aXCDCoPyZlhpF6+tyjqxGt\nBZOpZmcxx0Ie5mLs3vTYSOiqb2O+uqbsrOtB0++npn7cOgA7HdhEqd6922d6\nhn+L69f59vBlSVUpnhhKI/Z2YaLq7LliHfdc80SpN/UrVA2NQMD5ZD3wFeag\n4j9zgRqUAKh6XedKjenxU3A7H3RJD4v9mqk93RRfZWH2KqZGf9EN6PrqwIKh\nrWpX\r\n=QCxk\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","_npmUser":{"name":"acdvorak","email":"acdvorak@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.8.0","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.14.2","dependencies":{"@material/feature-targeting":"^0.44.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_1.0.0-0_1551311944685_0.5884986685395652","host":"s3://npm-registry-packages"}},"1.0.0-1":{"name":"@material/shape","version":"1.0.0-1","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@1.0.0-1","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c39c471f0b9ba2204e5bac8096055c436e89b76b","tarball":"https://registry.npmjs.org/@material/shape/-/shape-1.0.0-1.tgz","fileCount":5,"integrity":"sha512-QsoIaSaHD/LrRhpFInOHYTF9y5OLci1mE2hqi8VeiKC7M1Ofjo8ZEJcNgzGN6dcAZUXpXT9moIJYR8CV8gUhAg==","signatures":[{"sig":"MEYCIQDMTZYhEYoNcQgSoiSqviqoseAdBe84NNAiiJYhYFZzvgIhAKeR2ah8cHg9dvhNmGcq7xXV1LDM4tWYXCsObSJERxmQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13855,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcfbWrCRA9TVsSAnZWagAAdQoP/i/DODTTGhtxQm3dhA3M\niqKhCTaqZrj9QNX9azh4cXWn02GGjubJcN5aaZW2CX9GvR5wpvcycu/Ciw6N\nRa7zk8HUSg8UEj7189iUS5MT4NUvIpUp0uzfpIuy4vfUn3bdHZWvviWGvKYI\n6NfT6eXUDEaAI4bUwYJhLSB1F4RVR8UTvLe+2FFbRFu/vG7DysrYi/8Sc6tj\nC2JgG8zt2CXy0AxFg9jEeCpN5/5Ur9kUAwSJzTxEmJnp8VNygWvZI/9GP0ju\ntU5SE9lv/wIMxTe4KtKSvqXURW8I+HppovhVt6cY13li/Vi1bQPMoejffD0f\n9Lz4s+zx4H+7fWtF3Pg7IbeJsrJyDDs1485Q+Ifb5GxkxCzxoJYOSWnCcFw0\nW9IsskxKz1iyn/24j3rbz54w+wxyrXAPQmGLRV7CuUQCYV+hmyFAt2YMNeyi\nxAhuv0og/IAdUwDQZ8+t6Ur1j2n9FnAH0Ld1IVVqh5QrYk9qL/fBPkhnbmTI\np8C40oNC2UKX3ig09kZsEHllJf57vpoEPjmme1AKeporzcKbJODlDL2JzAjB\n75rn0leiFJYr/LFh5BfvwooASLMFg8QAc73kq2FDUVI5TXK/QomqETffAq2r\nSfrDwP21+fqH1/jybfuaz2kshm4kNKEfnQSj4dMMplgz99e/Jg0Si2VA1OYf\nV1tq\r\n=rnGx\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.7.0","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.9.0","dependencies":{"@material/feature-targeting":"^0.44.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_1.0.0-1_1551742378237_0.7691700073780514","host":"s3://npm-registry-packages"}},"1.0.0":{"name":"@material/shape","version":"1.0.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@1.0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bef17de1f282e5c71138338a34078d8402308f65","tarball":"https://registry.npmjs.org/@material/shape/-/shape-1.0.0.tgz","fileCount":5,"integrity":"sha512-zfXEacPQZmH+ujVtaFyfAsYiF46j1QCcFzJeZVouG4pznrbA7XD6614Ywg0wbyWX5iB6hD52ld/IN+R/6oxKqA==","signatures":[{"sig":"MEUCIB8QdT/LhZMKoC6A2NrROA3bkkkeN5u3zVKAk33dwtyYAiEA6ZK1yC+JTJzX+NGI9VuxBNMdBqJXN1z8TnrRNNVkb5E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcgDadCRA9TVsSAnZWagAAIiUP/iH6/+j3DSCQBSPnkV2e\nuKD47dooYc+XRb/LKv+OOtCkps9dF/W1HJkqUpziK7B+jeG+MhBrteBqimB5\n9HVyLmjav2DgdWQUCFdcmh8BwKkdIdjl/XDNHaGwpfNLQ4Rlq7Luq9E1JGL9\nQaRaOm7mj2qWpadrIHXunsvElZ4gpqsvd0rs2rfeU5U66Fu25jZ+kZ9DgGx1\nkf6vzzf5+J0SYb6B3bKNDWDuqV1qJcit46Eenas1T51SZrE3c9BnPXFTBG+g\n5uX5KXSR6cYWXSMPMnyaAbrfRKVFklDfOzuE9wUYDaEl8p7ntI3zaG0dn2Ph\nkm74HyD+uaijY3exKoLu5KSZzMr3OMLoFtU0GdwMHsoGPzlRZjjEny7itcJ1\njUwOFevprFL80pMe2rvId1yzwKvrUGHEapxlwFtMjUYuABCpcZstYAwT6VFB\nOKB4KC9X6ublwbCi38k7fCLvdN5GckeQ542yw3iaON2YMIEJ5KzIlNvCAHwk\nbBJsF0NdV+G8gM+RJotWAWOQqwgHmut83nqhHqFUZDYX2h2xOZT+l/BgxBbA\nSqgruBrjnKBt8wC3HHGJW7SPN5FwP4MqJwM37POIVplAY5/EskGxmcQl4FFt\np+vHiIDEHoGGi1rB+5SAB8i/Ro6Aebgk3NtdEd60nGYmOwj/SdFCOEKcOrkA\n2e0D\r\n=U230\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.7.0","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.9.0","dependencies":{"@material/feature-targeting":"^0.44.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/shape_1.0.0_1551906460713_0.038464789083829","host":"s3://npm-registry-packages"}},"1.1.1":{"name":"@material/shape","version":"1.1.1","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@1.1.1","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7a5368694bc3555e69ea547950904b46fa1024bf","tarball":"https://registry.npmjs.org/@material/shape/-/shape-1.1.1.tgz","fileCount":5,"integrity":"sha512-Jge/h1XBLjdLlam4QMSzVgM99e/N8+elQROPkltqVP7eyLc17BwM3aP5cLVfZDgrJgvsjUxbgAP1H1j8sqmUyg==","signatures":[{"sig":"MEUCIBCK/GZUKdbRzJOuCzmjWFwSiCaN0VZyZk98R5viQJD7AiEA/rbDnhKl1SWWvJH2CITxp7nT/LqqrgJaUyGpElnQ6mw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":14562,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcq6t8CRA9TVsSAnZWagAApCgP/iTICFw7B3eSuHMHuKVs\nE0dwqpFD3Mz0N5c1QyEx11N8z0Wq/l/F85bTqt12JL5sFPgZlrsVqZl47NGA\nStPKypgXWzQBnnXX9Wwnv2OByUzl3/w7qaUiv3DWBYWsEG+rePyqpMQkfkU3\nYY9usgsbfJvHPoXlR/XRiKNJyR5Xv1s2KWhFxceAE8C+yfTsXsIG4T9YmPhj\nCRPWiyiBPBufqk/0GfQlljJpeR8R+cMiNLFuv9+SXMyxfpS9x3m2PskBvxl6\ndTqFmiyMD7TN2n6djATFnZqSexuSDH2EJ0nOJbc/rGM0bIW2hDwqJhIf7A4F\n5A1BLOwni+lHaq0fJiGUGALXgGWJczewfCopDq6FjHtym/h1qRYjiJ2YaRE/\nNEC+JjDnGPBeMZaTWkdoyZ5E8JkGBpk99DikZJzvlbGYI1Fzz6ASkl07AkZa\n/dUAqY1eQM3laCdAezwSxSDH9+iP5ghQUXmdtuwc/f7oQpsGyVfnrv0Jb01v\n5u/g3RfxBJFtjV+jRFYAHFoxD+Cui5F0RrOg/mRWoXa8YXGNMLWCYU1pT31k\nASpSzUJdsRi0TK+ALVOj2nOTrVdQbP3bQvI852TnKZXDqXdu4DCeY6WVkQWY\n8JHpreyv0/Am1Dpv3Fr+Eq7ZxtYGVQIO9K0unJZy2bilOr1gXPk6BCJdF1r2\nnXHR\r\n=DQdz\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.5.0","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"11.9.0","dependencies":{"@material/feature-targeting":"^0.44.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/shape_1.1.1_1554754427433_0.7247663795409305","host":"s3://npm-registry-packages"}},"3.0.0-alpha.0":{"name":"@material/shape","version":"3.0.0-alpha.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@3.0.0-alpha.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4907363bb1b7a61420980419d01dc1b57b3b06dc","tarball":"https://registry.npmjs.org/@material/shape/-/shape-3.0.0-alpha.0.tgz","fileCount":6,"integrity":"sha512-W2bJ4ScjEscK+liuMmAJDSeVZLNDoujo7zKcfQSioIMX0Ugm86m8gP5Y+BvYJZtPPVNQPSPWRTQbkTd2lKSb4g==","signatures":[{"sig":"MEUCIQDInuDu8vDqjqnLzEWVSQ2aibMpbC728hOeu1QLu2e5NAIgcXqqEiFs8CG9I+lp7QV6nQuRJr1pj+3rPF8ZtdHqo5Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":15705,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdAHpJCRA9TVsSAnZWagAAsAcQAIprj2gS3ajdc1J8VlSJ\nF4JfE0Arr1cXosLfWRplm57IIFeE1tsu/+kGPJUBgvXk/xstbL1NDVX4vTJr\notWf1Oj5yojrOKqvrtTR/3yRLVROfOTxQhKQUxduSDQHm2joGztM3bkBMT9s\ntc8IX3uCVTUQkcn+01TG6eYl9r8qyC40aLYwLyKKLebK2/QlxE+FMlGmcTnQ\n6el6nitEg2fD8aSqhyqedWHQ4QUIAOli6gvwJumJvhw3clNF0tupgDom7K5A\n1XxYxUt69xqFS6JfDNwaCf/UgV+Ly0S8A68Pkza+hMs353fO9778VhIC7jhf\nuPXaTScWZtJ1GMLCmLFkTPpd5nCvNIlvr236CvrFnUrI5NhK/FVbjPNpehed\nrcXm6Om86mNQyJZckuZFFH4awSfmP3aex15XYL272QzAraGEG0P5/+h7eWRL\nF7Qvj1nrTK0YYipg3OoWPao+W/QOEqQXb2Rxo8cHCx9/lVMXIQli9ipLar+X\nnE+Cbz69FzQfmQR5xseFJ7SrxtJEDbAQgrbLOI0PxDwAQ9COmv3ER/tBdKvE\nEzpGbJnCA+ZYMMlNT9Gqn4fjU7BW9Dfwqcn9/7mgOVRBnnft7KqWo8Z/YZw2\n6jGAmz7jw57zi1DcmCf45ROIGeeI9dkTOzpCMSdp/3OAVhmw5uJHdM7NbZmS\njICU\r\n=WVze\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"094e507fcfb488303e5adec97f7f985b30e8567e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"lerna/3.14.1/node@v11.9.0+x64 (darwin)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"11.9.0","dependencies":{"@material/feature-targeting":"^0.44.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_3.0.0-alpha.0_1560312393197_0.7299384427273929","host":"s3://npm-registry-packages"}},"3.0.0-alpha.1":{"name":"@material/shape","version":"3.0.0-alpha.1","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@3.0.0-alpha.1","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f8bd8664be568d4166824fdc50bb9fd4dcc143b5","tarball":"https://registry.npmjs.org/@material/shape/-/shape-3.0.0-alpha.1.tgz","fileCount":6,"integrity":"sha512-i34JzahA5pF/pR+Vh7b4UntQ2PcAFlKhk3g81ozyHavKL6jA8Pm1ZvgG4rMUsHBJYpM/zQDvTrsJhc3IFTAFnQ==","signatures":[{"sig":"MEUCICOs89QVRvN3SRZ9t0aE+UQ9O9wH9pxTQwlZ+jl/mv3MAiEA717ssP7BoFoCbFQSn/zkDOgHP7cH3I+UXZY16qRDIEk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":15705,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdAUwlCRA9TVsSAnZWagAABLcQAJHyoXMRQHNduraQ424q\nN7dP6vkJ924i4UdkB6wR9aHoXsbIott9UDY/iPYu51JUbqqRY79wn8PFsiMT\ndo9DIofK9xSLFgxYxqwHQ4PFqXtyp/GtIYb28hbrGLpF11og9eCGm0S2yHBJ\nQnW1xNoRbo1G1ave9gUc3r/h99GuflTKNU15t6UB84rvJ/QoT4/6MefuLV47\nNa3pi8atZl1OzmLSNXFVnN6VcP4VmKRUoPHVhT8ITxbe0jt0iZ0O9x+qeplC\nt96Ejv7NEeO7Do6dJpX2ZgggEF6iH2i53wLQ6Pa8WrdvTx3XLW1TmMqZjnFn\nqxzuD3RmJw4bYuW5r8njn2Wejg2zYIeUkgd1o/02M54gtU8raGGyoR9zSnQF\nHUi4yc0Go8BhQZ3X00B75cm6ehcc8RlotJU1Zmsd/kXHb+Ze0m519e3PYdgh\nXIFAFlV3ulOiZ0Qlu5riIIZ8+HVzrjGU4FfS3YsHKRh6PKXRj8l9kIvmlOg0\nw5PMQbX7gNW4YcdWoVYiBZBRV8kv6jrV+y9CL23ROO8amNWgxHQaZW56a74X\nqlKhi3aAVf5hW5fLDbFMK2Cx01XwVLUt0u94GnsjeKPv1TGXBMQFIf/9WiAk\nfrkx5OUZ+XogVxmhlZ5+HeCoeQBbB5bxoqFxeMcIM0uJlBU1OONghF/uA8yN\nT37D\r\n=MISy\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"dae97b98c21bb93075a9688cf1f9076a4fe5a85d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"lerna/3.14.1/node@v11.9.0+x64 (darwin)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"11.9.0","dependencies":{"@material/feature-targeting":"^0.44.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_3.0.0-alpha.1_1560366117167_0.4004867059001944","host":"s3://npm-registry-packages"}},"3.0.0":{"name":"@material/shape","version":"3.0.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@3.0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"747c2eebfca2c34931487cb5c57d1d076e6b7072","tarball":"https://registry.npmjs.org/@material/shape/-/shape-3.0.0.tgz","fileCount":7,"integrity":"sha512-c0xGH6XegBPN4SgXyF8/Q1A2CV+NOvO8d+Eg/R2uJfOT8VPR2vSf4YevJrp9gvOMHmbz7yIymy/ap9pusiWzPw==","signatures":[{"sig":"MEQCIAb5YoxVBPZsyiD8Nnj78Y4NhLBpR9+zsIzVNXTsAFO5AiAAjN9DVSC8gfKqwnbC6d8NSlV9Ngbpxu+OcazfD/XCEg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":16031,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdEp/kCRA9TVsSAnZWagAAFOMP/16+xHSB2NO6W0Ixq1Pm\n6ABazxShdLy8r7rKTSlbSiI8P2uwK4MSt1S8pi8aZefC3HTh4l/4f5TPErlt\ng29KApdqXF61GSnr89blzSLyU+++GtxFWp2xEkS+dQ3R7/V+Td72BnH8TQPz\n/T0c+tN9MkhZHj1kIKvfKl/6AkHFBOwA1FwI2DiH2jAux/A0tsuRafLkenvd\nx3DOhTFsb0pFADqY0+0FFWoTU5X0JLUDZNflL7ZMeXo+nTNmIn5Kibrsn2bh\nz7+6ic3+xKv01UwC2iUFNvrlA9hb8VGYi3FqIMpah0K9CMkO9sLSnO28+74D\nKxYeRM1rkWegsK3P5GVHgZuYd53/KPU2gmqbRoptTc4hOQ2asNgpPlWsumaK\nx4o+vOeFAbS4vFjDRC7YCNEEJbFiSRfkT/R3xbj1GjiVsGVOXEgxjMWcd9Yy\n+SwaL9jsgvEsZv++eXUdDkRnbKXArjlLyoUtb/AyPfNVOfEf7ttGeN5mmalB\ns/l1tO8YjiAu3alReLy05UP4LF4BDBC1e6yx7JLB4fI6ACRvv4hikl6L+9PC\npn77pAdWFDaYYeWXGEwMHI5zznn2MnNE8k4aLpBpHxabX6TXHcIZhi4FjL9P\nMjmXFWYqmajEi39DGRAn/O8EK8d3SVFP5ErOhpmP6nuxO3Jw3AWtAeDlOt7t\na8ss\r\n=0ni+\r\n-----END PGP SIGNATURE-----\r\n"},"gitHead":"747f6ed544e3a3bb3fde71ceaa51359f2212bfb9","_npmUser":{"name":"moog16","email":"mattgoo@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"lerna/3.14.1/node@v10.13.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.13.0","dependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/shape_3.0.0_1561501667983_0.7347681942897644","host":"s3://npm-registry-packages"}},"3.1.0":{"name":"@material/shape","version":"3.1.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@3.1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7ccac6606d0ae45b779b3e52b8921c09c2b2f429","tarball":"https://registry.npmjs.org/@material/shape/-/shape-3.1.0.tgz","fileCount":7,"integrity":"sha512-Oyvs7YjHfByA0e9IVVp7ojAlPwgSu3Bl0cioiE0OdkidkAaNu0izM2ryRzMBDH5o8+lRD0kpZoT+9CVVCdaYIg==","signatures":[{"sig":"MEYCIQDVTesGq9c087IidJuZAH5+OfP90FkUC1Jms8njEj8+nwIhANsQFzBNlypWUmcFq45BzB/ohM5vap9q3lLR6PJRmVkb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":16070,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdNjJtCRA9TVsSAnZWagAA1FwP/0839+cqskuxJQIHjNzn\ntfP9VG1Dbe9YMXMeDa5+NdXV4Z2U91LwR4YQnq1/3H4egb2sSvabzUDWAxuX\nKHvdW2P82zMF3PwpEsO0zxdwNpZyiOJUDnnEQccUmZzOfI7wEgrwPCPPBUqJ\nP9AzyaHwVCuTd+nxsE+XnjEBZzyAKeYDyIuOqbQnOFRz0S+c8oVfgiwX1hA4\neDuXXxkf/LxlhaCxLvOeJZMx3Ya415PAAlfsE9IWv3E5PSZCGBJKlQ8N4BZJ\nPqxEcudD7to01AiLLRwEeeFUEkNRzrfYMCYi6Pj3BzPSAZiGqZ9fvFINcu/B\nDvpG9gk0DlEtdDcwRn1zNvj9D+YKc1Gl6JwlFLuHMVQfjTHIE+vCfunzDScz\nogzFDvSc6mvblIrvqvM2PsK5W3AT1PT8lBpd9LkACHSvqp+KaHEogWQ6on99\nshTCAs1EjGo5p3n85qqx7MSVUqgixe17ppHgqkMwS14MQJoxeWPpHbYN6nSz\n7MJ+A6GHOYAN8FZnwpybNZ3u8CZHXk9LYmZzK7OrstYUb69SKNZ5NI6M5r5c\nUH1y1XP6lhnNyy/JSAnvUEFt1oNxCyPn9FmeSzMr/2D3+2J5pQPt3VsXu/sY\nsyM+SjwKwqUPQBVZCCHkvmD7KBGXYY4G26MHzB/BcLtegM7c91mqBGEqC8Jx\nfYK9\r\n=NfDh\r\n-----END PGP SIGNATURE-----\r\n"},"gitHead":"6b7e616da1a1ca53df2253f6207642739e13b5dc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"8.16.0","dependencies":{"@material/feature-targeting":"^3.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/shape_3.1.0_1563832941258_0.15910305482592735","host":"s3://npm-registry-packages"}},"4.0.0-alpha.0":{"name":"@material/shape","version":"4.0.0-alpha.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@4.0.0-alpha.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7d1c1bf84957b1a83a9cefc66ae4ef989db039ed","tarball":"https://registry.npmjs.org/@material/shape/-/shape-4.0.0-alpha.0.tgz","fileCount":7,"integrity":"sha512-Xd2+r+x0jCZM3CwCoBEQ5Byessg9h51U8eynZ2j37+urm3g3Y3MmgVtyEgR1vZUxA2FnfUbmHl1gLI4j2v+qRg==","signatures":[{"sig":"MEUCIQCsteW1jsreODojrDyXdBga3qk9xi8CFxawBmcnwSDghgIgfD1MFvTe4y9BJGE1jCQZ77yCh4j4mJ/2ZNdzrklI64E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":16275,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdSz3vCRA9TVsSAnZWagAABEUP+wVJ6R0fdNUBZwOAy2FS\nW4ab5pkBuPJQvVYqh8vHCmy8noASgWY63zp7SKEw6WCanQW9AaEQiRfwPAmm\ngK4dfn+4zkV0IyEKOnktRzkNbxlCSrcQsI3cSeenalY5IsLvR8XoSM5FUzUu\nUwK9yOLk5lyaIve/w9bmeZGbROkmMHQ1jFiDLkLZ+WQ8Mm5P/4SoVIgeRQhg\nE+9Pz08+4ug8HjDTKPOPbPSx/i4Zk/pVjVMNw9KKI5ckn5sWZ0A79Q2QKTsd\nTBFqJ2XYBTNnHAJlLvSQAL7dHOmtWmC3S6ZT5hzDRwo/RQ8K25883/J8/VPR\nLoCuwh4Nykw75+Ufsje6aD/SRf7aU+PoqaA4cAPTUxi3iw9ErGfUVyYQCcF3\n0ZCQHPPydMC/TTOF6LzdUiozE6dDmJ7n7r7lFLaRDdWnYayC+w4tq50TCAW0\nLrTdVKBmxOq7KfSyi068DcHdstoi+DJbjblnHQ0g18kZ/qdfufdVnG9A65M/\n7owskQemY/ThQPgywjsXPYL9y6WUhrwqwDM3MT6O+gE5o/RuLBmnctFuqmxX\nr2V37O1QrlHN8Tup7qYDK7/Hyg3vyNK6sxclAb1WYQ7rkhTVRZssAIeS9V4s\nhAW+zLUTJRSVJY2kq8qeWH+Aja+vNafgPmhxdKw/KKUCOHMWKnLiu82WluTv\nKmVf\r\n=2haZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"184b37f65b79a260f2835bd44e422dab2402d937","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"8.16.0","dependencies":{"@material/feature-targeting":"^4.0.0-alpha.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_4.0.0-alpha.0_1565212143062_0.536945780037374","host":"s3://npm-registry-packages"}},"4.0.0-canary.0":{"name":"@material/shape","version":"4.0.0-canary.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@4.0.0-canary.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3c64b6913e1236e9718b6776f6df6d5cf3f5336d","tarball":"https://registry.npmjs.org/@material/shape/-/shape-4.0.0-canary.0.tgz","fileCount":7,"integrity":"sha512-ezO8W+BT0Ki98s3W99lvHeSPCi2dvMRoX/o901uDl78EJlsylAoA6Kvzs0IWsRouLlT+A5tfNL2f18ha+sTgyA==","signatures":[{"sig":"MEYCIQDuvVMv3NgmTotsTpn6LVTt+3CnZ700Ed9Ji2PAqwGYIwIhANlqvfGEGY4xQZfXBiCExWhX65IBdZAjTbTpFOa6OFl6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":17242,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdcJESCRA9TVsSAnZWagAAFHEQAIL81NV/dGXcvw78ZG4k\nWjc6dkbiz3t8mlrSa3LLdEHP2QHH4HXGBjvHDKq4ShFenQ8Q0/C3r79qPCU6\nOjeA54qjgjihDO1361/RvagWpOiQ9m07OoeAUTXxOg0RzYNCAfh52Ij7mT3I\ntI9p5jhr1GWd9ClcpdPgpt529MQGBXKugF2cW/x9RF6kGwHCv4msLiY8UAaq\nma2tp+YItaHFaRUfz00ItnGGxbUmWEI5q//c3LJfa7Z4UcQEDiUYG0GZQKKm\nJCiGMh3arfjNrpiW7lvqmlHCD0pRf57oHRMMV1U2KlrAw7AH94/LAkgNzgO7\n2bLUUXppdxWz7tj0hWbS/g+g6wgRYspUJsFrwbDI3WQ9WJjvMwryMug2FWBs\nnWa0uE8rL90Jz5ZOywVaENjMP5zSjRN5nt0qxvMtja5/Dk9NP9CBTQK+zfv+\n6vbpDJVwILNan5bagKPiWLhLwLaNxt7mwiAhJQXqf3/oQHTpkDqJ4ec3HNgQ\n6LwKUSYbk+v7C+56U7QoK6v3tTDul0+VjHgKjKCmhiCxP9pRm8tlQoT68FiQ\nIJRvhtg/p03BlHImxpciW0gfBRDUDkl9reVSPh2HlLQRjJjZxL3Vr0OJR1Lg\nKzkz+jh4B+bByPrVKlFW3JYVktaec0damKcSk2yr5lBTANwnRS5FVn7JFq5U\nbDk6\r\n=4ngg\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"a9e69493144f4246efe28a958126afc2fedebd60","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"8.16.0","dependencies":{"@material/feature-targeting":"^4.0.0-canary.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_4.0.0-canary.0_1567658258216_0.1694375756352331","host":"s3://npm-registry-packages"}},"4.0.0-canary.1":{"name":"@material/shape","version":"4.0.0-canary.1","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@4.0.0-canary.1","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2e3bdca46de162a40d60bf508e1711b8bb18eb0f","tarball":"https://registry.npmjs.org/@material/shape/-/shape-4.0.0-canary.1.tgz","fileCount":7,"integrity":"sha512-rQZsYdXDogFQ5flbrh9oySlLu4B2eUok4wzNYD6/1azUGo4PC7UoSYed3rGrEaWiKv6uVbWriWnn6uWqrP8kNg==","signatures":[{"sig":"MEUCIQCzSODUEbLtu0HDzeHybynvzmie954koKTJmqbs3FSJngIgdia9LvoD2dYhGUcI58i+IX0SAKuA5/VzEHcTjmjcphE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":17624,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJddrQNCRA9TVsSAnZWagAAygUQAIShgzNucTg59K0XSv/O\ncGhqM+TovbVhRrSUPgtDau8IGdC6nRuLsRu8vVn9mzIxnlK2JuWuxffqeUt+\n6MX+l65h6NL5lqaFY7VvwAmp0xdONWPb6k7yr/ShgcDm35YhRGPSKzrwyKi+\nvo54Z5phw4azn06U151l1KbbL5XHd1wrMelDiUlUQHfdw52WcqsVXcECJMo9\nzR8HgmyVCmmPj7TD3fkrVjzqSIml/O5sewdCuPqNUWA3aKCo7/l3AdsrOHnk\n2zhAGYQX92fgouGJ3iIZMMl5iymcQ+thEcGed2mvbuRBLjvM9uuPbJ4ccbp1\ntITrWiHGMOw/wbwMTSSgue12sqDh9+W/UYGDv4w9EsuPxd8Gt3OtZygcsFd0\nImhhU6sb2oUntXoJjxcFyGCEFVZdRICl0xIBPfoDEMMnbCVtjsQq6/amAFXJ\nF2ILByLlvQVARFwA7PIoa3sLoOc1Wf33x9iTnYZLWRVTWjOzZxxivXpHJCD/\nlnMdb1PCbM4Ku9EEOeG6fyLAg6jQFhFWokuqc/C49Xqs1fIHJQQLeissWTx8\nImhbtwQJ+n52MKgh4YcdkrszmMWW+je94HDE7u/XcN6VTpVKNk7S+DGiMzF9\nMJO3SZclIZBel+f9tSaArjWf1lgbLe0d/sejWISPv3cdV8qqf4EzJtWTEEXI\nCnaS\r\n=1a1O\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"edc72a4d7d6a61d61620fd05a80e2491e518bccf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"8.16.0","dependencies":{"@material/feature-targeting":"^4.0.0-canary.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_4.0.0-canary.1_1568060429255_0.1975393775935692","host":"s3://npm-registry-packages"}},"4.0.0-canary.79d881baf.0":{"name":"@material/shape","version":"4.0.0-canary.79d881baf.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@4.0.0-canary.79d881baf.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ab94ee05c5c586f9602336a7b83d1c9b9b7d652f","tarball":"https://registry.npmjs.org/@material/shape/-/shape-4.0.0-canary.79d881baf.0.tgz","fileCount":7,"integrity":"sha512-AZBf04CAUIDQ3eyi0F6uTDwcqHnucEYXaIIZpMRp4Sg8UF81OaGuBn3OiJcldn5LwhhTadepAQgN3+Gs8PyrKA==","signatures":[{"sig":"MEUCIHyXBBEha4EiDWDWhJQHD4KZD1MoA1euy9tCF9ofMgt7AiEA0VyGLb1xHCo17Uu6EDp/AK9pA3Iw1XL3bsg9SnDkcNM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18896,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdev0jCRA9TVsSAnZWagAAmXgP/jSdRhYkHQuZSa7ckeEY\nZltuciUFz022n4D6qjhsloOn+ANehHXJjYbh2J5iSTecCDqOq8v310a0eKGS\nS4a8a6okDMH5s3CNixCKr7Xiat6LniqWp12ASHX2XFf71WQfixi4OmG9S+Sq\njf+tEnVphy8AIhpTsn3oCEYDHjShLQ5BRL8zVTchXY4yycKovy+3Cw8vordV\nNErcr710ae4EFwUBRXhPBFTG1DDbNZ0nFIRxfBCYkzwLxLIquAoxECW0HmUn\nsOdNiBqfFHSboLc2zrErECr8LxTUCTzN+64fR1bvc5skxTX++H/ijUMjt4Ld\nXEAm9AB8B5xoKi8BUwkY7hFvdTL0AUUkDnax0u04FD0lyvJ1LesI2lRcQr2Z\nm3iTMBuGcR8lW9TH9KiZwO3JeHmBFOnRXXoOKAmmkT9d7PcNE7ZmaFSRXNUr\nbDh3/51gSYFytd6TCu/d7hzGRmW2yyvjzT5NsiMzWqmUMjnBb7JxF1Bm1JqO\nNoNeVQaKqIMVyWTNZy5ETOeWwOdhuWu3rV8vkZEbwqROzcR6jG9kBrl80Yb4\nRl6O/gCIY1k2xksYnINwkFrzI12XkXy8NbsR4O6x+o0evPgSKKN5+ZIOAC7X\nFzFbwwvepWyABF7apOQ03j8jx5X7aXCASyVld62EuX2hF4J3tgcbtUSdgBCu\nVTKQ\r\n=1w6h\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"756806a2389389441b5b3c130de02948130d96b9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v12.10.0+x64 (darwin)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"12.10.0","dependencies":{"@material/feature-targeting":"^4.0.0-canary.79d881baf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_4.0.0-canary.79d881baf.0_1568341282638_0.4856221360646704","host":"s3://npm-registry-packages"}},"4.0.0-canary.e851d4f40.0":{"name":"@material/shape","version":"4.0.0-canary.e851d4f40.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@4.0.0-canary.e851d4f40.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"be53bf13b9b84b89383fa3033372184ff3701af5","tarball":"https://registry.npmjs.org/@material/shape/-/shape-4.0.0-canary.e851d4f40.0.tgz","fileCount":7,"integrity":"sha512-i1v7xS4pI+bddTTlgSpO4pZJhgF4nB4yp50WqKVKT4VzwaVYETyMSW2PnWJ6TUerH9IAz/BaeqVI8FGWdYvoUA==","signatures":[{"sig":"MEUCIQDLSC3QtbxhPFUsJyXrjK9+9y8ppFz1MdnmyMsgw52E6wIgPkUK0XP+fgvJtYKc2JKKxslYVOvkiqNphy5LdHw3Btg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":20584,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdexXlCRA9TVsSAnZWagAA3S0QAJa8c9BJopfsp9J440cU\nGZsC68Eu3xaMJZ+79xI58OIfNNW4hxJhiMdj0lPzQQVfLQml17u0OYvZYs7a\nuBqrKcLMW9lDnXxV8PoQEd8SdZn4q5rjfrij8zT8f5gGAO+Cid1vK1H7FnIi\nGZ+3wnYjwHpQS5GZ/PqbU9Z2SD/X2T6dgzOqYx1Scg6orD98Ghrsa7202U7v\nQpRZeOw1189FV0hif1xczM69x/u7vjUU9IF8s6dvUAYn/eI9qXHQQBqTSWYE\nzuew6ZlWcQFcc43S4+FWUn7YzVlK8/+XdknB0OrEMQFkVbhIx/9Tl1xMIGuP\nV0kAIslMrtTWpirkTu0LVnRQ770H82o0sqmhUE6nwoHo1xr0OkqFolJeIw9j\nn6nnxezlfsHyQFCJze5H7hCqay+TUJRoeLTYnIGlqo8O3nvJqQ8LlB0Gzq80\nRUdnQk3HTVrUeolU6zHMzlDOgjX4DfBXIuoUyQoeNT1qeAqIU8STSzg+7QrM\nbWpizXVq36uBBwf6W5s5DrrGzYLKbTmGSUhhj0cTahAhKKun4reP5JNQSWfT\nBwUYiud7M9e+RNCcsawbW3x7f0GDvPNQt3M5uhEgkdcC3nQprrNdWR0c82Yb\nhueHw8JwPT0GcG0j9bMp/lblIAvo1Er/lYlmv6DENe8ie80Xf/hPtPKSpEGL\nIo/M\r\n=z0bx\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"353401bd143fdc2b4a85abf330176228e21dfe13","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v12.10.0+x64 (darwin)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"12.10.0","dependencies":{"@material/feature-targeting":"^4.0.0-canary.e851d4f40.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_4.0.0-canary.e851d4f40.0_1568347621325_0.7430321821354373","host":"s3://npm-registry-packages"}},"4.0.0-canary.905884690.0":{"name":"@material/shape","version":"4.0.0-canary.905884690.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@4.0.0-canary.905884690.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3964ee0ea9c2ca35355410ce97c454e548f8cda5","tarball":"https://registry.npmjs.org/@material/shape/-/shape-4.0.0-canary.905884690.0.tgz","fileCount":7,"integrity":"sha512-lkTRQGWBI1pCyr97H65BAdidYmuV4OtP5hyQfpZDAArHGZiDHcgEWLju9lXIXvtYMJ/NvxRxz2Ax7Ad5Dkoxgw==","signatures":[{"sig":"MEQCIHKmqJQTIUj/mKGV4wD6AioqaPd6P9GaPA9g5hwQ5fCfAiA87Nx7TdCCJYJKO4XPFpfutyUgCUpxCTavgfy+UHE35A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":20795,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdgB8rCRA9TVsSAnZWagAA3K0P/2q3+rRl2i0XrDsFhBHZ\nkh3pdf3c/rj20j7lBoyxyim824gIyzHuWUFG/LhpOOjpNfuJdACfkkrcmsZB\nh08tWKrihmDZLWL1cC8QxiNl2Cwkf0+0LmsaDgUL+yLYRZ1sht1PUOYceY38\npqeYMc8hWh3daFHjIkmjKYpIWi0Ygi9GTWN9fYPhdfpRUaYQr5a3aZS1EqRM\neNW+sEGx7zHWamNTDKRCcIRkPQrz95RXWdDvLLXtm56QHDoMvFAreQ6nLuls\n68qwLbFyZeeM0tVhkvIDvnPrHTfgusJv9nSBJFpdHMtoH6kXogBOpavZrYLu\nRaiBmYa+Iz6HqXXrGIMJ/WemwtF5JATHYuqipBEplwabVyYn+1eq7bOW/Q4a\nmIAQaAIMbFNsm1JSmJvqIpiuQADK/M/gWQV5Az9V++Wrz8oZTdEMYv9iDK0H\nzljwLKk9YIzVumJOqVTGldeBiOUwYhyDS4t/tMEV+X4RetppyB4fZd5PTpA+\nHtVxas9DGuGazTFL64+dRQdsARXuC/E7jeKM3CYMlrvJzA3i6cTFAbVVW1sj\nLBSP7FFMPYeUWoB0byFNF2zgPE2aoMP7S2TVw9Mtnm04j+2Vk96KCZlLEP4F\nxO85rr8WOpxTsUjyM5rtqhQ879dxMq7IYUV6mWdjz5apZmQqpuCp4tDSiEJp\nbbcj\r\n=4i19\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"df7fbf65943b1227b1bf145a2774abe7710b1e30","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.16.3","dependencies":{"@material/feature-targeting":"^4.0.0-canary.905884690.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_4.0.0-canary.905884690.0_1568677675132_0.3912883937229752","host":"s3://npm-registry-packages"}},"4.0.0-canary.199534d61.0":{"name":"@material/shape","version":"4.0.0-canary.199534d61.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@4.0.0-canary.199534d61.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"45c65c0c21dd21c9516f81b644dd922fe01b8e9c","tarball":"https://registry.npmjs.org/@material/shape/-/shape-4.0.0-canary.199534d61.0.tgz","fileCount":7,"integrity":"sha512-TwBbBgoPx9k5mlecMpQfWiNFmejfv+ncBkVk8OcxATrN4iCZLP4bFooUL/quw0zjnQGon+kJMkSIcVP6TEwNaA==","signatures":[{"sig":"MEYCIQDL15s688b+Cafs6baCN/MMRCeBYQkbggdSYCQQnpjZGwIhAOc9PeBexRtG5biyxE6hJH6LKP8tz/cptFyKx/MtIx+V","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":21006,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdjlueCRA9TVsSAnZWagAALZIQAIkq9K8oB2W966/rrAwN\nN/RUjuquK2FZ7fDeaPVgDUfQXAF4eu5yNKdTLehSXAVrTtUpJj9b8ppvQ5ZN\nHfpcJiPmlqedrKyHnVG2/73F0U+vxUabBz4IOJkEX+Ud3RSSlGuZB+qhUjlr\nyoV3Pjrj2wE0Ijc1ziFXlXxRDqH+HCoKVZsCigWihCGKaTBxVI/Ja0MQyGFb\nN9YYLJMsx3ATP6HIAD8sA4HRBey6rgnbT/wZsJl7pjdczBHsJ3MDECQqk69n\nGsRCzTLtvK5NiyB3We11469TwEgi+XBCe64M74W4wx+yGA4j7cAcYAJbofcY\ngfose7PFP6O3Erw8DRjlIp2BC3iImTxjSsJVFsLUUfqXEEwnyF9W0bHuUPS3\nEV9bHsaZYkUbFeYGeYxVWKVaTR8kkB2Yt7V/djQbZYH5EPYTvK+bhK5OVhWj\nExOPTozrXHs3ULSUpx0QFjEX1Q60p9j8wv6LnqQpyUR5UEImX9qjL/gTuyqn\n7rnjl67ALLh7ii8MSLIFkBkPo3e97Ovs9Xn2dOtOH6t5ZCSmVNvZntL6URAK\n/G3YO16Kwui1IlDXfU6DrMF83i/mbN4npQ/PZQZMHJMUagxOg+kU2yXrx8Hk\nutoAfQTOOuXlBA/Vfs+7vQ1hjtBmtgVqv7XN1qdy3wA6JMSwgwoINk4bBuWc\ngL9f\r\n=9Qiu\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"c35810420b70c99e38a1438e1fd44e4bb84e21be","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.16.3","dependencies":{"@material/feature-targeting":"^4.0.0-canary.199534d61.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_4.0.0-canary.199534d61.0_1569610654297_0.1439422125010923","host":"s3://npm-registry-packages"}},"4.0.0-canary.22d7ad2fb.0":{"name":"@material/shape","version":"4.0.0-canary.22d7ad2fb.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@4.0.0-canary.22d7ad2fb.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a95199e9cd710822ea4b69c0f62cd260524e8f91","tarball":"https://registry.npmjs.org/@material/shape/-/shape-4.0.0-canary.22d7ad2fb.0.tgz","fileCount":7,"integrity":"sha512-9FCKBIZYDimPWfrHqhQzApUiU9w61hYjWpvbf2PtPhXVlyluruOk46GcHjVxQmV9PDPidRObzpZr7z6kTxG+dQ==","signatures":[{"sig":"MEYCIQCJVuNgz9rqkK37EY15siytMVVQYef6uVa89pd6z/5OQAIhAMmtntdbMT0O9YXjE7TQ+LgTlgBhO1u1435j0baoYJV4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":21217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdphZ/CRA9TVsSAnZWagAALbIP+gLEkl/pbblMWf7Iz7Lu\nuGJss5purbxOxG+TeNBSbD9c7Q8cQOy0ZQEsTKlS/9hSBYGR3kJRk6laNIMg\neq8hYZ7WVyZIU4qDu7SUV5nyemZgzqlJDtRtaWrepBuBe0Tlkp5U4bY/RgkL\nMCvXMrFmz3NADacygabVp5nNRWJiQSASFYCAMwe6pd1fpPuHF/KLz23KsMCy\nkOKcujMwRKpy1CkH4OTgdwWkL08Tv1JRATQah+W5eoosQtZocLOxTcxtGrXH\nlLMqVZgtrdsa6omz06/aYOWQHSjw6U8PmhTdOpahRVa5ThGQsXV6LVwNHsMY\naohiorPwEAYIx0nH7ptCq+dNJN8NB+t262EcNIAJZKbvzT0pgv00ud326qvj\nDiKRwr4pPg2yXAcQG/IzQsXDzfD3L+awksgV3ydvWMddO7ZTaiMRhobLXT1W\njZDU9MAA78fTlAhMDofaeQ5Pum9748Z7HMQwfdJzXjYpGvUWKWa10l5R63Xc\nSlZQMcsfluhQ+wXrUXWOYtNc2/o8gdgwLXlrQ0zt8oan9ebgB7FZqZFu2uzy\nhh8+XAbHknM+cctoSoEg+YWUmWbz+Hl3X2Jr3rp/CChzvgTG0BaAjh4pfbpt\nMIh9wvRAWl+D6GEyg7PBWZSzTTNJX4XghBOUmeZwceWKf3TdERXNsFKk9jUf\n5iD8\r\n=exi8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"bdc05bd56f8cbc11face1f0f2787fdb17f450fe3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.16.3","dependencies":{"@material/feature-targeting":"^4.0.0-canary.22d7ad2fb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_4.0.0-canary.22d7ad2fb.0_1571165822602_0.7358496993182038","host":"s3://npm-registry-packages"}},"4.0.0-canary.735147131.0":{"name":"@material/shape","version":"4.0.0-canary.735147131.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@4.0.0-canary.735147131.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b1ee67d4d9cebf07638af5e20e724c4dddfd14a8","tarball":"https://registry.npmjs.org/@material/shape/-/shape-4.0.0-canary.735147131.0.tgz","fileCount":7,"integrity":"sha512-DTiok7sPgPN30V1Wm7qgrHcbvujaxH5YKq1q0qL7EydnveVI6sK6YxHim+pC6+Hav6shwU2HFHcc/Z3YgTddVg==","signatures":[{"sig":"MEUCIH1mI7CdV7lTPpbuwAquROtr7N84T4/oYZDyrIdFlAOuAiEAl5bkojNN4TqEFd2MJyTXu5CLNE+YSL2X2T8OD1AvX34=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":21638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdpnEICRA9TVsSAnZWagAAHgcP/0xQr6FCCXaZWyEBstHG\nKtnLCTwqD/ghEu9M9qUVVZ7Nz3Dhr8XhslJnQ4+9hQh5rZoiEKJ4z/OQC4fz\nyueRziaGC/R3gpmBScKYqR2bphdWBE3bxvvfxj9OKy3VDDoMkpxhCuBZGSie\npqZNtTidDrK2VDVHtnTjTqq/4Loa3DyQbQH/0PQITWo5WDzgI1r0vTfSxYIT\nRbnu3XbH+mw1x2i6Vac/gDiosWwGsnqTykpBFmikCHRo1+/xEmSQAyITEz4I\nnxH0HBaAsES6sNIQWFYzpXe3yd6xc7gEfN4EEFAwFiQo7LXK/t92MrvJZNOh\n7dhRYa3J+7sDsxFt6+tiNYH/CEMLoy2oaRk0kMRfA8banrs4PwZJ//GUICbd\nZPwn+OB5v9cj1wnNd/2V5TvFtUYg9PADDJCmiDD8+SqHy/QaWV/cQn+C9WnL\no5ovV1NtNTINfo46kX8JLNJbVAemXOXbOZoSd6DnRzb3CvtXV5lu+rj50BJe\n+Qg90azzzhUePlvl1438/BIqbGAf/zyp5Mml0ZK7TsV2K8+smyY9/4oJKTPt\nLShPmiT3YSSnVc5DWVYuDf/J2TyU9PqHOjcHsl979ZrL445dUj9IEuIrRMWR\nA9MzaW8zNIzaB9mNh9miX7ITGrqD1ahPu/RN6EAo+EgH8wCUJVEqujoMkfr6\nixZT\r\n=Q9tY\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"d7bebbe119e39bd973d398066f5601862aface5d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.16.3","dependencies":{"@material/feature-targeting":"4.0.0-canary.735147131.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_4.0.0-canary.735147131.0_1571188999798_0.5118359584654397","host":"s3://npm-registry-packages"}},"4.0.0-canary.062ade5c0.0":{"name":"@material/shape","version":"4.0.0-canary.062ade5c0.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@4.0.0-canary.062ade5c0.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dc412f71f28452191820e06789d37516b551eeb9","tarball":"https://registry.npmjs.org/@material/shape/-/shape-4.0.0-canary.062ade5c0.0.tgz","fileCount":7,"integrity":"sha512-vOD361r6HfCOxgZhage/Uj9s/XNch3GRMTQB2HZiNSwbYx9felHenXp5UoGckF2uF6u3fsmzZTCoz/maC+yk3Q==","signatures":[{"sig":"MEYCIQC+GQmslAJ85IkwzeZ+CnrGfJ9yC5u4f8cb4GdmiRDu2wIhAPsJzZoQC3ceVIrrBcz8PuhAjbAeNKMjjFlXrAX3JoOD","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":21849,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdp71kCRA9TVsSAnZWagAA7jwQAIwosVd4CBhYhpGkQPnt\nzYxd5Olyd2t0rhgDvLxT/g+Pr3gCmCd1gEyP/SRSyvMZ9SC35PzeWJ6t+k9w\nd1F/nOROisnAIzwlZvc1a/0KuETANePJ0C0fMB0N2Y12BdDPX30bSXd//Yuf\n8MeX9snrLqY4VsV4jSdSSvwNo0y+Gey3jOWP5WYDLnOHPaxQrQPwD2O0cXat\n/0gCOiPSYMdMOUj7MZ/rxcHMj+LQN/Q8FiEMQclfiANTkRHWG+X6I3oAFfei\ncXDFunuZZoLGIEDeHbJADktXw44o2pks6zisNT3SvBUVNCJvSW+/btCz9nyD\nLmhPGvV8bqMFNJpj+IH+N45MoneJgJStVbtUyNrGroUo873dsC8M3HpgRPdx\nTFJjW/Ni+/hEeZxfvExGvIx2BJ7NJT/YzE6/oNMoHcNdhxJvuAW8NpNT79Zb\n9HtoGrnjFLJ+Psulr41REUzX8ozmm6LinR+ko0SiLxcT/8hPTo38muWGW9oO\n8amyc3S/JZpoBD1+MM05u/sr0TtBKwZFOtlok9qc8JDJiZJ32kGeF8wmORKt\nAgr3ImTf0cCjpxjdn71fX7RoDvApgjwTlysZU24GfjDKIW7SCAw0MfCWPorz\nvLRRDK9q14Qk0IyCyUzKP6HFksFwB1WRwKjoVgsqIA+a5a70GOIf0P4XQVmS\n9wai\r\n=rFrY\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"e2025b4ba4d9837dcc1063934417df1eefaf29ec","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.16.3","dependencies":{"@material/feature-targeting":"4.0.0-canary.062ade5c0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_4.0.0-canary.062ade5c0.0_1571274083658_0.7287771775198595","host":"s3://npm-registry-packages"}},"4.0.0-canary.774ad4f8.0":{"name":"@material/shape","version":"4.0.0-canary.774ad4f8.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@4.0.0-canary.774ad4f8.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c12339301fc44f9ede9b992f150fdae4db67bea3","tarball":"https://registry.npmjs.org/@material/shape/-/shape-4.0.0-canary.774ad4f8.0.tgz","fileCount":7,"integrity":"sha512-Q3yqlEx5KqYttgfyevGPd1QXgKJcuuTLqho1GMjW2j1EHTZedpX2w3DdMIUdnu3FKkxkrtFXZP5ONJpTWpMJXQ==","signatures":[{"sig":"MEUCIEEzVjFCTkG/UHtodzqF1ILzH9MEtW2wuS1te1nZaU11AiEA3nCYyRMNJ/BTDmuRTH5A7PdRFh5yJ0ESQdhs4wn2r8c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":16033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdp+g7CRA9TVsSAnZWagAA0Z0P/0OEX2sZ1zGPKGMleZIU\nNpmNvfBimABb5STqWIqkTkvrL4XugVKz7uYyE3oYpm8IgdDBrWEieBol/gvn\n2CfgDP9Z1RvNd0J7RoYbeArqhhJbTawXPJZcUDg+bMp6X4uw/KlHEBYB5z+B\nrD54GZnLLBpyWbSiJIFPlKNdQATAHLx7Ub4edZdJCcJJxDTLzOGGUrksGUjA\nO3GQF3DWOx8IUv569+xTG7EtuXxQChsQfr9KLEvNALTD+5lEHddisQt7Fd4u\nAhPqtTBq2ChFeVFPwdHmGy3EiGAMGQnbmy3V/rSIB99ae/AGLsWE6K+oVGPy\n/qBr01vZ7ehfluKp9fyh6tmbHBT7laZfBCfLxxvNDoZ96WgytmIqeDem6/lY\nYiKi3oCw3mn3hVgQm1vgkh6LdMNMnXOsIlJeg6K9irm2lxdYKDtKoeTtX3FM\nedGFPesYb5twlE+7G3jtbPygPGYlUrOngk80qlflw/W0CNt+oD/HmwfkVYvC\nKlri2AFCNsBsgD+iCjqn7DN89/cdo9bPedaOaXTbNBBPgKva1p4y+/DRvD0U\nXpagHmcpFC+tpMt3SW2LmJK2XdfCgU/f+mwL3Yxah28affgFdK5HQaC6mIUm\nPov6XlHYHUW091oWwCs8CCNMH6kQzInkVs+HrXXfI+vei1IFCZVf2b7usrXx\nrSo4\r\n=HH2H\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"66607256fd6f9e4fe92319b094d8476583109bac","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.16.3","dependencies":{"@material/feature-targeting":"4.0.0-canary.774ad4f8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_4.0.0-canary.774ad4f8.0_1571285050661_0.6183088875126415","host":"s3://npm-registry-packages"}},"4.0.0-canary.5916d18c.0":{"name":"@material/shape","version":"4.0.0-canary.5916d18c.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@4.0.0-canary.5916d18c.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4b6c5b7ff4c8ddcae4d273757cf6bddd7e485e03","tarball":"https://registry.npmjs.org/@material/shape/-/shape-4.0.0-canary.5916d18c.0.tgz","fileCount":7,"integrity":"sha512-AnvI8u0bx3Js0lXiMOm3AvOB5dCv1Zm0GghrmBB3G0Z5UVbbJ1b1tp45Vrl7BAIXIZmyJljViVsa9uPRxG1zCQ==","signatures":[{"sig":"MEUCIQC9Bkf92kzklqOIuZD0HiNPUm7QaI3h5oAvLcvAQkKAeQIgVsKFgVCb0F0mGioQ3gmb9kwLQNE00MvQtWzkqccw4Q0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":16221,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdqhuzCRA9TVsSAnZWagAAYLIP/A17Hosj8NzP1bpbt+87\npSKhPJIMVGZQVRrNPl0T2uLCbSESa30T7o1PsYlnotoofbUqfN69k0ys11Cv\nSBEr+f2K3ZUgasWpkD7MSXRNZ1328mQlnqTlDzW45sKqmYoCfQHic14mdllF\nUx9LRQBMEj0XSfF7NZE6lbEPs0rYYYstZPCw/DIaAh+lOggiWD6Ush5mrCAa\nL2ZoG7GHXHXGuSKtBuW/VLeqwfyGAgUbJiiN1PwoHuydchlNrXi70hUzLg3P\ncWrv3r8jHBv+9e4+snX9Lprpon+DwMAVcYF30TantedN8cI2IyS09y6TSE3m\n0W+2XSCUXsiep9gG0lco17Rk3k9KuipgZohlVWWLozWcxRc66naXfoFPXFPM\n12FvmhIpTDe1YWzKYZ2Dwxo5SBokHq32ve1JDssesFFgENgMHb2JA5S9p2SZ\nq3nNx1PnYhQ5jXQEyIlq4Ruik4DLN0mdumIXPf7KtwNeslGbEl3sWL3FKZMj\nJFlX6LX0fFUyDQpLYYh2L8ZIqH/J06Vq2r3hs9wdgIx5mPe8hu6kYxZLWlz7\nmmX+3B4n54KhHh6kS5cVuGHwWpPvxyM8qGfs37JC44c2QmuLdfGzhiqBVpPe\nsLAq/CpggdT2gL9OKHcpYIBGcQcquVSuo0x9B7NWJORwVcJhVZ1g9OaYwOEP\nCBX9\r\n=mlTG\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"e3338b891c5ab3207ef8340a75490415e30e313a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.16.3","dependencies":{"@material/feature-targeting":"4.0.0-canary.5916d18c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_4.0.0-canary.5916d18c.0_1571429298877_0.886935263066458","host":"s3://npm-registry-packages"}},"4.0.0-canary.d4141c95.0":{"name":"@material/shape","version":"4.0.0-canary.d4141c95.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@4.0.0-canary.d4141c95.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dc75aeca7fd5ca467cca356d5c8574a9e8970dd2","tarball":"https://registry.npmjs.org/@material/shape/-/shape-4.0.0-canary.d4141c95.0.tgz","fileCount":7,"integrity":"sha512-f4x6s4PwMQVcsNRMEF51/qJ5Yf1SANSGpcIWSTixpJslxuKo4SqQ40JCni6TRbjrr5S2orM3nfQgJ8wNFnojJA==","signatures":[{"sig":"MEUCIHDaiPnN0DEewjurQZHQxZbkBtY6XS/MG+sPdMMvkPZ6AiEAobHOhHHT6w7aMJs74SjdXFLJ4uX69ChSPXixdRb50Po=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":16220,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdsQB4CRA9TVsSAnZWagAA2LkQAI9L+EmYv30Imofehgn5\nnK0i5mSpMUfriiRSXqKSvEHM0/ocq87+aV2/QO+sixOqzpRfaKdq/0rvbFBP\n8jTrr2bnH7Q1waNhEhF+Vmi38FvFPpxAo0hqvDZ+kEbIfb9WYaLEwtoEaHzF\nTt1TZB6E2xHpVP17JqPQNN2UacgDXX1/91of719B5UyW0c0vU5hZUHKfLvlr\n6cBHYMX0uHZ8O1sEmqVvDKTEcGEpaDVciXy/+uOOmy9osT0Oq3UAHJ62FBxF\noR8mQ/7BsVJG2NM22bkaimSoKqpUUulhPBtA6jyMFFJ+GeXtv1wblnkCa+IS\n0/umk6esxIgJQUdnKNQn8Ympm3lB1z6C6ChcarduIlbEH+IOTCSslsCIzau/\nB5MOPkvEbx5Yf6ftMxQkUFIuW7rr5sgf1gsYacXhil7TTAOJzyQSlEvv/omo\nCyk8fAedZQPnLexGhDk/ktV9iRol32/WMPjJ68da+DfY32GmAjQhQGGQbCaH\nzQ6MprfTz34d2Ku77n21BBuwGJCInkvmOS/hNz4cusA2hUV6T3FEFHQ4dSuw\n1PxsF91DWhKWnVqSQazczuC/s5HWgQZ3fJimBjhQmC41I2K8vU2l9K90EhzA\nT1UX5cMnWF29i1XleWwpxx4PDzRUc5FfX7Jq5RKwZPSxvS4dFAIrAmeYvFRN\nY/xn\r\n=2jI2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"10ba5eadec617b7fd2711c838dbbff788d6f209b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/feature-targeting":"4.0.0-canary.d4141c95.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_4.0.0-canary.d4141c95.0_1571881080426_0.9638268172080382","host":"s3://npm-registry-packages"}},"4.0.0-canary.2b878b3e.0":{"name":"@material/shape","version":"4.0.0-canary.2b878b3e.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@4.0.0-canary.2b878b3e.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a37d179232e43bd7aa10b970df4a71bacfeb9e19","tarball":"https://registry.npmjs.org/@material/shape/-/shape-4.0.0-canary.2b878b3e.0.tgz","fileCount":7,"integrity":"sha512-6oq829s34bHZD6Jn8+1zDBVGpo6Mxa/aevGlTVtZsSd0uPSIf6cY8o70otzNBMPop9CD7ZbA9UphI4gIBvQmPw==","signatures":[{"sig":"MEUCICvow0T1zXIbbPxiXzfsk+nmPzBFZcYLT5S5I1Nvox9gAiEAqXi2dRAd98Q580WMCoXu/qnyX749yiClTphsf8JmQpE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":16330,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdslmSCRA9TVsSAnZWagAA9VgQAIQAsQZ0CitkMlV9HLQ8\nXSYtj0B81jR1ToEJ4w4QZvMWMXdAeTu0QIcXdpRTLGZ7XeaXGXkhHifMUwy+\nt6YH3UW1gOYUb2bFcK2UdWaNNaDpGaOZ8CPjQPFtjR5gdMRuDo6lD/PBwnLe\nbXUxy2Ys42pqTrLElfPughicCve/HuJbNcGyqAUv4SnumjRG1LeVu2Dj0WE0\nzIMxm7h1EpL7LmMtI4AiGlrv9R9AapYHNfrOVBFrPFRN2cHBKiH8syBZ1HMj\n60wiYu8NozqmfgkUnmIDAjkqMWVdgPAvZfqYWtDMBdqXlMJ2nt/dVDTQuTfi\nzaZENG3n3DVlhgiFaBpBpuF8RLi3HwYauCXnl4S/t7g932EwhKrZzUoY4X4i\nWDatGysWqb5TVYtLEYiIvsD9lf+sWYV9lZSZbJwM/lqxYF2FzfoIJuQv636K\neiL+OwzRL0EDO/IukCfTHZFVgD/eTMh/ak84Ym4fBS8k6PZJFNIjKriqo7BH\nhge8DfzPPNCE9vTD81Z/JtYBDU/k+WE2CX5QXUg2dY9i1KGhtV7FCgeJKZDD\nUDW+Wmv04uUtMxis7B5IetIP6Y1zIEwOYOmbX7ah8Wfni7O8FYeacc+Hh+dG\nV3vWhYeNeJGDlGSA2YRLVDZrMJeSEQeQrzYIbc1uOxY2roV4cw85w6rpIS7Y\nGA/B\r\n=Hx7O\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"29ace6a085b0e37c6546b4613abba6356aa82430","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/feature-targeting":"4.0.0-canary.2b878b3e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_4.0.0-canary.2b878b3e.0_1571969425590_0.736935251970888","host":"s3://npm-registry-packages"}},"4.0.0-canary.b06c0efe.0":{"name":"@material/shape","version":"4.0.0-canary.b06c0efe.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@4.0.0-canary.b06c0efe.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"73474c6052bb1367b3f785a3f4b61561c5d90830","tarball":"https://registry.npmjs.org/@material/shape/-/shape-4.0.0-canary.b06c0efe.0.tgz","fileCount":7,"integrity":"sha512-0PMmEA4Wd/l8kTptq3R+yWZqZpi84gkIG8Jlp04BbHE+mDZXdQ4Q9L/l1iEJ7EPxkkPKypc75SyTZtXWxtwvHA==","signatures":[{"sig":"MEUCIBL/7uteDkR7RrOdW6791GhiYTI4UVYcgyujMxfOEYBqAiEA++lXwSYYq3fGoS4X24jmE44o+XFOv+kJ3nvWEqbhki0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":16033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJds6K9CRA9TVsSAnZWagAAkNkQAIbe99OJsppINuEuyhxP\nQuhENTe7zCMGSZXPZvVwwgjfgoFTMvCXrVwBsx3iOQpSXHNOZfFkrJ6OiEo7\ngZe4QSMzOqCNeGBnWG5gVug3lCFuzcY/ogteY/vBSv0I9VjasqA294P3VFeu\nBPI5wBWTOYTlCqIxwvrP9I1SmF3opYYwdIzwWp8FhwUEaY7wsbq2yUBBN+hk\nMjcplUN/2wKXBqnp7SL3+3mdp8xVzFk9vsk64kbZfYmQQ9pXy+UOzo6kdBrB\nZrAwE44QM3kSWsjh27zBh6rFu/+UO24Ytz3BBrVQ7JUxJLgsAgeKLUvjZERA\nIXGzHFJ1mZ4G3r0/1VRvjbCqkJrIfaLgj6FM8RQHYKYw6WoraesuGh/Si7Cz\nCHotLV04e1ndex2DzFxlgzASI+OOxlGhREnFvB+tyqOyxMP5owQFGKG2QiK7\nUl1httTpl8lC/rbVABkMXqhusAonW6zsrJrMTDQEmMZHMyM5n3sRURaZlPc+\niKBfhJpr2tNMQvIl4uEzyF2BryrLgNn+huiDsL+NFhuSDAT/bLflITCfyM6j\nziGfVSYEJMGtb6ffhewX4Z7yBS9LJQzikcnCzL1gJzFDEtqJmjY0Ht+OYfVq\nmDX5rEMhadD3trWWhOhzOuoVEBkNo7rGYIHrgaPSKtiF2HumE/ixd8B1wOTm\naDEJ\r\n=oiVD\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"023500a209a10669d135ecd0a8f00995f84b135b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/feature-targeting":"4.0.0-canary.b06c0efe.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_4.0.0-canary.b06c0efe.0_1572053693302_0.9145693539716451","host":"s3://npm-registry-packages"}},"4.0.0-canary.01628efa.0":{"name":"@material/shape","version":"4.0.0-canary.01628efa.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@4.0.0-canary.01628efa.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d94d8b5d1888140262495fb0ab3e5a687aece361","tarball":"https://registry.npmjs.org/@material/shape/-/shape-4.0.0-canary.01628efa.0.tgz","fileCount":7,"integrity":"sha512-5SQiMHIDbsEGuTq9lpA1wp6zbSgdkGif54OFFbRT0rc7TYDqOO8WeI8Z7RXzbjp4iRaT29BxnzFiP/bjEheSgw==","signatures":[{"sig":"MEUCIQDEc67m7qsmRHLvu44QHreCbNSRw+o2U16gl5t7Goh96wIgdSG7Z6Dc4mmwB7Covhpt/0b7ooHaZ7slvwEmLKBuaB8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":16327,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdt4GkCRA9TVsSAnZWagAANI0P/i3Jl7bHuEbnCSyUyRVw\n0YblIuP1V5esHAvjQddQBAPkku0BoxwEnzk7dhHh6GhhD6oA767v+2hZmmoJ\nkHtm1184tva33X6/653tPCe00+RIgj+kzldOLGTiY5o+FsSvFAz7znF7VYJv\nkz431e3jDanBb6X+JJo1TrGQkb9IxXU4n6WEFUSsxfPaS43bboiy2UCw/xen\ntxIoTtCTzwRwOYIbIkMVfGz+0z00co1cPrTHHMv5Rbg1gygOo6EQnB+laISy\nyZ3aTSMr2TSjR4nKK64dlBO2oumsQC3orcyf7MiOWnyTDEwIrPuIhqEIrQ0i\nf70fMuSeJI4CpRqvBo+uV81PNDlR9ZmqYyRC/Fgk1KcJTfq+CFKNwItG0w6I\nmaJkVKjWJTgPwuXkReNLrhQPbYV/S25/aeg+elqozfYnFyqQN2ML9IJ1TUMe\nhxtiptkoHEq6YqbheSVJHMMRLzN2QcPj0LksUwgAEPAMoUXmx6syL22Zq82f\nv64T+egS3fAvDG3kY0/sJd+CgOCfZGp73ghauyJ+pbWp4aLc2Kc+zBJKl1/D\n7LI8ATwSNz5WaVIzXqDxzb3b2o4YhUixaMrqG6AJvsXdLPWxx0327SXaiT1/\nfTWaseQ6MnEHKpK7qfIifZCwQtndcPwO5tNX9UwnQ1+OiO+JgSjW2TJr9xmG\ncGzL\r\n=0els\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"d736a6d7c49f31b52dc64101effcb7cb18ca6cc1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/feature-targeting":"4.0.0-canary.01628efa.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_4.0.0-canary.01628efa.0_1572307364209_0.858936719650246","host":"s3://npm-registry-packages"}},"4.0.0-canary.b5c6d66b.0":{"name":"@material/shape","version":"4.0.0-canary.b5c6d66b.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@4.0.0-canary.b5c6d66b.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6ec4bf332ae5e5e9cea00dbd8e27f891a2e2e112","tarball":"https://registry.npmjs.org/@material/shape/-/shape-4.0.0-canary.b5c6d66b.0.tgz","fileCount":7,"integrity":"sha512-YU+3c8AtAv9fNRnfoZ9F0ObcyznZLdTNIj4aX0bwKPtC+pjmIJwR1CYOzxgC8uyiWnsJl/drBL7g8/gs3HcV2A==","signatures":[{"sig":"MEUCIQCNpVDA5MG4Luudfs6Sk7v+Vknb7W6O3md9HZLJp1kJOQIgMj4jVYW1iA+3QIeC16ycoSU9TEYQkOAwTDbM4W0Necg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":16214,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJduH1JCRA9TVsSAnZWagAAjpwP+QG8BZ5mH+1AIa5DZSi/\nnOjnDawpNShWPxrC5yprAWFXG5rCAezur1MnsefMMUfqfkcokBz9gJoY0hZy\nPQUQImAKqY64BMqse+/HndzOEgLwzgUBYIvkBIgL0xygQ6e2bPshq6Bk1PwM\nO2hZAs/QcqGVjU+YKIcOK8+51jk9PuOsVKjPBTq/t4XoGQL2v8Bm36H9bky4\nBx2XX4Mh1rOKqKoWV8X2PH3fNWpQgcI3nh9BQtRrsyY6LM38mycMq+LMc/xD\nefzJyvWWqqmp3ogbBTaOnmvmiAy4zVVRndPoQrLhlm2jvnCY9zBvYR1FjJl/\ntiCv0cvolPp4uLGrPaULIkUMTaDRh64vmmKUAuDGzToiHA32+5EbxjLKFTjb\nJ9yVTyhSFeocxPevrwnh6HUkTEEAq75igeplfzCzncVG1/ugXr/z9TM7pNdr\nYHiFSiUE4/QU4k6N3XNmDEb5NTWfFropJh6GjBA04k4Moa9ZEXRKkfSEySny\ng5xX0u+j9cC3e8HpepwSrMD5nSpK6hs5STRrE9x6fIpdqsS0yTOUkGyCpCjf\nZdvpmbPGywJQ/iF1IzgklylptPMu27n6nRda4T5WoBMaby6dCED//L7Hsz5T\nrN727GuqE+6hSmrcMiyWhAJUpOW6oXJdT1IAk2Zbow1axmWAoXBhjxC0FtyV\nFDeA\r\n=bukh\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"a29efb24799035b1ee49295daebf1ae46a92b529","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/feature-targeting":"4.0.0-canary.b5c6d66b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_4.0.0-canary.b5c6d66b.0_1572371784869_0.18097928597865875","host":"s3://npm-registry-packages"}},"4.0.0-canary.cdf858ea.0":{"name":"@material/shape","version":"4.0.0-canary.cdf858ea.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@4.0.0-canary.cdf858ea.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bf5341708ad20b32c57f560e9be70aaede2fc79f","tarball":"https://registry.npmjs.org/@material/shape/-/shape-4.0.0-canary.cdf858ea.0.tgz","fileCount":7,"integrity":"sha512-YSTTph73eqLGHGk0Mv4PtA9a43R35Dqb+obpN8rySRweCnDFFRghcKJhd2rvxqBtSDdZzIItuapHs4aRHFAabQ==","signatures":[{"sig":"MEQCIG7WAHh09hsivQXjXRcFxGpPYkOxIGzZBOQp0QA5f/2kAiBT68nLPgXgGWIiDTtOW98IfPYThVUOfgV/7yOr/8eBtQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":16033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvHJMCRA9TVsSAnZWagAAYv0P/2GUg61mF5YCTfJG7IyM\nymilj0+5ZIINMM5EZCGZDOqRB0diBukwoKs0sD7vWjtOaRkCtB+jl7QaRt5b\nBIvOuf/7a9irg0cQf4iiAfH4xoddrHG6SI57Etep4ekUevUPjpNfOSJXOIE4\nHIdd73w9O/PT3pFPuSYHUB1ylTP2LwHSfOljjZGwkagoMKm8gbYZBglT2MFw\nbS5C+QVvT93HQb7dt58EJzvPP0nrvjcmpR++FUV1ho+22POBMgrofC3qMqQ7\nbMmJCY4ZcURyHWsHUcdRTjo44uLn5WK13BUMvL7OCrDbY5Kxz3ZWVyCouNnC\nhvpqbYFbKfIo8XSdp3Zuyb/UhZv96X+hTW+eymCWdBNmN++CKdFhDY2DWNGr\n7SZjMxmS+nNaFBfsVzQKULuaouX7otCEZ41cKcmeeO/jxjGzaHpX7HI5mYfi\ntdDsHxiczBo3wpufSdjNfP/ycS8skll2L1bQ8FPkj+YpDY84WEWaZFt+TRuA\nTl8YEOuAdox4ZUAP9ztabG15BSR7wCPitTp1aYVxtj1hgx5i0A5LhUSKnNbv\nVwWuSjbkA1yb7ltqsB+cugokCNjS+puXVW6iRDzYU7BiwtDpBZKk5o5QAA1H\nymV0l5qRyMAho3nt5AaK395jVOTZAN9pYaFHrleMgsT4sYMEk9IXlgrI1HIq\nKDSr\r\n=fvGX\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"436b9be1155a7b7c0fd4aefe795809bcebe8dfda","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/feature-targeting":"4.0.0-canary.cdf858ea.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_4.0.0-canary.cdf858ea.0_1572631116392_0.46455017101652807","host":"s3://npm-registry-packages"}},"4.0.0-canary.719b57e1.0":{"name":"@material/shape","version":"4.0.0-canary.719b57e1.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@4.0.0-canary.719b57e1.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"32564439daaaf2451b83ea00728e8cf3fcbc9cb3","tarball":"https://registry.npmjs.org/@material/shape/-/shape-4.0.0-canary.719b57e1.0.tgz","fileCount":7,"integrity":"sha512-XnUQlyO/2Eu7qokVZ8jC1KS+jXpR9vwdILareMsmIbc2/VhCg9gz7AiMWjoqMWg8yExxuWnkVqlUoplH+55uCQ==","signatures":[{"sig":"MEUCIQCkuAhWZo3lQe5/qEWFWF08wgHSv+v04Ks7Xv6nEmIUqgIgJWq8rpyvwDkaJPBmT1Ma1ov++V6E41O/5AHZpFziaQo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":16230,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvI8NCRA9TVsSAnZWagAAc74P/AzXaSzzvsrZME0mXLF2\nzr0L2i1DMR+Yf74ygHugfq3ozyaiOVXLbYoRTOtK4I1iDnpnAsi//OAl9Mhg\n5+PKEuHDDF3/SA6s93zpZTczT+P8y3ODJyyr0t/zoRbtXhfpFIaNiTnRDsyl\n3ZBqkVkIVb+mcXECwCXw+hwnaiBXk7kOJ1BWvk5Ujx1Ee9yJRnVJk1kSSNgC\nv3g5AropwDyXVpMVDwzN4R5zgpUkZei5gsxlIQIr5qR9b8OaasV2dvXEzKH1\nF1BvhWmpPDsVfWMnabOVkn1zE4fO9uxc2yY9fWa/EDsZKMUG5HfxdQ+Hy93w\nYClND9yWsN/98mxdjs2d1XPlLqPvofxjmsBZCeqsJXzXNs8b+C32ML0MoKU2\nB/Ln9PY8rF639KA3kHzY//qZsn2hOYN0s2uPZvCJcB62KGeEWI7xtbrfe9Df\nAPabsDbH7VKnnORznag0D1+1Tno9EOFPMO7V5mzTwct11uHpCzEAkORAPaR5\njoUDIHwC0IRYB7UA5usnngeoPxQR9J/ulgy9J591nlrUajctqMY4RSncjEFk\nVXrHJb9fVtx2NcdhBx2P4XJPYINimNkLvHQCS+ZpbGtmhjplixeJGDpmmX5B\n/z+WXRy5BaAfziCNFkGpWxbg6/6jxZRVpX6fBtCqRkRZXkjkuZ0EnkCEpRu2\nWoPU\r\n=mPUI\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"4184aa06e4862418697a150eaf45a13500e1c4ff","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/feature-targeting":"4.0.0-canary.719b57e1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_4.0.0-canary.719b57e1.0_1572638476793_0.2760359980294069","host":"s3://npm-registry-packages"}},"4.0.0-canary.97cbbdc2.0":{"name":"@material/shape","version":"4.0.0-canary.97cbbdc2.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@4.0.0-canary.97cbbdc2.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"53b2d195e6154341efdaea123c68bbe206174e75","tarball":"https://registry.npmjs.org/@material/shape/-/shape-4.0.0-canary.97cbbdc2.0.tgz","fileCount":7,"integrity":"sha512-rWRzydNotPyljZwobunQqLuh8X92XIly6HzfMesMzvZdhspIvDr+Od5mbuQkmKNsDTOFPa6+HeSKdL5u35twNw==","signatures":[{"sig":"MEYCIQC42m9NTp8Y8wVn9cUao9bn1flh+wGsEqDoOgRlQcsoUQIhANZPJyXZfiGLLc+JqbMoOc42k7xaB5orPbnr8+ukOiWe","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":16243,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvJWDCRA9TVsSAnZWagAAWrAP/RrhdjWKR09CvR4d6Mzk\nNmFzOoSn/V+d+CzmDq/Y7iqxhhMCqC++fVi4pWdVpMsPg+hWdIcDuYMC3l/Z\nHXda5tE2AgczgV/AzUPMpXHmsZEjHVbM4ctivCTQNdVCcblP9oTTAJJDTp97\nVkbLBE047rYJ/a9WKz4qrcsJBFAD0Qfr+7mPxuaehhjGouVW8Bjdowp+WMkb\nkgJC2gcpeL9i8mVMDB3j0+W2bykFi4IV7u5gSYur4d5Eb841+0ZukD3nm0iE\nj0CohkEvAoCDIdTzok7o1FzaDaObSe/YaT+QTdTz+ub8TgyCpDs6UyERq+B4\n196ReZREmIYRTp4po5NYdhl4+9aLZKmjY99RjImDmrjdUCYGUQtscs2u6n5v\naiQ5LoUjHs2z5wyPJZn/wYpijPUL4rj4QR6a1Vh0uErG76sjp2360rnR77ZV\nPaV9a9+3UgHt1N9+FCyYfqDYAxhoAl9mmkJyYfcXMmHAd7G91HEyVdKHFF1E\nauPaV/6xKN2VUS1fRK/ygf4Za6/9rW7GN2XDOGJQC75mUijiNKA1guPYHmDs\neID35bobm30rQ5LXGdtVVZVeEZ6pXFwZTomGrtrQhuzqy6nSZNMA7tNfTjnB\nM2o5ZpgkO3kTdJFcU+yphMBM+DK0myVHzjMipSakMayfnwKOvNFKWIrLId7i\n7ZAp\r\n=oKi/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"49d37bbcdfa0f5872581945f58c03e62abb97090","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/feature-targeting":"4.0.0-canary.97cbbdc2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_4.0.0-canary.97cbbdc2.0_1572640131527_0.3429023545544354","host":"s3://npm-registry-packages"}},"4.0.0-canary.8e36b3b7.0":{"name":"@material/shape","version":"4.0.0-canary.8e36b3b7.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@4.0.0-canary.8e36b3b7.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4b3072fb73e8d8b3e44fbe006d9b3538f42bcd89","tarball":"https://registry.npmjs.org/@material/shape/-/shape-4.0.0-canary.8e36b3b7.0.tgz","fileCount":7,"integrity":"sha512-75I76xC4xl9s2sK3fDMc5di8NFqtN8WvoHj5laKK73wIgpWKyAo/Eh6GF3o/JAAMJJvPZY97omugxx+W7aFNRg==","signatures":[{"sig":"MEUCIQDP/k5w9D0OR4umei/i1S0SOIK/5RBfkzMA5nFeZl6OIwIgdSUUcwV2WFqLeoXWmk+R9jBmG+qk13/sWO24O42aNkk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":16033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvJ0FCRA9TVsSAnZWagAA1aoP/0QtdhFCsfe41qjpiVGR\nY4MKyPv3nQoXiSc4h9LOawgWY09bVu0oVLdpgsSkKStcEP9IMNbwL4GnCOhW\nJf01qUEYfcECQt4JiVIuwsUe+NJSLwUzploZ90BsotdJ9LGzkad8VJjZZfbP\nj85ERFPuMc1ppKEhi3GF454lxSkvbiVcr/HawUYmh0+43EAmf0mSjkXMN2L5\niY4U5aMVONWREiHqRUf0hfbYiTABqkO3KMml9DMpN5EWIy9+q3aiHxAxGL83\n0BFO0uxl4O++eFVzg4QWIlt7d0TjCLaIDTQ0ibnlMBoCxgBBvOfjJ4yhclj3\nR5beSvj3f1CvPjCRltDlNLqdozqxaeTFq0CtvIenU7zK2nTMiCfNx87Te1ZZ\naznIUEduSt9dmdmNwyCS1HYAWzu756b/geuTO2F1RPDDEQ07BJETEUqLFWfy\nNfudk6sZL3J7VGAYoZ2GG9wk7zSJnIlYBcFC9QjChj97jQdzUxfss/GYXC9q\n9L+pjsedZhCAn4pnCts1hf65uWu7zJlV57YQ1JmKubrWSBRjmk7SmFy5Y6P2\nKCgDBzc2vAy2sgWUJADqpjUy9pNhTumpC0KeSBsE5t3Od+tMKA9bgO1QAon0\ndhlB1dxYWzN50UCOj6nyvyLFSFA2+Q8fZi0Y+pS6seWUocLEkxaSLSMCuzJT\nvuDr\r\n=L8KN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"62f51968b94685823af7942f779c63658f2b0350","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/feature-targeting":"4.0.0-canary.8e36b3b7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_4.0.0-canary.8e36b3b7.0_1572642053608_0.11962895881847868","host":"s3://npm-registry-packages"}},"4.0.0-canary.62d3a09b.0":{"name":"@material/shape","version":"4.0.0-canary.62d3a09b.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@4.0.0-canary.62d3a09b.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8592780a2bc3e2733cc8823b59c892aa811153d8","tarball":"https://registry.npmjs.org/@material/shape/-/shape-4.0.0-canary.62d3a09b.0.tgz","fileCount":7,"integrity":"sha512-r4DzxAHG0p4sTZ4N0MK8qYET7xI2ns/vY1xfSJrO4CIH/EO23hYDKwSkD4mS6jfH/yNLe0HfEaRrAz2dKfmHeQ==","signatures":[{"sig":"MEQCIFuyRR3CJAWM29qGboNeTDUZuFlBVqUGCDcAb4Le2HSeAiBcuhqgIclYUBk1RnMs4kRqmlRldxQSBPfIjVV709xbEw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":16033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvJ9DCRA9TVsSAnZWagAA1ccP/2ADfF4GZ9uAHwTZO+Rh\nwLwP6rfEf1Ds/mh5FGhzfWNsB/qGmZT8H9xwgFSZjEUQUs3MKpd0dKheDddO\ncS2o7r/WG4PUS1SI92IBwV1OuAzwP6WaO151ojj/ihxYjxmA6sWfPHa/2ct0\nvvMs0glyGL/0u9iuFcLLyjQhFp3zdUYV60Gh8aqRgW81NwawCrphvrq3jqG/\nN5ush8t7PWbb8WlMDchc69UdvhvyWRc14v/Pc/GGxBiP+nBJ0rLU0eSBZyvm\nOhMIUEG33mwtah75ZW3lPzq3cM2lW3wxmNw/L/6ISy33j1U4qzK6y/g6Us3/\nTvNkDZVO64uuRC5WYQSBC0gSNpaT/5PK9nhHrqJmMuSkAVCn1EOhihvOaRrN\n3+0XWmmX5L1OabHNmO7YvMs4os7xixHPCYNCWDoZxhmGM/y0UFs0eWVqMG2O\nnWUOKgUsVlT3uVga+n8441baY5OpcRqXtKT8p6cf0IQsl+Kj3BZGwDyC04S2\n7mVlvE1nHH5hfXAa3PBtBI+GpqemFBC4CNvjISdTdLBQks9DI8Nmzqc+nDoM\n4e0nOlOMyC1ayL1rGoBrxoLhtI3j71zkLciXaNcDlhxPydHjhEvI+blmuyyl\nftZII5gnXVvlzVlhPGGNFVz9+2cBWkmUePxNjn2/uJ4CzMYP8w5o7sNUkaTJ\nXeij\r\n=TIY9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"e00a9686a58b0fd5ec957d4008b6674dafd4dad2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/feature-targeting":"4.0.0-canary.62d3a09b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_4.0.0-canary.62d3a09b.0_1572642627388_0.3239475021024305","host":"s3://npm-registry-packages"}},"4.0.0":{"name":"@material/shape","version":"4.0.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@4.0.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ddf4dcbfd290d367f80b26014fee0a1f490dc3cb","tarball":"https://registry.npmjs.org/@material/shape/-/shape-4.0.0.tgz","fileCount":7,"integrity":"sha512-wmr05YBrEL462QPiJ+t9xh5RqxzylXYo/8DVZnb/1WA9GZ6m38UK/8Awtip1cZAN34pzD/9p5AydyywlQVoI+g==","signatures":[{"sig":"MEYCIQDLo2XZnHWLwIdvEFOehMGOZkAN2GyInVtdUjD2Z2pYbgIhAJxHMzXUE3RexvOx7+z4+izanTA/7Xr42pADouahB/iO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":21985,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvcbUCRA9TVsSAnZWagAAeZsP/RwdOj3B4om5DENCgnJx\nClSNvr4hhUueqqStueEb3Q+eLA+K0ht4Up3jJVSnrWSu1eyiDHd/RW6nc4Y6\n0rR4k4UHfO97OEQ5uDHIbuw5VIF3UTGykSb2Q2A5xy6fiUeaQDTIfq2e06KF\nIyXQDY6qjzJxk3j/Vs1ctU0dSZXQYwCsCdb61ENfZbBKw2u3YtEk/s8c4dsC\nsLuS2R0ikX9NNYxXuvQfdgUHPZdzHS/Lvaw5eHLaiebtcmehAk81Nfw8AN88\nwvsUOAWyxlSXagR6Vc1JTX3pREgMz8UbqmLGzoSjlbCNDyiGAVmvo1krJf/S\n8qV4k5DiIh108ARJBSSletpqQOKy6IHZn0myx+tnllEfqeOdNtJA83VdSCEn\njtC4wXqgzjhwWImk5w4lkPgF/adp0gqazNaOrN8KwAiQHocbZ6gSTB2f8ZLN\nEdHAu/o+IGhOFvMpNBzEMMZ/KxjUe0jqqj16g10CYnO/nU8PGtXmHotZYK8j\nFZldO6siN9eVPWqyeMVSUaDB4lSWvd1AnkNeKmvZEwBnkkD8qTf11wRjwdec\n5feneg8CIsZ8zfOmRB3yEIMM3DSJyixANPpHqGYc9pEBCauybKBUBOZBd3U6\n6sxMUlSO27YqCOWCbp7RpxO6RZkljRISEZ3OOZf5xnEJWvMmRo7TrdTTt5Ry\np2rY\r\n=ufLm\r\n-----END PGP SIGNATURE-----\r\n"},"gitHead":"8fcbb009cd3b5cc004b302613dd55ab4b5d6ef72","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.16.3","dependencies":{"@material/feature-targeting":"^4.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/shape_4.0.0_1572718292424_0.8001640731084616","host":"s3://npm-registry-packages"}},"5.0.0-canary.b5eb51e94.0":{"name":"@material/shape","version":"5.0.0-canary.b5eb51e94.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.b5eb51e94.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2a2d05b14e12f7daabe2a838a998f416c0738293","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.b5eb51e94.0.tgz","fileCount":7,"integrity":"sha512-AciFq/xXx40+meMzDbR7guSVkgfZ+xGfPMqQ48mcl/JNPk+kjWfiVlFKFKIJJmKl0Kk63J+DZS5CTgZgre0uQg==","signatures":[{"sig":"MEYCIQDKSeTHTCuiGJTszy5o4+0zJ2JXI64iSYDfi4HYISKbSwIhAPbqza2LtEY9argFIxIxCpN99GEYzk+BY1b622GjuzF+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":16145,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxGN0CRA9TVsSAnZWagAAA4AP/1hh7ShxiBDHa2BmMhIP\nJqdAr8y17M/8L0Bpc/jyhXlvtn622yEtomQ40T0CK//LiPl1MdlYCpWbNolv\nisstvd9tJe1DVFDa7Km8QWMv2wQ+836O/T7rhiROFXb+wdVJguiUEBJeu9aL\nS00cGTy/6v1dRH5Z0JMTFH00q1Lss8ax2E9QCsJv4Xt8Qo/69zuP3bRPaWtV\nNLFS8YhpCNUKgwaH5IwF7zmbW+oqiSW6XoL7XSlXlAEDvq6UHAOCmoyDQYq3\nUJnaSlED51zCCRJ+zicA7Vcx3S4vl3U5WCWU8CpaaiF2SFNP2/DtztU9aphD\nc+ZWJieV28XC9h3f6e9uZlYT8nNjBGEHlgl6OpM9aJUl7Vwu5ZStjzihTynI\nBxjhEAgIsbT/X2TWFtIdz0vhdCr7M5fXTVr8bxbUmRZ/c69ptwZCbTYjwiS0\n2F5TAFbGHDN3IHMrYYBKnxdGaCVmkJwG3ILzg4c6gk5PQuzrQZaK202+bj6b\nBPPt5YHOnXrWmw3r9VJWVQ3OcyLtrfoWdmQIJEVCqCyHMh6UIB/QxCTFqZaW\nPc3wWHY8XgGf7u73IHdDMFgUNITPBK2spwTrN9K4PWXuJFIWXfVrQUYcC9/z\nEOCNUevbqVK6QtzO+m7pUJx4dSHS/QSqlCjVgVMTWe8rKVLNUFYg6FhO1m2I\naUcx\r\n=48B6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"7e8d43f563cf6b162c2aed47d2a006564994e4d2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.b5eb51e94.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.b5eb51e94.0_1573151603933_0.4423661619501955","host":"s3://npm-registry-packages"}},"5.0.0-canary.58500806e.0":{"name":"@material/shape","version":"5.0.0-canary.58500806e.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.58500806e.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d4887fc80cc7099dd1b70bfb6e79c7fe63ade254","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.58500806e.0.tgz","fileCount":7,"integrity":"sha512-YVS4PojMUEkvG8f0mx8MG6FxOBHQ62FxIGbNvLiMCC/1MWQiq/499QnQk7Xz6GGq1WwqYatA526x54xpWDrIOQ==","signatures":[{"sig":"MEQCIFNUv/6/peMlxXWHpl7SNsd6zCA330Vs/9PGsRZFbbYCAiBJ1cGMxwci9g+qkZhQlf1ooWXb9DT7m1i4+SWEQmkBVA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":16145,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxYs9CRA9TVsSAnZWagAAdrIP/2ce/1Ips/0LNEfuLwV/\nhN6wP5CiHaME1EvB7OP2FBMNtqg43Ob+Pw7RxvvXBkFe/V2cGyr6DcldAtub\nMqpYa9yygnlyr56P88NpoFyz0/z+1ITh4JviV17/q2DZ6C6SHFlPIz004pfF\nN9XU0m8WkAhnrF2bpT+gCZVnpqTT6SRAU6opatpKkvc3JBIgzezVGDQ3UTl8\nmA9IITaMiGDBt3L6cxO+icumZDKsAPSoO0JnF7ZsJMHL44UMr+afbS8lFpCN\nmhk5eWcJUEjnbRpL9W9ftMjvDqmyOqOn2X2CUYAGw84/gpcu/vpp6IYC27aW\nJEiXGMh+3D6pT3hKzBEbAur6wHr4n4O0OrfjI2ajpqkYuUvaUNL+LTDEan3W\nJ/Yk88nYsHYalHn4WZjUOzy85eMmGRon/XvX5VAwV9ffg+9A9WcY+XENHWFe\n/FmgC9ivPeanepyCc9y+7E/4llGzIS5rSauVvTMHWZQwPpra9rkppuxJXx4+\ns3XVePERQXiFCWRImYH0x/4amuzpn9YxVW7qbIkuQ0yQTy68DMXchki0gjZZ\n5VZpvGY7VrO3jKEKq9NgrTIyTtiVE8AgjtyMULnHOdgoADZkb0e/E1fw8NTQ\neU6sByHDlaNWqT117p/KIaY34AB/ThtiCe585E45rlEvfDsGFvlgaSsettHG\nwBsR\r\n=4FxO\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"b155f26dba1f11e3c9d7d0fe036cca6da8b37a3c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.58500806e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.58500806e.0_1573227324977_0.2593841585170624","host":"s3://npm-registry-packages"}},"5.0.0-canary.66299b646.0":{"name":"@material/shape","version":"5.0.0-canary.66299b646.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.66299b646.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f4d8d4c482631132d09cf137bdff68c3df15c237","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.66299b646.0.tgz","fileCount":7,"integrity":"sha512-gy5Q4vL6ea4C5GOSWNRRPc9mXoo3Q5lx5m5Zb5HL//WjGmGpcTnzBKEjJmLHM8WyuyqBqiasznAANpCg9fIB6w==","signatures":[{"sig":"MEUCIQD72WLSsppLjo5CGryj0Mz7w6oYjgo2kLdmZHVisgncWQIgJ8dPm0PLkNj+gKB/8YXSJEFTngEDB8cN/1M+TFzF+Yg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":16145,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxdEXCRA9TVsSAnZWagAAxPYP/i2KFQU3JlBWytMfAzSG\n44NHRPi7O/eRC31/Bq5pKDqBW/AllOJxmbN6ZxGFMuWeBKhQyjX8JZoAj6o3\nEXF1mUqNcxaKyYtJxdDWSkUHP+na0pMTxjVU0Cu11omhekTEe8F35ig62Yuf\nnetrCoOe1JiGJ3ls6up2ETYPH6iPDl6b+VDxKVnVZvpEjt5WLgaL+ld15A5n\nu41pXjKCTHtKjNm4hdS9fNuO6PqXTcGv3q0DxXDDP1XZQ9SUMv7kkQWMSDpN\n/sDmuzxH8zwKyxRO8U6/02TSuP4DDT/oyVn4uWwUPWzSKuWvBnH4sBdDC03M\n9YBA/P5ZfKyXEtMd5fvIsYYJnbjco/1gi5wY3QHq+bt8zqj98RUo/PUTO2hq\noBL4GQhfRINI1bTmEGgUYJlUJn5OeQ5MHgrdskalAyfA9NghlRy08Su9vZUv\n2m16C2315+6e6bV5AK0izY20Kes6G7lGVIJoQjU5O5kja/iXq8ZeRbrnxcbk\n6AmCEoEOywDY01VTy8cFE2HI0+xVjHkWcbo+BeSJxgxF9QATZwT83zHgzr6J\n/kDaUjD35YlWnopQ6ZjDmKS5QhL17lIOdtm3HAlk7Z4r2Z+R2bU3a5NGU1K8\no0HvQYhF3sUjwktmnDV8KBeX2eAhP9E22yfehcOPyUoP1qtrXU/GLAi//m31\n9/Dc\r\n=v3lg\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"4bcc7c183ed18cfdcbaf564e317231824ea91b6b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.66299b646.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.66299b646.0_1573245207038_0.6843065587724992","host":"s3://npm-registry-packages"}},"5.0.0-canary.821871e04.0":{"name":"@material/shape","version":"5.0.0-canary.821871e04.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.821871e04.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"45adbd55d6255005ded7a3badb7acff2fd2bb798","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.821871e04.0.tgz","fileCount":7,"integrity":"sha512-HG2hoVYGm6IzmZGilv5zvyH2voPNzJTfh/RmVT989uCnj0jG3KOrO379cMLJvCj+2+M8DXdpwyy2uJGBypdxYg==","signatures":[{"sig":"MEYCIQDRQWwMR99g1uOYNBQjqmIxqfups4WhKXlNJjKQsu3LqwIhAMwM//FqkjeqQY6Rk9V+waa7wYO7aBoY6QeV7iO7+dLe","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":16145,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxd3cCRA9TVsSAnZWagAA4D4P/2bqE4f6+hcyS97oiFxK\nk4sttT716AQ2EeT6LEQJBT+ZTS1x7hMXl10eGkggM8rSs0KRezfY6ulargCG\n2gSa7u1OgSsiICixwEjJqce7Oo3mWZLGXH+tT6QwKEIsSfSqtppxc93ElBFM\n6d9AeiPNQzSJo86onvqDMOrQdfINi04FSrbj6nLKfmeaUiSNV/1jqqebEXRB\n0YB9q2Z910JI25KvywWQlIJyZLF5iTDITnWuKbpSs4umZ2qvpMNMoymjxlZK\nqg9QRS+YBEf4yOWMnn+9BTUIocSKt4OYOZ358X4HqighAPCg/jSD0z+1AWyA\nvqaYRapwVK3QVUHazEB10F1QNAxT5wMWEiL/HWGF6zrf0X/COPy+Xv8WXJHp\nlclw3mzLwPDx/1CngcVCJiIX8v84Fk6Vj6KGinWHgPfE4d7kHqfWrNaYtEMR\ncVKTsIpUuQKeNVM9NALqreCH8k2T6bWrBdhOYzUS7BDogy3xwpDIKpZoa8zo\nErsiszUTqfUK11+gf0xqtMD8e93TW4CmqiNzOq9C3iJs1Fq5U27NJ2NYrUF1\nuOqzmTZ/Y6U5p7vHJjP2vcU2rpcoQ/GoPDddEMXJtLIQ4OV9vCrusStE1BMN\n0KwTnskSTBXGk0hNbVnVmW+IJO5mOgyEG/5rtLeL1+1i0ytoVErRwgwu7JG/\nVsjg\r\n=f6mp\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"20a91d4645dd0fd2db7a61459d752f390e050899","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.821871e04.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.821871e04.0_1573248476213_0.8405887139862505","host":"s3://npm-registry-packages"}},"5.0.0-canary.491fddc31.0":{"name":"@material/shape","version":"5.0.0-canary.491fddc31.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.491fddc31.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e930c429140e3e2374369a6956cbf0be9949fc7c","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.491fddc31.0.tgz","fileCount":7,"integrity":"sha512-50f34wc9NRpeH5lT5b4+3L+KTa3GR6KDuszluvlVnlwn3fRfKTrkdUv5/zd6hXtDXQD5uMOYrSJdERqZeVc43w==","signatures":[{"sig":"MEUCIQDjli/+cBpcRLFCYb63Xeeja+nEVJv6SRwh3E5Py+Ah2AIgXztLZJyhJ7zSm6Um0A+i9CFvcRHVZcmc47g+t3m2ZOg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":16145,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxecBCRA9TVsSAnZWagAAfvoP/iMQqd92P6pKmU+VPWXX\nq8jYaQEiDvQ859/V+mHUMqOnJb/kvnrb1zhVHIwyd6Nzz4f17kq4UeXE0TiO\nm9fcNlKavuQI796MX8lODXO3JsbgcykF9pUYzdgsomPZYv7nikuklpl1t1PQ\n7ddF3Cn0jebMYMT4IZdEUbPycCk5LPXkveBd5JYMWdnCcwDgq31WFF6snY+Z\njBOMuIaXTOhhe/yWEwjnY1YhQX4qV0vRqdluFyIq5PTP1C67RIUdrEhA6b6r\n6BVK8Zmzfxuaa8TXW6qi+DYVp4YGIBH2t6GL2lA4DARlQMtFuqB2hO8ITX54\n2sV7PQxfcgh4aVRUg3O2npMOKxT9o0ERWYUFaHTupEEMG9fzvSIL/T/tyIzf\njpgKNR1GZ7Aje25cJNmRPxSyi5nZRmBw9ZJ9FoT/kuZ8dqn9xqCI3SuDU5LS\nEUViW9GPQTlkJZAYdF5cNH7FNDTvidVAa8op3brVl0Eq6FC0q0LiABqulWg9\nQzD3kCUJKJ4sj2cTfvr8XV23ff6k0fAw1rmJyEUYp54Of9fPT7TbOt6n9KXd\nZ2haN/IBaZDGlURH4xBgSwBJefgjs/mlzU5/ego2yayPnZT04lFz3ef0vImC\n3JlYOGKXDwDioY9Yhl44vPrSkbk6dgTL0wXcAbiEMkgfWns0x+cQnpXzIuPU\nxbKJ\r\n=Wv0W\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"36ec62985e32e24263ca2d444e04a01d98ba02eb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.491fddc31.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.491fddc31.0_1573250817435_0.7984969322124136","host":"s3://npm-registry-packages"}},"5.0.0-canary.b0cecf145.0":{"name":"@material/shape","version":"5.0.0-canary.b0cecf145.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.b0cecf145.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"868c1980634a3b77e12835c08b93d20c7a1063d7","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.b0cecf145.0.tgz","fileCount":7,"integrity":"sha512-JpEXRl3bD7UCT9WXl5ssDGpAgsf7BrnjmOIGW2UX/KzfhQpht/8lWmjW/h0NDx75ILCfJCe6D4jFUzH0FfkA9g==","signatures":[{"sig":"MEQCIGWZbq/Eb+sNONzdUDZPMZDKGIr+j4a+1BaiEgCV9E3PAiB7NUXGEBwy/EVfoYQLltk/nnmssVcXoBvOxhUeo77QZA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":16145,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxwiBCRA9TVsSAnZWagAA1MUP/j3tn1DC8LjDjO95F+1q\nmkXaZrSIoJbuyPmp1jeWhw9hk8a/8eLsOppBukJCod7qQFw/o+lrIdUAJDyK\n4jaA1TGzIl1iaZN7pigTdLApwYNiL3SHq4dlzu/ZKsKKr8tVyxVYTSU7HKhb\nIAIM5agWAGqQ8f1QR0pkKEBUI1UrfD719LgJsPx6ooZ0VRB4vuy+PWHI6yY2\nOVt9cGp6HhVzkk7qfjDiKkmxTKT982d6th52cpHVvliVANG8N9lB1SYb9uP2\nTnegp9Eeexh4WiP6sb/JZEdR+5icjXoOyMH4VunDL1F4LCPWJzzBkNUKiNG1\nfGrvOVPm+ghv1S7mXEDCiCEiCznV1sbSYBD/tYC14BBcBhzHHMQtiyLiRRn3\nkniMALTr6r4UAdgikLS1S9gHPxR58u7MmoSbEFxXCG8MCjt8pzmNmkg8Ld5G\nrMrTHYen3CkmXvZV0tEgkyh5rqrQwXyQc1ytV442htP/H2a5uaOucekZYuw2\njNtbbCvgwOXxob/BEo73oFAw7PmJZSk3tvJo3LtHzMLV58ysfGRnH4/cJGOH\nqB0IoBksvI1mMVBmHt06jjfQK4dIVM35zVipbkw4EBknnmBzjc4zvJnBflJU\nzEixLTzPblNP1/roJe2Bj0oehgoMnlnH6sQsp6J7ntB0WHxi/JCuCQnUt+kU\nkdoX\r\n=Mvn5\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"c20143ddd0d46da106e793fe5b768b628d433923","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.b0cecf145.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.b0cecf145.0_1573324929048_0.6579062136298628","host":"s3://npm-registry-packages"}},"5.0.0-canary.afe0dd1bc.0":{"name":"@material/shape","version":"5.0.0-canary.afe0dd1bc.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.afe0dd1bc.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"af627a6e9dadbc7d17a3a6e3a09bda3a4b4301ce","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.afe0dd1bc.0.tgz","fileCount":7,"integrity":"sha512-0waE5esPXFD4lZvH6sZ6GpcEhqR+H3c6tIsiY+NcC8lA2C8dMqc+WMKkfIqCs4cQrEd2JrRQc8XNFRALVt7oLg==","signatures":[{"sig":"MEUCIQD1/SfHlG+7tuyVzXiKh2zxBhYRjApkJWiOEjKbIC6knQIgeFtW9V9CLMxBW8SJsXXOIuLTVBdXYztzRsRdr0IaRKs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":16145,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdyYA1CRA9TVsSAnZWagAAFCUP+gKEBOiuuOmaJOsdmHLl\nEJfzubUsNpVQ/usKtK8ZZObhKECvxhUZJK0fLlUkEEmd6Dc1Pw5YUN1/TzdG\n5DRJSji7b2FBe/BcLcwkwynCdQcQqJDFrO345GRm6YfbQRmlfrX8c6PbRxF4\nKMc4voeC2ptjMH0xOIM8AwZL3g1Ahsozvzdotbk1ClRe0zUZGa+54Wqje8UH\na0R78ZU5tH0lPEi4ALLuCFqHdKz7+JWjGRFFoQJgj1Mm96NLYDAEt7XbPXUV\nHpcqXQV1yHq6Vbx5kT0a/ppv8ttmNTrAkHAgE/Z+V6E6+n3ADUvSy7u7iGq1\nkw3hUxIUVecr0BGS/MfrTpfjiwkaU755AhpA1C2vUbK+yB2qna1Xk12fS3X6\nuq+Dkij1Bh+HHs9LYaFwRuDwrrM4Mnt1NeRnreGBMKSW00DSzmVW6WVGqO+2\nPH8A6jBJk82QfQFqiTupCRVGIqGwUDF/bX8jA+x61RtMsplaTRq6MYEFau7S\nZMmhkzLXHQ3PXXM/jqj8EcT13w9tXPa+CvZRoeBT8tRQq6hnd2OZPljGPKuQ\no/HIyqhTsCpUvLKOZmSvxwYPQvxuy0jnn/jMpogy2iQm2CuKekBoEtzQ7dGM\nUIMOMv8dZR4+f96sq6S6fHYQoAvQSEB3etiEAbgrdz7UHmO0ETrwjr5QnS5b\nLg9W\r\n=MVIk\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"3bacd69fa765f810b8bf40608eaa3aa2df12bdce","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.afe0dd1bc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.afe0dd1bc.0_1573486645225_0.93856756169562","host":"s3://npm-registry-packages"}},"5.0.0-canary.b4cfdc40b.0":{"name":"@material/shape","version":"5.0.0-canary.b4cfdc40b.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.b4cfdc40b.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2defcff0c86b623d182e00eae35dc55d2df0964e","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.b4cfdc40b.0.tgz","fileCount":7,"integrity":"sha512-j2/LdqEjBZB0bB+bqF166DL+wsqj6xZHVjy9PGn5MQ5epEzuH4HbnwqzWjhjck14fIPpsLSKkAFRKL5ZTwoJwA==","signatures":[{"sig":"MEUCIFENI8VVuAegO3h1nXauDqZZvmZ6y8mEjCTKw30/QnuSAiEAmWSWU5dsuM5kmS2gLlYyv125I29D5dtVsVY0Mw8+iQg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":16145,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdzXmWCRA9TVsSAnZWagAArFUP/3KoCpCZSZPIptKEjXEa\nGXvaKDY/HvywJXxssdOkShB2uWb9gtD+pf0ekkamkX3dhm9mpbswB8LFEgWg\nQ3y5cPx8+wnFsmlxWYZqF8CB7U0o2Rfz4HFVNRP+7rTdVUlDCtKTNND6HEZN\nq+mXla9E43UFUS/7bajnf9Qn1CWxkPnWKO+3CzCg3ik0ycY4PGgZXYpSu8u7\nx9/VzOakL+s9YGOotWV68l993lDGcBRxMRAo0HGkMKvTylEb1FAZ0Ji4K+4q\nMQaeh9wTlWunZ0lf5NR4wrNRldNzObjHT4IV4O8kxPMtDYztK2jN19UbyuYi\nq5kkk5jWbT98WtI5PYfILUBefQslGOcGuH9Lhl0EVvXgNL0uL3bmEAsu1tPW\nZYgcSDFgCAM9qMQyV4+BpX/bSkNoCG9NxXEKTfKQ38N8GDgrznL5wuLKqSip\n+OlJ4Cj3vYig3MI8wzsVHR9j4A8bx56CK2f1xriuopx4k9CicyjmZCu1KFLh\nao5sIu5lqJm6nFfTnH7FxfhPEEWBHbmMF3j+YpgVJbji13nabN0KqH/v5sLM\njczyDBAgkSxQoT9X0Orq5AX1UAht5gM5uNxMSGV+VwlyeFK3ORplP+yDPkmy\naV4vl4AG8/fob/WxwepSU0G3yb53eo8OALQ8pEYpeDoMoWNhdelW1/L0GMsj\ntNtZ\r\n=hOH1\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"2a81ebd1a573a096ffb378bd1ce7bc223a3cb54d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.b4cfdc40b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.b4cfdc40b.0_1573747094517_0.25113615210298224","host":"s3://npm-registry-packages"}},"5.0.0-canary.525989b5d.0":{"name":"@material/shape","version":"5.0.0-canary.525989b5d.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.525989b5d.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1e7a90f3fd593ff7bc4d63c5ecaddffda6e9ebce","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.525989b5d.0.tgz","fileCount":7,"integrity":"sha512-CWsCA483i8ILa/1RcfAJyMnd6SFR6VEqzmgJtkY8hoJXKIPf8eDFdhMlyPjYmS3u6mfpWAwkbaD6r2209hW+xg==","signatures":[{"sig":"MEUCIAI8ThigG/P3RoeKbL2Qg4oMEPjyzB1Vw+wIar/kOlOWAiEAtKca5fdL+UCCsNIL3ryx11pcz9a55IXKYkYspV5SF38=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":16145,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdzeOaCRA9TVsSAnZWagAAhYMP/3IZ0wiyhs5vxiUvNrHc\nUJyGZxMwUX9JhlJR1lyWD57+u/JAe1gh/PwxP0xcyo7XbMYzHTRk1hDBbThz\nMn7gyC5EvMRm2aUtU8HRds/qYu/k3x/hvTzsLwhhg8O//oU74oXcxqRSiPEw\n8o5b5HBSbZP2nYA9fAZqqAAYeu7JPtFFGg7OcDV5BfOh8hUd5MwCYcOiuPz7\n/w6d+2EAB5yBGvqLKeX1MZJ5be8MK6DBakq65+itxtRQUZw+QylDVYpZwr9A\nPw3vtovlfdAtYP7f5wbaqzLmm130UUyAMZRljQVQoP8yxUuwonMJTIdVeOkr\n3qxQhgrjnDYLiY+eOIQnrfxWt5AvEK8HvFCzPIGl/imunN2X7dVwOR1i5hhz\nBBwKchZQfuduanvfeLgbqzUAg/M6PiH3esVmsFh7sfZrFfn6CnQAktQt2V5q\nQ1xw7mBCPK/HfPEPr87j20/veHH83AquCbLKXxspaxz5OywXnTzXeDpYvJ4G\nZKYXQCv2Y1FtlQaYytqQsLeb18KTazDHRTf9bb9olASRdJe7RH+RKqBPs+lF\nqZ6gLL8U+qg638ZNHpVPMuR8siNYVcAI8V+WLNPq3DoIOhFz1fX8Vi67p2lq\nPiL8G2Nz73tJ0+3Wunna9KEmyNi7RjpEtKCnTD4somI1p0BKfx2kAwpHY/LH\np9uB\r\n=Ci6J\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"2fcf375cfb22882468cdbfe126d349a996b450ad","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.525989b5d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.525989b5d.0_1573774234142_0.3606598510537413","host":"s3://npm-registry-packages"}},"5.0.0-canary.7084b403a.0":{"name":"@material/shape","version":"5.0.0-canary.7084b403a.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.7084b403a.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e94bcc3e439d33515657c86ac07ab3454044426c","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.7084b403a.0.tgz","fileCount":7,"integrity":"sha512-4IHk8GhYAATAJlRF3SCETVPkZeeLFjdSq2AA8DiE4U7Adp81x8zs331dG3kRZVoTyHkRL7TV7Py6x06fy4xnsw==","signatures":[{"sig":"MEUCIA8PznAWfTZCweObvtShceCxMmpkKnM8bT9dp37SR6jSAiEAsKFIyqO3wZc2a9W9UF72PWh96d8dc5XLJqbljjpmYq4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":16145,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdzfniCRA9TVsSAnZWagAAqC8QAKCFY8qfltCacfgoQR2C\nwTX5gPVgTMwq2LBvwvKubNXSBilDBo2afNF0UNkK2TJXdnrgffYDW4hIv6gI\nLI3Za+7pC+oBTPiFAgooiiNti/tp0VOkmQ52GCD442FP/eNTfCk1LUZbTAaJ\ncKvLmKgoybtpWoXlY7VgYnamhTbCdzS/dFPADLPOVL2mKjjNrfThy+GDsYsA\nd2oC/4kov7U1LGYK7DDpQRTzoqr2x/8sl8cmqMuptAurR6D9ul2Qk+X4hDyz\nKbi7Ad+6iWTIJLCzu7XfWs17xHkqpaWONBM6ytD5rE3DfAiNQNu6MPadPesB\nbbkf5nSdSa6hFI0dms0nGqunTVFbTlCarD0jnfCfDMKsQ+LeF0O/4UG0yplX\nHIGWY5V+gx+tMo2eO9cwwsYhASjIH7645IOdEfz5dW2O9+BrUBqC7YH4tieO\nHuol/9wJk71xK9HDZXQp8qxAugMo0yMoiA2jXiTr7VKfjV5M0RcyR4irhSOr\nkj5iIZ8PP/9VGQdk5CtlQCfcICOQcpUM9qwbeB2bkt9fKs2DBf2C3TBsqaOx\nE7jBV3q9tcfac4qBl/vNZ0OHNmCG44YUXeDluAv8opwDCOrc1WwG8qK0ajYs\nWijyOZuLhf5dggMYuG/f+ZQijWX9cNuGor5LQJM2mfRgDLSWB/hFvr/IkYDb\n53bo\r\n=nzAb\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"6a82bd7664073498cf25876314019948f3295c87","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.7084b403a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.7084b403a.0_1573779938039_0.5336932106016108","host":"s3://npm-registry-packages"}},"5.0.0-canary.3cbee6dac.0":{"name":"@material/shape","version":"5.0.0-canary.3cbee6dac.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.3cbee6dac.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"73aef0c02a6827b0ed6374796a4904cd6c0a51e8","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.3cbee6dac.0.tgz","fileCount":7,"integrity":"sha512-Js5FbCof8Cce3YN6ZPKTI9QUy+RQcInv750LLDqCi2K/o/BW0AthgV7zzwB2er0XMnNQqE05cO9BAYc6CPntUg==","signatures":[{"sig":"MEYCIQDdW5zitmcYmU2FFSwQiCyxRWBw829m/Gf/7Q/d61we+AIhANdpTEgX6QgK6/3DopAWkzLo7LUDd4EHClodXstfuyvO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":16145,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdzyeCCRA9TVsSAnZWagAAJ9cQAJI/JN5oNLUo9w7uQ4LM\n/72W87o387rQ28F7lRguHMNraFxzEK9tJ4KkCGTFgRrPeK0FoR9IEC9j67t7\nt7qAiQzn3rmsGwXf2wMhZXXhWhaYKyOVvliVWVb+Fo+IpDyCDy1/dsVI0ZBd\nl2k3n/Ot6iYGJxVGQrF540Ab4LItgKqqqumEOKoj6+aJLBjSSrfLbdIb5ndU\n3s9aDz/rt6aCFnHxNO3O5N6drMRiE2x9veXoqylcTm9B2HuItaHlPxQVuIOY\nO7mhCWnlP9aK9H4Jhmgve8KVGtJBNoLZJL4H6aakr0NJv/35IWeOvDeZ9QiH\nojLTXqRqsi1jDsPpPp8dB/caug5NNAq9Tw5QFKUn796Ny/N7XSpEKVZh36lN\ntDgbjHzwloYbjlC1PWBDZB9snMTlskf765MgHFnr84aI1wi1YlCpGf45zlau\n918a3HwVQ1YWSF2YmpsxTGhUpjx/qlbHlkNNsoxvISmOBQ4881HpY7RBm9/4\ny2F9y29QnfZgPD1R+4MV/kNjUXa5DsFvR+RoLmWNOr0Kdow6gTN8a7RQ5NK3\nOAptPLTlGQ28Zv0IxGrJbrsPTujx153yL4KxcdBrZrwi03AqS0WGmtBQdBoA\njKbdpSoAAB8ahGl4VKyoQEchajuM9Pu2fMaFz0gKEDC3jaVRRo64O8fdk8aA\nDKLG\r\n=Ryre\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"5ae37026c572ffe6707702e535533859ddc81a48","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.3cbee6dac.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.3cbee6dac.0_1573857153608_0.03256917146480576","host":"s3://npm-registry-packages"}},"5.0.0-canary.591a6ad44.0":{"name":"@material/shape","version":"5.0.0-canary.591a6ad44.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.591a6ad44.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c998774550f633d3af12bf3dce6699e1baed1111","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.591a6ad44.0.tgz","fileCount":7,"integrity":"sha512-8EXcn2IYfl/3scch3KQP5Dc1vxVQu0HzE6a9UhZ6F8/eu4YFiJfKPxLHfsonGPxvSQmYbg9dMsQgZScsGS5Xow==","signatures":[{"sig":"MEUCIQD1uRIoSC2sATJEFGnHC+0AqNcJ2ugwvyQxZgVANoc57AIgWa88mJ3jGFlEU/zw8vvu7hbBdW5D01142U8ff5RvFIg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":16145,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd0y3ACRA9TVsSAnZWagAAbtwP/2pNoM0uxUdfkDy6Vhz+\n7l2guxZqTDNeU3wdN4aI4QdY65xb6GTKaFf8zUfRTxiWRTS1oVVHYPpHRfxd\nsJJnb6EYsZGMdUOIp7YAqf5crxaboXurfGNLnr0DXQ+R7xfWE/ayRPvi0+jj\nyy8SfMIAPYN/Q6DfRaT3UcaaBcmhO6QotmidLbTJ65+m4Q3vuANQaKInSDil\nQlWXLerudorsFEKd1/8i8ejv8d7vn5GMqJcAeNczHknTsTXa6e7Z7J1tYSyK\nfR/NXydd2bKcmuUzuO0WL9PM538lTA6jhvUIsT28UqZjIaH5Pe4RFsPXHoVf\nKKE554JGnovlKKTzzYoGBzgqrALTXLTUiCugvFJIPuIyw+TXQQOM1XuYh6Xk\nbJ9Lea7EedJiRpPPJTEcoE2gcAyvny/EdJbkU6Wc1BfeKcvpaNNDKwoLsmXP\nZXSrRYdYkXc59G0WRhOd0aNeemM7/liRdqb7uhiVYHdL8OykIGbuYo3tSaPi\nzPueVAmfjAwQMJDwp1Hphy6DeIWy8bx6lzqQCvqU52aNkrqbCgpFE3PL0ypF\nKXqyuXH7lTjQzT93Amgzw7zAm1/RZEnH5op9UwlryvVUu+y7fcy/ANHQOql7\nltAOjklXCLk7OiyeO0YdLtPe3dnAXST6z3stERhYIT5/jp+0hsBGIJzLyQUj\nrOT5\r\n=Vhq3\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"b5469bc1cbdcbb7c9926006be2d2a65c3211c220","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.591a6ad44.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.591a6ad44.0_1574120896180_0.35956490256883544","host":"s3://npm-registry-packages"}},"5.0.0-canary.5729943ba.0":{"name":"@material/shape","version":"5.0.0-canary.5729943ba.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.5729943ba.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"039ab70bb1ae6b5517c8ce11d1035446f05075fd","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.5729943ba.0.tgz","fileCount":7,"integrity":"sha512-Owg5bWUawEFjVLZGyBytazzxdbwSUygWQORciQA+a1UdSakkJ6VlQVt8uXJ+FoF2nBiQXL2SNxS7HKWeXWcsSA==","signatures":[{"sig":"MEQCIAyVtQOgTyCT9NbNwzULAN6rHVULciKU4BxS09LkR6KaAiBaNs1h0FmpPLIFjCpy4LXBzk5/AWHyOZ0BmOpR1I1oPA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":16145,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd1MzKCRA9TVsSAnZWagAApx0P/RzdgUDgQSvJAytEVfzN\nDRtPxU8XjHiR44WnZpr7HPYMqQxZD/Uup0dCYlt8gYClfRM/c5PTI9i7P5Xh\nnsnGXwcuWm3fiLhZG5563vPV6xpYwTExrCGJ6Fnm+Tjzq2xxU7b7jDoY0+pq\nzkhgVdokbZ+23g5Hi/k2E1WAr1AqsUL0hECee65cSwJDR9IBO8o4v4y5oAi+\nLjpvA0OC7jFr3UbnBWwogNKFkGRGP1q6oDLQCIiWLHHSiMzDEc/XY0Z4a8PA\ntJgz28IthmoR7fNI1UB1dl9B1bnp7bya5wi2bQPVOy0/m5diIbiqaVmgBnUf\n9E+FI5uDriM4zbPtS8lHls4Qzn6Ok7Jw9Bln+GWMij4I2YGGcpnVL8r3cHFN\nxvGfJZFehYHYBGkI7DJ7RQxJheD1toeI+EZAiWrrbKaGpM4jaEjV/mZkAodG\nDMblxl00uEozv9QYuT2Xo47IklOpljO9HKlfEWZ6bq6eKINwcI9317muQZub\neES1T4uyPbQMntNVfgzjoRm1YGTEiSq6n+tPKUqQk7xWav5ZgOYJkvdGLhq2\nkclSM0Rhu9ZrOSbbPqvoDyflgg5l20nnk2CSMP3pMLG4Vdt8L9Eqnwn4VGH1\nLtfXXBr/TYx1RDuquI4oSwoUSaYgJ9yD7dF2c9Yhzjt6Vvw81lsu59iL4EM0\nfoIS\r\n=B9mg\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"d49cf0658a3964963bb2b39b2e3a010615c815fe","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.5729943ba.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.5729943ba.0_1574227146167_0.6596771330885034","host":"s3://npm-registry-packages"}},"5.0.0-canary.e89750dc7.0":{"name":"@material/shape","version":"5.0.0-canary.e89750dc7.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.e89750dc7.0","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":"asyncliz","email":"asyncliz@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f910b919eb439c75f879a12369448043b0060953","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.e89750dc7.0.tgz","fileCount":7,"integrity":"sha512-sPHdisg4Z1k9vVOiu7/QqFzlpJLIqcNF88XEdmEDaNfmpd+QtjWXxXtFonCZm15p7X+5VFZUNY/WAzAzj0L15A==","signatures":[{"sig":"MEYCIQDXBXoV4baagn5RlFh2uuJUO+Mzzpojq8aEmqMcPBjhvAIhAMagPb8aPGfIfZC6p8Aho9vCfx8jfyI0mag82ec6gYST","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":16145,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3draCRA9TVsSAnZWagAAGVgP/2WL9mSuofF0wvmunnOB\nJqojAmzrul2T9Dc1g8O/emSOsf147+PtRrOXUBp5szkR/nZ+QYrc9cdNEOON\nUwXVAwM06u2m5vert00iRrVqw+vEr7upTZn8P8QJe6qbdx/cRjhIE4wzBC+Q\n/CL5dEAHYpl9Hl/Yu1ES3yzMiE42ctwV5Qy1SohJ92ZQCxOAOlymMGN1B33v\nmtGUTQ2q03ukGOz8gKSzDSYDMQ2dnbV6aD1y/A5UcS0gBs7JAhS613QJ2vRM\nx35wql8VKpanJU0L25KJJQxmVO4+RhC+CQc0CJtLeJ2VTZJQ+qRXMp70KH15\nYZP4hsUGtMeLwfH/OHJ36stzwQDG24XI63ogBEL+mNrk6h92EEo7OPtp3eAS\nX9IG1bqXrm1r6fKMj8TXkwy5N2Wg+NclkJVjDCC9mFJC/nvIVht+Y5ZB48np\njTIzgHCm5r8dMb0XX53WXMBlvKpFeG98GDz9u07OJRtr4jGJvcfgEHlokisN\nd0FXkRJHkCgXxJ6CC5NKpgz6/Pj4whxfmZIxU9xeARHXnHErR15meWVIlOY1\nwSogOaPGY14bgddcZLXK5jte3TmW4X+KHuutv/TUAZqmhsuL4tp2VmD0I0Dp\nQGhC/pDovKQOkqAFe4jg83lFF3MQSsTQzJ0QB0IfLbcDJFQaEj+yWU8Ki1XS\nrPTZ\r\n=CRJ3\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"2a166b3e817207f685f4b112635eeb21f5ef0789","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.e89750dc7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.e89750dc7.0_1574820569637_0.39537006798527496","host":"s3://npm-registry-packages"}},"5.0.0-canary.3e560b33a.0":{"name":"@material/shape","version":"5.0.0-canary.3e560b33a.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.3e560b33a.0","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":"asyncliz","email":"asyncliz@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"daad590a6f3af54bb98913da0b32e21ba96892ba","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.3e560b33a.0.tgz","fileCount":7,"integrity":"sha512-BBW0Uh8AnnkNFlukoMhxSyQ3Z7UyQU/9mxYRxNyabtFbC5/0a5Xvs6N4mivfyotyBIGa7qixqL5FHiFYvoIsYg==","signatures":[{"sig":"MEQCIBEG7T+SFeXUM0AMLt6Vbc1brUo/lmhEvdoHLntzgpWIAiBfHkFw3HVZsSQDI0syRB/S9TSn9e3SMtaZs8gA9iAskg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":16145,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3dsFCRA9TVsSAnZWagAAwHMQAJxB2aAiR6M2F0PNO2ef\nj8su+NcT+6RUqGHgAe2kxFtlETOdQCDet0n5zQh79sWiXtKXsg8gTUYRiwPa\nw26PzLdzzRbJ0ou8ZFAelIVDAKD8uvqogLjPinx8v98dycmb9kYEqjl+rinE\n5l5mU3GXYmiOTy3YTjhfJ9WsaDIdgddGDmrI9UAaU/sCPTYt6JdxPBRi9Ch7\nI6g6hp+d5R+q1rXQMhF/PCPGKvA2xYnp1dbwy11x3KAs+tQA/RGRQWpQ3rLq\ncDLyUJrdO3baQgEHv06MmofQZ+0ArzcseSXFkMbBeXHIOnNvS77R7MSnLl96\nCUHcGql4FbOS0sNaE1hR94KIuvRRBWqOGv4p+1cUmpbhnF02wohBk+ZSk1nA\nWVrRx//qoDmBb1y/M59ivDqibmAGo529osIEa1U+DC0ETMGEaa7jXZBE4Gt6\nxsDz8+xF5K44w48oTvSqYpwnb/vojrONECtNgo8FOoRvOf0sf421hFk8QkzH\nOt+R7IL+zOgLQFicC+p/NSNLO7UsvfKnRBDCNItEMK/0ZtNhWCTKBx5MGRNF\ncuNCv8yAAWe4UAmeQGKNjGTvX0hv19K5zOn6+51tvbT1F1WYK7uJdSDRZtAs\nteK1Ix4BDMxnNYhkIY/kOPC5rt9OOssjJmN5UlpBB1j2TjY+3zEU+QQysB+g\nfPAC\r\n=kHUr\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"a86efd68e1e91c0cae784ad70b0e36c13c923dba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.3e560b33a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.3e560b33a.0_1574820612606_0.9264819069493928","host":"s3://npm-registry-packages"}},"5.0.0-canary.7fd17ce5e.0":{"name":"@material/shape","version":"5.0.0-canary.7fd17ce5e.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.7fd17ce5e.0","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":"asyncliz","email":"asyncliz@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5038f67ed74801ae063e2e8619c86a84ef3ee00b","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.7fd17ce5e.0.tgz","fileCount":7,"integrity":"sha512-vcSsWTEY48GnVisPjkO7/RyeGTjgsmrnhQhVrO735YMJr6mI4DMMLtH9HZuQuYFTLPWZNsHfFHOQiu5wvnG4bA==","signatures":[{"sig":"MEUCIQClfqmRqEKtkMXqsA6jt+Aty5BzO8HuV0h7PRwXKmrexAIgXQXT67LVNQYAWClPPehKwYr2q7UcYKLAeRhsuyt0W3A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":16145,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3dsTCRA9TVsSAnZWagAAkpIQAIRu8lEX0y9wSP680W9h\nhLYtUuGMXfWfgNIIMX8UY9BLGdRu0LHMuayJZgoSbbeiNyA8GO2Pbd3cTjQC\nBNPYW1dkxbKCFfqV7zVOH1KNA+FS1eVuMZ1/OuiiICLQfPhoq+plmOzYA7ab\naL8tdUR/K96MIGukJ+lvzcwq+PdDYGQeP85Xy34lkqAvu9lG7P2gca8Yu9Tx\nX5/78iRV/tovGMs0wrHKk5d5TDsNYWMXlIenYxFL92udxPJJUnds7Ttf27CC\nrd6OWdGAHeyI90ULB5zeAsSq0jHD/ioWTrjNnj9KZoc6q68g/gV33fRCGaMj\n8LtGv4UH2fn4BEOE9BCJlCWRjYrC+QIENfPS5udLGuutC9suOHQa2CpgNYTI\nsbxc+N9WUqHo7jjv6u67JmQXbT15ZEbSpolMrMNWilH6B1css/be60bnLaCI\nOlpB+ANJY/XIhBQgq6ZVcYHZg6m6Cnqtzs3m+F430Np/w3z7Jhtn5POq05ky\nSYS6PhYG7e02+JDRApVkoEm7kp6eM/dcmjrClZPTweiF4pYJzUirW1HDX3hU\nuMTal3Bx+rve4b6mb7whffHBxOzmUA3zzBbZIdgU0l+9tLizVP9XChGNNH7G\nGCCOT9RgBD1eYJ+rxsAJHka3Kizy5ovMpSJboiCaPynF0B2BfsZB5jYQHLVj\nxEgO\r\n=a5Ky\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"e798e5bcdab4c998c88b2bde71412b2d38dfb262","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.7fd17ce5e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.7fd17ce5e.0_1574820627282_0.9573312933712792","host":"s3://npm-registry-packages"}},"5.0.0-canary.ec729683b.0":{"name":"@material/shape","version":"5.0.0-canary.ec729683b.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.ec729683b.0","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":"asyncliz","email":"asyncliz@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f89bc8f9bd638d0d9638c97722589665ea99bae8","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.ec729683b.0.tgz","fileCount":7,"integrity":"sha512-zlggnFKsOxeS2wwVR3E8HpitAkTangkemcl2p00NAGmnyFQPdKWvV2xThax71NkjsiL+heewBgZb9+2gbYU69w==","signatures":[{"sig":"MEYCIQDCwBIZf+JLxh/JFauGMXdy6CXnQggxFIUerRy6WcOKjgIhAIzNWnLTE8XL4cG7PsUKx2MemkQ8Keu3joXwbnu/teLJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":16145,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3pw5CRA9TVsSAnZWagAA2zYP/jQ8v/WA7qorslkiBjGn\nSVEHaM0p39j2AY6UNqwJr6MbChMSdQXsWjcgmMZbKhVmi9cFzKJ53Ourt4Bf\nangbMKTqXYTb6VbrTg5cUhxT8ritqLpqVGXaBtBt2shOSE/p2hIf8ejdBQhg\nkJE310eHmuiHyS+PQkK68tRBIPiIz5W5g8Oq8ExF6Tb9hLLCkiucRL5Eee5R\nN23hC4geIDcnJABLPoQGcX5uWhScHefexGXsHNqr9KLWM3SS8oHVrGk/6VPH\nZZRaRd0D3oyiOhgWcl6GV/9xDJr0gW72ldjKOae1Zwa1hHK0P23DAzviihut\no70YwYUHuU1t5ahblI0RbupdAMg7JPEcc4g553MapxGfKQcQEGuBQzlzsPl4\nGJLbu0rKh7ThBm3oMHspTwkqS+tlmhAT5+ED72VSR8jcdUahOacmd2TtO1Px\n6pU7dzTi+sVY8rpsHS6K0Ks4dWTZY5Q07/3guxCFjpPhwULQPfVUatOv1+Gf\nOhRY/DZTqbIJydI3I9oF5h5pXVhU8dzUBOZbRrY4OGdU3yFtoW4no0u3Bqfj\nkKNXkUUkw85x9a/W3yLWk3EgQDmhpi4cE7hlh6b6wSvwxuIUkZ6yXLRCyWuB\n4YFjN56zj6HTAyeXNJ8YBqpC+W68jsheFdfWXgKDAGoMCjKYkmasaH3dv8h0\nXWC/\r\n=xHoI\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"919526f37cd7606c0de4cc409ed4c1ead34b60eb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.ec729683b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.ec729683b.0_1574870073347_0.7917561953488716","host":"s3://npm-registry-packages"}},"5.0.0-canary.b8bc4a26e.0":{"name":"@material/shape","version":"5.0.0-canary.b8bc4a26e.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.b8bc4a26e.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"279cfa428a4d7efad085fa3c36036d34d2212ccd","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.b8bc4a26e.0.tgz","fileCount":7,"integrity":"sha512-wVJHbfNq/RqpI03zD5g/W2cOSBEeSD087BYMkqusmSKt9OF6wKrLoQYNVPXuwTe84EBcXYgTuhs06p2DerZdWw==","signatures":[{"sig":"MEYCIQC3JKM9yYLbBzrSb09hlsf6oLRF0Vx462nfeFTP7sCFcwIhAMZRk4La2reBjxakFdRJ+pCBp78Q6TpZosLF2Ti772XK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":16145,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3suPCRA9TVsSAnZWagAAtecP/2AuLutCch05edunL3tl\nVfHaJ83jT1juVlcsiIVq64xfvsPURLoPSuUOzauIlKq+PPUej70smzauAwpW\nStRzIhxPaeNUx9g5VL2uP6f1y06PsmvpRvTTODBViY3RgThXkyOPTfVvi9VZ\nfhUeuJ6Uc88SCkeTBxPitfFrZKp334fDfsxId7ytrBtB77bBnx6IDBPIDyTh\nghCmvSJzVaZ9XUT9ZcxHzd8JmvtX+zXEuWrQf6Nb7Qq4XPA/LPJRWiv1TtC7\nIZ2OfZWBaLgYNrmOioog0v79mzDMPUQo/pEW07OqBt6mZ4ioHkm0MxAXoClq\nDesWyk7KZakx6FnjcMQJKHpWsBNvKfhKcsVKQj2M+az+OcApEwh9t/wZcJI3\nzPdZofEYBpGV5gPhhZ0ePJoir/7cZkSqWql0Cwk0UJx5qYed2IkwTsjAs3tZ\nxDE8iQQ8pu1jz1pwbACQmLkJTxZ9a/QGBTmGChVwd7zWywabSuV9vuti+l/e\n+vcy+BbTzcOP8rdiStpFoj0pXELyEkDVe2MZFeKXyyXGcFKNcJsjEL4y4Tct\nqz6zNSDtbZgottHVMgk89y4/4EwTj9umMZFWmaFJ11uu75ICcXB9pb7zc0Ou\nrwPdV42nIXucaCmIem0VmYR13AyPzWbEYNBeSO+IEAwsXa0QZofn0g+h24I3\n0GXL\r\n=FBqj\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"d04615df572bbbf2ab2eeb76ea45696d0a40563c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.b8bc4a26e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.b8bc4a26e.0_1574882190642_0.7311945199151002","host":"s3://npm-registry-packages"}},"5.0.0-canary.f978109c3.0":{"name":"@material/shape","version":"5.0.0-canary.f978109c3.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.f978109c3.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"10172895fdb2830fa3bba624051a927619050ea7","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.f978109c3.0.tgz","fileCount":7,"integrity":"sha512-edbCTlh6SfRSn3lUIJQeO9sqC+7LDv4ufyblL6R7vEZ1HC1DXiSX/uVJnzinzhK1UX3GisbHzl9gwdp7m+Hk4Q==","signatures":[{"sig":"MEUCIEYJQGSojSuPnYymW8g5PASV2+q64E9hETjbetRmf93hAiEAjqd+UhCcuHqA/YgsVPP+taHhTCgobbyRhkWQGmK+Dqo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":16145,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5US4CRA9TVsSAnZWagAAjLEP/iKYZHAL+eVI3e2Qx/43\nT9hCEiZCYKjbs2IdzekWqDIbxME/ElOeECWykuPAIafh0RDt6wumm5e4+oA1\n3cjCTuuYOdXnkipfTbItPNBCGctIbgZ3yv3wfIzALronyGnRZLdBbWM9usFH\nD6PH1TP69aNgLv2YwIGa+VKLkub1Oa1tEwruHiulO04ILcEMax3NjVawevkR\nNZ+SyFuJ9gjqD+M9K+JPBRE+lpILoYd1ETa/kfWpX4xasGqWWAX2Ln+U9eav\noV+KucHiBUstwjdPPbmIoK0LN5o5O+yYSrLbMmszSmoG4uW7Jj2oI+IQW4Hb\nhQIT9JJVxce6MILMoEa0lS6VxbnrdTbSFf+n45+D42wTmQfL9MNTffjuAmkT\n/9+rgYqeHlxvqsKvlkfCJlEBltkVG274XV2KIE6EFlnVbjC1HZPy1JpedUPZ\n8LqHZ1teva8NiYoLOU71BF5Iz3zydrcqGVnwSJAsA9/+orW+fBQ00/B+Bubb\nHnZJLplLeNL/Yj5I9QUKfZRnFK2rcH4Z7u5JYyDp6dxAoTge9glCGbgUW05I\nd6xzJeyDqxbxN1JKToG0mMXiQZ3Su5Ge4Ji67Ee0gf5ohc+x4+4it7AMIZD9\n1pVnGe22nzruueYlzzVVWszFWFp121+XK6O6fa2hKRUIWXefrPm4htOU6DTB\n+5H8\r\n=VxRb\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"27bb2072dd0bc0aec40da3282431f7513467bbd8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.f978109c3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.f978109c3.0_1575306424033_0.7510609817840723","host":"s3://npm-registry-packages"}},"5.0.0-canary.ad9dfe706.0":{"name":"@material/shape","version":"5.0.0-canary.ad9dfe706.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.ad9dfe706.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"224c1f00dc28899885ab86c1bb9dd3009fcd8b13","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.ad9dfe706.0.tgz","fileCount":7,"integrity":"sha512-VpNGoraOr12P3jHpduiuVyeNHQeWDzAZsIi6LPTwisZ4OXDQ1sxP6Q05yB+ltk2M4hw4EYEC2cwnHtmgf6eEzQ==","signatures":[{"sig":"MEUCIQC+hYOaW8eNmPAmv1+d+p2GBDL6aopPRyk+5LgaGYyEkQIgFjO+t+85lnraEyHmMJuF7DH8ULxUx8/qsm3W/135LGo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":16145,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5u0YCRA9TVsSAnZWagAAddcQAJ5iZexPjvvWBuVkdvpL\nN8RXqT8GIB2U9rSi+flraqPX6/2QnheyEqHm9mWezFwVQzltEbYqVF8Xl+kg\n2/+JZdGjWWifDQfsKEpcf77OA2k3lTjjTP71KerTw4S2MoiWtO0TAYxxHbBZ\nVMxz9R2CPIVaRwr4h7IYWIExUIfx/FpyQSlDK3f2DGfqEJtHz9in3Hvm4D2b\n5r0HQvXiu4BLXW/mGMHsD+Nk1IK2nRIUe9vEjYHETQgqUl9I13RXhAlgIJ6S\nhBK0/Fyr2hy2/R5lQzpCkwY1jZLF+s4hCNLtsfQ6cmYgzPNGcDKocIaMXuPc\nk0mv1dbVg44MrsaGhCey/Oz8TcL/KmDoldLg4UYhCu0Et6w5uFxSkxxg0qpC\n/woCZdk5x21tnlojg9OV1SgcNd1UjIRBcrextHvjVEAcDaxZmFk2RF64B24M\ne5fZez4LjLeVUJtpwcFYQLQVL20G2vsOeQjw99R/BYW4y5Wqn1P0bPTYMLnK\nWFMwOg2GY2kOUPIOmgGtzoI8OZdlvdHMRADv0ZrEw45zg3As+kampnnsVsDG\nHyzmDtAOUkcbI7TNNsQf4x3FT4Lo3p6HU9gS11brVrUPielvNvWD/PUSWuRI\nfoVwI4e1kft/s1WWsz24z8UBgc3QZ6927dVTa6pHDqZtExk5FfjW6go5ueCd\nyh/t\r\n=iKq8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"ded1665c7a532bca8466d5bc100026f56ea99715","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.ad9dfe706.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.ad9dfe706.0_1575415064195_0.7219275658091984","host":"s3://npm-registry-packages"}},"5.0.0-canary.5e45d77f3.0":{"name":"@material/shape","version":"5.0.0-canary.5e45d77f3.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.5e45d77f3.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0be107dbbb229e836fba8f36f37367246ffb5001","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.5e45d77f3.0.tgz","fileCount":7,"integrity":"sha512-tandAZ0rD4ocpLYsgSaoDwXlDvRF3pysVzHlnDp07BlMN7Xa63IOoJaV09rvFcUZn4U+IhZt1/0WJKsBpiWtyg==","signatures":[{"sig":"MEUCIHKxNZSPgvmVDkxfrnyZ6kkK4PMkigvm8k1fT7ZLvWoqAiEAthtGmD884DTgJ96xQ6k6ZLa11Z2dONQhYVVLYn9ltv0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":16145,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5u1eCRA9TVsSAnZWagAAzjwP/R78l8Aji63AK8lJufuO\nCoVIg9xc1qx+bH8UYd2WC/48QefWC7Uq9klPCNpIYwErMgifrsKfN4gx8mTN\ntkBJ+gxyJezYFK3yAcOs0runQOszCTOyO/SzAQfdKxEzyUdRDJH/RUUjs0MV\nd+twY8aQ8kktV4ypQg4ewE0MSyo6dbg293yyrLB9Ca2NsQ89WI4CPUSM0z2w\nVDxPW8vTUPjCrOMpApBXZpXThR3Fz3msZSYyvH6HE8uqb40Bx9jszpsQDaNd\n9iFgQ134eavtAXAO+8xBFGbtoDQLFeDQ0j0U5Z5LQeO4Dj+aPLD+yPJYiR0P\nNfLlk7qaIgvlizp5YpMg3GyKyIeAi/57Cs4HvEyKCoKj9ZL0uf3nuMQVGjbU\naABVm92zxxWR1Vef2thtKs0E/vg/hMsAICRgA3mKRLqk31PsoNFzO7vc4+8T\nC6o0oBOOoiY8ZDqaqEA4YnjEo5mOVro6wHQouZB1s0HLQFZ4fxt0dKxn8sWY\nHZakbLn9Jdwe9z10LZXnvX6DXF3eKPLrnfa+ShukxEyVjNY998Pn2sjrMu+T\nqPSQRkhP6lV7Kn90f+a871rRhvGs0Nok6tFqcMtS+6MouXkK3LQ3+0/WR+B0\nIF2rlYvbVeq/OVpCfqn1L3Q0UXdrq6heO9wbGYhN34PRmytzH5z6XTCRz40o\nsSsQ\r\n=quAZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"d7a20a5fb792fe297fffc09187b6dd3859babcd2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.5e45d77f3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.5e45d77f3.0_1575415134133_0.9498253361980376","host":"s3://npm-registry-packages"}},"5.0.0-canary.d10e8cdf3.0":{"name":"@material/shape","version":"5.0.0-canary.d10e8cdf3.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.d10e8cdf3.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f114bdf29659ec94395e2f04598ce0b786da0a3d","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.d10e8cdf3.0.tgz","fileCount":7,"integrity":"sha512-f3Uo5htrJPcXm9myb8pFcb4giLkiKNDKguZ6vPEV4TOxpr/k+scUc/0FMslDntfpKh7jkbakGrJGVazsQCplqA==","signatures":[{"sig":"MEUCIBYinNneCqZOqBUkjyzfLRPzkZhyHUzLNX0UCg4dVFlKAiEAp08507g3gwlahX0HDhaFUyHO42/CSzGauw2xC7UhKCE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":16145,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5u2RCRA9TVsSAnZWagAAkxsP/2A55scFwlq7B/f9mVyy\ngRzSe3/e9QKJPXYftAg/66rMYYngs0EHF4/t82E53evHfpAeo05Lx3vOTOmp\nCgZaon6q9KDNVwZCmG0QoCN6LpGCQePF9slA6rAfFjNOl/wcqOJxZ0gmIV/m\nGUGD0m3kLqrnHVGzqAXjKP1eCXZXb/FiHEEMSW3OCVt8i80XJbNo6K9leHJz\nDqZ8z4kYQIZgsaOnQwKTxfRXYtuwCcXT3Wo+aim0rSlrJrugDSiJDwv0xIbD\no8/k8F7UlYps3wRAg1ADX1KwRdJul8b6VfXf7jg6bZYDXXF2MOf9Gjx0aG1M\nbUcldsJyB2Zt5zA3kyEy2XqFjkGEmEPNFbpB2HcA6kMPYJsvzA7wOsWPNPUL\njAmvcFtnsHaNs7eqsMUhjeuHk9NIhZlZGLL+PjRnNnKlVPZc96Titw7y3Ppd\nc507Mo+TGiWCx4kSUGq1w3K+DUBAtqGjAamRCzlBrC1PttaER3NnkOhKlvK8\nOHPHpMAfhD4yLWBX8f3RmCQXD7PBxDnRUV8WqYfvWALbye974eUSXG4SSvio\nmFJZ8zj0CzBeV7PpuBWJnz4teaOciNYqm0TGZprjor2Z7o8wVuWJFrCdITiP\nCw3hhgJvHRh+ZojXbsYy/uqB6LBlKFlGL5R9vpSo1MK/gXhIoFeJAla3z7T3\nM+cS\r\n=JoyO\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"855cf0e11682e4f0f44f50292556ce39ae2824a3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.d10e8cdf3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.d10e8cdf3.0_1575415184712_0.48026399262967323","host":"s3://npm-registry-packages"}},"5.0.0-canary.a5dbd8a2a.0":{"name":"@material/shape","version":"5.0.0-canary.a5dbd8a2a.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.a5dbd8a2a.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c7e6c0a061e2571880eb0841d924d413cbb2abf1","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.a5dbd8a2a.0.tgz","fileCount":7,"integrity":"sha512-ZjAHRFaJ1Ms/uyi5KQU0gODX0TcnGgcpEAXuOy4m5Se1EeojIW1uPKlzrua+HEeRhdN0WV2eob8CwD5lyzSM2g==","signatures":[{"sig":"MEUCIFFwYC8uUb6E5bpyzl46DcOaKj67wOses/ZllpQ+4Wx/AiEAmQi8uAmMlRVfQqqCXTSCizgU8DYWe5bhXheKIWaWWWI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":16145,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5vXCCRA9TVsSAnZWagAAfkMP/3FR74vbmSTDz/pAj5Xa\n7wecP8M9biuIKHN9HR7h4BKZlq1YTWzSvDWhCJkbCV7/cpoXyA3DbIq7OI1w\nuPl9g1nBEWEYetjk0d6/NChmgA7omfHCJ7ug9PYqLeGDqxktGIjVLHXwN5ZT\n717azgkxrtb6WhEXqaIa7fBbrvKSfPZXYehKddCfCSlQNOdkhpxFLUQSKhi1\nw70EnhxBfo3Ob5iCfD5RSVsQ8gKW6MCmFL4IOIRglA7MuaQJA3mBosQsoefb\niCKL49D8WCIrvd1OZ5vn8Ivroxjl+0jQaQcgGvETd8WgeeWEx0lJaDZ+0g8/\nqiOE6r1/8Kv5O8MRIII4khwavYpCGFn7Cf6PMJoxlQyqevFS/3wjnzGKpC1Q\nwPqmlS8q7C0IWcsi9OZPByc0XdY5QsTIbygBwCGWJmn/ZwATb8SNttrPQcsL\nd6HtFyz8A3Gr5i9dP2Wp6M4CKx4lfdqDNn8dMldPxrNS/4D98WFJ7+EmB0Eu\nT++377qB2G+P48I1Lzc7/A1cDlJNji68TZ93pr1FSdtm5PqVekPV7g0aWEf/\n2lxj2j2Rk48fxRjfUNHvwnU0RKskMer986ba7OW02lhGaSl89T3t5m048+8E\nRKxcyx3nl8r/hWwf6CJ0wGcouFAO/oWRn+TBjZjRCAeH/ykrM3OEVdqxr3xC\nM+7O\r\n=a/sy\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"8a67c95c393a733414be4fc008baf7637a9509b2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.a5dbd8a2a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.a5dbd8a2a.0_1575417281800_0.6398237535620219","host":"s3://npm-registry-packages"}},"5.0.0-canary.ba879b68b.0":{"name":"@material/shape","version":"5.0.0-canary.ba879b68b.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.ba879b68b.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ba23b589fe1757aa22f7dc05f6b29c52a23a5fe4","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.ba879b68b.0.tgz","fileCount":7,"integrity":"sha512-POhil6fwlkA/YqMozB/mWiEjyT99NQ745/nth7hjeZIE41mi6+lY912cwwaXg0UCi2HMf9WjNzTwobakLhZPVA==","signatures":[{"sig":"MEYCIQCw2mpkz6WlqpiGDroCSbZgdP874ao0f722pOOLss5GQAIhAJ9EAb88bac7hqRUrpH/1bNRKjQfw7BPi25V8plJyDpy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":16145,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd6BWACRA9TVsSAnZWagAAtSQQAJHixrJfT3F8kl6IrdXA\nZ8ayeGLJ9xW+cBerGIcn8/TDe53Net9Fnoyd1VCUyr6Nlt2ErpHXtChfdAg9\nFpCOJpltKNZ2VVak9VnLD/+lMnX5veJdSoI1O+c/GLE/1T1bJK3lhs4bZqVY\nb+T/UzmDcR64aLWYMHmG0z3STZONCjnpIJAfKKrtSL9bpR/0GrRbp4P0LH8U\nMELGYeXivvLG89XTsVmlOxVW4kcZp0k3xjDLndmoMWqoatUPbmC4vEqgRtiO\nBqXbsG8a9BJU9css9Ap4ExmNmUuIV8VDeqns3prTeVFtYRkHdaA0JBpUYX5M\nDTrv9+OFyu7sNnE/dWPDCt9pPmvu90g9EjADwVfnFW3/4VtC2rQRW50eg58H\naHqF9t+5zAmYnAPiymQMwcLjPtatbPHWXwLYkjSItkCnlRVMcDl8+ViMoWtn\nns3tVST7o3ERaThlggSVxI5pKqevMQWk/POar+G0xkAKC7f5z+Y2ED77/Z6O\nlcAWCn/eb+KFTAgyuMDHFtZI7rj9Mz7fv3JmfNBxBrivXeMY3tKl7l8I62Qv\nDGwYLpnpNvDn+JPBBFeCNuXQCp52cjvpJ7qWiYpesLvMWB/MYn+m8aefyjPx\ndSa06QlJWjOiz9YxM+GvpUNqr3uMZy8dwJsYN8fgKJn6GSyXn0iU+f8ZOQYj\nXppr\r\n=GO+h\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"83bad042ea5d5cc8b93df88a1d4730099550bc6d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.ba879b68b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.ba879b68b.0_1575490944188_0.2761547683341239","host":"s3://npm-registry-packages"}},"5.0.0-canary.aa0eba489.0":{"name":"@material/shape","version":"5.0.0-canary.aa0eba489.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.aa0eba489.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f889a9ba0d90b2d83c46a48b8bd05823f29fb497","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.aa0eba489.0.tgz","fileCount":7,"integrity":"sha512-R5GOIhBrlT1aFp1cVqUc8n88nmhiVLa4r4RuneRws5sNqhnDyaB1Yp2zo79/GAYlvsERW266mj+2H1qv4uzFOA==","signatures":[{"sig":"MEUCIQD0pjD7Ym2NyDcE8vBf4Q3eWJz8BtZjCUIj9YVdZQgRaQIgeOF/GYke/eLPDUieH7SLA9QcChk49wG1sorkr6qbSoI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":16145,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd6bXcCRA9TVsSAnZWagAAjugQAI+UNn37y04DUuOVi888\nuS4akDMmRl3vu8t4ptk8EPSSjsF/ATk8yFdzhMGy3lyB6saDf5ar0K7EoFW3\nYa0xwfyHwdgwyAZEGXHXs4pFxUjeDLBn+MbxC355YjQLB0WVXin+rlNvShZb\nOVH7fR+zzwpHN3dwOj1p/QwZXMOT85KAIrY2TwCx2dVjiRe+1UhSg70geF70\n+ODAXVYCyvZpglu9QjboNcAsDnp7uF3hQSh/1mxeIR/Ow/kAbEbSfRrX5g0b\n+UVdR1YONdeYhv/PytG7ViOHaBuTiOV0bOC4iPQDwUWCC9L5GSamA5vBxpD4\nze9cTpQQQq8BV9rvMv4GfR5goD08xezuRS8Y22/UuyeJnB/6ZlRuXE5D45eX\nK/1sFiaMwulovntkJ3DaHNOcT+hL+UKvWU0+2xOSqgsL6NEpAjmzVubREgc+\nWJ18+mUV/gM3MttZD8JdlY9pVxSihMEPzq8p2QjBGA+UQHaAhu4cG1WR1oEH\nA3jJ2jXxxw96UYqZT6gsnaJJTv13JDpYcHxLYMrebOh7cWsKjmUDR5XwA5ug\nMF2gJ3TI0b7BJsn2sWyhjmRynj6cc3657GEBCZB+wnOAdBkd6TjogruwuKOp\newYRP1lg2b1nPlj9OgA6R16uQ/GaB4h/ZY8oWUyOL8rUC6LrqrGHyvhaS/GO\ncY7x\r\n=yBdc\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"50ef06854f8319df2975cafcb0b8c94fc399f155","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.aa0eba489.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.aa0eba489.0_1575597532192_0.09475806296469114","host":"s3://npm-registry-packages"}},"5.0.0-canary.cb7b71a86.0":{"name":"@material/shape","version":"5.0.0-canary.cb7b71a86.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.cb7b71a86.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"091948c139855906e5507ce7a28e2bd3486e5a15","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.cb7b71a86.0.tgz","fileCount":7,"integrity":"sha512-sfni4UMnTry35aVFrpuT/iUBH0ftrFQwh21i8WJR2WkBwjsnFQe1LYtUOphcS3d0EjkH43iTgOzEY/pIUQ7wuA==","signatures":[{"sig":"MEYCIQCpG8r+hoPM067c90egGmMNaptFwcW47T/fEdTP3Cl1owIhAKx6l1Y4bXDdwcNyxE2qmdtgRZ6e8Z7yvHJ+TutO3kF2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":16145,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd6up6CRA9TVsSAnZWagAA5JAP/1OnvpvjPujXVjhOU16y\nQSNC3OQQCwOSNaUzh3gUCAsWTQg69ZZKE1hl/R8+y5kFgy/rj2LbalhBHsup\nPb1U7kiOtw+ZtIJVjoHURK6fxBPG+d66bEsML6ExMEB0C2XzFOQespnEJqCZ\nwmsEh0EMXKxQSqK7Tn8fUPPmvqfECOyGSud90eAAl5ogJ95/tMWnvsUsP8xy\nWyKmO4VcksVzpfOjqYv1bntFGkXptQmOn81NPOWtYWLM1clh/0ymfTIJ1eMN\nJnFgXoIs8ub/Fin9ONejQVu5GCDGVAX+9s2SP/m5yn0TqXReSTE3NpcS3OZk\nlcX5e7kZKW3xcP+at3Z9A+lt+iMeXJc6VNqDpazDMshjJ5KlXXAnmQVvJ0/c\nWVniuFL35CD+ga2ReehMer1X0Czugwc+HSLPxR1nI4N1gLVbTIZC30cO/XML\nxMHrYEnNj8qksLWDAcZ3n3OQlLk+ihbvTAEOb2D2+eVJXtWuuNMwlK+k8zae\nYhjQ8x3UHtdNjKid08EFp5oV6czAC8v3qIcpLAtVFYpB1neZ/wHH8USkewSB\nDZkkBqCHZfpXY3x/pNJUyutTEWc7zxiGGyfju+HLxOIh7JXPH4/yVsmkXmqt\nB4pHNK77FxuQD6udeF3Og1fgcTKqf8YytwvTNeWr3Vw0JizI2IZs6vlowSjM\nzMvy\r\n=4dCZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"2866cdc43c0ae69bc09927b490f0805ca21adfcb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.cb7b71a86.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.cb7b71a86.0_1575676538333_0.3965387834432137","host":"s3://npm-registry-packages"}},"5.0.0-canary.50f110a6c.0":{"name":"@material/shape","version":"5.0.0-canary.50f110a6c.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.50f110a6c.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1003d117c505f0a1ca4cd704bf908425c8265f34","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.50f110a6c.0.tgz","fileCount":7,"integrity":"sha512-AW3KdPg1fi0vD5iLtj8WcmQUuZ7khyiUS7KF2pkdP80OfAbbTLNQkyeFBmMmufe+vOxknn6gZqxFSMpg4AE27w==","signatures":[{"sig":"MEQCIA7K/pYWohawcgqN0MDEshZLxomMGDAwp5IHK0vZCKyEAiBhNWU6xtT4zV2FkYE6j+9I8qLh6pYprrRM5tqn3VsOWg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":16145,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd787kCRA9TVsSAnZWagAAW2UP/0yBtTcXr9NUdb1lvup7\nU9U/KOgv8Qxk+NeR451kb2gW6eKSUpeb8tKpSL6hoThjAtamScefoXPWM6qx\nO4LbOFByu+/ObN84HzdcDdT5ap+dCCmwtcMvSSnhQ7fWAgJ8BOamgJxH4dZj\nSDhHdxG0aPJwSaxhnwSL7WXPRy7ls70p8kfWNOjJVIdHn+vOIVc1VAERQKHy\ng/D+7Sjh4iYvEjpOFHaCyhvMUxbXKIMJUPxUAV+YH8uSZ5KtJLpfOvCiveQo\nISKu2+hMNM+PC6X1sU2pn/L/K/tTrO/DQVcPMGmzTpbPEZRXi+yMWhcNbrBK\nXRMlUJv3olHSFKMAHDv6K/wYx8Bnfjrk5ritso1o5ewIPYTHXTR1kIxfe5eZ\nZN0faR+BC/J9yduE7Ox0J9WHNRHmP/9hMzcg2Jf2mwA7VLiKENlm+/blIFL6\nxxMsTAr67oPKSGQYhTf62/WNad9IcjUrWoHfpNFEPLz0T8lOcsHiYg6pPsFf\nHzb4LrTBTeV6S0Cz16zGPj26N4lB05RHvFqnQagFXSQqW96xRnc0VGyju+2e\nTILs1dtTjAftI6S5c57iw3pxlmKGC3Rga5XhueyHuKshsLGDdxbIOQWk5tKY\nfAGiCkUYPZ1SmzdlSBhyPIewjndUHHmHFNPH1B5Aah+X83FPhja6SLU2pPgN\nqiYj\r\n=LAv/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"84e9b8113e75730b3079c429f751cf857a866b51","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.50f110a6c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.50f110a6c.0_1575997156080_0.986420022871014","host":"s3://npm-registry-packages"}},"5.0.0-canary.878a08b7c.0":{"name":"@material/shape","version":"5.0.0-canary.878a08b7c.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.878a08b7c.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0a62311965330e2a94487ec4505eb108d3d8d51e","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.878a08b7c.0.tgz","fileCount":7,"integrity":"sha512-lUApzKZ0q5sIvq0oGglJhwrgyaoPLPeNXBzJOm4qyu7IHGxm9X9PqEtGXeY8VMdL09wK4+RFN70jqtuT4PjJ1w==","signatures":[{"sig":"MEUCIQC/+AAWuSEhfw1xAgMVA+O1O0UAdO+PM+kEtF656z/4vgIgLbgnDn7gGTOFrRr3Wx7KAhKVpN6m4Bv0qiTse0stm2c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":16145,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8U6ECRA9TVsSAnZWagAAwWUQAI7uJMK4qyhtqQjWLzgO\nHyMvoNsjqqbyPK6oT/e80gf6pWuoKSrDaYiL+gxzAscuFBAcFEZ+LGp/o8N3\nD9C5PCdlwj86NSayqFrQAs8CBkslvfo8uqstQ5wQrHRksDKTR1SfBpUL52Tg\nyqDgWQzJB8puwNbWP3DmDhFa5HnJavolMOIaZD55ZTWhZ/OJvZBf60auZVva\nlCicJy9UM/00wrzJBhrc3Dhz+xen4YMl7/f7y8FncDYiS12P2nrRxaARZwMM\nWeoHpgz29of1BZpjGHGfZ+2Y2wKZ+95Ki3Kvjz6HegJ/bq8ZFoGtYOV5yv2j\nIQZu5FJHncBz7t/fbeXDe1WmFugyb7xqD7c22I+FkG2d554VGXSmzOBkyb+n\nISBBT/6kMluk2Odc5zHw5PIPSwoaidB7rrp2+hRdGKBLSJf8YAKl6uU+Laag\nE0Ke6+Qmt30MHJuLc+anQwXT4q3BMlanFCH1whW/KQKUYkSRYaR7DXv8QSrW\nfOpv9aoneXrRgSipi9gQT3Uj250owS9Rqk8TWzCSNeixz2x7bmUSxw+9iDYG\nqLasZnZeZy16dPw8lsWKFZE22XesicHaMooYkdcGUjokD7dx4VrRzvZRvLBa\nG8OZhfB2VXdtyin6lSJVm+AT+rJuQIzOPlGB7fD680clpLLFQHpMzLD7ZHeC\nt1qB\r\n=/EHt\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"13bdf58f09c0e231663da8e8e9856d7a442efad5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.878a08b7c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.878a08b7c.0_1576095363708_0.751301672811346","host":"s3://npm-registry-packages"}},"5.0.0-canary.397905b4e.0":{"name":"@material/shape","version":"5.0.0-canary.397905b4e.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.397905b4e.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3f9741bdbbd48484f313cb85c6cfc6c7d146ae83","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.397905b4e.0.tgz","fileCount":7,"integrity":"sha512-cG1EiYuT+5lAZ6bWyew7UpmiA+RlZzGn4S+RPcjFEXLVVyHqbgtvtOIbwkds6UhYmUyS3q8xwITFFbQTO//AHA==","signatures":[{"sig":"MEQCIF/TaCDBYJfja6cd0DcbiqzvJ62MLSqTKIbdYepWJxzYAiB+0to6exY0WtN1ZbSYm0ccwhHhhivcT8RNvFbVDnLu7Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":16145,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8aolCRA9TVsSAnZWagAAA3wP/27N4LZyN4H1lAXCiMx1\nCxap261W41cKxeGnTlXZV02auGrqBNAnhoAqWEjpzUIQemPzDQlzY2p6KfJx\nO5lzMzjvpKpNN3QOAv294UZ60E+pgi5rstis4O0Et+BUBptfq9rwK1OpGSVx\nOBHOSnUFhZ2Ph+L9CvQ2/8L0spHI5sxG1MHvLJmcWf1Dz10XieDL0OMmswsj\nRcR83FmBHCZeDTGmb/vrFv/YvwLHi7/fff2N3MwNiMeaT+lmKXq/OfnGd15k\nZBFSPDWa4lN5e9mJl/3MGH+sH7E970j4RaCpXs4TGgooVqVAA43L6zm5kANo\nTLqf/H/+YzGHUQpyznt1yQfYOj4BfrlcJimUp5Wq+fTilyCpncxhtOSqwUYe\nc3gGbO+7Rra4iyP+xzSYdZmDTSkitRUmUCHMHtEq6AJks3k4dZZ0csROuYhs\n2s77Ell4fUCanAydA4qmYRhn+noxGhsG3pG1Wf3y0E24CAFmLKeJLNez5N1g\nHIoTNSx56/eYlxwdASgDvR68kDmsNcQSIZUVpvVkXBGYsHb4emGsx/h/o/gn\nTdLZ49X4xcw2cQJdWkeugEKFA1cyFqQAFY61rRCetNbopD9Zlm+u9oeEE5cw\n/K9e/UJWUahWIHawVw/9Icmseb4Id80HQBXVmeOME5LXvwLL8otXiz9hb/or\nQljE\r\n=RjLp\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"43ff8b8aaa48d3a31fc6835290f1ea1822301146","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.397905b4e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.397905b4e.0_1576118820179_0.06963905687899863","host":"s3://npm-registry-packages"}},"5.0.0-canary.1fbf5bd1d.0":{"name":"@material/shape","version":"5.0.0-canary.1fbf5bd1d.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.1fbf5bd1d.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b4ca53e3d531447c5cae3f2fe35b83db5dff49e2","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.1fbf5bd1d.0.tgz","fileCount":7,"integrity":"sha512-mp8JxtVNYRE7r5ikbsuuQb92w14Ui3cxqG6sBYyiyadL5mzldMhHE67ApRLhQcgTI6LBNd+ihBNTypo2PJiPVA==","signatures":[{"sig":"MEUCIFM5pp5KqDEBaoHYt6W8rg6YwYM1zXHWPJXGDSFA0tpgAiEAgU2f3bOvhlEr+8VoJa8YqjcThAk5IU+vcanpQ7eckFU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":16145,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8o3zCRA9TVsSAnZWagAAfvEQAIRWSsAAgZWNyvxfSOoq\n3TVD7jCbnW7gduwkT61fGRZrQbPnIIf6hzhe0mFvuqD87rjijmALPzxQESMy\n5MXgj6n9Cd5jY6MVQiYsMxAskDbfWAJGTmPBs8kV0CDrihAknvs3WGt2TQKE\nL5QsGrCJJY+H2dRr16l+aDJGJdi/PMn6+HLfu+/hp+0N+Y3Ol/KFJNkLLJaD\n166h5+W7oOlx0AxD1Q1R1i0r0T3yHAFSDE62TGmwlzDzW1ok/2SAczBiJZcN\n746RRVPvdMmVIF3+qI+WYXsu/SBNa0vlOmHt8zMGDJ15oBiW+lDOr8V52BYR\nSk9M71in0fV4JfhGc+g6rA1SGnuiNw2aMKaDHsb0F+gz3On04h8iEFMWWJa0\n9n1g5ejlz19jajLUOOg79npY6jlnz7JMeWZ+RHHCrIcnsV4ytg7LnDrrmOwx\nyU7SYCMP5srXouH6/NjjOQDowy4HxRmHT8JQr/Vc0naolKExA6TsJZFW0Kt1\nOlNYEA989Pc3aUYHvMQoMxBuxI3zlhrY/tb6wPWa80DvgSuRcXF3D6U9NrrQ\nBC2/1ldOOwawYa3lTM5+ZH5rs1bxpkKx0y+vYIElhSnsc2hnDPyvpHBFnCBI\nV6ZT5jQH8Xi3NsZ7IiK7z74fydCQy+Trpn7EcH4rGY1WbDbUScRVtN0lao1X\n9qyO\r\n=pZhd\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"d1aaf5edd2a8bfd34d05df3e3c52dec6affd6812","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.1fbf5bd1d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.1fbf5bd1d.0_1576177139430_0.18750251764571546","host":"s3://npm-registry-packages"}},"5.0.0-canary.b723dfa78.0":{"name":"@material/shape","version":"5.0.0-canary.b723dfa78.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.b723dfa78.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"db8c1ea5ca6bc73b7cf21ba1486591b4de119d95","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.b723dfa78.0.tgz","fileCount":7,"integrity":"sha512-pG9/sfzsaySUjOPlWb4oUbmz2PcFBZLiKbtujAtUq6qyFWI+cLQF9/TXjHzMFaSeKOO9ywaK9ec9VMq8EU1G4Q==","signatures":[{"sig":"MEUCIQChw+nR70U6SwZjqimqwqH1zIkrYlxhDQJuSmKN5/lmRwIgQddgn0RuZskw9fi5iU7N9UF5Jyxye85wo3fbcbPdvYE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":16145,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8p51CRA9TVsSAnZWagAAtQ0P/2gAtHET3RZm8mQUnlT8\nnO6Bkyc0Vkz3HHSTvvucRjMHMRkgRd2s8DnllNl3sL05dm36OZBzlLwa/Kgd\nL3fvZG+YHyqcv++SOOqIKHoD7WJ0HW2Yol7VDHA2QVEcxM9e2Fmb5i3AhXBF\n9m7ZHyouqNzyklL6U7itrFg+atSjfYjAcBf9zU4H0Mr2LL7IF1Vuqi6X+Q2y\ntxt8pQdNTp2v3gyjzREUCcqqJaq/PLYTmApncsUyT0JqymqiznXz5kcSv5OL\nO5DJPmWAq8EUfl2xbOY2ZqGrXgM1GOKdb1f79uZ2Sl4LU7xh7zPl3s6uxMHr\nw0qJXFR5DTUcvXQhXB86ndyFosjG01GXBjFwmenW42uYu6phlPkBGIe2q78a\nQXFGrkUYz2XAHCS8d9oO7hSE5lFsdNB3VJdcWjs3+xK67FyNH6PZ22RSkq3N\n15zsk5LSN56pw6NXtkXO1nrZcswewB8kRVWfC48JTqlmlqAIJVgPuFdgK7Xk\nqYgkE/LQmC2ekC1NwEYsY/ZivDFoQ1vgsEhnHsamOKuOL88MDEtNhwq/LUG0\nI+xNjt0Ce5DIap1bwMxhgCToB08qQXLTStpWXU10t6M7w/RQdsUHK3igOAaD\nBPD9ghTFublfkPFTjne6LCwRvY0sIDEBYHHKJOhZGXrZLg+ZCU2ZV4yYezrk\n4zZ8\r\n=cApf\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"643046d4c1ac458ec8eb1623c5951b3c9a17d2d0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.b723dfa78.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.b723dfa78.0_1576181365561_0.7081832707047242","host":"s3://npm-registry-packages"}},"5.0.0-canary.1c494e567.0":{"name":"@material/shape","version":"5.0.0-canary.1c494e567.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.1c494e567.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d8ceaffd938bf568a4fc67e931912276447a85c7","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.1c494e567.0.tgz","fileCount":7,"integrity":"sha512-WG/C8y/r+PgZ07E6syrVJYY2hjOPg9SypFvMd4LQeKYahMTRuZr4T+CEg9WxR496e51UrrUFtAL8D6oqMLiY2A==","signatures":[{"sig":"MEYCIQCG11Eom1dLwl1toAnX/w4I1fSM6tnl+IPXE1Mq+p4fHAIhAKSH7Skpmk43b5pSPdtjUfZpDy12jVVRuqErR0Z7EQ7W","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":16145,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8s77CRA9TVsSAnZWagAAxGcP/ROB+Gdr2598KbNfWmXc\nn/gAygQo77J101MCokNlyLUgledkIM+KrM/sXequGnSBqivUOXDgvdGiwBQc\n9yPp0dwQv88g5YQCCi7R4+yvA9tOIsDtWJoo/ssZCiARAvFi4Q1uEdbIn3t4\nVFFC4nb5ZjpbTgNjgloplCtVWNPk6EUq/NQYx43odBWPlDH3SNm5Gtb00+xk\nEdj93AarIbhuEWesd5zH0YGZk6ymHtOtP2KiC04IlUziCMziaXkvYMhCqRGr\nvoTrGCKVcEERrgGkHPPsfG7rQU5oXWlmxM4rhPBTd8K5ijr/Om3Rah+7O6/Y\n9Cpi9zsg6D7kvdUPLTfGbxNOzrNSS8sjssnqlJL9M2Wu3rFrwkF7hDgEzmd8\n4y06PFitsyS7W2OHEoZuMaf6k0X00J8ALWDjcblCHZCR//MrKunNQaneqoBv\nralajs/cngyyTCwz82rd85ISr/jkvOPSMvn7ZAh2mnOzHyoaqVOM3x6EFTCw\nsyTSAJO40lPRdKMXhHQAg9YdT6u9qBu8pCbcFsjRkw3kNUka4aMefUoNger3\nOSQkA0mPUoqUCqSmRbpbeDePe1wvlUn0idk/jtyoT82h2+/hn8gRH+VH29Ha\nT+pflow3+te6bMTxqrTkfV+LBHy65wHpV7Qtd1aIr1Edm+tPbBhfGJiBX+5a\ne0z+\r\n=Z+Gl\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"d7e01eeb35d8a54be431b39b46b389f3b26262e7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.1c494e567.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.1c494e567.0_1576193787173_0.6591150654481535","host":"s3://npm-registry-packages"}},"5.0.0-canary.c9e98a125.0":{"name":"@material/shape","version":"5.0.0-canary.c9e98a125.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.c9e98a125.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"60459aaebb399b6f7f9accea870c8f3db42826a2","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.c9e98a125.0.tgz","fileCount":7,"integrity":"sha512-ak7w58DTnZdbzz58E4xh806QjObUXhACX4lYqdjaMQcKqegyfQLIAi/+s1xwa0+9B4iE2qTYTZliDVAGFDQqWg==","signatures":[{"sig":"MEYCIQDCcrZ9P015c7ZkUu7fNWhL37ejV2NRlHaCvI0xOYXJmwIhAJ9/d1YcQFb4rVSm+9fiSb2M4xWEzXddjR3PgmhwcKAA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":16145,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+RnTCRA9TVsSAnZWagAAxwIP/2Ejr+0RwoeJr9EWxsKQ\nWbibmLagXlkW7W3+byTv1rgUtglPJZc7IzQPuqlmPbdZgweygfyBfppF4aar\n6YR8t2MpnU1WwTSRtoVWG8BlvkXcmLg/Wyk4qj4UH2mTGt+BjI70bqNchI6D\nGLQqamhyRkgR3CmtBLMrgs8E3pkXCQxtt5CYMpdYSWNXyeN4ZP76a32O1mWt\npbUrbWEW3f1eobhkNXTtvOc5kLJ8HXxT8gyWzfxngapZUCDnSvgr3yhEQ5Np\nX7txBChrb77ZtUQjr1au06Q6dR+XXOk34A/ty8LstNmtaLYCPKyreGMsKVr/\n7qiIW2ug0Ehl4wtIOyQFvz/SiNkm83nhIPXPwgktj6gdfUwGcwUzKjm27h+J\n1yzRLNNYYznxFmf80trf7/4At4dPSE1zs1UTMP2nr7fI6+CJdzBcy7l+MPMi\n0yqetN5H+kB/m/hRQS0uKzy6fePeL96nQt3OvPM8KpQoch5bQCu5caGBulzm\nQ9i12XlpnWAUJEharmP0zecP7gtOSGKsEbC2ZDAL0+zqN9tFObes+gy3sGPu\nqli1c/zc0aYOneazVQ340UHK5QkOVBGV3D5UM1EFr4u4ECJc2Xxlrnhc0Bsp\nexVwy5/eWo29p+8UyXJStFrRM/r2/WHeoU3NlB636WOyxZklzPYV0goGM1b+\nBcox\r\n=HoZc\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"34b4d9d0fdd6b65308344880ca9abcb67a41ec58","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.c9e98a125.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.c9e98a125.0_1576606163275_0.4674059798997259","host":"s3://npm-registry-packages"}},"5.0.0-canary.5ffe8f7e3.0":{"name":"@material/shape","version":"5.0.0-canary.5ffe8f7e3.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.5ffe8f7e3.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"abe87d5956d20bdcb276324d454efb7793658c57","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.5ffe8f7e3.0.tgz","fileCount":7,"integrity":"sha512-vXJmk4gLQbJtU4O/7aFcZfM0KXnY2yARWqP26ngzpZOT2o9ggS82lrSVa0pi5zYOesBYR5QX/RXoHrgHtXASHw==","signatures":[{"sig":"MEQCICSQnLMD9VJ2X1nL1Vpk4g3bMBLJajPy9Oc2aJJGfuqKAiAXrqaUzd6UhQrbFJq1cZ/1fZNvN9hbN5WcBPZaszj6JQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":16145,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+VeeCRA9TVsSAnZWagAAWBkQAKDpvVoUBSYk/bLAXa/p\nKSp5mbIv2qIIuBE46L3Jh8sf7ntijoeVnlQb47lFkZ5PumUIC3tGXRhl9Kqe\nqj66z50bXbxVJXeZZ7bUbHLE1bqNyd/Est5V4gV6sYdRvsafbCULnR3PbDbS\nA4Aj12q+gf2cX+emBBdSS/aOZSJG4iRPQgn/5Mp/oj4uKuh9LrE4yz7C03A9\nbE4ql4b4ZNr3hKPbpAizVA0o7cD1Yn4I1f7M83etdW3b0WDKV8XQgPbIRDBr\nmCfFgnjPxG1i/0viFzRcj5K3aK6pyzUPvcNMFTciRvLMIeHqn7rbJr9UpTpT\nGx9YuQTLLzC7MB62074K4PkHlFnb1cy3mcnujHE2QoOoddj6abh4w9nv2e4j\ndNaRR05RrEKgtgOOgDdsSeLJDOyeDZ5YE259vc7AatvfFVfovuoZnJZArezz\nHaIQdNEEEPgSPKXbHjUTJ1cT9zJF/Jwxi6ASqMBWF88uSzNuJJ9qhGYJlc0W\neorHuKNm0m4mPvK0T+keqBK8QWhz4DzeannkfOrjx/dLr1JxRk/7ooLMGm7W\nOjVwmAuzsfs1tc3Ltzd4dzkZ6PawlpSB4yvDecZfiJuQOuAtQT5ja61gXjxh\nkwBcjgu4QFcO/n6Jwx3VSyKIeLHN8IeIj+Vy/Ke5FYWr6U4chzocybdIrQ8G\nK6fv\r\n=06gp\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"21e7c11057bb3bfef94ff10e24676b9da6f427b4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.5ffe8f7e3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.5ffe8f7e3.0_1576621982309_0.5292980238868152","host":"s3://npm-registry-packages"}},"5.0.0-canary.47949b08e.0":{"name":"@material/shape","version":"5.0.0-canary.47949b08e.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.47949b08e.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1632a3c0074d7f8693f4c16f0c44838c2e414221","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.47949b08e.0.tgz","fileCount":7,"integrity":"sha512-s9URQ479iqqaATXgaF/ErPZaSouc8OGwma4lP1UbPvW2AbEhZSDeHYSDQSfKULJqbRfqNMhHt3h2AcDk1of9bg==","signatures":[{"sig":"MEQCIAGZrZ+/PDeeEu3YxygY0HRqzv/rjQPK1+SjYclByn91AiAx0QqGOGcz0+K79xAJ+/A2S9UMpHQcfQryhZnpTP2mcw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":16145,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+mSACRA9TVsSAnZWagAAJaMQAKL5KFT14ojHPEwM8p+S\nfIgmieKeakOOjJMDg2xVDRIxMjyicGObMLaZDLQV2MPpTvcY3wcDPV9ZFgZU\n3nhAi9UIm6MC7vN3X4WaeXcxit8Cmv5+XkWF7hs1VVTxmbgNWqN7pR5vFaqy\n3BBrmS0f6dwJQIb+nL12Mo63XDyuXASY7tJWFCJ9yG496WeSgsecxQmq2opT\nJxIfTK4hq/45zJrdV2VZ0i93ijuuOabGXHcE2935r5RAimyU3uTp4dNXgSLS\nQDiKnOVUlGMgaiInDhvExa1PncwpwX2Jqkvag3oFp5d63D0zAbu+2n3WUtQS\nu/iJ2gAFAr+PC9YMbH26+x0OF7IW7bnXy2W2tDnDqxz5OSkrO/PEXRsHaNml\n1JJU1wXnGLdLwPuNAtB3sgRH7kSyFgAIz5byZqOTdXkW4q8HC4pXmXosbc0Z\nDSCqdVObdwn20h5VLSpFo5iEnEXZ6ECAv+YUbHUJdmv8G4WHwvfYqUsNg1wp\nYFczC+mBTIZLZkvGNGSsrWRMVD+A6NhS//PPI9+bunIhbRxtd90sMB52yFst\nmtd51XXnUlK/E5AtLr/t/Z7FCFWWZlWRsIHLDN/T+f5RmAzcyoUiIOv/UwBg\nb+Poh8EXJTGFowlW7hNsFmZmr92hYGjEt1WYtTIAmW45DIao6DyIiCj8Ra/K\nGjFV\r\n=p5Qm\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"dc8ea470b79b9134800af9e8866b99949c575024","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.47949b08e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.47949b08e.0_1576690815834_0.9153517022551347","host":"s3://npm-registry-packages"}},"5.0.0-canary.b240bcc1b.0":{"name":"@material/shape","version":"5.0.0-canary.b240bcc1b.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.b240bcc1b.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6f6c5d97d70dabf321c4c7027504cfa7a71b3102","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.b240bcc1b.0.tgz","fileCount":7,"integrity":"sha512-p9kUbzIr6+FyDr4vbf9LvtcKiA0THj5hHYHjUSOpQ/dsTOn+isPwbby+2wbEjpjVune3eI2B5cb0moPN1I8bMA==","signatures":[{"sig":"MEUCIHlxtd8EeLjFp/LiK+wbI3lDeRgFKcEw9Dbu5yvwvzWJAiEAx2M2rsnM+TasRSxo+J7ahh32fZE7vrlis2FUR1UnX6o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":16145,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+nsHCRA9TVsSAnZWagAA6xEP/AhPYSIixs1i6zW0TQ1l\nvUB549koSAzuGWqWga+WEzmF+LWM+Rz1fzHXDdQD3KQ0U9/3UWugAY/LLP5v\nw3WedXg1NDaQsIoC5XU+gjuig2mUJuiRI2WhplLqnSw22M4p+Z+oVgMBdwIS\nWILuTM9hmbpy1TDYXCuhZ9oUk0qDGyX+C8NzYUW+iRvtNKSCjARk63p2Ij9S\nFPTmF6imDAhpGvNWIhY9yXaYBX2oLtnVVkRxEJ4RuAgzDarVsRXFXjIduQxG\npvgp+6g3QIHSLxsdcYWPR6J8lxdVRw+vAO+Adb6gLyK34szxBelglraTV4di\nY3a5E+6YMAa2ywsadfQUNWHgl7InXow2bTb7PeKChTMt2zAvDIFBQvhh6EZx\nP5M0JUUE/3WN/4sZg1UQtN68KSBHu9saer7LqSGYx1MepQ8QjmcZ3lFaPWfL\nzVZl4R2FyQuEvbY5oxkdPujh7jZ4ElsbjD96uSk4Tap0LI590IT2A3Yy1px+\nLGItm/aAAAU0MhvFJmsio7M0s/LhB+aNr40Ju+AsDgEczRMj0cRiwmDD9ZH4\nGkbBQ9uXOFPFHhsfjSkmPOJ795h8rm56TYFa4DITcS8uTI7+xfO20kclnv2c\nGTPqrBSi0KrghmlhFsno0jRHqbp0/M8oe8i/n39CYejo2ibISK6liZAvnNIO\nhNmS\r\n=g+E9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"9915c413ced383747e1ca7f2069e170e38517b46","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.b240bcc1b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.b240bcc1b.0_1576696583411_0.5320548872836848","host":"s3://npm-registry-packages"}},"5.0.0-canary.391674a26.0":{"name":"@material/shape","version":"5.0.0-canary.391674a26.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.391674a26.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d7ab9e8f9883aa1a5d9232c76e52f3f3abfcb489","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.391674a26.0.tgz","fileCount":7,"integrity":"sha512-05y88HTzhT9dhOZf1LqB4P/nq78pkrs65vxY/poIzNVGtXmQETkXMa/6rOtzAjGFCc2i+yALI5WGTJHTI2W67A==","signatures":[{"sig":"MEUCIQDL4HTz1jw0O12c2iwyxCoMbPJFkeIY+qgAeUvjmo3OuwIgY++9RI/0IQoZJBVmCGm8tJD1ZoofWaQHh2sRp8u5nrE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":16145,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+nsYCRA9TVsSAnZWagAA48sP/0G07K0yeSZPTjXAI4wJ\nbnLC4Lc2ej+7+EcONgAKBbQ78tJbOyrYPc7eEjci+lhBftTgLELGLnnszFjd\nYGZff1j5QLHRGVTKQ3r+cGr+8ICVr+T4YA4+qC4Gyj2GLaH6wiMMXQo/JBJB\nN21Yb1EiNsjagSJzrLqq9vydHqy/ISPvnZ2sh3bg4TyusarCDS9k5CtP8ftc\n0vDBfbCp3T99HEjPftIGWglDeU7BhvDAV2WL8RkBnItDM/jxVC0+0kLMzi6B\nmkZPxW5HpOs+Xs4hwz69v8826HUKjNRzD6bwPAypdDGDtaVUoCaMn/1M9ox5\nlqW54DtUR/yqLdMje0bJDYLER0MC8HyX1pthtTsfW4WpfWIjSjVWVwIvg9Fi\nsml54lHqyoj7bj02RU1ULFRkVAsm3C4bDtyFhFtXlc713J9fSurHl6Cq23Uv\nk5uX9wMkdDS34lwpaggHJHfe3iNvQlZO1wIhcJx3uz0X34tG4YLegBZA1cwX\nyQqMFLOHfOHm67ob3vAPCdpfOP/uosDEeXHDTFFG1sHlQTGCrvwGjxyKtz1t\nEF6get6b7zPLfBjmO4qOtQezPMJRFQS5ErS+6MqZggAQFRgYDqaHLP62u1KB\nS83rzv9tVw2mXn69z2LhIjMqu1b0milggoy+84yhcCBGiuJ8TtuRDxOZMGtU\nS3Ji\r\n=pBSq\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"aa67ddaa5956be1096b1d442788cd4a5565d7598","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.391674a26.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.391674a26.0_1576696599939_0.5044819030835255","host":"s3://npm-registry-packages"}},"5.0.0-canary.c4837746c.0":{"name":"@material/shape","version":"5.0.0-canary.c4837746c.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.c4837746c.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3201acdd273e8e966cb07e3eca73806747436d93","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.c4837746c.0.tgz","fileCount":7,"integrity":"sha512-pRXkddWKU+2ED1yW0est3Sjwk8tDdxJRVQLWWt9thg9HEwM/6AIGoXQuy0jfXQEd61gwc4adWrSG9bQgkz1kAw==","signatures":[{"sig":"MEYCIQDMAr3exLzV8W1mQKgV6fjF1DwsLKfv2YR5She6YGHL/AIhAO1eIuSlkoewRWNHEK3hUPgRnTl6GVW0o5AvKqK2niI4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":16145,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+n9ICRA9TVsSAnZWagAA2uUP+wRxMO2BI2OhthCSYE4s\nHO3+iWikSvyb944M30ZwAGo8BvdSZhrGm/9hmOYlHjaajp55MGukKIhtUwCx\nQbp2SH3R87vshWbHAa2MtkRHNFDdCPeUEgBCl6r4TBU3r8HirJUrpiqDo1Ii\nQX09wx59tApNjR+lngQ8ewVV52yFZebJ2gvqdFwj9Y6ui4Mzagzkb5K7bKKI\n1xYrTyRugZvU9VG6VxfLJtXocBFN93wbAViJtY7aLgPC6V3HI1hCLpseVcG4\nKkyoXTqIzQErwDY3ToPTmrJPZk5X5vxF+d7npietSjh2cdD6skTg6c8jIkPO\nh2bjxeopvvG/LDKEBA/w1R+3fzT+EwAKNahIvv2fJZBIWCFP1NFJ/oq/y+kI\naDFM40wI2LM1cVV//3tMJicEEfUNSaI4rhd1z7UdEeiwUqN4pS9RUuh2jNB5\nWLxOQ9b6PyKA6VYjlZ2eK//SPcwYuIFBHPpRi6i+HHEUYuB3mZDgCTIiMezD\nrbIJP5cehXPHbot9W1/cYOlZE9rS5WqIIevEur6ocWHyIpVezI9EZ1xuUrU/\ngWhgBN7z0EjmO5sPVnWWyYUAyClxDeepTHcAgDHlrAqzNtSn3nFRFZFiaAcR\nMjZ5xosZRsez296ZTyucDEDS9XuRywCbDggbqQLqRXnDnlUmI9+lREFynnas\nhpmL\r\n=v0gU\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"44ccab29aa0b806ec249d5f5117ac9f5d82fc7ba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.c4837746c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.c4837746c.0_1576697672325_0.5412212162395544","host":"s3://npm-registry-packages"}},"5.0.0-canary.e41a70425.0":{"name":"@material/shape","version":"5.0.0-canary.e41a70425.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.e41a70425.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4fea89ecb4855399ce3dee2bda1fbc2b3c6c5891","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.e41a70425.0.tgz","fileCount":7,"integrity":"sha512-jpIw/gJED4V/H2XfjW2H/Oocq+AaK+aBPDvrW47kTiTG6q63CB3DkIybiJ55UyqgBdGTgUCRNzbWJCAfDqPsXQ==","signatures":[{"sig":"MEUCIDAGD/sXcPirljGWroeQiyY9U1Y2q3geKyZbXWeseazEAiEAn6jy4yWo2p2cXcMtPuqC3cMta2PIEMWV8zdi485qf1U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":16145,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+rQSCRA9TVsSAnZWagAAi3IP/2j5mOmeXObHMFmBIfA8\nR+wkCY6hsyw4aW52Jlc4G2WntlbymyiIwsTzPpabZoKipbY2S33IeDBRnvcL\nv0hiYE0xiFiF3ayzPGR3mtrbEIpHopjWYxeZlXAWe6jJthwpSl9JXvx+yQyn\nebWVEmFcBTmou++KdjNxOmUC1a0QpEtgY6WkqKtnjGLKDmkMZHuum9SozJzJ\nikdHlkL79dDRo5oRe8vl41txHBcvjtZa96uYqLiyS7a5cZfVRAudCWjkArO9\nnt/s2mNSm4N6qI/7ub31CE4xYbI5FtzIbPDfllOLvl233oasT4rS6LWDwtrx\nkVBE2BJtHB8fsYAwXQ60HwhmfbsEJWpNyy0QpeVH0N2s2VcOHWJGne4jDekp\nkux1eJUreN7+i2yq35NeJGFGP5mlMCUAHlDpYt87zGYHFT222qQ0lk/JyPH/\nOSb2UiQNj3/SevlwN2FPPcxCsGxCRBrQhowAlLwLZpAIfuAWiTcBZWIT+vLm\nvJGYrhdDaPmS8X5APN1CqI54ZWNRKFuGJn3NPteZYdNc3ocDhUBIr/3xULCt\nh+EeAKE4LHRNOzzeEQQOshcLz8zxTOwgAXWIVKYNKK9AEQO2uyFzahhjOu1M\ncQISzm2SWnlq42aNW/PckEh9fgANBZSzUFChBS2BfGOGI4x8pR2cWQo/BtZE\nkxH1\r\n=KzrN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"2e938a63bb3297bc73cdf8f1f206885e2ec84a6c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.e41a70425.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.e41a70425.0_1576711186299_0.9535582726183718","host":"s3://npm-registry-packages"}},"5.0.0-canary.bac43eb43.0":{"name":"@material/shape","version":"5.0.0-canary.bac43eb43.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.bac43eb43.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"66c046e54c52d9457c499f99ea5c1410a85e0003","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.bac43eb43.0.tgz","fileCount":7,"integrity":"sha512-bkc23WJIkxRn/1SwPJYEwNDeumoPKiekgzIsqm97Ty8NuzYmt29KD0FCWRbx8913MOkFiXoOxRGXetiQCITOGw==","signatures":[{"sig":"MEQCIF+IOYDZ2JmkT9ID2hatCoK0oU1dq1MpFhT9nlzSdjgiAiAucsHfRtBwvvndyKg5xGEGSE1lSBk13EiLd0BQDl4QoQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":16145,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+rT5CRA9TVsSAnZWagAAcKAQAIfLrx+pIXzPgbETnZxU\nmLCkjq0rNzv/JYfh3dzZZS4MSYqnsdtI/SiLRDQbdzxxVrdDmFLACwixWt60\nhDy6uKC7IVhKvIsKQjwYM2W2fVHREKabJWglIM71ThopGvHuGv09yMitKtIJ\nZJhIHoEHjtGG/nyzjxVbzuDNPrPIsDi9iR/DZPoNVX/oSPqVSUUA2ByDsT0X\na9kmt7UsqVPYc7cDhdTmuXtFXjPE/HaGEyXItPbMwfOlsYQ6e5O+7xp4yh9U\n5w656W8jI0XUoq1mOy8BJrVZAz6QDYRbdBHYgnT9bOlt1kg5IMAIdDqHL0CD\nbogXpglzofADTxvdmTVMYN5TNR2q+S8aZ6zhZgFiyyBamqFXUo7YZm5Mlj1g\nFOKRqGnrZN80e++tU39UfzgnwmEbbz+DdqSX4VXQBvPiqmmAAgBENpRvEm0h\n0wvzYoGgHBM9dVL4yeTrXTSYorUlsh2rdExN7IXRtmU9enplazMe+J7iF4Z2\nEPtVHtAJYVGqQydR/SM2fb/5BddzAaYuQl0i44T8SblGafD+6+jxdyLMvB2J\nqbcJzBMMysC3lvNxHZ9qSpPBmDpyStuFWTJYEui74FsjJOW+IMCibeLGt9jY\nCV4cSBb3j9xNCqe5CRaRemAalyAC1+jUE08KtoR8KQbglN74NLK2TnegzmPB\nR3zW\r\n=UDV/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"7035dfa39edc06f1b58f72c5e285bd2998747232","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.bac43eb43.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.bac43eb43.0_1576711417013_0.41969966498989764","host":"s3://npm-registry-packages"}},"5.0.0-canary.2e491de55.0":{"name":"@material/shape","version":"5.0.0-canary.2e491de55.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.2e491de55.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5dfbdae07fec9d2de30479de60fc9886749c7b36","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.2e491de55.0.tgz","fileCount":7,"integrity":"sha512-94PABzaSaSW3NIfuWeNl6JMNrLRkUduRhdhibtIxSXU/qrBxE9sjOP3+wwxvjvyrdLa8EF3E269a5Sa+nxWRHQ==","signatures":[{"sig":"MEQCIDRi8nxg9xgdvhuGNy6ulo6PbaqbesWtuTj3nWc5Kv4xAiBXqM97ZtMuqIfLPVkcmdlJ4wzq3dJ0FIv+7NsbCuLPKA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":16145,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+1W1CRA9TVsSAnZWagAAHzoP/jyCjRwfSSSh+HqfTPUr\n6KW4Yd8NAqhBf4YNaOWM/51/u+nfb7MGrT9QOjPWykv9gtpcMdebR5USN+vi\n5zdqyBEltL5ln1UcV8WteRMK64q3L6UmWevAufn+Q6w1q+RlFcLht6GDgNVT\nOzkXc9K970G8JDsWLmWhBJqY3aBYk+YUPqvR5q8zWSkv7S3+YJQ+UyHFlMIu\np14Jts2QRtXmnlJpI5U4ARKP/DuYkyJu1zijSu9+TQO4QV2x3LMCxY1mzAlg\ni4S+nc+Ac6YLCK1Iu70ta1kWEidWICeCnDXB3vv9yvmDnjl9gI2FEcCHkyqA\n/bEAF1BgevUGTJpV96CgbMD1Flqw2ni28xrQTummj+iPPTMHoEpW3pZsDRIt\nExLZfJOQSQtHGoN0TXzIJaTAzxz3fd1zxGJJjYUcldxxe9qECFLOsGmbFDlF\ndlJlJ6MW2zBILoAc9/9Cjq5aBpTi6uj2CSIPptdwwLhkW6hQjgO+cPI0hNvS\ndxFyNXsTnRBLMDf715bxYwZL2KPw5auBt1+OQbbEqzT6+yKpfvHo6f7VnEns\na4FraAA3eeB8pInJixKCOupaLf5j81gVOAiP9jAmuWeQNPv8roY2z21xqf+l\nuo5NGNhQo8/mT1ZLli1LEOxqe8IvKN8LvsXMVgLPm2/Qkgv7mfrxBSXZELER\nvDVH\r\n=T8dy\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"731b98f2f9caf1251d3a82a3abe09828a92eb434","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.2e491de55.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.2e491de55.0_1576752565406_0.4049731919817703","host":"s3://npm-registry-packages"}},"5.0.0-canary.ae101c144.0":{"name":"@material/shape","version":"5.0.0-canary.ae101c144.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.ae101c144.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5eea4ba680d7cc951ab906c874ea9797a6da6a8b","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.ae101c144.0.tgz","fileCount":7,"integrity":"sha512-b9LZyRyYXCFnzEbqnNIgGRFoSoDoR1gLuUnReNlkOIDUgjS/QeqU88Co5mwCAKAq2OGvXqiB8Bg+zb+xPbJbiA==","signatures":[{"sig":"MEYCIQCV1ca41E7H/JdWl9SqClyiBYOTWhonf8iisKw8u2gFrAIhAK8sBNN0YeU5F6QD1EJaKrQp7GIzjjzslKtxho+74mgK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":16145,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+6Q8CRA9TVsSAnZWagAAoUIP/i/9WqJj6y0xbGtGcnqj\nWToV/LH6ccxymWa3qRJq93B6JjvcNKWxacLO1GYAyXQOMxLZ7zvOgvgSJuFj\nVJjyfc5cGxoh9LWI1RCi6prLEzHxnbKpbOC6MrugjihFJ61Z72CiFRK10MIZ\nRNBqh3NAylnjpx4s0JcA3uz50ff4J/Siv61Oy35cnRzWYiApij1f8KlZeN6I\nGGiV65nyFG55tr7YvuoO4kJzoXX7Qn0O/ihMl0ai0TUCoDPU4Wxd96OAY9eF\nGhhj1whhZOLE1qU5v878wTKSENj+Qk/bh3Ex/sfHFtJK4FEQOAmyTBk0sD4S\nKTwkpQaYN9pMie3qeedIfdnHY3PkT3v037BUYdXba5yynVpLKyJSlD5TdQSO\nyR19Onx3BNzK+MdU06u90s70MEsw8O3XbbMABXK6vUK6WmNwesFSdv75slHT\n/61tkhpEayCV/4+71JGM3YUDBjRY7ahKBB+YHIU6AOwSoqDlxb53NzON3yIe\nxM2x4AVxf/s4/RRzD4Vbj9k5r4idiyEhrogqBSTZ8gQjgNgBRt/VG+Zpfmw3\n7u/BbtZP1zxSaDeK/WkezJwK1vby6uUYd+U3B+8N2/0aSO4lgpaIFFGB7c5D\nK519qi5NBqZqX20uA2d7hk1SlurbU7EJp3y1q9GNgeYLCmVPeXFvjAJZ5BlR\nrQbz\r\n=85qv\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"d11f348d85fc15df510c3e33822ce23f44ee661c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.ae101c144.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.ae101c144.0_1576772668236_0.9859142264554968","host":"s3://npm-registry-packages"}},"5.0.0-canary.a51c31f26.0":{"name":"@material/shape","version":"5.0.0-canary.a51c31f26.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.a51c31f26.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"64cbc7350301bb21f009b3eee7795a630a7591a3","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.a51c31f26.0.tgz","fileCount":7,"integrity":"sha512-1rltcl0JGzQoXw81pO+M7h28cC871kE+gjkoi3G4cUd3sYKY3OWBy88+jWgh/utY+8VRqCrKM5lJwm264gmRAw==","signatures":[{"sig":"MEQCICsZAGPLgWqX60x94t6Fq7Hype3P/OA3m2Ld2cgWrQpzAiBXIbA2oKGOT+1qV8PKPh9y4/7aOP+20R3x9NCauEBk2w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":16145,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+6/YCRA9TVsSAnZWagAAEj4QAIWgNJ+GU5nkuSfjlr+j\nDHrQpMG4MGbe9gMFXk6p1bVIAJWwmYtGZzOrF/0aRyMHqItSP+G662m4oahi\nKDBjdW/sSQcXxSSeX/0HurGPeEyf38MmuQ/3j5cyha1cpv0t6uvvWs59H+BI\nrRFSxLuwqb9/mw3Ly73E2mZtIqwzDE8G8nfLloEJa86gzqBShzaGN4Pl6UXP\nfUA0VEqazmx/h5xWwQE5Y3SiW4HnnZ2jK6KvoJjCA36sRFkfQNwpSM4yqk1o\ntstDZKLz+7C0LyaEMdE6djFFZkb7hAZPFpzqlHxgIVmwSVon/xancoxEA1Of\neI9dGlk5UaNl3WO0Au2UCWEPfDDHZpFdM9W1pP2hQSYX9Y9+5DUkT4Y9wxoX\n7hNgxKH6Y5GtND16YNkDn31SBWvli71hN/e0ufuCkjz2euDmQ/QybbPzBvT2\nGJyE87beRtXV35DiTXVvDsD+kFnbOgd4KaG3hTPz65Qm6FKst5YlZjwrdegM\n4Lf++/doldYl0el+eBD4IYn/uvCkBmk2DAOMQynBvBkg/BxiXwaAJyBGQnG8\nnTvbx1O8pvJKFzx7ov+SSTMBZ/OVyzkONbCskMxr3Cex/gZ+nB2o5LCE/9g7\nHwKIudSnFTB8anJfCDOO4cLl9d7AeSJzjw+QzZ48UOxCKOSYpC2cjWwWcqaY\nHUlg\r\n=4pIL\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"e2dd52b70a7e3cd011647222c15955dd4535cd6d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.a51c31f26.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.a51c31f26.0_1576775639972_0.12009334843204478","host":"s3://npm-registry-packages"}},"5.0.0-canary.21fc4e13b.0":{"name":"@material/shape","version":"5.0.0-canary.21fc4e13b.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.21fc4e13b.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6208e619aeaab28a06acebf1d148afc6e1a25aa3","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.21fc4e13b.0.tgz","fileCount":7,"integrity":"sha512-/XbPA0cmlyM8vG9VV09X6SYZRvbvTD8AHNTY6ETYzDM8RWSfkz/1GQTtIOuM6A/wWG1a4b7tMhfUSAbGolIBgA==","signatures":[{"sig":"MEUCIQDZfVIE/1RY+k5mUYP7cbTMtsvNRV+Z4zK3Zs/RpSeycwIgcaAuukBees6pHBDukz/BRzY54ynnZJdWOlRJ1Q4trec=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":16145,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd++sZCRA9TVsSAnZWagAAi90QAIzotXoJTsLAG1WbAwVc\nOXfFgbSOnDG2G151c0Yg9AW2yOgVyidiPQcqWqm1iafelxuEkBMr/mxQ7P7I\nH5sRDOGwC+i0/bPCe/A4fgoPpxmLzIYRfteF8+9ojd0pXDjiCpHOrgtqNgKm\nBWLeXPmXKWTKsHkEYz7aj2vfl4d4I6Ad0fg9NmsROwE9EDOFWqtfeoxyQlS1\n2IUHTSRjpEUSuT8R6YoCQCiPoo2ZCn2jqQn2Nvaqj7uvCEHzNalZ4e2Z8hGY\nruR+igr35RGWA+hhh2dFRp9AIJh89PGEGf0k5ugVqbLoxc6j3Yppap/gW2+4\njxK0pcmtoPEG2lSwvWD8uo19C+Ka3CjNU6G4xyn5pN4eW8iSry8bZI2ULf3G\nVRKe8jD6QGH0Icm1xXlHImWnWLCYgr+jIaT/oV+Nnk33+CGRec4qy2eAZJsE\nFLECYwM2cQ5fPstao5Bs9Aucl2tq/HiGgYk3RQCVM4Ttm5VTuWePAxGRe+9f\ncfMC+hUYDhTFO5wHMokHaKBZzGx6XRV/INYMaRNpFLscNiLffUdIHVYWIAr9\n1diFYCeZEBzn1Sf7RVquUoarwtmSuhvujI0HeCz/w7Wmsssa/ddWQ5B+KDQ0\nQgbRiSRK/KpNhTB33KUQmRs8mWSlSpqRDmYd/cwOxsT3pH12ULCkklV98R2G\nl3xW\r\n=mVby\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"ca71d599c2aed234cb9376ced1aadb512b071fb8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.21fc4e13b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.21fc4e13b.0_1576790809604_0.32335507806952957","host":"s3://npm-registry-packages"}},"5.0.0-canary.d2ae6e17d.0":{"name":"@material/shape","version":"5.0.0-canary.d2ae6e17d.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.d2ae6e17d.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e9dad38842378c35dc9a516718acacc3d31a79b6","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.d2ae6e17d.0.tgz","fileCount":7,"integrity":"sha512-m8sajo1rVSx3psYaK+VMX7mbYN8sbvpaxwknMrlaCmKXj4ZNTt3HSNUkB/nyhwJ6Rv5LtpevYLxWWqqnl51SFQ==","signatures":[{"sig":"MEYCIQDCTgoDspfQAEXLGkcpAqthQgHj0boq/2stnH83VF/CcwIhALuHQGocZ/eHGUUBSMKuW1Pa5wxl53Sj3d1u04rt8gcV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":16145,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+/h4CRA9TVsSAnZWagAA9HQP/RH5YX8T1pzs07mHsGOx\n6Goj+ziCgn/Kpt6M2Q6cE8oOgBDwZXncMaBWPYRD0/CcsWl7ADVBKAiDyCBE\nnxGZTjb1HgaXup1IfBkWpRjMSS67ZDyaNTuioSMz3RdarmD4j6fKKXWDyc5h\nqhVir26uwzKl/WTa+tVW/38Af0naxEiJXxB5kkbm4oXxIEMZolVLALDJcFyz\n1DPNTtZqZdnkcbAZYPmuVs7oaT0SlvfJjsCO5dtyyM7OemhQuSybgRAPTxBB\nRy6Hc92clM87YUqAsCs3n8+HJF6qjAVk110pTm806CXYV3m6zwU7s9xPiSKW\nzDSY7EVAJEkjwYAk14OnI/bckQ0JORd1dbTDRCSB/ddRRrY2TTl0SdF2+wDQ\nwVccF2UCt5AEAHjHBG2ofCca/zHc7RUUGUrzAVvgMP5Uk0cTvz/lYw5FNxcN\npYzfZxwZrIo7qmFBnJthSWNr99NQhfy3dSh62shPqM02hluxkMtMAMq4o+hF\nIpRSEpm+kuvn82FO1pz9dWSlj9TRSPLEdCw7D4tkue/QbOwTX3Q5gpjpkFcn\nbtbEGp96N+DdA2gIGhwXL+aEsRPj5QwDc0pkpy1E19mNVCtP4bwljiOUsky0\nVkI1YJ0kmZvlGzhxyv6pdYuthPvDZgYWKKC7NCX+9ttJ0AfmIEYCMCuv3zAY\nfqPL\r\n=GdRb\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"aeb622d14d533f70c26396fb7db6c8bc48eaf8e5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.d2ae6e17d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.d2ae6e17d.0_1576794232037_0.7011477750126165","host":"s3://npm-registry-packages"}},"5.0.0-canary.ba30399ad.0":{"name":"@material/shape","version":"5.0.0-canary.ba30399ad.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.ba30399ad.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0feb5b3ce2ad5860edd86f038ef84562301204dc","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.ba30399ad.0.tgz","fileCount":7,"integrity":"sha512-tVeeplDm9vQK1FoQUbD6AelvBwNYyVyDcH0q6CXkJ3hSobh8KvNj3K4nHNxY/Mb9hetQLiD7ZNWOFxNxaWEoQw==","signatures":[{"sig":"MEUCIQDKHdYMFksrij/xXT4Usxr9fRyzlxKg646t1KuR3xUdHAIgKYso8cOpIPHOgp2ySRHxlMSF19ER7lj1wlsO0ymD5Z4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":16145,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd/B9ECRA9TVsSAnZWagAA7ucQAI7EL6oGTlMjaBMffRcg\nisVrPPxVyDCPWTAg/Q+5B4bEXjSZ055j6dSgR3cqEZOEevStpH6hAqvYOg2a\nK3IrXk5YGkwvJbTUdUbEBqNhQ7kpU/Xi+8aFHejZBvZE7CwM+fHekF+4r65u\npws/51NZZcetThMBoJtmzMWGhdKsHPAWEvdvBqnwwy9Ve58OoxDm41EZdZ/Y\nu92STMaDfc6LeiBhHxw0e9+5a6F8JXen2eioYUO/VFpbEPJA3okA4WIJv1/g\njFB9OlKuzgyM4hFdvTyp3vPd+UF9HN99eUaJuzPF5NwXBwTJ9I3sp5HW+wiT\ncRkAwn5CTm1/dc7OVRE1y3Ay+HNGEbVotsJ79Vr+p9kWXrXJbJxrEOJ41jF/\nPRNc/r6/5/FXTB+xMw1rxUAxSE5VlObnxnGZbgyfEXGFEUuhGOQs8+31iDUM\n9Pj7ZbYP+IjGQ1YmQozZpTyDQ5vAO91bDZSNwyu4DVmCLjB/ZYrgX7sME8Ro\nCPss8tuAWgdA898lygUZ+ti80w3gYPDI4+1uAfithh+6wisV/2CQ1R/kzOn9\nWdXut2LIHb1iBKo4ypWAu/Fe1SE/FZIZ+KzLv8lZ/9+LwPVDYFvn2TlHK6Sd\ndDWL+vUYOAkUhixpyLz8K1gcsgDq3+0kCQuUFKU0UqQXGSnDBxMN5tJX8hWK\nFquh\r\n=TjL6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"75ab7f122d8d469963211d9f9591a84602711f72","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.ba30399ad.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.ba30399ad.0_1576804164185_0.7585439375854266","host":"s3://npm-registry-packages"}},"5.0.0-canary.a08ccec35.0":{"name":"@material/shape","version":"5.0.0-canary.a08ccec35.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.a08ccec35.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bcb3c137a32ef9a429b30a59bca04adca199b3a1","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.a08ccec35.0.tgz","fileCount":7,"integrity":"sha512-3htkaCbAW1kilnOctnLCpRkAR9wTJoU9K+CZ1Awth/Z8Q35Y+xBymZsnGL8U4A0gpE8AWb3ebo+ucsgBdMATxw==","signatures":[{"sig":"MEYCIQCPm5UAm4V+vyomTCKkx5YXJYLKif/6/sHwR5oEDigR5AIhAPbz6ZB/Ujufqx+6lIwV+RyssDJJCxaHb+hjFjkM39uk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":16145,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd/VijCRA9TVsSAnZWagAAQnMP/RaYOZ/ca3zjcV5qeR18\nUdoR3SofyxcNmilNY5OLnNNkQ24fGunbmZUYGrzKkLDlQkmlYxkdQzWOpbxH\ngg5jGbV2AS3xhugy62NTkM1k+X/kZo1vHScFoPR/67DQyY9KMw1pUNTTVmg5\npEUQm7I2+/a7QGuUCj2jd6ivPq+7D0R3GmAdj98Fj5uvkNImRG2mIX5UCT/+\njw6auq/lZAqq97K6N48zexY78iSR8ieSPoTDyHzyb60TNeFhGuAvCNJIx+AQ\n1u59KDaWqYNF33jtNg+N8xgEdn+jM9Xh047da6KJ0mJy6rlZcDdAAYHs54rr\ngLSIdzdoYUzQwzcY38NmXdUeCXMH8g6PlUnWirPAXNnj4m95w5sTx6ylygpS\niR3T2ZHcP5YRd+6Y3+FdluHnYFpnLDnyO7+qtxtqL+6BhDKvDy4xiBSvQy1c\nrfTHyCTnfLojgW9zgeNIC0miyKWAWUr2njvGqx8HbyYmmv3g/e1kXzsWjLmH\nflXiAXkpDkOizAGBNrnX1GJ5cbDR4OXSjkAugmpRvXc52jXZDR7aDdm0OyCX\nvjtbFCyV/yX+c8UmyFfHWy5biSCfOp1zrf6fnz1TSxnI8jXmkitq+u7WmFDO\nRIwjoH5BcBJYLgv76w1Zt7mZZenTS1WTf7Yoy9/tkjFIg5DLsDteWoyxuSyy\nu2Tm\r\n=PwL2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"121f2cfbbcf425b2c92760a0fcf0301dafb14636","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.a08ccec35.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.a08ccec35.0_1576884387288_0.4838860111025778","host":"s3://npm-registry-packages"}},"5.0.0-canary.a2f75105e.0":{"name":"@material/shape","version":"5.0.0-canary.a2f75105e.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.a2f75105e.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"05d8c17069cbc33103e9223d76c75808e633c475","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.a2f75105e.0.tgz","fileCount":7,"integrity":"sha512-kXw4qeA/XmSuNR1FsTeWs12M81yPYuvzPfJQhg5+PsjqIcY82JJK1laTdPIqo5Y7zGhBe+wmhNPDp7ossCsLxw==","signatures":[{"sig":"MEQCICeEP/zSZJ4tvrKNS4dSUi8hsIyqvpO+GQu7QS0/1Vi4AiA20Kv/i2wlaeZXdcxMXgNwnjpezV65Cr00bzfae+kdYA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":16145,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeARnFCRA9TVsSAnZWagAAAREP/jwS6XmqEEVCeMHqMuWi\nviy9HlQcvkZityxhTkZKOLmgILW3jzJEDktyIGzB8ZMz4BvEo8kVEzpmL7Vk\n3VORE5qjbTQLQLG3yt2KM1dZdY/Pk/9FoqMjF/lmY2v8TNlMCydEaC793CeW\n083kTsvm0TGHHaGDN8qMrODjfiOGp1I3FHu3/nRuJM552B9aMVfpY9uT1PTH\nU9QsDpfPQcJk7iln0qcjlh8ojF6D43m10AsmGIRw0J9Bs3LwiLSkfqdm3lhR\n4VCXlFVfTV/pH6/eyuC8w/iIl5N6I1b/9Cl0nM1wGvReMC4gnMN9OsgvV5f2\nZGF+ul9wwflHM6O6kFZtJ5Uc0DtDJ5yhx7xzbMB7PDdq3kQjoNdgXNBvc9my\nCD2JWWnWgTVn6p48KtqQ4+zAk5gcVXdlcyi0KS2obTg2prt5orU6rtv5MGrd\nt3B0yVbnv3rLb3K5dmcAjK84lb9aKmgKAFMtIOJNKZK2jXxttKdd1DAPmcTK\n6fByQkdYsfQ+UDpoHzuN3XJZevoa59AliJhAqQmcvJEwgj7AO5XV5n7zF+eT\nZpeVFzRBgjUrmc/pdQTEs6n29NXZuKOV6VnIMltbAYs3y2RGqqHZ4CNla/MD\n+Yqx/FBXrlF1uwsDjWcoJQl4mgcHw6zzDAttH7uM9WsT3gMFh5ZWqGJcLEA/\nTm3d\r\n=hYqW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"7b2f4b595ae59e3e680ef1151ab400a3855144d5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.a2f75105e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.a2f75105e.0_1577130436897_0.16504526473525605","host":"s3://npm-registry-packages"}},"5.0.0-canary.c054a24c7.0":{"name":"@material/shape","version":"5.0.0-canary.c054a24c7.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.c054a24c7.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"155ddd36248dff66a6183046ba5eb6affc678238","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.c054a24c7.0.tgz","fileCount":7,"integrity":"sha512-S8vpYNCL3IrFeuh1vOgWKa/A2y3hiDBqlKzVQ9Zbxe9OCC8IFvxFHMSsoMRg/9bOdnOgOkSQLb2ntar4J6pUuQ==","signatures":[{"sig":"MEYCIQCF4LqMXfS2oCezg63Tjsl0ucJxemv41/jzsdHIQLdWwAIhAJbu+hDlWpRClDNKBJoOh6lgTBar/PuUH0ohuVMSKZ7F","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":16145,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeATZ0CRA9TVsSAnZWagAA3+EP/iMBd3lhaWH68G/ECGAt\nMkOprSMmFSlIj0jfTUj/mEyOiwzvwRn+MeloehAoeEDwaZygt7IUvNEDkhkt\nBpKAQuV0W4oQCytX3JxgdmF5rdSnCqKx268Ir5IDFkeR+06MLee2OeXeQqM1\nEHL66VmLZo48r7c4jwZIsriz+QEZYAV+sFuPKzEiyc4vZRK4J2oKk9n7zWYe\ngNSrq0s+0uO6dPVqI7uNeOvaaPrrLGqZyo2hsMMEpaa/0fPMllrKVBnt7blg\nOzmeFLZrkaM0Miw5euwQ9nBtxaDYyQRMlN6JHlPiAUYyReYscQ0QmcLvetiT\nGLjSbHcm6+iloYrYGzdu5MF0sxZAcePE3hhZSVNJ7o/qgDJn4ymvji2xoS2L\ng/KRWKJdBClQfaiBy7ti049gTKiu0BUNGmeoC/eImKWgdReAK/GuSjSyqm1u\npGMI/s8qmg7fcSQMXCD/2Ug/hkLjhtoiD5KjLmkmpOj+LoqroFEhzR4SsYD6\nZbnUp6kLJ55tluP6zb40+dHFrfoTciEoa30p4DtBCB+ncsBIRyhma0KQsQ8I\nCCQzsv5cVmFec0ZGszFu2B0T4j3rSMvSiNbI71Q73fexyNNMdGWddMI19EYx\nG02j9ktZuH9I29H1/9CQBCA4+Gil1DkAzBV9wGEU0UnBflp9iO2qXuTUX12O\nwXhr\r\n=bQSN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"4e2a3c12859a131938df8918a9f43b9146056488","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.c054a24c7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.c054a24c7.0_1577137780515_0.7735351306606917","host":"s3://npm-registry-packages"}},"5.0.0-canary.c6808c51c.0":{"name":"@material/shape","version":"5.0.0-canary.c6808c51c.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.c6808c51c.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"89711d6cdfe39e1d0d35bd096d6dc6b337d6a030","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.c6808c51c.0.tgz","fileCount":7,"integrity":"sha512-RQ8uV3Eucslqt8DwnAw/uha+Ccvocvv0m+6ztF7Cpa6QN1Oih3wqRFqU04tNeitqIb+SOCmWHjWN+fdk0QusIw==","signatures":[{"sig":"MEUCIDpMRze1IrEA0C6NnuzQiUxzYixs+ZtIg6SwnPV1b6tWAiEA3c2ZkA0TgUzjL03NqQC1LpfAIGB/xAtQNs9+jYOiYnY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":16145,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeATePCRA9TVsSAnZWagAAztgP+wadfi/N1UAhTvh1uuEh\nVyxO5AsBxPbsQ8sB0UGiaWukAB+hspGsLMpgq0AaR1Q2uOIKTPTZ6ljlgPD9\nk1qzd0syNLmKQ4VbI3h191pcqBRsTuxzYOmvJR4wU10TCAqQEMfaqFKUJXP3\nskCOL/JX0349nAsuBMSKLZSDrYmzteOrybg4gfxxz54jnL/4/HDhFCydBStU\nBXOv2e43MV1YzjieprLd4Zq6FhlICkbPIm2lTjeL+7UIEzn24UL5XPpchExR\njXGUpZhX4GVmVi0R0KFvTgPb+kdVmGoatndwBTu5QyWtPJ5pTs8YAs8HfyyY\nqWK2pjn7SosYTmpkpbSMq6ho427HEA94yQYBhtygJbE8mfhUmAUPPE08UVrI\nYIlysNFj9em42M7RT0B01uWZAhypEsPOfRzDP787FUPSGPi8qY/LHEkSp8B5\ncgIU2Hj9anHZ9paKEnTXwFHv92Kn41zGc/ZySwCcvuBzuv79YYD2IK2ZgTMZ\nlkJfA8b241WReYCrjcFnFQd+pGG4Zq4qhGiHPgnFOD2mjwZKFkw9e6D74yku\nB2C43NfVXh3j6eipovjav4eDlb9UV1a3xmqN66VIV14TjHWWJ2HyE+SjoBlf\nGuaswBAe8ZKimyKTDBzJ71g0QTyyi9RYmfhaPh04lvRFVH6zwHzHRBS15zii\nbJxN\r\n=zPiv\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"02ee460be616b30da3c6d5daa7eddbc5f29d2500","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.c6808c51c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.c6808c51c.0_1577138062783_0.26744416765423784","host":"s3://npm-registry-packages"}},"5.0.0-canary.7bce9cf77.0":{"name":"@material/shape","version":"5.0.0-canary.7bce9cf77.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.7bce9cf77.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"661b8d1d501aad1821693bf0c74e87a4c15b0d86","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.7bce9cf77.0.tgz","fileCount":7,"integrity":"sha512-K+4iC1gOz4slDY1rC23r+4qPeKtFKwHr1oG1IPVnpXklbqW/4KXzfX7z3ekwG5wV0Mu1bYk0KDKMZEQJr5DvOw==","signatures":[{"sig":"MEQCIHPNbiqfFgoNJg7XwYvzp0bqVIpjXgFm7pgFdEARsPsZAiArfRF2iCUxSIcQ5e9eNhEwgljQl2Iq79B6+GffY3jW7A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":16145,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeBP+8CRA9TVsSAnZWagAAoYoP/R9ILS9RJsolZ+8q95ji\nESZLLuv6hVIPnFjtQ2nRUXfaI++iG6Z2Uft78iIkNAkPGuzCzru8JNSx5/2l\ne/Jloke08jZ3oF1dTfxLp0p4oJXrn4wfQruuxoUEDz2MbsI2ocE4ZDBxu7uK\nA9bm+rlq48DKv5YwBRZTl0gLbZd3+FznFHPjQ0QzMdvpI7FH+cm0HMXCE5B6\nPqcV0PE5hM3udISp032eXBLPKHkbj29WsrbbYzm+CgkfhFcR+EInlZVMCwJO\nQ1dEwbYZ0vFQBjECyiQUeh20CT/TVIM3wHioKsNk86av6a6Yc4vFkLq4oGDd\n9MF7Ctciay8b1nGkP0ImQU1e2iDe1dKfinu8uOUPSYPIyCe4y/jE+kna70jj\nfEKIQ13SzmuHjAWpAJ+mJGFo65zq7HCsBSHo84zDoOJjedGJuqQ1LvB0uAKT\nxtaQR5Gbe1G3KWFmHYvgJN5XNsW5pad1AVnLoXvVO03YAt2YU0TLZAAvakAf\nw7VXVNzAqGcR19EvQ+LjbpB+uE1E7M1iQ+ZicG8Mhcplzvnh+LzBkV41cFyo\nYYK+FXnZooI1EBAQX1rp+BCY8lqdZzQDO537RB8jxiYzwRto2ct/W6RimfAR\nOthhWNzDdK/sFDDU1dB8qNrf8upDg9wMj5s/ObzAiu8w1ytTqrpDVB5BWm81\nYFIf\r\n=HjWE\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"1f5c1996d2328a53d1fc5cffe847b04aad48432d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.7bce9cf77.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.7bce9cf77.0_1577385915798_0.9789861151802586","host":"s3://npm-registry-packages"}},"5.0.0-canary.c92f038c3.0":{"name":"@material/shape","version":"5.0.0-canary.c92f038c3.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.c92f038c3.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d2c1b1f01881a923f30cb2e1fd4af90dd3b72907","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.c92f038c3.0.tgz","fileCount":7,"integrity":"sha512-lvG5RYvMUCU9p7stfx89ns8p127ytVEZetMjuOx+mQGFVCFyOnWEMUxiVrxuSdIwWQuZFBxltD+wBxazGk0T/w==","signatures":[{"sig":"MEQCIA1dF0/Iq5es94x+9gVFL0QAgeRYGy8gw8JwVUolWOMMAiAaTSYl5adtJyjT53J4GUyf+4JVVyEOPxhDgsmR7EGevA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":16145,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeCnQCCRA9TVsSAnZWagAAVI4P/jrKbUrhA4Wm2cnsn+Y9\nN8jkhMJ5e4UqVlZpbyK18Y3JOe3ZTpg/ph6QDrF4Ou88TFguHaxSkZxa1PEf\nea9OwLRYKH+fgZqtLJ/yB+pQYCU0haWsqD3/bAshWShPjTHUXLiMwgdu7PzE\nr1Z7HQozBAaNc2CmRHqi7YEvon4Yl2R5eLhMfTxa2GyH0Q2+XPP+75v4qxpV\nm7CTDgR4S2wTL7MwhgtFAEmr/sBdvDdnDr6hwzxoAbY0KFkVQmWQnyqlwX4c\nmZF/OD/M/eEnQsk9WHu3bMAHdPjoz9LyMoylQliPoSTHBGJmHOXdtUt5I0KS\nCxKZXvZD99mtS50wnFidlCL8Evn7sLTXoGiiR1yhhhZAVVWc/o+wXIHYdKZR\njlMAqqXPES3DkN5wznQ6BJxrqF241CVe6ZUBAWR5MAJs+y/h0nzp0dCMB2wz\n4XnKmUEaezxisvNdkdBTkuxSsGySXABvkoIHV3pm6tyBeQ9ecN/Jae0tAQes\nAcFHrQmqE+zpcCA6IaIdqdOpxY0hMqVyZUFcBaHZgHFror8DsYw9dGrJxbeb\nFgweniwgU+z/NNhohwBZrUkdYFZgmi0nguzthelVFi7yYGer4DUpReCkkedw\nNa9JwJQMOO0xNbIJd0Y71eDejO8O39NCXHcowrvcU97ZuUzSBNpekF3a2DUh\neYgY\r\n=pb7S\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"823f4f89b39f86d10ed69fa8a943c050c2d83a6f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.c92f038c3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.c92f038c3.0_1577743362108_0.34437658166191953","host":"s3://npm-registry-packages"}},"5.0.0-canary.1f1ac7558.0":{"name":"@material/shape","version":"5.0.0-canary.1f1ac7558.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.1f1ac7558.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c0f0905e7dbafc3794fb29e0f9b9cd7c36967459","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.1f1ac7558.0.tgz","fileCount":7,"integrity":"sha512-uzwLDRfZ4y7niUwn7TNj5beP8l6xRocxRJwdvrmo7pUQoA9cgUvlJQ95sAuF7IY5lpxm7pL8Kc6LKNVOyt3qjg==","signatures":[{"sig":"MEUCIFmB5MyTU/iI2XDsFc5u3IyKPcd9LbOzOILli4Q58hPLAiEA1ytJFxLMRkByOjscCgpE9SMYFQ0mbSSqkZP+d3Qgwws=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":16145,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeDlhZCRA9TVsSAnZWagAAu98P/1WMmS0b29EzFXe/M1Yj\n52rrUX23BXM8F7Ma7A9nJ1hpoxly+JVpCGJH2E9WkiC/q1b7QaqXNxATbnLT\nDYr84R+cfs2MY0dwKY7f44+b3/zOpnUMJOq3eYILFsviRASuJwQUrDJqMSpr\ntby5akait2KGDLQ9ljnoR43GxAc3NiP9WMSPE/um60fTFVllp+e405WC3dNj\n8QJNAhvc4uveAIhm28QZ5AOx1lWZp0ls/iBxXN1j5ufCDAY21A9GaFs+2Uf0\nLEV8mhlzRv6OqDTRJpxnOz3sBxtqRKt83EIT0JjNlmXGjfbGSygaR56gpl8S\n6PQ9eiOlPJ8X7SBNIEu+xwbNfRkFWFNZwhPOF5CYizSD7Ux+jOB7+7X5kwaq\nAyYFAsvik/0hN4HWca92oEhjyZPeoqVlHnzjEFan1FHPfaGyzlhTEn4bgA70\n9lXb82lSDPAhVngdfD9MF/eMxs1j7d603l9xUosEJsoNc9UBHPuC/CjO+3rT\nF3rAZOPpytpHLPO5pcpRcbitoQ9aHoUxrT/uGzur5MrffAKPD5mqgYjkLT6F\n9vFVUEU1prT8LljE1Vshdn4+mV5KneTQkYoDZmXNM2Phvhk3Mwu5YWEtEHdt\nJaArvsUWqJAFUCR4h87Hz74Pi6fmPyRGY6FgkGRIiODP0c0sgaYIlVYbSx1x\nkSq2\r\n=VEoP\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"698a9278145ef0b4e06e9c33d51051b9650c5b11","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.1f1ac7558.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.1f1ac7558.0_1577998425216_0.9845431120767767","host":"s3://npm-registry-packages"}},"5.0.0-canary.ec26e799c.0":{"name":"@material/shape","version":"5.0.0-canary.ec26e799c.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.ec26e799c.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"732864fb437466283115e2a62517532d4168f0fa","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.ec26e799c.0.tgz","fileCount":7,"integrity":"sha512-y8lVt6OGRrI1lUP3SW0cvlDIvl5dg40r9cOl1rQwCOT8y77nFrRqlOx7ZIYxroqYx9zM8CBRokYHNWMZ+2QDUw==","signatures":[{"sig":"MEYCIQCcZmv0QdIo4Tc3N4as5BLYPmHwXgQanPyo8WKZQYNwcgIhAJy5gJqg0/evzpZn7FrjNUPggedtWw2rT58CfdG36zFv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":16145,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeDmOtCRA9TVsSAnZWagAAWlsP/RDEn48vcWMLFac1EYI6\ne2apUsETH5Hn5aHhI9E2DY4jm4PnTK+HbFirPQBidtZEdNaqF6SHWlhFBcR3\nkUip4GVN54B8c9mKnQBRzP7gULYDiEPJrPYlKi6+UgYHDIsTVFj+GDGDcn1+\nS6bad7D7u/9AtnJtE+sn9FpJRcFbp9g2TSbDirjhfsybM4+2sf5dL08EKvPq\n7ynNepj9lN/4wfkv81uAvFCakT3p/x0cF9NiU0KF0hE3iIoJ9l9MstAdwBBc\nbpf2i4xGnZER8b88wx/c4Jy3uE/81uOjoRTTMSQ7e7TQ8WrFVgeOPzXoPGZ7\n6ONB4zFj5JQ4LTH2BCfG/crG6ZCTL93mRR8P7cy1XYuhj3Ci1CUOBiCFJf7B\nXE8yyAmZivOCytZBcpgVkfQ/XkEaG1K1KPyGTIcqOEamqFU9nhvRRo9etfsz\nwwyoFITPtIC7BYHJW12gMa051UWydsOQHhc/RZuz/fWpvbfx0ioIn1CgkvVC\n37/cQ3RhRNMPtkDQgJZszKSB85iL8DN42AeoZBhAmMrejKfuQzT8Xq8xOIus\nxIUqbV0KHqcBG0aTMYMEn3j9tElc1lX9Wad1V7u+xQhQzW84XErCynwoHdof\ntQrkDC5iWI+QK4N6GgRK7cpV6oDj84et0QGJYs/pLNVkLTzAzv5UiWVE5O1c\n6GQc\r\n=PGmJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"813829c13087aa9fccac08bcbdda0ffddacaebeb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.ec26e799c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.ec26e799c.0_1578001325278_0.2635973181200393","host":"s3://npm-registry-packages"}},"5.0.0-canary.0a40ced40.0":{"name":"@material/shape","version":"5.0.0-canary.0a40ced40.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.0a40ced40.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"03c73df25c1117d7d9852ab1c3d9cb75a67d8f39","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.0a40ced40.0.tgz","fileCount":7,"integrity":"sha512-8eraTKoRmJKq+JvgqDCFzaFrH8BhTmrqm97qs3UxsaKDnR2BDonqLHrKqu7wCpqwlpFFfRYIj35pP4rg8U/KmA==","signatures":[{"sig":"MEYCIQC0fNADL0TUJz2HM7aTQ3QUAmMTPKRFc6SDueYJFAZjwAIhALW90YvTn9j+1v6YuIk38YnMOlqY78KFW1w15WnzgPxI","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":16145,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeD3UuCRA9TVsSAnZWagAALL8P/AorTuxXK7zwYPyTK9AU\nvwbBSGmeR/9md8cd27MuniF4St5A5/YPgpnzvYYQDOHIVY0dtRuKL73dcZTz\nQ5B4MbLlggyFoBMcIaToz9YF+fprYUi5XDBnYQGKK2ciWFgQymiZW1+13ImQ\nowrrNfdBaxCrqb/OGOa4Cx0rX2FvlVQAC8ko/dDNLub2REhX80CnaUug6lvJ\nemHfsI5bg7ppLQhogns5dcyEZxX7BX4O4xLe9WqiJztJDo0u0+p1oufzpiSp\nYn+CXBWY4+cptmWC4Pxx9WU+JRBbgnFSwizv+XcI96LvtvdPTA518CHA+TJS\n5xUT/dn+26NM3Sdndy1/GubNma8LwKwDcGBA5kOO3Oy+lOyjBG2rDJLXw5oT\nUWWHybysmDgGqKTYGlrebf9okV6Mt4nXjhC7Tv99FBQZ7GcEtEnbH8DqayJ3\nSuQ6YXRtGsgYRAAttJuiB7iuKPohCmQ6/YvWo3Gd6bDFF2fjn+mfEsbV/HUp\nFHW5u+g2j++Ab/yUy7Xs4J9njfGzw+dljDK+VOze7NLKuszqw91ood7ZtClK\n1q3qByLfSg4767gkU6cL3wgPaUumjS5IlJP/jnHONpfsF4I3jpQjxAZ35LAm\nKlnaGp/mvYBkl8s2iC41n0pDMaPbrFZpJZWplQORq1SXRPQC0cU/fkz2P2M+\nvZ2x\r\n=f2BV\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"dcddd5ac583b29d0fffe1a54b6f634f6b90fa44c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.0a40ced40.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.0a40ced40.0_1578071341764_0.41480582682040046","host":"s3://npm-registry-packages"}},"5.0.0-canary.3adf84899.0":{"name":"@material/shape","version":"5.0.0-canary.3adf84899.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.3adf84899.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3bf73bf205b9cc92453afbb69f7096126bbeadf5","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.3adf84899.0.tgz","fileCount":7,"integrity":"sha512-RRb8+22l0z+LaGzTVUS+4QPNId+oGKzZ5ne1DkbL3qAT7hqyuPLmJq/ZePZjzi0IG0tSiaUzDbnjSKp6GtbZ9A==","signatures":[{"sig":"MEUCIQCIWBHLTwWB4Q+0T5jAgyyn440n8hSEHWlMDkfS2W8Q2QIgIpmup9tyIKwnQSwN4W8jgb5Q1Z4GS31nnaSSza8pNGw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":16145,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeD4ZMCRA9TVsSAnZWagAAo9EQAIFgr+/NUaACs3TAzQia\nRgT2rL3D58XDjvmrf5niTWZWBv9vC3cR5lMHHYDPH7nwHFYCdxTk9A8Abye8\nKg773mAG2p6PGZmPFL/NstBpnxJmf/IyV7BSOf5YVbIdjoT2T6k37cNy8oYT\nxY1dcm5fb3NvS1M3agWUEYJdqMqSAHG3DaAA4EJrrIychTYnwSk3U1nptxZI\n5Enujs9hsBFuTJ0PVnGTo558OPGvJmJ/X+cnFFsMGRFN/dnQCwbka6EHo6j5\nM3C9avjxiO82nDV3Llxx2xKRxwnnshy9Xp1qsZuVVkTZy3BMcfVU0T+c2iHA\n628oZqjlsfeG8jg/1ja9CqAl8JKqrpahI2wlAYd2pRInt244mbKNKnHJ7MUp\naveNhSzUmXT5e0TjwaSy6wov9+P7kd7aKVprZ8ztwGTDKWNsiq/zxoO50/6b\nssi3WSxTi5//JgUoBubSxzeNzvDs6wTBN0HC2OZwDSh2ETqQUoFXfsCAK5tF\nZOSOY9dmNaAKifzOCNgpQ/lXZHdURL5zSnqxB/Rt0J2r0aLqB4o48D85+MUU\noi6fjIaxJ2XXHC6iTVfvp5HqpRkyKwr+PbftNKJOfoiId6w9McdIRs4AbrBN\nlDV1SabjPyD/JdREq5FgQFUgVLclUcnhuvbYkOwdRj/KkLdBUTLDgV5EW4U7\nI39i\r\n=BNJL\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"9f20ea5e081bb781aeb0d66d6db6a0ea7a0f5619","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.3adf84899.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.3adf84899.0_1578075724033_0.24843305289691808","host":"s3://npm-registry-packages"}},"5.0.0-canary.0d42ee650.0":{"name":"@material/shape","version":"5.0.0-canary.0d42ee650.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.0d42ee650.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bf8135a92c94514b0b5e72330225f3103c86747a","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.0d42ee650.0.tgz","fileCount":7,"integrity":"sha512-sVXpicg1DXbSAHp+4yLU21XYjXWIUIgxyYIpUJKkMALOInsXSBj2VPAMYOt6m7M78vBQWFdKJmh4Mnj8FBJy4Q==","signatures":[{"sig":"MEUCIAOthSzQBYSzHHltQqu1PWhiqNhNv805d4alnFAQKsMyAiEA2DOksQJcCQGWqSXCg0otA5bhynbqELXaBeS/N6glmTg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":16145,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeD7PoCRA9TVsSAnZWagAAmxgQAIHEwP+9iQe0Y0TxkWiI\ngAvSTUXA3pkqpe8UUnmsFwW8jDlbnxDsXxzYugDUSuuqSjcBuPiBcBxNflGR\nfR7MKRivG8HR/ehezuHQoFRQpkhN4EjbYA5TQVybSfbU8wwmhfb/VlVJ8xPM\nMz0aM33iZVfak/5Hglxtw+hVMQ4eX3DD25h6gSA5BgE5bn1b2iWlSzRJTGU6\nAF3LLRRj2p1JhmW+Sbhw53lmMh9ohF5A+kIyqLJH+sq608yAGb/GOoJAUavX\nhT7jevZhLMbhYD1FnPO0bGvVqH05VQGU45Obbaywfa894Bl/lH9Rx/QU/04d\nW5yJ2sG5lqZ2+GiNkjtZi214BN3k1KOFFaP1vZaEo72R/Ujh4/ncTqgoXTp1\nv95fHYtWGvQnc4RpCz1iF42YSF/4YmcLyhl83gEibUe0w21cM6wRLNHQctzh\nVfu+94QnDfhmMwfKe5pesAFzcwkkxTWZdl0utYQk7ODaJdBQTbpLZp1yvFJd\nMKbeYGYyDE+CQvuIXOzbzU5bHplcH+giP+qj5XUNwrojUjOkgg0vZAAe9jOS\nRJR+ASqi7GlB37/QKVvozKqs5i3kHOAdFEHHDxigaGMQ87cg62bO2lmjQhiR\nLtNXeLZNafZv2cJzqIVXmTCUqGry9fMnPl7i9WwZZvpa/rhGZJfMQpHhRA69\nb8yb\r\n=5f6Y\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"184f253632333982c2b642e450e6e98c9703fe85","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.0d42ee650.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.0d42ee650.0_1578087399676_0.22860692719220155","host":"s3://npm-registry-packages"}},"5.0.0-canary.7be9e4a04.0":{"name":"@material/shape","version":"5.0.0-canary.7be9e4a04.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.7be9e4a04.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4035d11c5071333d66976e64be60769262934545","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.7be9e4a04.0.tgz","fileCount":7,"integrity":"sha512-yp9W065fj7zP0ZLMiRVSGF/3Kovu4S8da3eeTGOywy612R0dRQAqA/pZFeqXW1gOXoOJjRn4E2HQST+IeZDHvQ==","signatures":[{"sig":"MEUCIQD7FvZVx8xuc+gIfctNMeIb/3bm6epfNzUK0IYgq9DIHgIgGVssNYaTgYcO8O0vSpi3DYDJtw368KmkusdSvAeZYeU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":16145,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeE2iBCRA9TVsSAnZWagAAmjEP/0iKp7UHyCjT167wVzJ0\nck7S+9/SFCcp7SFL5lCH7tkfAyC9H40WKSxzVYhpRMX6nPRy2sTJ10Z2B8sf\nnrQsNR0ai4fYZQmRf7HztOnqMwZ8L6RMt8T6AEvkK/cikFa8znvMlbRz1b6P\nOfy/6FCfvquqm8Cf1AXDyXRdKR2d4qzkgbLpAwEmrtr7mXMvzXsfN/taLewb\nqdiUX+bKxvOWUF4RGdtPFn1Ri3K/wzInE1k0GblxeYpuohOlnR+FMf6dOu4F\n9krJFIYa6CfXGrYtYXB95sih/2JwR7gkqw/Mn9YfRgwF0dNoyDCVhQ/GiPyO\n0qNvGQZEeSx/exf56qKk/lCz/+ivBR77uJnlk+XB6PjCBHugmYLpWgUtKhsM\n7CteHnieHjq/H8Oh5sPVbofkqKtBcnrnOv8MSIf7YWTKVsNODZjtP4MBE7hy\nzIxgYjZX6CM7l8WCjuhXak6QYsw3CNgMDlW9/pUt6CjMWWR97qGhZvLFPron\nmenJ6vbvIyR02o9ORZL8c+vmk4lFK/mJvjqTEH2rfpktdUtugGHKEJPmi36f\n0vuLaif6qDXzGlBGQnhJE4exBc24iIPEA9xVZclG8Znrof/s0NxzpGFfYbuD\nEYyUKCELF+bdm6N2PT6/eD9PvOBUQnOftycc+MCVOKJGC9vbTHIl+OASCzXm\nkRhw\r\n=tN68\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"7675b02e76469ef82297d4232a252b678b22d1ee","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.7be9e4a04.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.7be9e4a04.0_1578330241426_0.37249545794196437","host":"s3://npm-registry-packages"}},"5.0.0-canary.847dd1ada.0":{"name":"@material/shape","version":"5.0.0-canary.847dd1ada.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.847dd1ada.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"844c9d4c4ec60f4c383840a08c85546b1559a3be","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.847dd1ada.0.tgz","fileCount":7,"integrity":"sha512-zO9Ei+TuY6b7EuXeWVlF/SB4zsMx+6zdEOtveYEeqI2JdBTcyBcq7NAaO863n0PmRj6P6OfsLH7l9JwFjghV/w==","signatures":[{"sig":"MEUCIQDBZJ2fj93lltGgNEcYLEb6uYfmV+vCaGEeIVVeE4zIZgIgDQBdN/421UkUINfVl3lQupl7vsNSrf87GWOZWN2TMck=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":16145,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeE4nDCRA9TVsSAnZWagAAnsAP+gMRHHjuSJJmjXTYTvSE\nfJnvx/O8N9L7LTMDN2WCWrpDu5xy4/Dc2Jj/YHwHMvi7akWxOKLUOQKtYEIF\n/wZHy7tO9jQ/4pNBMw1As/guHOiS5wYpsp9v0LkDc7pEVzOJBzFW4dtN6rNT\nrVCB8FHdhMP0RGH3TRQJ1WiPdnrNDBhBdibjK12Tf6jmF9Jri6wqyt+p/Vxq\nuWkfC5SsBKm4wwe/pQk4bYs6fAdMFKE2aQSbRgSOE0/+kqH3w33ovcUuw7XH\n/6iCtFCku5OtCJQKzPVQUL8GAeRwk9mU8y/7+z2+mboyMM15cRI1MqJWX/6y\nRI2Dfz9z0gNDvxFSSsSISUaqsrgNVe8gwNWDMa441Kl5Fvm0S2mJ3nZDAdkv\nTELF5i0Ai8XBViwWEv4O59JqF278eVqhFyjQ9qw3hjGHo319D61kz6HfIwnP\nnC9AXC6jitlb5aHbRSnD1b1bkLf/WfMvyUM8ezE1AjRUYgatbasIU2hnoAJ0\nW2NXW6xk8lM4re37kdqBJcub/vMOi8DhVhMxOPPkM217rTmxJAd8sNeCALFA\nMF1+1f58xCys04S7muP5NR2xksnnu49tiiJZKRMj83fCocCMtXHcwLa06IuC\nn14NG0eyim8TfGQZQAw8hcNlrnDng2AFxrHXBPSMJj4NC1AKcP0yqjB/Q5YC\nhu9p\r\n=Yrlc\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"cccb6b13f05f64e22210548991ad471df3de97f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.847dd1ada.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.847dd1ada.0_1578338754705_0.8612155524569434","host":"s3://npm-registry-packages"}},"5.0.0-canary.39df7e5df.0":{"name":"@material/shape","version":"5.0.0-canary.39df7e5df.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.39df7e5df.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"19e7cc7cffcc4e1b318d474f37e9d9cad2f70867","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.39df7e5df.0.tgz","fileCount":7,"integrity":"sha512-DuC8Ia58l5Us+KCU9fVt5oJwEUxj7Nr7AvHWKa7kS/e98Az59JMGTHr9N758A0kMOEtGRDUtFwAPC/tdQ8iHWw==","signatures":[{"sig":"MEUCIQDvVP9T20VfvjrJbEwSdimvE58s+CS8oVuqaSFmth6+LwIgKvAC3CAyAUhs/hhzHjHq+9njuTVDpd1a8Z6Y9Pl8CIk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":16145,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeE9btCRA9TVsSAnZWagAAc9wP/ipKV5zBw6iSvUzwNpIB\nkMhmAf5PHSw4D+xM1DiyQGUIIoCB0Z3QdR6FqvUZuU9Gz11kIFKC2t3WIbOQ\nhZJBcK7Uz5reBZJu0hnBIq5cyZpL4M3Wi5jAp1PvS9NFZ1qDFfMwI2+o2ucH\njBaXcqzeem5fpikZuS2FE+0wt5y91Z9TWs65amKfbaQB5kCfeDdTcKGGISMj\nDmosIt5qn4ptaCT6Ju6YcxQFwbOpEhlmbxMti+pZ/LfmWQvcFwrnEco3BGol\nHPIg30c739Khy61qr70pr8GHuBs/44B0he+yTYrXdvoSfkbiSI5hM9y++zD/\nSKEJOHQS0x2DriKFJFds0RlmN+Se7pa/+RGg7suaQiyopIqloADQC8p24IM6\nHB1omF11Vaa0M6b4Vxr7s0yvAz0QuGgzjV9sXXi8GHIWw6WeActzq2mJJ5iZ\naGfPJ6nfYXtZRp5CnJguEqgNEWCD1vuUha186c6vpJq0kFwtBF4y3qVzEICb\nd/JdUNbwC1ihNVWRt8IYq3a5tp41lR2HvDImwYU2ydA0u8/MNirJeNToQDp2\ngSHhhRbb7nbWXyh3XN3WDryDUx592Ni0oEc1+ZkkUJOzTVEmwxR836LVfDD8\nqsUcVW60kbi3pB29I8mLZWA1oOWG1h5DErhKcUURlYNjSXn6/3aeUmmohoRz\nqAX/\r\n=cYLm\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"a6995715f8fc80d9a20e6b8ea90e80f4906ca595","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.39df7e5df.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.39df7e5df.0_1578358508619_0.21267472105385177","host":"s3://npm-registry-packages"}},"5.0.0-canary.f1a2581ab.0":{"name":"@material/shape","version":"5.0.0-canary.f1a2581ab.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.f1a2581ab.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0bc6926e776fcebeb9e2a158d2ac3a22caec96c5","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.f1a2581ab.0.tgz","fileCount":7,"integrity":"sha512-j5Ftb0xaCCL5oY0BJXekgDKn55swAHXSI7T8unhcGH0RmU61xwhqOeOQxf8NgxEutZ6jbJSDQ6BYAh8VChmspg==","signatures":[{"sig":"MEUCIQD/6g5zvj0N4DtTE0zZPj9mSXwOZfC8nbTKXNZ3KeCggwIgERyUfKazeAqruHhndmmgmDpC3mJga9bSK3pRHrHCUKk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":16145,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFJzACRA9TVsSAnZWagAA5pQP/iYJosmUOMTacjWVhvcG\nkHJYr8N9sGN7DxrE2+ezuOB+hwgT8EM4WuLcwvHiRF2Rj29aoWuozOwcD0nz\nuwrawEr6RssAjxlYm/+LNBA1ymeGEopvy3rPwOeT6z2bKOWtaBY8DRlSY/P+\nOSLU+kT87TaQgbMNCYAEwOPNBkUS4vVEp5Cu67Qv8TG55hN9ge22jWEXUPwJ\n8XvP/i3zXKpdevH2fcHM436em88Cu6HFKIdjgt+j9huNfpbiA4gOY9qge/Br\n4DAs2+zMxylnj1nlPGYqs1UDkpbOvItfauwIjIAFYWP2cKTls5ycfnz+nALJ\nGoGxCg78myoOk/PIeTi8biBfJRpqNmbQLAyj69f5lFtXti686PcT4AWFo+sn\nmYgwcxbrcSP6z1JEmeTd9evJA2DoEtMUHMpvT84eZQllG8xbBCw/B/ku5n6e\nuqnw4ZfiG+VED0qdY/SwkVOQ1ZNvZw4O/ODZwsXJjQY+h+pyBKoyLlvzbeXa\nywY32OKECZmWc2D8HtYVFUM4GbAcx3+npRUeWISAXR1iaCrScBW3qzJ0b/Xu\npJnhyyd23iFWcADxTl3PyQt4eLiw+CKGVLC7FrUQMpmZY/mqHmAg5zr6A2hS\nGOJczL4v2yY/nwDQ9ezAmKvYwrMl8l3bHbcbwCUkyTyCdVOlDJDYY5pni56g\nReYM\r\n=UWM6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"ae69ee79a4a22a7695be055fc67e5b974c2b989f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.f1a2581ab.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.f1a2581ab.0_1578409152228_0.4702984627717437","host":"s3://npm-registry-packages"}},"5.0.0-canary.7c7ddf347.0":{"name":"@material/shape","version":"5.0.0-canary.7c7ddf347.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.7c7ddf347.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ec72a493146b5b40e29f668f23fcc0c7562dd609","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.7c7ddf347.0.tgz","fileCount":7,"integrity":"sha512-1iCfrKbTAzd6CnXX39uy3hS9gU/X6wc2sbulqYaDFKN+SGb4/vp2CIUCuXOpWp3qQePisltv5xNNYnKeqPFnHQ==","signatures":[{"sig":"MEUCIQCVQZZ8txX3Z0FbGkXjcKNbE7Qga95NGlKvS1/elKlz5wIgdG6K0VQrFqjkoJg06OTYOhfKc3dFXqz74ZW1O7jJ9vk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":16145,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFKB/CRA9TVsSAnZWagAAARMP/1YOJ4HnywbhaahPJOSN\nDZdMEzZ8Kvc1jeAUHsdOtq5P3kqBI4c9ZzvC6AcqzG2QHf6FyP0DAIwSMU60\npg6vedqobEjIopoRdXbNDYEW7vQ4OC4mIejPXCyt51vBwIlYZl3ZiQ4aCKub\nAsNN4NIomKG/lFWOAJDGJAPAtb5b6Nfg1W6U8usWId3Oj2DX3H7rzTob00gp\nabd8pjDsKBLBEO8F9Pb1bUvtzbUKqX9yAcxaJC01VM175m9mxRwaKa3qkNdd\ndEDEfFKE4dLAOZA98vCQwO9kzc5kedR/BcJE+6lYrLk2pre/yoFDyiCSSSTg\nLhrCSAK/ZGRDMv0FfyqdbZ2tzFXgOcYs5FHhqQG03l2lHPySO0Uvx/j6uwIx\nj95NqN6geKQ7KbbUWv6qPhODdVCw5eaGmrqZ0h63JENruupYKrB3yGwMis0W\nLVtoO2BQiq+D5LXUfRmjNObjeq3UMiJR+IJJ1JIfBBm1FVcKzcJDPNPxX5O4\ndFelGD8hbjkduHZrLw+ucbv6YQ+9POTbeBtaqCDFUf1MJsmhcPUHd5T6N0N4\n300h0KnwErqYvTW8buWKIyNjOv5l27eeP551MuBYMcpnSPmCHksueLpngF5k\nwiXZrp89+4zzLS3dU91s4p27R/GbRgTH6bbjtX5Pyst+j0E61DREODudeq4L\niKdy\r\n=8cZj\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"940ae7448647ebd59a16a94b84c479f3f7bba9b6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.7c7ddf347.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.7c7ddf347.0_1578410111013_0.781246557889375","host":"s3://npm-registry-packages"}},"5.0.0-canary.a1c84d4b5.0":{"name":"@material/shape","version":"5.0.0-canary.a1c84d4b5.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.a1c84d4b5.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"88837a65518a117fd74d7712806c05ae17bf2e02","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.a1c84d4b5.0.tgz","fileCount":7,"integrity":"sha512-e2laKCgSwQllbbPy89BJppH2A3X5D5NUi8CCxQm9u6/PRcJ2mqoKd7e4icAWJ0WdL6/TfZCXTs+4x+OVo6HvZQ==","signatures":[{"sig":"MEYCIQDY/eXHI/S5jLNZvXDh6gY6eedJINdQNBKAsfTlIrXuUgIhANANGB49/aAOjbPrbCXrftaoUpS3SINjxETQXa5bVQEj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":16145,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFMlnCRA9TVsSAnZWagAAzRoP/jPmQMck3oJsX/N0Oo+O\nAng51n2Rxlaf1L+6Zx1EGi+zmE4nHfFotqW2BqVix3fofR5Z4JnJq7rILVZ6\npKliY+FWinqK+bxw1GhjAYJ3xj4HX/OpwRNr8ssa4cRtAZMkhsFn7fCquLiL\npoTyCpBSQ02dzkJO8d4kTQdOSiJ1Jm8c4QVtCz2oqYxPodzEC2AEyQ/znDr8\nNsmZiJwnx5Mh1bQouZbQ7CH3HbYmfKf8n1vZ75q9HPrg9z5ri/p8n8u2g0eK\nqYXFHLISP8/Y/C58h0moDYBcnjKnVyNQ0k90OEjznsi5C2/RZ6OG88JfsD8K\nkbRiVnl98iVv9Jat2W9hWY3xYQxkeWW50ly0HSQ4I96NbBzsBZG1DyB4cBuC\n0+MxSlG7ulux3SOyb8C6EDixywIkmdDZYWt2ok0A+2ftRvMdD6mxWOdvKqPf\nIqzBHKF3WsVZJcEz7h9lCjt0Pf0teSbcO7ZBQO8yS+qZe5iRzOyPMshzSop4\nzjo9OqRyzK2d3axPdDiTRzPV7BdCi96qOvr2l6WIdHog9o53dWqzCOsDeIh2\nIFDN4VI2HlCizKc5b5NpqBp/2W/36x/+C4hgaxxpiz11fiBz6pGLzHiMPipx\nTS6vahchaUQXhrNTr4hpUWMEp2lK34ezln8rPHWctujopLGbgoSPf5oJ0Jdu\nxnrP\r\n=5H7t\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"5ec624a1b571d87d94d5187056a0b6db214d229f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.a1c84d4b5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.a1c84d4b5.0_1578420582883_0.3694964074309872","host":"s3://npm-registry-packages"}},"5.0.0-canary.ec9f16578.0":{"name":"@material/shape","version":"5.0.0-canary.ec9f16578.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.ec9f16578.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"58327dea726ae4d4aeb5125429e5ec53544e40aa","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.ec9f16578.0.tgz","fileCount":7,"integrity":"sha512-gTBlU6O0lZABZ9LGSZuXP1wtWyucy18JRLOGH2RWv4fD1xrDCuh5nEEX6EQQt5W2/IBsxCRvPUNWE7UlU6z7Fg==","signatures":[{"sig":"MEUCIB7M6TlG4xsqsLgJ8Mxh/XTT0kPN2bMB3p0FdzGSq7+wAiEApGw5F34fdaJDRvJ2pSHbWcNKOeEGK1IazyM5dr2OGV8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":16145,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFN5gCRA9TVsSAnZWagAAkXAP/1Lh8mQ/+gSJwO4RhOgD\nCYBuH2UOE3LsfkKxAVeOcdviAiQxtFvNzLz9/3ekRL/Dw5wE5xckblAESMyI\njJQ4Q1P8OSahW02/IMaGHYF68D/8BGy+nP5NDnm4cE7ohla/0hJoZHdZHo4l\n5kDhpLBUPOuog/9FYKfeyCYdpheus8s0wnT6p+o8/cUZ+rJ31vESmpTqZODQ\nuIhFlOsmojeeaa7j3SUu28TEj0qDThXjHPjkE90uXJ8YLg2uL96EUBpeiF8R\nkLCkakk8DGdKZ33lfydKELLQ8KJhXwR9WS+J70OS+iJkgaO667dlw1b+Qm+q\ny+0R+1EujDYerJALlNq/FInVagVSuxJu2BxaE8ukUUm8wl46Nrn/20LKNXLE\nTaA/wmRcaEIP6MZWaYqlE2mXkie/dSd8AjS6U4NccP9WJ00J5AbS6UJIKXEx\nxfGRKttSDCrjN2CwhGJu8Eb8F4NI4COiG8NvGkLVnZY/0KCIFuBT3el0FTt4\nvso1YxqkDkJPwly0VMk7D0GFWB6wAFh9LajZchqdUdwp3UOyRq2po0Eg4etO\n67KysInDq9vUzRl0Hd2X3Og98JtYqYkG4cfWgyxn/f8llem4GAzTrug7i4n8\nT12akP8qnQ6ctOMhDHsCrNpJ7EnScn2ysxxuXzzdybYutIGQc5UBoXzbr4+F\nnK0P\r\n=n+PB\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"23103621e66342865b8700c5948ef9134fa8d1fb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.ec9f16578.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.ec9f16578.0_1578425952515_0.29097731314119635","host":"s3://npm-registry-packages"}},"5.0.0-canary.b602226ce.0":{"name":"@material/shape","version":"5.0.0-canary.b602226ce.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.b602226ce.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"21ab255467b748f9bedee6a57670ade15a5e61e7","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.b602226ce.0.tgz","fileCount":7,"integrity":"sha512-9oAKHx6QfR+ck9nWadQCIDr69lJtzdje58eUHm9jTFVc6+tAmtkqV8HVJSvoqPEJ2PIEKkbivCTvITCXEBxAJg==","signatures":[{"sig":"MEUCIECNG3uq4L6bb9b1zgOl6ASMm82B+AW4fD/Lng1bhAKYAiEAmBOd4MCMdhWV6yvmRBLOZUJHjRi+6Fx5BTek8zhPeSY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":16145,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFOa9CRA9TVsSAnZWagAAnXkP/igqfdfRtE5MdhAarK/D\nxavsQoJ5CDZHin23kXlHoMhaGTXyqLSE4erhh2sEC9ARKafEBIJUSuUcHrUG\n+8nyNHZ8rebuEN3a1EJdAKP2hvltBEDX7w4jgXIlu8E94ZcdfVeITrE78lZI\nF6BFZumtH12SgQLkcPj9a1pm1/ko3nUQVBcgT3JfLlDT0Dyg3mmWymFh0pts\nQy0N05ty0pP7YSt1pz+9GLaNCYqkXM3A/DQpJXXSTB3c0CfXud3UL2FqaGc5\nIXON7nKK8BAE4qRBuMa0ms5AIJb25NNb289VuHkpcvscKeuqSOnqxlG1koyp\nQdzbETJtb2NfEh/jmhlvQi5YdilsjoACMBancamI4Ww0p2/+Pc5hA2wDmCWL\n1Dfnf6OpFUnGWUkA1IQb2nmTEDyRN0urI3pE9nhmQGFhCXfEnsXck7vNQ5wr\nFjXo6Q/9V9Mu2E9CzShxaMXLFVp67XWzxzsma3YppNPg5BuXQzmW6/BpbVXu\nnYsKsTUc2v+0WeSkKF2qvQTyuNEQvu4tnGerUzOHkusDhtuTtJbFgpE0J1KG\n8l7VvmcQZeVSWabCvljhclWgshUH8CdgcAH9bjewOldP8/MAs/EQ07Y/h1Wj\n+BypOaMkO42FOTCUc47l//U3MW6iDsWy6mEShvn8WEf7/+dZo01wHZXIaE4W\nkFoC\r\n=uPw+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"de0d35ec6a5285ea0c12a54a6e35051ccd0aac1e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.b602226ce.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.b602226ce.0_1578428093383_0.736002676477088","host":"s3://npm-registry-packages"}},"5.0.0-canary.b2d2dc08c.0":{"name":"@material/shape","version":"5.0.0-canary.b2d2dc08c.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.b2d2dc08c.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1b4465daa860ff7d615458389e27e544d5549dbf","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.b2d2dc08c.0.tgz","fileCount":7,"integrity":"sha512-IHG5+lB28Ix/x/tNX88nDdvLA5hA44HGhHm38KmJ+FJMkJJUUzgoDFJIIdlWdCp0Uuto7k57tGGEgnUDBbxAcQ==","signatures":[{"sig":"MEYCIQCjvAcmP+jdHQpNoXjwHhlA7KxRGR8VkLNIx+2utAW9lQIhAIQXF9Ys+armCotsU0sTvp8CiNjnzB4rkGxQPbMyrNYO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":16145,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFPdTCRA9TVsSAnZWagAAmAIP/1qlTVa2unKOfz2UYN4o\nTmIj+rJpQa9cWppm4V9QcQXzUwV3OJS9dOjOAzShkgD0qUZBgTAUFYNO58os\n6TQ8ZNaxt363CJ8oMQhtunPuVCsZnZIFM8K2nyuS8mWCEbu3W15mL9WUFn6F\nDrE5+qNiLltl9nUJYE4Orjc9C0tbYSAlAj2XirtEt280u/wgEfmDBI6XZ2Ba\nsoBAlIxdcwHZL7aMY4Q/lvc0xEF1M+Q23jHg3EFkeBXLUCwaY73wEiRhSvRN\nLa9nYjPXHu2yLScqiZXoft50Z+S64aOkOmg8fzWNInigQLvZ5a+tChga6NEv\nYeMz+E18lmlmfO+zQbOTB9jVcEBhtqh2PRvDSIeCJ7w2qdM0Aw5J9vdaJ4um\n0o8HBBp4Cbhr9q+GlVdE39GSl0ectrNUZnsX7rOIhRtJJjBsMpqS28ECF17e\nqTlvr6wGSDHVizYJUXJO/wCAXaE/5shuy4KMCiuDG8jq1ANHg/4Tr0M+Dhfj\nQD6g1WXKZg5L+tOwZZq8SkNPM9M3nxbM/qUnveSmKAPeXbg+/ACgte+ZVgvv\n61vKDbJ+0Ta/xvIHAN/8RJkG7KN4T+wA61V5mLjC2NePDhBSgE3ZL4+EiNTp\nbwC9G14hkm2e30wMSf1l7RBB6aVhZszEgMNwpHCoD3gBspETQUrawLbhO4wb\neSfE\r\n=hRCV\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"ec9aa1966e1f2e307207d815ccbe3f16750af94c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.b2d2dc08c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.b2d2dc08c.0_1578432339175_0.09674928417113882","host":"s3://npm-registry-packages"}},"5.0.0-canary.61f2d7580.0":{"name":"@material/shape","version":"5.0.0-canary.61f2d7580.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.61f2d7580.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7d4ee663b706d7d8023f54b538e638f8b5f629ca","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.61f2d7580.0.tgz","fileCount":7,"integrity":"sha512-EMoP+AZOdMHS1WGLDNoUK3omh6r6N7w7lRuimoH5EUxmdaYufzb5DNUuqa34r6w/EM5y5JwbUFeW6DHUH2JSvw==","signatures":[{"sig":"MEUCIQC53T0+xk32NJW7X7vtDziPvO1W2Ac/WCRj0rlPVQDfiwIgfv1npyxtUBG5Z6RRNIXbd2J0blYUtXQ+vogS9CgUqJg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":16145,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFPqHCRA9TVsSAnZWagAAfpIP+wVGTlEkfLIP0mKfi8T5\nSrT3P44S4dE686NGe5wF1UlQPrp0G8gVGjHHfb4OGHV0QI95RsT9FmkFLDQ+\nbPyPqicwYPBl1M5kXoBf4dBe0Xr6KnvtMX9h7KcDMi6SlG0O7hjV+16qDkXf\nXXeLULY5/wo5nl1YCtWoG0HuNCg2GxBE2IAmsy2suRBspeIf3CLPQ8Zthw1Y\n5fxplQKyxOedWLALH9lAD3Oz/wHLD43dx07n6TyQcFrKE43yijhlAzQdo/sW\ne5XB9thLKClQaDHpEEUmLossmoMt3tHR1Y/z6+5tcOwkMcEuwfzjkHFkfy3F\nF74pyaVK1p/CrvscIUc7lZ02j58KzwRXBkRFy2P0vEO17Il1i9tuYoYtksGm\nTvMq/bMZKYK6j37fuzqIl4jgyl+nDwm9oxd7obBSgwdO/bjIQxiAzZbdamRD\nsUSqdiW5VcER0J4McfFuviIBAs9EzNYP7kF6zIl6quSwoOgUYTl+YKxMXoG0\ntjPTztchUllmWPbGU6tvnCaLwmlkh0qQOy2GL8Yke+bd4CUCgdRQYDaD7l4E\nHOfduSbyL4vjAwFXXuGqBRxVIAlk0HztJHpA+tEYXbD9EncaUYjLIjdGbk2C\n6bQBcRTnb5Q8rTDYhkcP86V+kaQhCufu1f6auS0HEUhm6SxwYpjt/vBVAZtA\ndcSK\r\n=tKkU\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"a826fac64c34ef89005bede280cad29c76346e55","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.61f2d7580.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.61f2d7580.0_1578433159290_0.5545056443695002","host":"s3://npm-registry-packages"}},"5.0.0-canary.d1be53a2e.0":{"name":"@material/shape","version":"5.0.0-canary.d1be53a2e.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.d1be53a2e.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d2ff293ac1e9ee1556b044510757f0720a4b99bd","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.d1be53a2e.0.tgz","fileCount":7,"integrity":"sha512-GvnRMZwD5k4JaHH6E/dfmEuRYNixqYaYVa6zYTx8hlI38TxE05IQh18qAqd8dTmBQy/Aibg+NG1w/j75YIwPUA==","signatures":[{"sig":"MEYCIQDLZd8BLMbVNpcq3BgnGivYpuThzqVNCdKady2qii5yVAIhANk9l9brrjnLHYYGdD2hxKUKUPeIF+oqYgje1kuOQErk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":16145,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFQM/CRA9TVsSAnZWagAAYMEP/RAtjA3lrmYHG8RR0VzH\nrW2waFztFDfGyRVqpbiQZMhhqqup1dcrpOFvjBOIe/b38XucnIrpVT3lCkla\n1Qf8HA87vbQv+STGnwsgoobwLFZq5789cYFH46eA2bzRVTFrBDzE44ne4zjC\n2UClwYWpPF9GF4rCOEFwwzX4Kry+PObi6BdpFWIMPT/HThlva5j3iNPQW5fS\nCG674riQ+ZrKPT0mtt/IVA0r4l00ujSY56yVG9tmrbDYTFcExLmTIDAzocoS\ncNIl0mAaH7X5997vvZLkgZHEccrRiSlqnvfah5VPzQs1K/SuCGZ3fnPVZrdO\n+WUPq2W2jgkJqqLcNR2ypX3hCQ+52OqVguwcsXJDz/WlbfJbJPUDvKkgAK98\nZWdBZxjhcS6Ydgdb2koaq1LCpbm0T/zFmqBzYWF/0FPf2ZKIKeZjmuUGdzLX\nerc6iQETSLvKjiqY+x7LxYi37eQJWYNF4oSmIPTy4F45KZqtcm8qQWMr6IA0\nui5H4nDDcgSDYlcyG4em3gv5aQIutTxAbTsLIHzbIKJlbg+SKNwXS10l3MYm\nVZ4gASPFARS4nBDzeV9KPoUBeRay1k0NKqcwNSFyj7n1Fb2bj6SWFVxQmMVq\nb2MFOVCjaYTvQqfMKwCyStCB3JkPhLcCSUw8JUkAub6p2Xor33B/hBL+9d9J\nja4N\r\n=AwhE\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"5053f71f9a35d62630821c2c4084794f7bedf258","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.d1be53a2e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.d1be53a2e.0_1578435391306_0.019459640985739712","host":"s3://npm-registry-packages"}},"5.0.0-canary.9b0d06e32.0":{"name":"@material/shape","version":"5.0.0-canary.9b0d06e32.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.9b0d06e32.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3242cbe6dd8d0953f7e158462f96b259dfd1bc57","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.9b0d06e32.0.tgz","fileCount":7,"integrity":"sha512-BIzGSlWpY088sfq//LKc41X0sZDeROjiDPstWUzNyizXc3PGUCKYFZCMKLCU1u8k8Zq64XDiRPA63jSk1Rpyew==","signatures":[{"sig":"MEUCIGmoW9R63rhA9yLsSEPoW6OB5Tm0RH+1Kwe6rnl0jkg5AiEApEeki+C3HOUh06FKNtqja+0jDAIqax5adhfeh8TRvms=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":16145,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFQPSCRA9TVsSAnZWagAACssP/jKPpendagUVFsQaou6f\nqBbufMbEcFXvozW0IJ4Ocioo1Anghj59nrvxT8LAKvTijC4w+mkT4TtWQ2PN\nZlEXddnj7uWIp8yyTCtBLpngvwEEk6o0LDScGbCO0QNqEB68XQ2deB/wk/so\nLQmfqbIYY6WgFXlX8hyOhNIl/gf3n/BscqKTdS5CDaaOETPLDcFKntN+ca3x\njBVSXvPbSiDlDaNHpoSrS10UzLJkrAucuN2j37GTbDPC3aR2uuTS4eQykBEJ\nXbDlpBIIgwyu5f8EWG7mRDWw+WhxtEisl96Kq6gDMPtQbHSTdXstfqISo4B7\n+QUld2tlnmocXadJ3IyM6+nGI+mzD+wFD5x/6v1uW4YfKwpOTqHj6Xik/DoE\nAfLWgXNKsJ86JJn/EW3eMaEr1ecjeBX8byHBndNegLiSmaHQX20r3+Js0lCX\nJOdjOWYfuTnQBNS0DEKpDBR9KH6JHUJ+4zSfj/QDetT0kcr5ri7+lN3mWygZ\nW9yKctDqXSnJ6cODl4Cs904Bslrq3TePGHXBuCaqwZQLfS6A3IfASTJZvzy+\ndHEkK62KeDgptzN4Qb5Xm1w3X/cu4ybNmmJ4rjnuJH+DMJ3sfOk00auW1IMh\nfUbshIATCSGQl0f7/GG/Ndx59MuT/Ns8xplSa1FzbYCxLBQq4F9SsWsxVnPH\n/okr\r\n=fl5g\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"485fa4920288a2a37995f4c736a1d429de15e53e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.9b0d06e32.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.9b0d06e32.0_1578435538503_0.4871414594039787","host":"s3://npm-registry-packages"}},"5.0.0-canary.730c807a0.0":{"name":"@material/shape","version":"5.0.0-canary.730c807a0.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.730c807a0.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0bb78e36efbce36cf615bffcc9e38aa89bc6e452","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.730c807a0.0.tgz","fileCount":7,"integrity":"sha512-VLTY1wSk6qFnfhDjs8hCNZs6I2fcXzf4R3SafDHsK0WoAnsKooeEaT648+5kTUG7YtQGWyJa8RahssABsKgM8w==","signatures":[{"sig":"MEUCICpf61yoIQJL3PiRZ4qANiEj3MM6Ei+39u965J2p/ATiAiEA0RjxWFbg9TL9zn9uYRdY+RACQzSzBEFLLcgo9Gsh/tI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":16145,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFQQ0CRA9TVsSAnZWagAAlM8P/j2/UuqH9svN/iSWNEws\nJZxQPJJtvT8Sob9VdMszo+TXIZiZMgPt86y1fTI9HhyMTMj9K15krD1qxjG0\n9uKoMF1EuefuNUHIF+Amj8thF/h/bUotj+WaLmOLn3Y5sXGWtuK9o287nGn8\nrjc7tFhTc32WRZ8Cxqo9+k33vEp5wqVWoSKNQIunbx2HDAkgdoNJt+vTfY1k\noZZ9NlRgaNQm5NhdS9/njmFSX8FiWahs2gGqD6DCRhpsFkuQ/zvP1IjUI8te\nBgz5orKiFxXafUFqcebUuRGj5afltgJw+3mlxylbhaO5OsWc30tJW8FmXqxy\nJ006FWZU+QEY6mv/0uDfyT5+YD1zLqfN0U29cAhWvTdUV5MH7n1iW7nK8pzs\n+f3vVG/hv47yVDzcg9d5+J73H0iqP/uB0HWsyUxfLG/VB83D0ewGaXzPQFmn\nuALywGCbh65E/bwUqpmL8IbAEsrjs6HGMtcJUAw8F/f7StutlgjhyOk5RWeU\nHBWzvhdXTAVl9YBgkhcDQ8UYixeay5O5Oh4ewZO+7LaD72nbzlPGHHMbbDmj\naX5du8vbTbNYxiO6DFJcqCs/+e+UyNJHC/xsNky/Y67sIWKQb82XCgslK+fY\nFeT75Y83U0YXqE4g4Ez8OMBq1gxxaKT2yNRmNX9a8SYop7gINHQ/HYqbEUWR\niIaf\r\n=VjtR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"8860f1c513146b0f8c59a8c70750d1353e61feaf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.730c807a0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.730c807a0.0_1578435636100_0.9503693147450145","host":"s3://npm-registry-packages"}},"5.0.0-canary.2213152cd.0":{"name":"@material/shape","version":"5.0.0-canary.2213152cd.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.2213152cd.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3ecd490588300dff115afe179f5b7a0bbdecd054","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.2213152cd.0.tgz","fileCount":7,"integrity":"sha512-dnyFFHn/xcT96wkmh3vLcz6g+2+Wiwrd7jG9LnHXc9g/Rb6j+hInOq9h4hIB5p9+Pns0mJNvt2atGAniehoegA==","signatures":[{"sig":"MEQCIB6UJAMUPYVliBRs9pNFS3TZOYJjaM+c88envQHvGHHNAiAk8Dfsk486LTfivKq09wiyGjQC8s8EzC+O5cXQNO6rcw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":16145,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFg+vCRA9TVsSAnZWagAAjucP/3cpNVRV0SMGVgH8Sehk\nvLoUXZ8so2dPUz8JA0olHkHhHXn3Rik0/N6HkOZ/n4FVg8K8AgHIQF7iIi6d\nSgeW2V7HbrDtAc/PoMd9GeUZI55yQ8pewixUYnlK9gBTeiMXR/sfLtXM0mOc\n5aD0rE1f7ybR/utU1X3Mh9wtdZIzfwUCqlYhuMJ6XDJGlncPS2u8QfxGeW97\nxeegDoG2WGBhdZsraVWjDNb0hvmIIDtOy/OMmBvquRXZdu18WP69R2aNiT9u\nBNuNNSoZ5R3GmMmm9YXcjuaVLvCnLk68VaK4PHJZzRkwebWfAf9o2F1BiUgy\nE7VIcat+x+jh2YnH0gc/T0SoSHgFKrxfasrjkvmKbUEvZHJBc13Lf0mFgKiM\nDxxs3KCNGWh/DASX5K4dT9USUdFVMSctVzGJmrvHX5wIzVal4rdOGXC0fmlQ\nkUjfmXSGdyVf0uw0phWwHzd/fLWDxPFD48SV/j1c3d37IgstgdIlyoPBCwdS\nJVbm9rDhULyv/Hfve9ADuqImACmYkfeuoPYyOAqlGbimX9S4qmv9ljyc2kB2\n8KhkgYzzDtOVkTKUZFAtsVBeNL09HL6OmHHLe4Y7ULPAptR8BEmWlwem/lVG\nHv8i98zvEaarjq01xyLpq/QYlt1a35+SsCnz5nZAMLZ6wzzASTHVDvIRdI6i\n8B72\r\n=DWlS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"0a3677a82eb2000c085d0cab420c907dca8cf13a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.2213152cd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.2213152cd.0_1578504110482_0.17780519345118528","host":"s3://npm-registry-packages"}},"5.0.0-canary.5750f7169.0":{"name":"@material/shape","version":"5.0.0-canary.5750f7169.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.5750f7169.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cdfa655baf04eb2d53ffa77e97db6e8d0d429ab6","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.5750f7169.0.tgz","fileCount":7,"integrity":"sha512-VOra3kUc7yL4LDVLMqMsFMSYeidEFZTB0oqEvSjC+KoQEXLwL4ShuXLX0SY2TN7NrFMpS0tV2GJtT9glCNU5Iw==","signatures":[{"sig":"MEYCIQDA/0dxnfNbapmJ9iz8iDNhP53l8p4seRSYYVvudiLN0wIhAPzqwS7AXXEjATTGaPMNWL29Lgt4eKyJwnoRHjqLRzKq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":16145,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFhfJCRA9TVsSAnZWagAANXwP/0pNOB05W3LvkIJ8Lzzn\njilLz3FiXpDKT4rda+znqurZA1ORtRjHqpb93eaT1cCsa8aD5ARZKZGOxC8r\nV8CgKxofHZDFMjVK0REFDPyPzn/bq27FJ9SKA+THH68rw+U8b2gvuAq+4MBO\noDR0JvDcXYvgaPBAdN6ww9Gx0Z9hile43pnHKNUiQr8cq+iAXGUNOxqFjNGQ\nBD9955j87cxrxhtcz/WusTbFzg3zPPTNCBpiXwwat/XdcTOv662HFBHAgbm+\nLGQ+uZJk8vA+AE59YHVBX0cNzg39yJVWdqdvMR2BxKjvgI7/QBOB5GUAh4OK\nhkolaA8NDPZdaCfSpmA34GoB1jo68A/jmqJFa+gp7qT4dqTtaa+Kd+0xSQ4q\nWOuP1mmSuJc+bH7v117ndv0Kjqz9irWqbOoLqm+KO15MzDuiOdCsCa8aCA5V\niePY3FspZK8hejlV1yO0SVEvfDBoOzsDwXLxx2RvigQr4nLmUwHM5Ey+3JbB\nkbwSSssIJ6m5McVyGc2CEJHni3EaWhR7WBk2fJNgHRS2j3peDD+AZBb6BfSQ\nA1Zo+5Y7tqNWT4zy1hU5Rp6ziGFq4Y6yZgDiSIoTUdmPu9EvZ0T/4KWpNdte\nw0mrTOKzbcOtTYWsKyJ13X9t/T2CcrAVSn7VH6WqmS+EZ7pjgw0LGpAE4MK/\nYKXx\r\n=DO6q\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"394a48c85aa714b74edbf6f2b4172e4b066f604f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.5750f7169.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.5750f7169.0_1578506184701_0.8811646609836712","host":"s3://npm-registry-packages"}},"5.0.0-canary.f7abc7a43.0":{"name":"@material/shape","version":"5.0.0-canary.f7abc7a43.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.f7abc7a43.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9d64e5ab3e08ef190ea14d87227289fb5f1de960","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.f7abc7a43.0.tgz","fileCount":7,"integrity":"sha512-yOtcFPAjBiiEXQSRFqBQvAirSD2U+CdzJC2zbdWN5RbUgGkfBjLn+ICPkFcTvA9/8ARxJC58kRjX3A1krpGNZQ==","signatures":[{"sig":"MEQCICkSCkZ6jC/axXaSqxPdBRSWFV6vnVVSjM9FP3JVMPbBAiB5HiKlyAaBpT+hass43WXLH1LSX8ZcGnT1fQ+CTrtcSg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":16145,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFh8MCRA9TVsSAnZWagAANAwP/1OATSFX3HYqlvB35cjk\nK2ELwUc4bHzHpwNtHGWxsoWITj15XOvRkv6+YZ9Jy78thU0pEWI0QpjHlQs0\n5MHaOySe4YKF/76TqS5+ySa7thp7YVVgbKSDNX8yTtMBVFkzJqTsYItNU1CQ\nCKv4GNLVEhc0nU5eJeKFCWkfqqiVr4gvP2tjCU6jgWJkclLJSP+naZrNdP4E\nQfh+/okBolJfTeehJiSechQSEm8+gFDFZC1cz3KRX1reQpalxcYdGW/t+BA7\n81T5ZwgPkCUB1N2QItDs7BToRq77iQYbQ3jlsF7lhOwqiz1+JIITmwatlndz\ncU4sL3cshTNnsxMojvVfdJr08yAozbF4k28F5sIZ16aDch3y0JJ3X+NyDMTZ\nrDXa44wqeZQQp6e5Y4PgPvMAgV7F9UYB0OKelAXw99W4oA9239Fj2FFUd/6+\nqMKGfbzUFA5towcCVae+IZVNLIYLis4WL/6c7ZJqYQldLjTBo991ZkP7sKJS\nFzXnngGmB+COVtyEAGDiNlgboXS9o163/sHgVJ0D2/9PPiggeN6WN2G6DNzA\nDauK99d6e0m5xzlhiOETumuB7nGeKKy6JseNGnyWtcWc87JPJbihXDM2TWFx\nH4EBH2SESH3i06zpBrqHJ7JHeQxlJCRGLIjJWnnfZCfY5PxId9a+Xo0U739/\nMxtl\r\n=Vrwq\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"f7431b4b45a3e410e9cbc1ae6abe69c3b00221c9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.f7abc7a43.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.f7abc7a43.0_1578508043715_0.5515908787992314","host":"s3://npm-registry-packages"}},"5.0.0-canary.bf7b4a061.0":{"name":"@material/shape","version":"5.0.0-canary.bf7b4a061.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.bf7b4a061.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"19482e52cc254e7a516e5ec436cab6abaee31097","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.bf7b4a061.0.tgz","fileCount":7,"integrity":"sha512-jYuVrpMVgSIELyLojh9iS6iEMxHwHDFalMzmpL0aCfnWKlg6e7W6pie9oCCARRWG9VErJ5eNYidO8FkU9cshuQ==","signatures":[{"sig":"MEUCIGx9k9dW+PM1uQstqEfxqP/RUJNwe5aDibTHA+zRmUf5AiEAg8129/NPpAfyAzH5CY9suzBRmuvQfBlrHwCEdHE7Y/4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":16145,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFiJJCRA9TVsSAnZWagAAziMQAJGxGuLmBqkO4LNJ75A1\n16JxwLbO8T2GVphPGtFclaTpb8g4FZWoA2mjhawlycSvNqVSoByqvJdO3SVL\nxRYOOrCb/zErMVNWZNP18g6sL8W9JWJF4SuBwWD1wMeziuoOtbeNH/gd+wRf\nHgVzMyQrS6ZPScZXIwTuez8LpWk+6OrvpUqsArqtUJT6mHOl3KQiOXHdr7oh\nrNLwcIQC9FCW25/broha8MkJ0VZf4agbyn25u/qlpK/wR0tkUfEJHqJYa8us\nTu5ojUWhyUylB4BbBUGPYWjCFp/73GBi4rBxAGGcOremBV9U2GGUlX7EgTvN\nLJ6eEGkC9d82MPv91tX6B87JNc3gS0+L3VI1SiublK1POHgK0zFV3b6T5/+J\nltt76e6NgyDN36ag99N16ZCYXnoA7f1mzHE3p9ZeohMCHcRD/4yzcwQ1PXVJ\ngfWlacQZUi2HsxPW/9HCfs3arUSMiiKgMm3mQ7TMnlfJ6yEny7daAqam5UvH\n1u8CfFIY1KMHuvDma8YDwBkIXohbs9Fd+BqMp2L6IiLoehPdMV2dJBNyLp4v\nBAjKMmpkR+3u5MNfM6hX+3KHVqAV4neeJwEEofPriJ1mHrc0gb4pQLz5hNoT\nLsBrH/nqhbXdWqkWmid2YGEj+MErxdxyXlpS3fWd4Z/qOSGCTX1JqW6Z9jfm\n+knq\r\n=9aKB\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"2cbac03ca7852ef897dec80561a01faa8b537228","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.bf7b4a061.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.bf7b4a061.0_1578508873271_0.1210696153063413","host":"s3://npm-registry-packages"}},"5.0.0-canary.784fa7903.0":{"name":"@material/shape","version":"5.0.0-canary.784fa7903.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.784fa7903.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"10ed3ac82480e3f94c353fb38c94abfe96159e07","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.784fa7903.0.tgz","fileCount":7,"integrity":"sha512-6s7kMwfoxvbVu1Jlizci+gf7bJ1OYT/JTWLWNjZbfF9hFd0KqK7qH4twABMHZE51e+aZ+gdO77oUoKWDiwj4CQ==","signatures":[{"sig":"MEUCIQCBr84nEFO9IzVeo4Y9Eg8x6+8r1wuvtqc736V9sor3SgIgdL40GcSr6ipofoNTjyq3ldjim2OYqj182yrNrum18Kk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":16145,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFikGCRA9TVsSAnZWagAAU1sP/0BGfM265vclzXzHvRa9\nL34pSF+RUISwq/zA+aPrC/bDvK+Ae5UPEy5AGACL40dVKDrcjHXrDfOs1wh+\nXxWc3hlIZWAdVB3/fpMWwtkWrDwgQoLCgbQthWijzIGVrNtiKet/lzWPsepA\nqGVMTGY1meuIJbi6+2Eoxp3xdMter46Ecs+rS6ci9OwXOYBLWVNsSj4/peJQ\nBgLUTU5fAJ4dBiCjSJau9zt1hUVmeCl0vXWeV/JmU8rBmwz8kriXJjJaMOu4\ndXKpZ2N9azGndx2TlorhTggygISS29baW5Fj4cPs1RR72Nyk5xNJ55VEUWmD\nUPidyMLDKpT2ZS9/Bu2DKFvgGTKCpqKaSwrJsmICnq+ND0yI4foxc+KE3y/E\nz694rxu1kh+e9G+QjnidViDjaY9/BWoCE+ySRx3vc3KP+KjVSrS70Kbx68LH\nEcrq4BmPhd+gMN1xMdabvfvxwp990lmC/CxNR6K0uIu78Kpbx/d2caMgjtBf\nZsYVE22sCkvvGIByBbREOwu7gCAQbczelAJiGs7ml5veMDZ/B4+3+7iIupQ0\nGZFl8nc6n6u3ID4eomM5RCcAJ/qA5Q/4LdfsPpT3Tf4g1ibHVPHogbPMR9AQ\nIkgyxlCbMNlxfn782wjNMggek5McJNPXURlXXMoEJp8cZbMxR66JK5uwJSx1\nWdpp\r\n=LaGP\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"61b0d187c5c030042fb90bb59c1ebcd090186cb1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.784fa7903.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.784fa7903.0_1578510597951_0.34175736386576183","host":"s3://npm-registry-packages"}},"5.0.0-canary.823c050ba.0":{"name":"@material/shape","version":"5.0.0-canary.823c050ba.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.823c050ba.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"06d0b866f17626d07e53343554f041a7144fa930","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.823c050ba.0.tgz","fileCount":7,"integrity":"sha512-ucVlB32r4d+aYpFSg3VAqlpR1A0uNCKUzpwX4YEj447rL5ohlkVOkEjtlsPqkyPZ4JXKH40AsECjU38XTcCGwg==","signatures":[{"sig":"MEQCIEv6aV17n95QS08ImIJTuIHlpXroJSAQMnEKdvdYx1KmAiA7/+pyw3qnwtTNBl8hWL/0vksSg8Wjc22s2BQ24jAxGQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":16145,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFjcwCRA9TVsSAnZWagAAG64P/jAgnJLuPh01UhZUaZoE\nfwrw/ZU/m9eaJO9Z40E2ay4ZNehede4xZ1nhKvnOB0/+oJm6IDqScgLKeYZC\nKWYyoOUtfOAzg/EaiJ1dy1TJLW7keveZ+Su77mMIHtRmrV7ArwSaoSiY0f4k\ntE1NGNhMsOfoaF+CZBZPTHgpBauQiq1wE3jhjm0+QwX9jRYYR9MKZiRfL5OB\nWRSYgcexcughEZhECHiKGir6YLEnYc9zuKxfHWFlysZWCuE3zk2GVilS16X2\n5XinD65t8LZJcMctuWiXBRuOlKlvVN4p7Jif+Y0zc7Gww7JYdWqGwBcuxvuU\n3zLE4LN5JZczl9s9IW6aECeqeCg1eViB7pVaUv4IEPKNuVvdWFgDRwZTieLM\nnaWJK7tkHYg3DKhHCG6OrKHGKolXCj97DoFu1MDN7eCwHpiArTdUvCcq+4qp\nNDN/z/6fkWffTc0buLWCKE8AKmQKhrekfwZO2jBqmGRoqe3Beu5C4nfOwQZC\nP+FuGHmlRXNJ8fPzhEsE0BxUwyciyMsn+Ax/F1HKwHhikwtAIOH2TaQiGtY6\nFN82cUT7VJXZkVtZDMWU86V3RYBtNtqc4Z2Q5CeNh3qYqlINJlPYb7y5VWrO\nS4SeB/rWBxAzj102QqgUY3E/uNdqE40lU+0c1lnvHgEERktrP5k5YQPmgI5e\nFW6m\r\n=dkd0\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"b08bf7fb482cc6c0e80d365ea2bf510d80680bdc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.823c050ba.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.823c050ba.0_1578514224137_0.7047748761132151","host":"s3://npm-registry-packages"}},"5.0.0-canary.70c708dee.0":{"name":"@material/shape","version":"5.0.0-canary.70c708dee.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.70c708dee.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c5eff951ac69f9131b425d40912e97a5e6cb0570","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.70c708dee.0.tgz","fileCount":7,"integrity":"sha512-y0hNJ56s/WdubBRh9XonI4AQDElMRaUfsz4ETRQCkjy8ZeiL4kI/ol5CwDz1XdY/9M3lLreYddueBebsZ5Kqcg==","signatures":[{"sig":"MEUCICRpDMe94WRWnJKxG/WNG1PvX6Sg+/ak3yC5iCQ6jLsWAiEA5ZNDyxrOs3FOPon0epSV4lZCEbGLkUkwJpI+mrLw8Gc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":16145,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFjnSCRA9TVsSAnZWagAAMvsP/0M2y7Ta7wIHBLxPHLAs\nwU8QGlccNG+fP3X0gOigwXpTbq4h6HZ33IEmP3Zk7ca1UEwT79pleVtEcx49\nlCmZV1rbM/zTcC+ogx9Z2LRv+ET/s+Jg7oPWsBR8NPFBtG4GMPBpiu1p1zU5\nFnPIJ3WF4lejMrz3QYx8svaStX5pSCHfCMwFy6FfrBPkuVUNllbmGTdbRBDP\nBujIb2ahZ4fwy2jiLIcxVFToSuKb4Oke7vm014b33P5o0CfurIHRPRapIeST\n4CQw28zrIc2cG9BCf9wFOSVrGP3OdSDdYRYj5mH/9/9UEa8JhdpaevOEp+kb\nGZnG3bnh8T/uehV2pbrAjqDe2Fcxx+LLQGu6ev/nFTv/1OlrcT5qv6/PUupa\n0aprcdgn4SYWTQskYQbiAIDU93nGbvRWtF29MSISvJyaskFo1z112wQK+vv2\nW46Va/4SzoJR4jZEfTpaZ4FEAecCrR2EMOSF0NuDjC1vjkd1MAtatm2QG8Rl\nP7TOAqpliIJWIGIJmGk1XPgTf2BoTXUeCI7T/fplCrJQoMVLrgIwMCQEJEeM\n9JVrV3CcuowpFaWPu2cL2T/dAN76u9SFRCrzoU1FBd5FJ+wnWGq8R+dn5+eX\nTy+IU5P5/bUpmHASDUDTh7VMFf9cXHu3DH/6MOyCGPO5aya1xI59Ue03hrbz\nYgSw\r\n=GU2o\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"096bee7c4a6fa97b650100f3d0e0cb484db375d2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.70c708dee.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.70c708dee.0_1578514898006_0.6343740705017995","host":"s3://npm-registry-packages"}},"5.0.0-canary.5ed9d13d0.0":{"name":"@material/shape","version":"5.0.0-canary.5ed9d13d0.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.5ed9d13d0.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"83e7a73146b44aace87217800956e7d5b0816695","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.5ed9d13d0.0.tgz","fileCount":7,"integrity":"sha512-p0p1yEkncHcQmqpYcJY8xxL2/HhSut7EtE3SF7PKNJEf5qa0E/zT5pAKxWCMfWOLJl8VXrkj7dxeCFsVFe+q8A==","signatures":[{"sig":"MEUCIEUHzXlCRJXYmjYNSKbwYNGrA8FLMTaGGOmn4CEtNiZ8AiEAi18/8YTZlZNSgBzWQtwBsqA7vyvNr7hWaMCNbcEAVuo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":16145,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFky3CRA9TVsSAnZWagAAVq0QAJ76zt+wOhkw+euJxxcI\nTp2Xcuq/5DOHLOZY5xdKLA7R1RKHW4gbxBAivc72MvKKUlsbSTuId0CmPbMz\n/JiNWG+JOa2taMCOTusO45N677h9AtLeoFBNSCr3RETC8o04RywQn9k+gGT5\nVv5kzWOOaSTECbbh68/7cAvgl7eR5vYLaKFLx8z9vl8bCHwfZyPkWga83ao4\nEXsWHNprceLxpF6srmsRA/MAXSP8qFeBret8G7xz+TnaDnekJ3TVI2WPzqWf\nqfm7vC0VTD6EvaD4d9mkqxHB/Iv9F9EHWC4bliWgsZ26upI6c+yXD4N58XUx\nOM48ph//78b4RWfJq6YmMHOdVsPnhmysp995bY1QEGwYtG7zwykokLKA58Hd\nX/pRm4oHwJYz4IwJYei0KuhV8Rvckf/LbBjWZlco7SfBJSDEKGPyGxsU3iEy\n5FccBsB9OM1WLMNKLlcfl4jECjWe61NrhIXm14FU7ZJLS8zLbxT3dE3X0LIt\n2sPgJBuY6iBECCActB0KrUje1V+HU2J+eoltwOjIKpc83v101Eln0rI9jsYc\nAJ1G0DL2LE9mV6Mf0y+/oV6yiZOnnw7tYuPkgWpxm+NEq6aqtv+S7amaazRg\nTIk40EhoE+IYmrSkRwUk7uRbxiWmATKaJR4zuQXvigchySioyKJ3TonvA18y\nnuJl\r\n=oxHi\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"3c9ae4313970bc3335cb0223b3e10f3fa3ee8ae3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.5ed9d13d0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.5ed9d13d0.0_1578519735443_0.8873292690364922","host":"s3://npm-registry-packages"}},"5.0.0-canary.4819cc7e5.0":{"name":"@material/shape","version":"5.0.0-canary.4819cc7e5.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.4819cc7e5.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0f95a3b37a16bd1eeab290b23d62b79b90555f94","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.4819cc7e5.0.tgz","fileCount":7,"integrity":"sha512-1nV+8ZYtZykSThv8tEkZI/PHhrwGq6bbotQuTryyWgM/eSPimqlBhjkgCuW3dkChqI36KkyQCwu6Exgs4mO27Q==","signatures":[{"sig":"MEUCIAvDlMWsUXh1KFPfO/bfd/UTL1erp4f/WqtROwknr5roAiEA2RlGBnrVs3G6A3YiHRKHHgTQH0Z9W1VExa8ak8zBWLY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":16145,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFlBUCRA9TVsSAnZWagAApcsP/3GpKKKbhE/UbdoNzHVY\nhtSO8cznQaodkA/I8WOnyovb+XK59c7coKQD+faSbuIRI05ac0+QwBlnKCO+\ny9T9LSATL2Gir5DgKODKa84OerHqWtSJ7prM41LzQLsTPnn4FhsQkGwo7lc0\nUD2D5riTK+bOyqK1HbqUGIj6vgkVvdQpMh1OPmpE6lwgC1GTa43z3GmBPu7z\nnj1LuHSKeLeHZivmKicPhcuisNKnwBixyvU1UzV3XMRWZGdoZ4UcAQ5n7c9d\nWKwJcSNG1b6nNM8S9KZNsMzMEMT1Uvp/as3nvX3zB9xyK2MhwugbZtNamU+z\nOl2zWlkHHHEorGE8AVXWp560LxFfVzk24rn+aDQR/7PrtZE1YppS2GzLz4Tf\nv+FuAc7dcqp5UKEGL7CRd6bmSNvyNIC7tASsmin+EFjzCtCOhhQfiX6sVzL1\n2dYJBjut6g1nJTfdeioeXAIN+UKTcmuCja9YynuM7MPjhtIM39MRjv8x22RG\nMzVCp2lcIOIcWJIDyqiBhnO2eRDielxF+8615Jl7oCjlXoERXdQy68Ihl+Mz\nAmVorg7FgwsD41KBPQBg1qvXlomaj2RM1TPTfTh7JbcKyRZhWeQKMnaD3rXT\nylpr3mCRbeDLv/JZGLvJ/EsFTcgCXX0QT6e1xRRicKMtb1Z18MVR9DpL/smf\nX7Sw\r\n=EiIt\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"1cdb8bd7292ce5180cfeb2b5ea0cf8eb4aa6a931","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.4819cc7e5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.4819cc7e5.0_1578520659877_0.12653913600685285","host":"s3://npm-registry-packages"}},"5.0.0-canary.fe3ffd2c3.0":{"name":"@material/shape","version":"5.0.0-canary.fe3ffd2c3.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.fe3ffd2c3.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"802ed2bda7a2890a45ebcc2ce06a9a42d812748e","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.fe3ffd2c3.0.tgz","fileCount":7,"integrity":"sha512-W+cbZ79lCumWtPpg0WTdkBh5BnnK/vXWvvHH8Jf+10Gon9nv9nxEjmluRcOVYecjf0gO6Oq+rgj5uN3mJDTiZA==","signatures":[{"sig":"MEUCIDkq6r0Qt9oS0sXdJebhdSSoo6W/tvRaYY1gXLRK1r9ZAiEAnlHeKpWVcZtKEfllGbixR4vkiGPHxavL3ws+6xDs/XI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":16145,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFlSYCRA9TVsSAnZWagAA7pIQAJ++OGyz1uZSAO9p4MZj\nkNiwUimxo8V/fpOmUpiPPdabSujN3wfwt6n74nqbdh/EtIhy/yBcUoR3VjJX\nQ1/Np2Kad4/bSIim/NpkUNQg3rlBM3RGFPaNe4EHQt3BkmXy8F2dMlc25mmc\ntn3hiTc48xBJ8tF5fk8rMFQMPihRmEzC7m5Gj5PTgvS3KIx10MQgR4eYLgX0\no8SSQ4MVc9FN9v3vIbz5M8+RTXejYIlBY5OZ2QxHrMKPJ7OMe2iy5qCykLHR\nOju3R8c2a4EutuLhgC6Q64KQqXMtQX+ijbKB6fsF4ZMenkv97U2NJ6QefiHl\nKrvKs60B8Okd9+RGzGGlICDEDx8P9Ogifxu/BLEs/+7BjSTk0Sn+ZU7mn44g\n9/vOZwytnIkHe5y2XaOqvjDM/HScLSKgo0HOhNTGYSN/ZeuL5BbKf/tKJoxd\niDs/fEdp4nb5J82tzlheMtBpVY2uNe1tFxxTfZ79cBQ8vSm/Yc6i8cZx/eWR\n/FRVmeFrTnqlJp+avoafUErSGvkD6aPvN4xixomepM+5xpNDWen757pcWsT8\nh2fJoNUg2VhodKR+Y5utWKczRmtwK4Y/mL3zyoYSyXmr+0lTcfWVH87BK5ka\nnEIpIL5XmrIRCNJ6Afwffo6hsRQWK6I919Em79P3psIxFji+FjlV4s3Zt9Kn\nhfSs\r\n=EVNm\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"ef82dd049d6c2d6439fc79408aab4567780d26f3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.fe3ffd2c3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.fe3ffd2c3.0_1578521751745_0.5290373279871863","host":"s3://npm-registry-packages"}},"5.0.0-canary.c0e850090.0":{"name":"@material/shape","version":"5.0.0-canary.c0e850090.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.c0e850090.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6d3bb7817918effe840099bcfaedae135b213996","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.c0e850090.0.tgz","fileCount":7,"integrity":"sha512-j3+t7QRhcnq3FaeHFs8/I1Ubes3K177fkOQ6s+8644k9jQooEOijQVSX+P8MsWyDv4uJGI3NV8ypvoHdth5GFw==","signatures":[{"sig":"MEQCIH1Oe5Qzq9VhbfCg67vA/Rzg+IzAOvuZIwfgsC+/b0EjAiBIaLwAdzT0r6K4haHrdIckr09Zx4x8On7u6oMpiVmjSg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":16145,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFlY9CRA9TVsSAnZWagAAfSYP/A4y3WfRGP66qnaTWtrv\n8gJLCboJRYZR26o53Nz1wcY5d3XgNeZwK9+Y8Y7kKC+L+8JZxAJuIP9V7uIo\nlovqK7Bx0ehO+gNE5v0WI73Ki8J9415Oi1eWg/SeySILlxxEiM3tpSaUxvDD\ncMfF5rb2CZCFVpXw2QYrvo++VqzUvLNexrU52xhU3MELwCsktW0ZREXwI/Vb\nhl7+1dS+sfpz5zBqTea6L56jJX98W3hXCK9xwWCZ+6Dedxi2M3k+OSHjItIH\nxkqoTAzqDyo3B8ihc3wGxy39YGAyswNnrJ/NwOlrvcdsbZtuaFak/YAk0Q3B\nJfMi+DU77WX4uq4ah6vEavwemUoIiG9uh4WehFezz98Ku6gwCah/nyZmR+DY\n5Zqq+I32EHHcyaPj+7r/mdTNwmuZYZsRYhzvWetCn6t1cjUhQHfObz4JMy/j\nCv5V+GD5Bh52aTFcbKbapjD2Ozi5YklhDKItO9GMzKdZgo+LpjhCEGHuInpl\n+HirWJ1VzbYDakoazDWq43QvJq6K5CGj3+oL9z0bmSzCZCwMnh4fZjpvk+m4\nix8t4lNG+hPBtpGXs9ZgyMSHHnpO3qvFagszJYK+EpnlKSBV8TDBtREhDqxO\nkeN+/lL5ZPfwsZj1495tAliljxN725J3+HYBdhP2eIhAJzVUdENvsZjGBqQg\neyBw\r\n=qr0B\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"04d9e991ccc9d40d53d67d592c9532cb43e763a5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.c0e850090.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.c0e850090.0_1578522172823_0.9232617647924355","host":"s3://npm-registry-packages"}},"5.0.0-canary.615f86f38.0":{"name":"@material/shape","version":"5.0.0-canary.615f86f38.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.615f86f38.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3acf24b81c5a1b0ff90b965fca7edb5f77facc41","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.615f86f38.0.tgz","fileCount":7,"integrity":"sha512-lyZDHQfCUmyBHGuyIROp+4lP55TXlSy49it3JiMt3A/u8hjvUYvxOrm3sUcqkKXdhA86YYfRgPrwjjHlmSrJHg==","signatures":[{"sig":"MEYCIQDljnZV2o7SttMQiIRHKx6dJG2FFKLY0vALi9Mxpw7SBgIhAK5FqSAHeZfvfObydix6C5ZAXNYAp5pjymHuv62fcSG+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":16145,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFlopCRA9TVsSAnZWagAARYcP/3Xn5xgFm/76ZGvfysIt\nVR3kWdD/7Cwn59j2+hpbQueGP9SymUaoAGrS9a0S9ukWLCBgZPGxSEszCuTl\nZXFwcH3er4dT4NytSVyH3HxfVxBeB9dac7ImUG9QI5IPQBgEgCAcaHdEC0P+\nafJNdC2sYsVTUwE72+Ak8Kwn+Nmd8quBL5s7EeL80qva162IzF3YEWq3xNzb\noN2ww5MQLsbePQ2wrwUMoxuQ73qoFPvtcqc0RxRrU3w0JCOAYES+dijERamz\n/NAR8T3p3ZMYo/iJsyTlGSiha6bTeP3ePodi1eRkqm25RYDD2Kj5kQKpiu+5\npyJHQ6z/TEF66n43b7O3oS5nhXY5w8tX4aoP88gybk7VrGAQMP6InCserwsm\nEAuqoKZDDyGS9gadwrQOXxQ9ZYG30Sq4Vbx0i3efa6qtA6LZrVFgxrmjwF4l\nGP+HxMAM+JlGU+0UczHeRVqm4ydxwhbVKGaSZa1IIsyWdHeJpOE0nRQtiS98\nmtjsFX8Q30a6Ji0mdLHtjDRoNHOAaXlBE9y+R0Mdg8V+PjebhfVROY5euyGX\n1FdDmu16MCVC3UR5Hd1txEmVzsR4z7/BHuTxesR5zBmyww1TfH1GThk7I6j9\nORNGQ4xUQ8nlUwephYDdruTJZ3cVXzJYepcEpClUroIfRLWKCKptZHHlskcN\nXPNH\r\n=hivf\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"5ae8bb946c188918a80b70e03e7d35b1e27089e3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.615f86f38.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.615f86f38.0_1578523176765_0.802323964211954","host":"s3://npm-registry-packages"}},"5.0.0-canary.1eb032637.0":{"name":"@material/shape","version":"5.0.0-canary.1eb032637.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.1eb032637.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a79f988d661150a06ded201482bcf1bd354b85db","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.1eb032637.0.tgz","fileCount":7,"integrity":"sha512-/PqH4nzZoz3zyLZnLb4ktwBDmPjKP4HEvTtwF933QsNqs9j8RmEU3W4e5hnqtLdN1jrECH9yg9fmrkHbiifQ6Q==","signatures":[{"sig":"MEUCIFDoUGzKTesG7UuzoNFa+gXUd9OfWnMj6BwX1iVtipnEAiEA25vUPWyJE7N7RHSRdCSFgkMzFDi7wqJAVgwV5/mmrkw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":16145,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFl7ZCRA9TVsSAnZWagAA1oYP/0N27bBwggBK6QpXN8n5\nqBrAg1G54jR34nLGNJ/xiGJFa9SgNCavObvYEw777XzQkQ7OBMcgjKYW1Jge\nTIexzDMHmuqIZTx6Og2sNoUUQzOVbmWGbSNgTf7sF/WMR9JmTF69FDeH7IHI\nLilIXVKHU7QsX8HbWLkH5Un3dMllP8Ohg7kkSRMLJ/YrtzoMdngHjKgVIYqV\nC8t2Grx4gBcMMH7t0KkMqLpix2auubQ1sq5vV6/1p29Gk7nbfV6PVhxsO1AV\nGlJnfwOTLItp6D+7OflWCBH+/ijtvgvP+ixtbJBCgZ5fDDlQTcmrpt18L9uI\nEZH1GPuLVluyajnl6ALTmc5MsyVmviUaqcHQEYG4yPTGKrxwzXQvnnB3Q6Wr\noyJHkyaXA16xn5Fxt+zU1/vbvQJEvaGJFhvlQo86I51nhzpjHwE+F2lvOBOH\n65HwsdiC0o0L6SmrALbsESb2dxZxpUAztr+i5y539b98Fnj/UXDmGzVQ9RIU\nLDptLaAR72DEZRwsG/gzyWEjPp6M7KuCa8BD7SNpPgEW9Vvb6ih6CaCwmaCe\nI1ZYCUWYaxLxvFpFMSMtABJpkfjKuu7MAGnmzFKyNWpPI52eqRrJ+z3Lfqgp\n0RKxZX1a2r8H5e07th307GyOPYrnX7qf3zvUnBVe1kfqqJR7mFU7xlGGFjWc\n3W/C\r\n=Pdnm\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"ebd5efe5771491e06a78d3b1ca6b1af49af8e943","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.1eb032637.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.1eb032637.0_1578524376810_0.7506286902004615","host":"s3://npm-registry-packages"}},"5.0.0-canary.5bc5ebfea.0":{"name":"@material/shape","version":"5.0.0-canary.5bc5ebfea.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.5bc5ebfea.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4dfcaad0ea22494a8053d1ba26c0664542763e9c","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.5bc5ebfea.0.tgz","fileCount":7,"integrity":"sha512-zUdeItCSz3E0gRbKaJ8ruVcW+swlPLYRgIzNmVAYTdI1TED6RXw0OxQfR6zc2g0rIFIFkz6K+YGXorhLalJDzQ==","signatures":[{"sig":"MEQCIBEY2RN7lGow8QmNY3dxC/dUrzIURxCDb2EbZmvSk7DSAiB+oGplg0F4C4QRzuGtjrGDdNcIh0KTG84lyxRAmyj5NQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":16145,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFl8LCRA9TVsSAnZWagAAwxgP/AhC0mFcsoI6JShpSSmD\nlSol6su76GyXnmBwC/l+HldeYqRs5/s93vJRwSbAAe8I7ss52cvDRAl/xQzK\nyyeh/PBw+/5nSBIlabQhn7MRCyxWmJ9rCk+Zdcx8LhbhDUiVDa83Zn0mkMmb\n6pQ7/794I+lftctV5KDQRrZSGtWfsz68RmVRftoIgE1oIpsL5bY3aa2lJsxw\n7SpvAwjVfOqS1+G1AUvimtGA15tjtmtJhcoUVRHxXI20ye0tjGekvt+8ejNj\nR9OT/McR1buuTB1VQeQfYr5/S/uqYPM6iQzDhxdjxNKGAqhWaeELJL6TTtY7\n6Cg9sK1NoTjwY9Veu3dNQusl4W2KRxmww1NMdXeoDoamSO43u5ZP2+MY4LqV\nT4XCVLf3+2xJIB2VBVQZujytEZqUCqObvHHTnebnCufLYC6a8+A8w//IrPtC\nF9822WMPLcIVYwV6T/ftRlSpNkpZ3zyvLWbmEZaDGVFmCDrHj4slSyfrJF4l\n5rbJdGQOg0aemibVEPVI/lNKYJVULk4HkfCAtqpM4rcfzyZnCkPch2tyFROm\nv0HFF1bEmlPGctcEqBg/NVNtVZ/WD/2RzevyPUFR2P9M4jxh1gOOQknVMn1R\npa6aPbDa4UZ8oE09NZyXUoBj9csnrq+woba27SJjnRHXA4+/yKgoCMxW+lQx\nx9Bo\r\n=HJUj\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"8d87a9536a0b9e4af0865ecc4d9b558a6c193f33","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.5bc5ebfea.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.5bc5ebfea.0_1578524427328_0.09850404346959962","host":"s3://npm-registry-packages"}},"5.0.0-canary.1112b8def.0":{"name":"@material/shape","version":"5.0.0-canary.1112b8def.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.1112b8def.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bb1f9195fe64ba43c24364661a579f1d0d623f55","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.1112b8def.0.tgz","fileCount":7,"integrity":"sha512-fhX4bBeujtbj5eZVOUTzlhVxNjnq1VQuoKOYSiQUfNR0dBlaQQ2Vf5kl0J1Gn4tGoEMds61iQn+UYYRaE/1bRg==","signatures":[{"sig":"MEQCIBoQDpAPKGYO2mKnHqbqfRPlVdsRAzxHfe1NcPAdmoRjAiBum1Tgav5So3qBE110RU1w5hVT8X/SMjCSgb7GtA3vdA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":16145,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeF6StCRA9TVsSAnZWagAAYkEP/0TDqaU/CIojqjE2HeAy\nEVJhAL8iEBx//bfodpDYO1kBJeBtn38Y2m6sq42mu08g7fCo1M1kqNk1Z1QD\n67x/WpjmrdhrOXgfBKbVJRG4iGr/FwLktvE7XIbhWpzFIkZZLzvVychQHIcd\nFLf/kOh8+JZsd0nax7WvTxIVagQ24cuk4bfewcl3PZHVz6pj8mgngyQqcHWh\nSBXL0/LqcCJ1lBT6qHOl3FHVs+fFiBSPTZJ5M7EU4+lPnj9sFjYqt23fSOYP\nmgYEF+TeWe8lcMmS8ldxFpN0AVG2tNNsHEnbFDz8AekeQ94DhJ+H8uuYQg+y\nws4zTzwtcGZdK90pQufuaY6D1cmgOxScfDbBfx7H58vLIwNWRUXx9tEr8XQs\niZzFA6hyRxoaATmGfySpdOilgjWYSfME9ZQOR+0UJtEay+eWaphGYEKy25eU\n1sRjsJ5dklP2TUbGSwvhcCv/qjjq2ZymummV76DLYioREzUAA/vwQBE0/HjT\nrYztzQiLYj80/RvZHPLs9VybIfdKJdG+WjeEQTg+eGhiDS0BWH+2cl+aswSQ\nsBspFsBRkeXvLU08lhbD+r9MUgRjW/eky86MXethQ/yXOi4bcmiMrIUIg6Z3\nf8TTk4hic1szB9MdoUAZnrgcfmYiI8OaZsuLhV4hbZHKHJ6FJmVHz/hHYLJ1\nfI5H\r\n=gfEz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"3fdcad176780c1976528d217d2fb149875bb4b03","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.1112b8def.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.1112b8def.0_1578607788693_0.899741064380895","host":"s3://npm-registry-packages"}},"5.0.0-canary.aab102017.0":{"name":"@material/shape","version":"5.0.0-canary.aab102017.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.aab102017.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a4d737a185753c444009217029548549570800cc","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.aab102017.0.tgz","fileCount":7,"integrity":"sha512-i5CIZoy92NhQaiDzbHRmaVRBXrpeTTj2DPVeYPAHRJ8sJyob4nIDpv4BVE2o+Kw5ny37uv+Zp/oqhikTE4fOeg==","signatures":[{"sig":"MEUCIHRb60ZowkCG+vt6xU3wZxbVQP5pJiaUrBywptefRv7sAiEAmPGMkLdYQhZt3DRjoOqDSn7LsQRUWI0t0iqsiFbI5Ac=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":16145,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeF8FNCRA9TVsSAnZWagAAMpIP/jhdE9NzJbAM1ed2iHw+\nKzFUD1FJ3rfyHCQbXutKCMRSYggslJk3/hDCWcZ1trpXoeGPluCQjtWCQSQ0\nFXSLTs4YY8Z/23/bjPVp8jNEq37tDGD0DxWomL4dn2Vp3mZorTonsy1VrBvD\nnUo2AsdZ4orx16Vn9Y4U5gWnYqZzlHvrojauGMOwP/kMXqzDocKdJSqXTP5M\ndj/UOXK9mpMAQklhdgevdnzFr10gvoxteAgGmuwUk3PSVFtr/Bmc+DWVQYOr\nb2FIqPhjfsa2g0DSDRTzqJoD3KvM5Eh8KJnlSQ9CyNjfTI2f3567BQX6FaTb\nqmgD6Y21nFpCWDsOQ3VwMyx0dKDdxTaHgZaLKqjdgdH2+8sSZ3GlxR+pC6P2\nVmQm8YLSmM+JaRH1OdJu9uDHTfYSeleoNjPA9JylKXUnuOTC0jKWYWv80oIx\npmxXbIJkt8y+h+JnqJhffRNFVUvQYbq6p0LdlXp/FZ4Nm7g4Ny/ScE+cIRjL\nmllhUWZNy3t3J0pfI7m2u7QzJ6NRIMd+Etef+1FAv9EqBYByAgHafQeVGUXU\n1I28oGBKYg4U6CC/qmi6oHyhYfcIlBWzq4hp/F0sUabXiEp7ykR4Ujz7m6Jd\n4fPh1YwJcZjhgV4ttkRozoQer4ca8Io3BIffO40cFn+B5SYf4eHvZ6HeeDgV\n+QT4\r\n=hGxR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"3f5eab02080f0c4fb48614a44647ed55d55eb9fb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.aab102017.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.aab102017.0_1578615116526_0.20398363588053403","host":"s3://npm-registry-packages"}},"5.0.0-canary.426913342.0":{"name":"@material/shape","version":"5.0.0-canary.426913342.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.426913342.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b7e4a7863b32f6d3c0d103a0a6fb44053b99b101","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.426913342.0.tgz","fileCount":7,"integrity":"sha512-oeBgYhXkO5iwGJyMuxtMYd6jIeYE0gDFO4tmGNNTxgi8PJWJSneTTHtkcoYIkQKoEC0CIuALuDcloFRyXk8X3A==","signatures":[{"sig":"MEYCIQCuX0qIL5qdX+wgG4kkFKGeht9IKSFuHcvoS8H9QjwOpwIhAJElyML7qg7OxvM+gK6NJLFODw/NIjaP6beoR03PIWQq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":16145,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeF9bWCRA9TVsSAnZWagAAIkwP+wVD7hvbU4+WyJUyqkNO\nMSfQcl/nUO28C/ycoZMkOleUiMbV+Uw0CRl8cgCIfSL5jEXsPIhMoGzfhixR\nmEnVqC19eiYr86sgAy49LWnf68a9iFDa3h+1EMLvQ9taClynD/SkfDV3kxeH\nZHBh0NLsT1VqU3jL1kOmW9iPWqtScjK6qjB7/q2wgK9FSWivx4XNl6PNRdc0\nxt0Hw+Wu5p4o/UjXqY63CaPzr5F2SJA/s4EPL6OBU1ejyHqbNwY9fbk+bIxS\n6AmWdfMB7eGzAPr5yfqUYm+r6GF8fkX2ge9rMg6zZJBEgbotPEwPAp/rf7lu\ndVwL/yWP+JoPsC6/a4H6cPlAgDj0yNzTqowsg+ehUDnR13iXzUenwxTRkuDT\na41HsuUobykasljPJWJpj8CJh6ntCtwqSCB2qxhx8gnvcFclUunfwccEqNtY\ne63JI6WzWZ3OUEeAc0V8xYozXCkgsE1wMElS3KMidpinLAiLUoSdl+GIG2ak\nmjXZJcmZFec534G8t/jPFUDAvGhjTrBatbKlioLjpUAs6eKQdOB/8C2e9tdP\nSIB+2Lz/0HSgpapSl/umO3pMHI7kHpCVOL7DEfIKloy5h2ZLodSjCVOG7XPM\nBktVT0K3xG3GlpbFSVhICET81lWl1BLAKsHEsd7m5iuQP/ksHXlLXTEszLCN\nfWIv\r\n=IfJl\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"7a6219dfe8ca1677971694ece39ab423ee8879b3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.426913342.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.426913342.0_1578620629743_0.3549674088912751","host":"s3://npm-registry-packages"}},"5.0.0-canary.d4ea9a706.0":{"name":"@material/shape","version":"5.0.0-canary.d4ea9a706.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.d4ea9a706.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1dd8b2e521086ed9f55cf672e22d18444e8b7dbd","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.d4ea9a706.0.tgz","fileCount":7,"integrity":"sha512-NLInJrTVnpZXxvUg73zsFZ6YibcEzmRxWNG9c8NXnsG6x8yqJl6aXWyLE7mktWka7IECDyDGOvEJKhkgttAVCw==","signatures":[{"sig":"MEYCIQDS+3sAM/IjPKgSB9EHp05l+PCJOpHEurekpMU3SeiEQAIhALR7ciipbOR6HSPC4j8O0+KrPqK20Sascy2EHukKGlFD","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":16145,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeGLNpCRA9TVsSAnZWagAA3mMP+wUcgeFGd9vsuDmMHDlQ\n4A4p9dVoZwxZklp2zqAtexAVUtqSePPn6Qvk1xun0/xD6dohsTw2AkkvCvbJ\nh+TLJFWtVYs0A2PCuavzg4vFpJik2T1n9K9fGHjDSyD4NWSU+YmOTPimNBw9\nP2ypB9mA75v1B0PczSzw3ix0IHjkJ23bDcTBYbudpOm5DFfJ3LoilSZcRD4/\nL0+o4OKuYQNY4IcTfSQ7GbrcfaK03qd7F/oYqfiAjJBqJQy295mPSthRzJCl\nOPt+2N1r5WL1b1JKmHQaHTh3xnYdEHrLpJxdc7nWb+zA53pxBmPOJf/A7ZRA\nBczb1phToTYlmEk2qhYsbQtzJK9ZvO625YUitz9K0DwBAOhzDQV8KJDSM3uw\nSClXR+qcB+YA00J5T2EODYS2742FYrq1GJDoggpeRu85m2l6MEsE7z8x6s3j\ncLmSSehDgLaymSx+r2onaC5Nhsp/8AyIL1lfuTRTi02QL3CYE3JVvUNUZ5oN\np4q64yVQIquq9iZPP7d3pHsOTqS7d6UnBkwvQ+ikdT3E1GuKiyznWQ5svZB5\nSaxv92aS+742A+M4PN+EqzngftkbuLkc0eDfjlbA6GmmPOL0WnodasHuw2ea\nfklvg9BhMZiFVJ5xT/9hz8eXIMYw/M1/8Sy/q9eYVLAttMMnoudeQFHM0jwK\nROPv\r\n=vbb9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"f4f80c96af6c2e34c34a3ed8f01c1858ef738935","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.d4ea9a706.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.d4ea9a706.0_1578677096955_0.27773137401651615","host":"s3://npm-registry-packages"}},"5.0.0-canary.7d4ee2996.0":{"name":"@material/shape","version":"5.0.0-canary.7d4ee2996.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.7d4ee2996.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"93d5bbe0c6ab24628d92ae08e83eb8621103d2b8","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.7d4ee2996.0.tgz","fileCount":7,"integrity":"sha512-g2y7w1M+5wAJD7aOcrL8Q9giRRD6wK2eHdVxg5DZ9g7aMEVNI2GTEY+QTVavU3XnhgOKcxeCCpvT4H2yJvyVuw==","signatures":[{"sig":"MEQCIEX3FKKIYcNVofpdWZslhl28Qxzn0ggmsvenMsNt/iRjAiAdSlWG7034P90mLlqued2+RmglWqx8n9eu8O60dYhyYg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":16145,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeGLrHCRA9TVsSAnZWagAAD6kP/j2PoWqS1N9qmSBkyYzh\nxvrmKF47XJn2OFro26lt2xvRNpgmNtreTJ69fxtpjEpzx52Vp7al836U5u7g\nw9iJNcKsrArj3euQcwpj6zD6/UAnyjKnLyN83N+3dEj6e//QgLN+gr/wYyRX\nfgURCf4xh1OQ1NNX71TZTucmbITc5HaFIFafATBbbJyJVOc0iEalAQnIOaHd\n8WR6eM42MiH0sVtnR7BNyCYYtPNkK4TIIJkCtr2xczQ/KVKz/atuZPfGjtwG\nJ81R97xVbex5J6NQAHHa6d3GvXlyAfdgxCBgN1NZTWDuFnPGo9zyFMjFA+pk\nEpCG9FXN5xRfxic118HV96UeO2p1Iv1I5WFQDQcROHphVaJ61ITtOOq/1RlS\ndIGUarT9Pf0UwaUq0C94DtaPlYS1LQ6Pd+uRKXzmD2RsA5Okrh7kJKVgt676\nxu7oWZpTYQsfwQPLviNYIRDhgNo5yINCP/QMm+lhUMC8dSjlkxfK/fkZVHBO\neFo5TWMPLd4nB2T9Scqf6Tl9T4iO/Brq037X4NF4Qpk8zWjHamBGfnmjGlyw\nFhJOKxGOENOtThE433CG/paqbCR5SYkHOIN2UYrgqA7eBjDZjaX91AUPgfb3\nmfVpoqaZGVjiS8DVOAL6GFg94IrGVDWa4Us7q+qnzZdKKUDAqD5emb4kVo/R\niWbY\r\n=JeGI\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"32cff7b459a8aa1e335c6ccc84213cff0f6e66a9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.7d4ee2996.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.7d4ee2996.0_1578678982989_0.22039046733167922","host":"s3://npm-registry-packages"}},"5.0.0-canary.981ec9b6f.0":{"name":"@material/shape","version":"5.0.0-canary.981ec9b6f.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.981ec9b6f.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1aca813480c7138f02c164e420427180898921cc","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.981ec9b6f.0.tgz","fileCount":7,"integrity":"sha512-ILDQ5waFzfTaQO7tpXJXNEiXCFUoIlyzpC82RknlbGU/EMwoEk4q2ySJvzhLBAtO8DzDhv39I8qUOGh5Kyx0hQ==","signatures":[{"sig":"MEQCIAz/2Ps/7bUNUG0l9PL03Sn5ZXgw0BwK+ponQ8Tr5qLhAiA5+SIuflEiI8m8+lCknV+LWKI99BvTmOK8pA1TO17FIA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":16145,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeGM/YCRA9TVsSAnZWagAAIXcP/3NzIP2C3ZFWrajNaFAC\nT8WsiHVReJJYize3qEBwwol7tOxiAXdIZJmLvBkWIYGU82a6EWQWcSZbmk9Y\ndUjAyxhQibYM8BLAhtNut9UbZIwib4bj0xGqXmS+a+t2qNzCdLuoaGKS2oNH\ngV38UyvqvQLnB3IeI+N2TnRMUJ5zFghLmSCBhY5v/WP15PqvyEWatEMeDwHr\nPCC62CwM0RkIdVy4+PAKbOwuBB3bhf8JMXYOp7oOkkKAkpyI/JcOa6ecQKMy\nc+xsN+Xgljom+9h8yNV1szpqqT4pffsDFJu8jyINUC/rovAugeJPctKWzSK2\nptaHeWUmel9d4ZN2N13ttMNT4Ey13whC8/h+Hrmnb5rlOjOVD2lU/+Ml0EMx\ne/d8DIK5VXXexrjue/4+eRUQCTIw9ELhNIVlpWvwNnMdQBzR36sODdC6tJaP\nUCS+QFexnl2/o2RaZYRyXRDkQnhorfCfEyTJSG+mHQNaBChrev29bb19kiqI\nsKbk4oupWVfwn94Sqi1mDOX8U8Os62F7mQ8dX5s023HxAt3g9EtUsu7qRPvd\nK1U+HiRPL9VQ+3nhJGz5osZkokBP8TyYYpO7eqDpefpIETY0wH+oIKxaDjPg\nmjAu4kXDizoQRrc/GNOoelu/DCf+GAnP0/ZYNF1oaiP2Xwlr2EJAqfO6YhdO\nMf1w\r\n=BVNu\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"e2e9ae33775d14566dd45608f66087b2761d454f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.981ec9b6f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.981ec9b6f.0_1578684376564_0.608628120683468","host":"s3://npm-registry-packages"}},"5.0.0-canary.737da83fc.0":{"name":"@material/shape","version":"5.0.0-canary.737da83fc.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.737da83fc.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4dc8a4e3e9b5a3be23805f56ed5cca66baf5c8fc","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.737da83fc.0.tgz","fileCount":7,"integrity":"sha512-0zznc/EhJ6LIDFinyXtSreHzv5l0JaK0QD36Tr07U0hQ5YAFe9nfuSEngHEi2hdPxXAStczv2kj+83fk7FqC/Q==","signatures":[{"sig":"MEUCIAuUvMJJM+UZrDn+VJvLZsk18GvtmB2E8gtO/GsW90HuAiEAnpdS1LTV5sT7MB0XGko4XoznCBTZIuJq772yt+hvZ0w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":16145,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeGOoiCRA9TVsSAnZWagAADtAP/iJt0BjTNv1DRfxRrQOR\nSzyLGix5+fUvLemkrZbjyeG+NeHWnHGbDCDxWisRyTyG5AaF67Z8a59ZkZKu\nHRQVWTj5JLRhIGr0bQ0q40N/rl4Ok3jjhitfZAl107TMnF8aRKmXwHhgI8oh\ndPusnmkEyI5NdbSRD1qBAccA78p19vt+cKBmGOHRZfIyFfuq0HpeAxkpxOtN\nNpPrafIzonaOYNtJCuOStIvMabl8NwslCpPaBnHsifj+n1q+sf2EqizFIHKB\nSoDR6j/qmtRV/XwF4p6Z/dGLacQX2dTzp8jw+v+z7cUWCMujah76/DiTZVAn\n1Uq/Axmt41NX0xiIrRTlh2M+s2xO0zi4mTIhV4EqDoCMbQOmnIxQRADxIO8M\njBZTHz/MFMQgSRdDZf2n2pjlr1cQtqqQIwhOXYd53sNKs2AfMWLCMTqZrlav\ntBvYvhHfBx9kAuZGwNHYojblCr1pHV2ExLNFvjC418SjEj1pMGqB5mtU7cx0\ntMSRbvOVLUfge3xP301W9P8MAo1Pc0KPtfulGEJ1zLgYzRb5sb6Lu8ws0kos\nscy7ZEyJNnoKVxmttsa7oSHPgwshnPyvTKRFqS5/keuhH8Xr6e+LXhiISp36\ne7TQHBxwOvpnf1ghXxY+aLZA8u7F+MmfGEbrVZtb5E2Tff0FnXyycZ3h5Maq\nSAS/\r\n=cXmv\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"3ea8f6e8d81e688483ab007855dce5cba3b72015","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.737da83fc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.737da83fc.0_1578691106424_0.8294398627804833","host":"s3://npm-registry-packages"}},"5.0.0-canary.aca8e6c18.0":{"name":"@material/shape","version":"5.0.0-canary.aca8e6c18.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.aca8e6c18.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2518074b00ed377dadcc0cfad504cf91227fceb8","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.aca8e6c18.0.tgz","fileCount":7,"integrity":"sha512-TwXModpdtKxT0fMwDxRl4odBr3kW8OUtNUAt4lslvWfyjK8+C8Ubeo7qX/wcON0SvURSafUcjv/I80jOMzo0sQ==","signatures":[{"sig":"MEUCIEqk04y7+/CiSrJN2wOcQCBSGPNU/tR654vcXDGTO2+CAiEAuI9DbAWQh4kGe8LyQpo2py7YMgi/39vYkiKhvPb1u+o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":16145,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHMV8CRA9TVsSAnZWagAAB84P/2LVaId+4a9TXrThphuC\nFujyqm5qZZvMbueYODjRnUlncEJfqqrYELaDi1lV4imcfCD037LmFHk3OxPu\n2IdL9yyj0L2oj9SeX80N0iDbbmpFE2NPamjlpJWsQo9seid3AoyAEXDMYQYz\nSMa1jbKyjEiZy4wOt9WhKBA5P2tWvkEOblqyRyuVpGMFam5RN1/XCT87KmXx\n5/GTJiVf9gPVPFkWJ+rcvKbpkcVR2km5sJQb8BJ53x8yO6J2/SKJDcw3s11H\n/N+qwkGiXH16Jt8ZTzIW3ASBTx5ZYJ+lp3NOiXCTuydp9M9ThEthEWVAVSDC\nB4UeOw+j3ahfxsrKeZ2pCaNCH9fXS/JAKvbSxviF/AYALp773vh3C5ZfKDi7\nKaC4HpHHV/1wpWxWvR+vxv+98tEUEEYYIen1wR0gfsgsF+pwunN9uNexIYHU\nkefONu9K54se9W60IdwH57xc83Pa7uWGLRYv5tNFtiWj1wZZOifYs89Dq4Qb\nqdooTkY17KDvkr5Mg9B3QgHOFYP2puxS2fFHTtDankU9Jstthivm5tT5q/pe\n8YBqWWaCtj2I2NkmPiFz+cltdtJ/WADcocg4CMRz4B01Cg2BPS3D3+vUMPqN\nJYVYvxY4jyjAU/AZ49ZM/o2X/Tt7RLtC6wFTYNNR0hwIph7FU0pxUxXaIXN0\ng9tI\r\n=FDDK\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"47bc251033c39b1b8f816f8ae77c888c07b20fee","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.aca8e6c18.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.aca8e6c18.0_1578943868346_0.6858799556710722","host":"s3://npm-registry-packages"}},"5.0.0-canary.c38d84e21.0":{"name":"@material/shape","version":"5.0.0-canary.c38d84e21.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.c38d84e21.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"907812b35d40dbf8be8f5b126e536a145d9fbbc0","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.c38d84e21.0.tgz","fileCount":7,"integrity":"sha512-Z4ekx5t6LScCwYwVKfMOSVy4mxpo8dbKz2Sg2UVvJUV8XuA5bFLqngMSWnqRb8jL27GNJAT3pV7She9aERr4cQ==","signatures":[{"sig":"MEUCIAaTwhLHwyVnPsU1Gx+NUAmMWP9SyWFc49GKTlZdTUlVAiEAp0+b0J3e55BVHXiW5MIBMiuWg5F9Ah4IkO1Mi7e9t+s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":16145,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHOtvCRA9TVsSAnZWagAA5GcP/R/BmR/6P3r42xxv/Wxk\nSylN+nkULWKEwvs7Z8XJ3/UIGoAhpxtWjPh7v4Idvat9Rk5xxi+ZgVbGhEzd\njHLZ/+sM51YoSVvO2zgYJKLZV+cbQv52VOKK8fkS1PHCDyZmPU2GQyY2aJKS\nmE2aubXXiNX2ZmLcnNzoAKj0DDAXDnCE2JTxqXdc7KUPBg3pvGJvEzsU8kYg\nZxCeKxuRM0fth4bMXZIxsGoaQMa7l860mi87Cngv5pTYUmcTgP0Or+4WNW1/\nWz2Qbkuayru32Dr/CJsovV80e5uq7rhR6fKaJKkw28aFP9f646q+Zq10xI6k\nTUI93gTlq3Q77farDktNnQegFHueXtCwuIYi6fBuYgszmzpkmk/aw7YOxiVt\nwY4uYocbtQH0BotIPb0J3z3sYB9sL5PRXeWyqFbrPC5LlljzctuXdl4LJ9X3\nCP4OjQcQRI1bI8m6WlPpjlDEFSOPNUeWqbFRd9BmFkcsZYoe/qFD0iGevEa0\n3TdIBLWFiYMtwOCX7WAjJwAiTIFGV62YUIz7+MZT/vJXZiqVoqZOhKwT7iKO\nCQ2QDMsXvu4grnINfQiPSJD4qW/6n8eGjLbf4elsl3v8/B6eygQIkDvzOSaK\nzeoTIxwUOjiHPvumrR7p8v5sJ2scZ8BAIkKI9jzNMjdEpCq/WHRj6jO3LK3w\ntOJC\r\n=Hala\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"f283cfd55cbe9b1863cb96e98011fe4badbb1fd0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.c38d84e21.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.c38d84e21.0_1578953582837_0.8279655130349861","host":"s3://npm-registry-packages"}},"5.0.0-canary.a4db5fbad.0":{"name":"@material/shape","version":"5.0.0-canary.a4db5fbad.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.a4db5fbad.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eba681faf2cabd801aed2c0f473b9b03307b5baa","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.a4db5fbad.0.tgz","fileCount":7,"integrity":"sha512-hfiOU3IZ0o1XVUDEUgwwjm3/zfrv0268awjQlNVSse6mostZbd1dsIk/oxDOXiO+4v/Dm0lzlDXlY5NP2cGsJg==","signatures":[{"sig":"MEQCIGJPDr4nwe9r1BbFUsvpn6buZ7pSQ75PHWUwYAg7y/DfAiByPjr/pO+mBfvXdh10se119aCzXRuoiBORLdbwtRbe0A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":16145,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHSQmCRA9TVsSAnZWagAA3e0QAInY0/bIEdaVzOiBuSiS\nEHOO8U+ftVCs5RPagR+fMWD6Ol2iLBtiot+4C58jnp30DNtVk4TQxv5p/lDb\n8kqtoL+55GZQMpFlCYIs0lMlJQjn+Dal5OoBV+dXzX76pa1xzHbH5ECkKg7Y\nOYcGWVQuckJPC0vzqKUdDOoSbrPZxMBnyP1AaiBuxrzOQ5uLZuEG+0oUj3ts\niZ2GwAGgyglKt7UtOp1PpW+wA8UGvdu6O0MIaXTnb9KuJmCBLr/3bWpCkx4n\nXiVmNuDn6jqgAmmYPXcZU2U1kFBoTkN8Ev/+eoYgoOleWkJ0KqRhmHJq3y2l\n9ehNdM0hK4OtaKB0v0+B74UR+YvC6oyLFiUsZeiJDKasw43vxY/QpS9jVVSE\ntFKz6lmjjr94sIVQYeA2EkFR4rlWsTJ59usvXz1tFJ2rEagYNmQ6t2sJfDZc\nj9RZUkm1KSWV7KpL+P2cRJnpg7j3Q/6xeS4neFTsdwLdbv1HTl3fE4G6Ra5c\n7dAWLv9sSa/kCqZMEf6C+4kIXcxiedVDZVuoZSE50CTxDtdARf3JsHhzF9m5\nNfSFRUZxtPkUwKEPkKzVikiRhUyGcUkq2iGhcMBoRLwy02ZTWzrO7vMWPXoT\ntdptZUecbftvAVOR2dbROm/j/a9VzrB9p3q3SLURF+1N3ujMkNsXeKXRblGL\nLC/K\r\n=yncb\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"bb5fe141944679686f178779345a5880a89943a9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.a4db5fbad.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.a4db5fbad.0_1578968101993_0.6430857249940243","host":"s3://npm-registry-packages"}},"5.0.0-canary.faa9af310.0":{"name":"@material/shape","version":"5.0.0-canary.faa9af310.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.faa9af310.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e374897a0e0cefb6bfa97047bee0f06fc477f058","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.faa9af310.0.tgz","fileCount":10,"integrity":"sha512-n0JgG3oqKn10hfY8qMG+j0AeHIr9iivPydlfWMUu0bN9Wl+7fEky+mmev6DJQY5iIy8ZuzpgVnG+8rrP+4glZQ==","signatures":[{"sig":"MEUCIQCZIS92zAf+bNPu07DrpmMOg0BO480shY0p0GELwaDw8wIgUmO6qdaGGRulketScFMYQDVyGUTvUx8xgATv6drs9Js=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":17491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHfHDCRA9TVsSAnZWagAA+qIP/0mGLM+Yb0K+4Y6VRMm4\nGjPigzvftEcEBwYnBE0VmKMlrll+zL9/43hAMB2z+94AvJUMDCM8spnXEPLD\nYyUf3Sd66NwzUYJvzV/lndaV3QbK7y1BDjXL3yd+Y6ZC7CWsfLr2UrXTljTv\n+bDMiACSmqk0FObfJcglt5fNiYgGiBT8gZQLezfc/RJjxZu2fkym5O4hC0IV\nbCHlKYKmgUbVF3BfmonkR/uKsgFPg56UKmGE6FTOHKuBEtI77IybrW22cWoK\n8KG+ctp4DvOjFGgaYAC910tLgYYxB7M07hqhXHRdcaRuxodSxcH7oCI1jVzn\nLconsFJc137Twbzanqp3kmsKtVQ+MjxSaxh0TAUHGKSqXb/8BvDKDB1Q4g8a\nX84plqGlTsNy/WxZDGS5lJ7z5GIVD/2H+r9bvr/O4eBiHVgIR5BATX+MeZ+f\nx1JcSsaKD5NKd8QrYvbkXNjwcMiSRSyvL9x/+kXPSEP51JcflMEA8MlyWz5i\nANzq8DtrGHgla4/RQnq1wzWvC32h+U0skxtKJ5fwXkqvIMaUHxQR7+5p7uUD\nyVgNJ19zdfRkOjw5kt5L0CpSe7Jamm6hGd5+Ybxm0ZclZyhmUm/sudjI5Pvn\na4kbxRHJl/l5ENHBvhthTUX1AQ3alGpQILI9V1pduPBWMOEBfa8Hh0Up1LVr\nqM5H\r\n=RB1q\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"ee374355df19027c59f24bdaa809bc18183453df","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.faa9af310.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.faa9af310.0_1579020738852_0.5266239718290289","host":"s3://npm-registry-packages"}},"5.0.0-canary.60354c577.0":{"name":"@material/shape","version":"5.0.0-canary.60354c577.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.60354c577.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3dc5da18de6d644125d3b92cfc23bf6466516f5f","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.60354c577.0.tgz","fileCount":10,"integrity":"sha512-ErU1V0/yepd/NFiq55hWuJFvJTBiWzBImJSXoZoukOEyVip3h/orZlI8ExQz1ypbBXl/JZQpEuSEZrZHNX1PBQ==","signatures":[{"sig":"MEYCIQD+QUIKnf4RQ0/LEP+M0Pa/h3QIVB9zuXIebzhJOaJwdgIhAKAfAn1fLK5TWNYXtZI7DWVzwKmQ5NcfuVb+mLfjb3jt","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":17491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHkSPCRA9TVsSAnZWagAAiqYP/3ldMKp6IO8X35BY23C2\nV3XT8xw6aOYUuOR/ERsx0LhR8sP9im6bgegGgmLCnk80kyd20CxGPCyBTWWl\nPeUu302hi4Xb6U3DA0CPlfjoMJXgjlkUdo8FmXwbqiTpJ/zA6HV2rtkcSky8\nRm3Jw5ZCu0ORc08aEXi+eUSJSrYV1i8MGD29W4aH45L8BCrdp3b3ipgn3y24\nSafLrw6W8/ytb5ejjZoqF858Hmd1uDKvH9Pcle1dHSvYyzoRjiDkg7dg4pBu\nzsWlAibFCWz/M16J8qc0trCWquJyV4e3JqIQysQ2xRa0FkXR8k9X5/XUA4nq\nr7cEBvG1bQUoy3edU5bJGSsQp+RDVtzcEaTdePcYKWdQnw+Jpbt7fUMh7eKL\nOd+QkDDVzQJv8ISO6dGPl1PGajo6sA64iPwQqRwDprkUJXnGfw5Wetao5URl\nzQF1jCutXSOeyQDfuhFNmCk9YaDvSH4xY/5tXt0O4Uq4jK+lD1pTMA2zDEGs\nTg9aJBBEUHXiOxqj1JRuTZl+Snj2cdOOonSc0/RTifw2bPEtCnRU9um8fpOO\nDZEhZAWLu6acY3W7erAmFdFSVT2SXJQezAQqWozce1sfQ/xAnya20S/TjcvR\nK7EXZRnYbQb3USMIEroQf92nKuzb2yA5QKqIT+jIAGIRxjBD5e/NDrtVwm2Z\nWrur\r\n=lTFw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"d9f4420da446050561084fce698a543b0dc6b543","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.60354c577.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.60354c577.0_1579041935557_0.5131138630132239","host":"s3://npm-registry-packages"}},"5.0.0-canary.d07c78daa.0":{"name":"@material/shape","version":"5.0.0-canary.d07c78daa.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.d07c78daa.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"168113598310499394ed3388e019e6430115969b","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.d07c78daa.0.tgz","fileCount":10,"integrity":"sha512-IaFAURGyiVJOzSwzGJ3O1nLIau5XqO10xmDKW2CM8/JCwGqavnvhk9Ipd8YcgOxuybLavFtwbyVFHLpbJ8i+Rw==","signatures":[{"sig":"MEUCIHN1r0hogCgkICPBIHq7lcheN1fvisplsogWDNmOmOHxAiEA8gxXU15NdFcrfdWf1bQlpys991CnZeBDIb6i9NbZiro=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":17491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHlDiCRA9TVsSAnZWagAAqpIQAJAM48/MKtfa0NmCrZeN\nndF9jmG4hSgV8IYYj0Wtu6CYtgS5O0sNZm42ivYh7Jxrt3I4plhJNjTiaH1B\ngZVdCKF6teyqFaBt3HT8A3cyGeHJQIC6tGN4y4LX3AKFX5H7PnSUDeirglRG\noRZ5dT6Cc/5CJeSKHZN1fQe/QbXhqgMuQtuDsJFkcc019sVlxvd0tZfv42+c\nq8rHkWklrnNyrv1OXzCiJx8M1J4MPgO1tZsyVHhaA3vpONrpzC13ep/oMbUl\nzCUo9DDV0ROGUDiGG5OavL0z5NH+dnX08G3zv2rPxjxzHrxMDjwyUwvb5cMJ\nliSpZwUvRM4wJ9AvCYyH9AHikZy2Hk4gnZuGh9vEBuueskFGFyuD5XI4iwG6\n7dG9mw4GYCzF9fNfC8vE8+7gxJI94Rf0nMwqE2JvtymSR6NymCn3wbAStYxE\npKueP/Llba1H3uYW3vmQZWOxs+ZYhJI/wn7yt+of8FuTpaT1HCJQlKBY+gPb\nuj3GpUeokNixhoZ1ZX96lj16WSWHI2XFh0U5VMXyNvZzPYlLAGoTwSvBYGm5\nwB73cq0I8dYLhx9YAfgNQQd5skDC3Sk4W9z4QSkObbdwxdbphhWNAP7vQgkP\ncPKw4DGY4b00BhrjT5gQ1mX9E9tSDsWC6YnCQGRB3JHTX/LwGQfMPAiyAp1y\nxtv8\r\n=nlS2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"3657a12b1a5b9b1742b2749f6991e06a32416314","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.d07c78daa.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.d07c78daa.0_1579045089929_0.37486520135569434","host":"s3://npm-registry-packages"}},"5.0.0-canary.8ddd5c6dc.0":{"name":"@material/shape","version":"5.0.0-canary.8ddd5c6dc.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.8ddd5c6dc.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8d72682c05ea4dfbd10ab6726cefd5c2a1911a83","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.8ddd5c6dc.0.tgz","fileCount":10,"integrity":"sha512-gDe6Tv81PTZYIIJVNVxlaRV52Td/RvZVVpfjQVhd1+HIyfHEHMTnfobrsDmndaEzr3KsouVI8YLjIJMWmbIGAQ==","signatures":[{"sig":"MEQCIAx/XG0UQcGdWlEyWLKoZFyz5FnGkqeDcHqzyObpyeQIAiAfcxBN3MEO8BlqCn3xepHDEF1gMpBNqphbXOf5ChhaSw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":17491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHm4RCRA9TVsSAnZWagAAc0AP/ica+GhG47eQSJRZcbBt\nfyJ6rh3hh8D9vizq8cJNtQjQcVSrJw4VTjB/Yug1MFMiIbL73ZuSoK6ZCFBr\nIuwbip90WpZ14JShfQ4AY+ESUgOltNdHVtn9gBno/6vScD4K10EMJZDI3FqX\nm1PKBxecxIMhjgCDKZd2BkxfIQonbM/GwgwHXowg33MgRO5EcNgHr+Uyxs2h\n218G264KyhO/4i4jqeoROhn0rhaT1w/+6EuFM7pnn1vW6I3UtIhF51OGzKuR\n6pzYg+6ici9Ra+xBK1eyTmyoghtC+HfpBRoSpE9FLR8qirqU15ZRtSPpjtkX\n8Tpz8BKMHsGVxal5alH+LqlchMJtDyfcRB9k0mbu9pHOIpQU5diDQUkB4ca8\nhrh8OYeIWLmPeiZopOrmL2IEPZ9+Y/Nenx+1ZxQZ6d0wuOUrtGS98pQJsBCZ\nCtAPnvaTeXqhcvjMZYGGh8Tshze3fZRizuE3Y8KiF36PK9XyAg205k/U/1S/\nfUcgyxfunq18FKNJdKEc1sM5R4Yhvk4OdVz5vjOZpndyHPGJ5M+HRIkeKhNV\nFpmgwvG7qNE5cAbuKFyb5n4orUNvSGmO7QGV3a5XD9lXmiOoIQMNW9IEtu6p\n8e6dyn66FwLI1Mg3xWeN7Q/uUfv93AiR1MtC8SqIpreTxbpKuzUncOgLU0ou\nStKy\r\n=GpyR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"939fade350708e559f107b53d2ab9d27d6f84f1d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.8ddd5c6dc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.8ddd5c6dc.0_1579052561046_0.9895309342036651","host":"s3://npm-registry-packages"}},"5.0.0-canary.a9511d870.0":{"name":"@material/shape","version":"5.0.0-canary.a9511d870.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.a9511d870.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"25a24b0bcb9078855cf995d9f4e9e46194bca433","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.a9511d870.0.tgz","fileCount":10,"integrity":"sha512-E7WDl+WXFfMUQOzD//9sy2w4qblC4Mb+J9X0F60dwugm7WKoY9/Fj9NyZ+xGXY3Xm+9Se7vTpI1PwSIMWF1cYw==","signatures":[{"sig":"MEUCIAowyy74reZ21Kp71MilwJihm9R4l4ZpihVKraL0uXL6AiEArGuJBwKErsO3SGD3eYgeqq6CEPIDFsZeOCtx/MqFhwk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":17491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeH2OCCRA9TVsSAnZWagAArkgP/2CIihMYS462nM4IjRtz\nUzQ3lxv0U/4SV4ogCBhZ/NWwVC+9IKtHP8YoeGlBgf85Ho4YNmjSq3BWX5Dd\nDT1PpU8aZw6B6Nzh3lFepuHcRz2hoopLST01t7qXdLBydK4PCHuRkWldsi5h\nxrkR0SVH0M7xFQKfFFNvr74FHi/S7tnmBilKz3F7ACE+cHnJ11N4niOL4kiB\nVT7ZiSK5eLLeip4OOdWAuHzH73ITyKTr5Skpk+1jBhYocBpkmC7US1BwyF3u\nUJsXPZZsWBwk49rBAQ7FGZvV+A3QKjMJlqYkhsqcSwFf9FyxOMrdvQ2TRJyt\ngmRmwIoIzTYXQKudk1RJM57Y5ztGLmSb/OXE3M+tD3iZfkCOzJieKhf65Q3U\ngKfcYiZH8ZIMIYPFO1//kVVnXr1UJejPFcZKEYuXIWpG4s8SWOp1NDCbY+8/\nMt6PzW1mnkYZz0xR3MKt47KybBFMgUTkag3LIK4ry5DrTz6Vhu5tQ1/5v5u0\nTI8LVTjEsMYPR5rHEemheFsT+SgQWScoUb40oR1xH+wBZZyVoB2d0aK9zb8h\n86LZ1g0iXD501gGsFJUqVWcr5ptw4YfyAc214+TBTewymPxE2DGRNp9OVuOt\nsHCSmf1aks9P0Ua35HlEeZ6RW7J22GQAiRQ8TOsWlwIENLatSHLdvSrHoxTA\npqH5\r\n=3Mix\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"69b4f620220b7e580f5273bb82be01e5990b894a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.a9511d870.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.a9511d870.0_1579115393933_0.7293349305537702","host":"s3://npm-registry-packages"}},"5.0.0-canary.7c8583c4c.0":{"name":"@material/shape","version":"5.0.0-canary.7c8583c4c.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.7c8583c4c.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7447b606dc1bdaad913c3beecd9493892b8e1e4a","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.7c8583c4c.0.tgz","fileCount":10,"integrity":"sha512-paqTlzWqkNlcMULDMI54/orrtfPd36EIqm5o11YVAr1p1o4ZmW7NegDIwTm5S97ZOYhSKjP4QbWDHeuNdhURQA==","signatures":[{"sig":"MEQCIHgO1RXZABZ2TPFAYA4PS7qy3vHd8GcD5XlAi6CvtLWEAiA3zK3uZXgbOPtmjRaAlhyfsZ+hEVFoRk0nVeHp3A8+PA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":17540,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeH5Z5CRA9TVsSAnZWagAAWUkQAKNPwDawqy2QOcCDyOlk\n91ZDAM4AjpIA4wAdVtu2lC3Zj0XSH8adjdcoUmAweFXZ3LeZapDvp9fU98OM\nkJv3JwDRdLy0T67LoZvaseLrXy3SzvEN7FysbXQTGz0lB3GSQXrR5EYH2DdF\n/oFWZNae8ZHRb8VKGMNGd8cGmD0nL2vktuvVfJNuOj7x/FOh6dqIRzkXWbxI\ncBKWhKGzGwr6N6PzDs5bEK1H5tJZ8Wo1VojKnO/hfTqfPYqQCMEm3MM1ZbVV\nj4711u3uLEOhfPctzQyfHULcgU1hUPQ+1hYallecaUL6hzRDIGu61NJ8tDi2\niBebQ5w7gW44Sk9k0BWLTrw6o6ebF+iVfRc6KC7w21fMzeX311Ak9oLv4xag\nX0pyP3sv7+OINKHejNe7RMpvTR/KQbovMbtqGU0CKa138vN8crHC7wjVPX98\nNwYET2Z6nO2xItUHxRhAvDQW3Kdqtv3TcaemQi21T/a02irpqGnrLPNsWN1K\nAwU1myvviQTetxRkgRiI52HeD4mkCH7ghcgvHLGPmT5xmWhATIcR+bSly4D8\naGIOtti5idR6sftkjzA6spa6KjESoVfPa52Xh4YERaVm4CcsRy9lXwN9Az7w\nIpTZbRFvLlIrvpWgVZJvm4s1iPVQfO4qGWQShHXw4ISYeOoAL7+GkzTbEsFh\nMY0w\r\n=vJFZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"d89f2d9150d02c17271eeeb692f29f456fed4c1e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.7c8583c4c.0","@material/feature-targeting":"5.0.0-canary.7c8583c4c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.7c8583c4c.0_1579128441030_0.5316588868320666","host":"s3://npm-registry-packages"}},"5.0.0-canary.5d4b82bac.0":{"name":"@material/shape","version":"5.0.0-canary.5d4b82bac.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.5d4b82bac.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f046ff718645381fd7d37f0f4ade8687a6654d6e","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.5d4b82bac.0.tgz","fileCount":10,"integrity":"sha512-1wFTzrghWoZzgI8zzj56HVDcMiMKZkmeVHgOjkM2OwVTzfw0RtoWJBvjA0023ieTYMaQmBppcoYYC1ur7yobfg==","signatures":[{"sig":"MEQCIFFMXGeeXWCOOvHenCCKCDIlMiUohIk39OjxpcD0KsfbAiBmB8i/vHAx+JQu2sjyijNb6NkAyWoYBW+aoxbMzeFR/w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":17540,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeH5aDCRA9TVsSAnZWagAA94cP/0iE/yHBUwRFcRsAYRIA\nM1wkciNmrtP2NlZPJZHtNij2L+YC/LVKzNDn+aC5YhJODf6tIR/nNxv3EEDA\nctWpXrnW1OfdZdh/Ww3nRv72LlbK3DsEWSt+UTXpDLflb5ASmgtBExW+tIwT\npdHC9QkSuZg6klgYQBzvWCmYX+JjydVwCJj3G08N868LNk3ONDGBY93e9tCI\nVdhmDTTLBfO42FMf4hw/kRv4L7zo843i3NWMyqAlw9fn57A780Ay2oiKNdy3\nDIH+hrEgrU8g+wR9/krUP92Rqfgm8/RmlOU+0wuXicoEgLfYxKr2eqvfMfQ2\nqBtnPUxGFd/Vet9nDsEg4IxWWabQcWBzmxFYs0ZcKAv0J6JJBpIx7cesDu9A\nPh8UCOv4UYatzkkgWd7a46UsludwUzCpDHS7R0NSaWJKAzFCDU+jw32grXDx\nJMEl1ddRb2tLQxtt/sNJWlhzWrDrWuc8AZv6jqLumHAbkoNcpwEL5zbHiiQu\nsdorUPt4w3OYuqyOyq80sLVbX26oPIU2zzcjZuIgbeJCKZUhHoxkjbTzTyiU\nA0RTJt0UQ3Y+HxOt20BYiit4EKPbw5N96IRVNfveWpvlQfJTzXn1AQ47n9aJ\nSn/TzL/9TYNYkTZ0k0+9gFFWkDcVhiG2vES7dG2o1PgWOg1zv0XOaqLVdxFq\n6xFU\r\n=6PDh\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"e679f52745cb7c74219ab22354c6da39a642ecfb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.5d4b82bac.0","@material/feature-targeting":"5.0.0-canary.5d4b82bac.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.5d4b82bac.0_1579128451468_0.8282751405220727","host":"s3://npm-registry-packages"}},"5.0.0-canary.57d0186e4.0":{"name":"@material/shape","version":"5.0.0-canary.57d0186e4.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.57d0186e4.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d1260d3bb3e73aead23045587c406ee7b24d8edb","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.57d0186e4.0.tgz","fileCount":10,"integrity":"sha512-F0PdMhnJ1gyHvX3qOkbG8qau0/67Ubep5ObnijMmepCbB9PPcz/5qSky8NRyRB4ZIfSDqJE+wPOa8jaUrNtoAg==","signatures":[{"sig":"MEYCIQDFbsXehGLaWJU2URwFhiKefcbFJQt2CrrFcBsX9mnlmQIhALAQ22FLBWDDu0sGF68y+1VHhvZMEVPNYl4/nHEsH2KO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":17540,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIKioCRA9TVsSAnZWagAA11EP/3AwvnVPRljUTNJGsMAh\nqewGNrUHv/Z2UOM3WV3DcZE85JYwcRjZdi27VGrSH5ua0oK4ksfqNLqfU8Uw\nvCBC/hrIayQpXJVPkuhDytvsOZO6sYNxYPpNN5AOUI8OkwUutflZbyfadHO8\nnZuwzesGjE8gTrI7u6zu5QPd3F5y1MOmgbFyTKLnnSTskNsrtmiO4EuxltLC\nw/rkTN/Ss5FN/zdc6Ps4h4+EljDwLlzrV9Fv+zznRJ899siyDJatpOtWA8q4\nC5XNemMAUaWFg0GpJ+Am9g/9oJSwy8kCq92KSH1DqIYC0uzEBys1JKW3yKTM\n92h+3UMtBjCDcA+sjmFiueBahH82kpEqf3Ukbr1wDwwH1VM/qD0qGZlLDEZJ\nr9mwGicTwwtzPczAYeYozcpBAlYrUVnVAgWR/rOjzVYSBoqPiGEBMJaRO44m\ngbaRXvZ/uN7bjAuBqTqhhebrlICg39g2tnjaLZbhbmQkkvjBJcIfHP1IZZlq\nnJFASO1vEF6ZTMFT5S/bNZQdn12U8KsrkovaEBlgSKvBZCNafW75bdpC0ZPT\nzNMjQ1aDhdGlVi9m0TzOqb98GNKEytDwqwak9pyEiepiuHH6kBji1eWhQmM8\n+EtajXiSAkc1v9XzWJcWwoWbssb3sq2YfPL+2WIx4nZpA9hfth1hiJsL/Jsm\nkS13\r\n=RLcv\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"d0058bff117ed84df93c0a71b3aa8c8d6e34cb6d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.57d0186e4.0","@material/feature-targeting":"5.0.0-canary.57d0186e4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.57d0186e4.0_1579198631941_0.08972742139577083","host":"s3://npm-registry-packages"}},"5.0.0-canary.071a6ab70.0":{"name":"@material/shape","version":"5.0.0-canary.071a6ab70.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.071a6ab70.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"21f6f2cfa33ebaf2c4acc81d79dc149854250294","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.071a6ab70.0.tgz","fileCount":10,"integrity":"sha512-7wq70xNU6kCeWRN/aHUBXylS1kmCv9uEAHYSRKgoeabIvyeXz5iYwc5xRiC1Uf/c02T+jbmsR4mG0aRIbQ3yuQ==","signatures":[{"sig":"MEUCIQDKMBQh8r7INf37kBLHZxweshWvNTLZCvDOimmHc2+gtQIgXeb5Gt936OBBziEWaYUfwLjXQLG01jJiriJ2OidKe9E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":17540,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIKooCRA9TVsSAnZWagAA1zAP/jArVS82LcZTZj9yAH0a\nGkXEtamNA8HqPsoOdaPCWjZP8TLv8nrfcsEmPg89fDuUZ0Hs1Ypza/EnayUk\neEU+rEJqzTbJO4+IqOFfkq64j06+GYz+CjaJbWUlnM9oI/iGohYzk3dtR4XS\n0CHc7jotYWI36V0Fekx0rD/bWj7rzswEuFwXFKQ4E/pWZYK434WypRO072Xz\nKLX1Ezey1N4C43k+viQOUaBM0uEcwv6zXlDP1MILULhwrgtUemUptliio6vV\nX8FtibpgVEaGg83y09LZmkHcgfmyYcFDWGno5ZKfeiAVKzFTrRdEe0A888ol\n/CHkG5Xj8HzJrprxya5sjpXRiOwJGdyk8g6nBphaf01JAaiNjj3LFdvj3Vh9\ndGn+jY6qlBlr7OCywWy9t5RYMOU2+kPjDZMTpirZ7ACjZJACy8a51c2HGUji\nYK5rWbdslpVXx3MUyMEV++jnu8hbm3CUDx/zN55v5AtV1NVRSk4Y6eW/PTs3\nHmqmea04PAjziIVDKp9M8Zij6aFQ/elka8uhoQeEZ1TAS+7gtjuEf1KPYSOq\nHvN/zRFNjzSlCjR5GOJM6dApunnmuR7EJuJ2RBfxqAcTL5ftYF/bOn2VMNIU\n+I4yIxX6wIBJ6xszUL0hM+kDZlap1o5Xvkebfx4WjfNatjtlGzVEqp8Fayhd\nCS8D\r\n=73n1\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"40ae26c99d00481950066e41e33aac0545186659","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.071a6ab70.0","@material/feature-targeting":"5.0.0-canary.071a6ab70.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.071a6ab70.0_1579199015774_0.2759143481912396","host":"s3://npm-registry-packages"}},"5.0.0-canary.22e0cb618.0":{"name":"@material/shape","version":"5.0.0-canary.22e0cb618.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.22e0cb618.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"517edd8dba4a53ccb60c33249e0d0398a59e4c21","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.22e0cb618.0.tgz","fileCount":10,"integrity":"sha512-BarjwxhPXY9NGuB2pZrvwH9tgrxxForX0unyYYg1NT79E+gcej3cWzLqJXOU9ziYzlBhnxQQFxsYN4+73fQBTg==","signatures":[{"sig":"MEYCIQDQ0uZ9rGMW0HsUv0u4S85upd8Adw1It0O9EjWiQQCRCwIhAJXxUSrvTQq+qv+C8lURyJmXZB7jdpmbZmAJ3R+8Ia0m","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":17540,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIK+UCRA9TVsSAnZWagAASVUP/1RQnGsJEwMUHrFiJg3t\nCy2rw0KpqYi0OLyI3eVsEDWtGn4PNmqMUw8gUcLuLd45865N/LK0HzrP/4dw\nL/5yrQGj8rBU94TP50diLZT7RMWCB/qjctjtIWzdgc6vy36XZQmc1ALdawQi\n9KYYGejBYNwXK2XT/4QoO6l2+3B1w1ZopR/6vQqQR95mHMizzeMqadeTrlET\n7relV9cGrEz1qTcCRiOYMKojFfEYXrTl8+WyxZB1DGRdPRgMPvrcJAHCDM4y\n7lJr1374oJLWaaqNJEDSJ0MfaL0dKgd7NQV7JVUdzq11SrkPPGf7p0ArC8iu\ntsfchLguikqKpBBEoIZ6Z4ujfdY9/UDrsxukiBmyJmE2/GLziiQhaQvyhkgk\nk/9pA7+wRQ31qzxr9UkiC0VSBQmnR0I8+hUo8V1+jpllmWu3KYftgB94ypkF\nfiaBLX8RHpFfPvQApOjP+hHsCT8ArvU8Muyg/Y1d/re82CpysCbtcROXDMRh\n/GA6+EXc5269iQlHWjD6QUgzAyiacBcl4eG3TQGufHwUJGqwBQ6SysTtstf9\niD2tEVbbET24sclx3O5ORlaDt9kTd8kDwMeKWBejTqMLsN/JS49KlA+5+aZg\nAY4XaCq50IgLUtMrbyFUfS3eo0ngF14z2WsBKoT5Gv8Dh1AWOWevjO7jNYwh\nMS9r\r\n=WQts\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"a2ebae5c07da66b94270b07b137673cf19d6d344","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.22e0cb618.0","@material/feature-targeting":"5.0.0-canary.22e0cb618.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.22e0cb618.0_1579200404063_0.6234748863929473","host":"s3://npm-registry-packages"}},"5.0.0-canary.f16f15b8f.0":{"name":"@material/shape","version":"5.0.0-canary.f16f15b8f.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.f16f15b8f.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6c7549a73dc8eba72827f3183640d579eb2adc0c","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.f16f15b8f.0.tgz","fileCount":10,"integrity":"sha512-8unKZuU7kcw2QVm1G5mWSle6+WOfk6I0DYp+FunULdpWtVAvvCBTVkMq8Tx78PwyktFLtAVCMRFjrVtAIfpq7Q==","signatures":[{"sig":"MEUCIQCkAoCEBYfyeNLhi6u4ZZlrMfwD+a4WLnAobNfMs9dP5wIgS0QJDNtJY9c3ccqyjQm4LaeQblUBUmEogIyr1UJnZWk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":17540,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIPqQCRA9TVsSAnZWagAANjUP/jDqZSxMhlmvdCcNg8QC\nj2Zk8glULr/sxmJGfdILBO+oDd2YG9JVFrr9kYSQ11dQ9IeH84aAAsEFbuGO\nz1vsQ5dEb2dnmZUWMNH0NBTuD0tdiTbptoH/TQ304tXw/MS88WZhRKIsjSao\nuFd3rEljTFXLoGKJXM3LBfnOxrl8I0oZpiZbZwXyhxOJ5KHdbaRZU7PRwlHt\nJ+3wQWGfmIKzioU2br7NBykdee+jSiFOXBMLD1C3ye+93t32cxS5b2vUbWZw\n2a31GugO/7bfwlULQpXt4mBOPCgyq6ADFIVhhRl3Tt7FwAdU3ED8g7C2Gnq1\n+MOyXEr6cpP7BMgLuinMj1eh+KG9px2PYMg7p1MqLkRLz+mndv2MFcRR3j1m\nNe+r4uq9IgAptdnzSnpAgqOyfd5j9fQ+QKekHqBE1GQJg3s43/gaSkPA6fOS\nMCjYbmGox1dCROn0QFj91Fd/r3hJuosyPNXv3KwD2etkOi88qOxcUrrEAS5U\nKkRAvo0DvPv9F4TGgZHadBirLb1gOef31+tNzZpvmcwApzb4937ocCo92Z+V\nZj2T6f1HkJJ5iiyZYwK5Iwjao0p5DjatMywgPr98+vEVdGQL+G8xq+tkxSSc\nYSydwUHQZZgg8VRVr0QQj+c7fxeXvZZmCIFNHDR3B0Ue4uIfphBw7CA10FkZ\n9MNR\r\n=uylT\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"edeb2cce6b325b416aeba9bc6f4598eb518f8b24","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.f16f15b8f.0","@material/feature-targeting":"5.0.0-canary.f16f15b8f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.f16f15b8f.0_1579219599627_0.19250612090007135","host":"s3://npm-registry-packages"}},"5.0.0-canary.aa8e43e9a.0":{"name":"@material/shape","version":"5.0.0-canary.aa8e43e9a.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.aa8e43e9a.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"58a1a6b56ce179a372170967bd84aee450e5737b","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.aa8e43e9a.0.tgz","fileCount":10,"integrity":"sha512-N04mhJ6WykdTrrnolEvi9aZ8kVz61aJPZpLy0MeIktBN8RjuspZcWCUpt9USBH69M4MLWhgTxmzYP5lrQ3S8EA==","signatures":[{"sig":"MEQCIBVbkp5PhhSp/enRJvVgR89k3I0SpCtuAngUk06HGEN0AiAGyLpaLhYBWO98Q/b3dBicl9kN2BP001hg4TfGTnGTEw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":17540,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIQGLCRA9TVsSAnZWagAAyQcQAKMUbz0dspz9nQXS5PWW\nlI+6JaYkxkCmaV48HKz7MxKhivuGBvmdvuXWUyr+TkM8yY0IDnrimxbFZkxQ\nTKWQtZKolsQxLSQt075FU5oa2pE4L9VrVFL5YQ/cjqsuqGlbwoLOJDfYzIe5\nrHP9drTv5nWyi1+prqEfHgJPsrIFQBPjI4DK5SWVA5HGhBYwajFBmOpzzF59\n6vIySKEvhhMtlFhoRZzmQXlM4t9PPOmvZZoNpq9z8S7gXZw5y+TQd2uAAaIM\nw6AhgBL2JAukI0yGrEdJ/YMF3Niwy2QRFBzDVMHZy7PhOA7uscZtscm57Chu\ntGA4Ss8aDE2btLFtiF5dytDPCf7oStVqtovhZQSrIwJE06YANoOlcGtP+wfT\nfGb9yVv5+L0K4EDfi/W9EMooiHf/8qBxjUL0QcfSts/OCHYfYu8/mKCPuPQT\nYQ8/UdZVGXLm8flztr7Ifvmam+FH4QJPKPRaDAPvXCfhGLj+z+Bp9m795dex\nfsE8BLab/7CwjlsEJZU4OUr+E0AoJt3K/2XJ4M1ODo8KTWHBrgRm2+0eGDCB\nYb9fH8sxGuAZKxjjHuL2hCMw3E9gklZmN5Wn8KYkc3Z+vC7WN7thgbcGV5CJ\nhOXcgsfqYB2ZYiB+qG44VARx34PSG2olG8WAIcjXZe1exXaE2lb6ffIC1vFh\nXdm6\r\n=TrbI\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"b95162346a28c58839b2d3e52201e1f8c5fb9789","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.aa8e43e9a.0","@material/feature-targeting":"5.0.0-canary.aa8e43e9a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.aa8e43e9a.0_1579221386628_0.03972860406328671","host":"s3://npm-registry-packages"}},"5.0.0-canary.fe1f3ca07.0":{"name":"@material/shape","version":"5.0.0-canary.fe1f3ca07.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.fe1f3ca07.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"edfa73a41af4c6fa7d97d8f7ad31e1fa6388d2e6","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.fe1f3ca07.0.tgz","fileCount":10,"integrity":"sha512-JWCFhqEajjawegOv3mF1K96B4Ao/icxG03p0+jg3DG9vnC4F4WYqnvDQ5vxoYCq65/gZ8IOo+a0ci67FIpRfIQ==","signatures":[{"sig":"MEUCIQDZwxoJjoFhGU3VUOLgJQGvI4dHxbUkdxIcS8Rzy6M70AIgV1GrBODP4O6iqBaAC6J1VJhEhmbzqMqmGleQtOcvJ9s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":17540,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIQcRCRA9TVsSAnZWagAALQEQAJFdxoqq4yga0TrBa7xL\ncyw61MJpWmuPdybPp7GZKV0P3dcsOOSLRqtzIewmduOHm9/rA+5ez6tB/Ylt\neWfx+fL8gwU67KmKnluot/saF9KTOS8PbQZ5I4boLQEHUf8aofM38X9mKrVl\nu1yl2ugyNdDTRZfl5v4XaGmTghgKe14PI6M4uxswGEQuC+xBbySmUK361/QQ\nE+xJUhbK1wYPX2bnOhXabJoUFx5/DWPrMX374JOOQlg1DTAwuNcixilW+99D\npTQ46OLZ+CFb/Lps9V8HbtLfqmsZlBT5l664gSSj0NCkV7VJRDQHCgjBElgG\nqfXv4zXq93NKuExiCyQgoIw6/SldW1+B4onpCTV7Dopytw5H9rrbAB61zTON\n9otwaCF/Fwg9sNvnhXuAXrW7XmMfhJGQG0eNcj+jbYB0V5o3GnZuLS+eVYXT\nr/5CPQ5p21Cmi7xnk8xDQvRUBzgzpr5af2XZPALi0YyronwCJoUeI0Jpe42q\njcxcsZsZ7bpL+QF0gthIMLGiKZ0ms4VTaIJUPm6omdX/AEJdlFYfeVpHADjE\n+vFV3n+7t1u03h0q+CXzaocuzvS3isjCQEhXrwyPq02ONJP0WTyG9hv5dvnH\n9b/OoqS9nW1KiYpCOreAzVNDPhBSQQpyZ/f2rRgzWUP2vFtxQNDqDhVJJ6z6\naZJd\r\n=pGgs\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"55fb21a2166199c09c2ec1273c4d38c6c3eb8cb3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.fe1f3ca07.0","@material/feature-targeting":"5.0.0-canary.fe1f3ca07.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.fe1f3ca07.0_1579222800931_0.8869776130183693","host":"s3://npm-registry-packages"}},"5.0.0-canary.d405af26b.0":{"name":"@material/shape","version":"5.0.0-canary.d405af26b.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.d405af26b.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9a2bf0b20f4eb726be181dae7ef014be0c39f781","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.d405af26b.0.tgz","fileCount":10,"integrity":"sha512-+r09mAtEplhSp+wVw/PftQQRwRotA6SVsmXedp3PRvJoevuF+Kaba4vHqJ2M55Ix+yfu1RALzaZop/RkFgWaGA==","signatures":[{"sig":"MEUCIQDp/ZyrXh2i+ykg4LM0jN3zmvWQv5mRqXl4W1Wyh3sOfAIgL3eOo4n3df0NqDwoItBrVyAfRk8BLJntKOcFnmvhwhI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":17540,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIfoSCRA9TVsSAnZWagAAz/AQAIQlP8FwtaK4v84DIey3\n5tkZ/69hP0Wva7PaWkmpesFsVn1/sPEsLlahpOCUTIezOq5uyVm0SFx1ubyD\nInxtFmBG8mQOclEy5h+imM1WmVvlTqhk/liyMZjzs9obvv+e5LXcD6PKp75H\nmG9OxYKfjstGhymg1uGywpYfB1Z6xnKXgZ/IS2MBEO41cYfe8HGEPE13XUh+\nkoNC5mw1mksWLc6vWIufTn3vNEjQMmLcOenyPJtNxAbuNq4wMHSWHpYRDZuY\nzGPXqOiA11008/4U+dOCnNW6+t4i6EFA0dmrvMtNgMrXxqNv7UbuIi+D7cZg\nI+vyW05zNMHxFBgatN/nlNr3gly7zFQcQdG+G5dHUWvwLrzZo30s7KQn/I9N\n6TPNqqWqUESf8G1j7HAX/WvpPHT4EqFol2FWzuRlp1xxTgGMRqMyPnYUqxHi\nOxwT2aO8BbdaUcNNdtPtLoRtxQ/rN2L1GI+MSOEd5rvUuUreFXm1JutGJ/qd\nUUWrvRjncnIUHGpRKReqRtfEsRYBK6MxfSmz1WCOtZWLhdszd1FFaDslDmzA\nbZj55u+5k7NBMD6r1JINMJiz4lNX+VqwVpjQanGxxj3M8c3wA37g6NWdNgHt\nDlOMfVkE/lgaN/IvJfTYcd+ogtkelcuS9rXzbbIsakRN0NxCv5zz4yN0+lX0\nO/Lg\r\n=p4D4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"0520800061215f99c3d58fbcb661327da2b8c126","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.d405af26b.0","@material/feature-targeting":"5.0.0-canary.d405af26b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.d405af26b.0_1579285009982_0.8103567151151077","host":"s3://npm-registry-packages"}},"5.0.0-canary.6e857aae2.0":{"name":"@material/shape","version":"5.0.0-canary.6e857aae2.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.6e857aae2.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"075166fb7606fe7d87d5712752538f27e0231e4d","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.6e857aae2.0.tgz","fileCount":10,"integrity":"sha512-QGpK7tj18KyYZjqh9hFV64uixGw7cbMPYoZVDxGnNqmRVLWPEjL8eHc89iA32HVyxbOoscRqFfH7ZFD5CXxE+A==","signatures":[{"sig":"MEQCIFmGfwN+H2A9biuiWsGDryZYCeXGtyoVg9BKKdoeDLsBAiAsAT3beWtb0gRXsZRuJcQbnFE9XIj5Do6Ont2W1E//rQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":17540,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIfrtCRA9TVsSAnZWagAACUoP/iRZMN/leu0RdHTvLqhl\nF4k5ZuYeZL2DHeAnmiAHpL3P/88WvWyKQUg3+Qwhypq5YlIPFEx7TwAUnP58\nYw5XM3VEdaUcKh24S8xdDBjEGJcNEkCRusM+966HlD44yrY8btltY/dXFiem\nc4h1jUaJ8hDPTB4FXXXXymQVgP9dIk/QDxVwscWe33Z2GAyym4Pkc5ARrqrC\nZtbcWZWrw+evluIi69W0WrWJNYB1gWdXFSyo8/kYHBvNAVDwvvqryNn6wtpE\nXpv3nDLsVlmi6Y4BgTxzhnCcaYzGmF1ONc6zbCBkMWEa3V4EEq0w66GJP9aK\nKdJaVIpEpjKBaUM/W6aJec35K1CGOtdwZMm4yASNuyKefhak39BYgTHib73G\nIzhk2PKNjxHm4YcdlgTxJVuwbuR0T3Zx8H28GdGgoB0dbhIsZoBengCQdjb+\n/btds2CW3dTxgXVIrS9bKBjljTtLBAf/QbQllubKNdxrOG1eO/4Ww50ak6M1\nOurO2hyDYT+svCkXzbQQj3C0kL1dnaNGOy/AOAdzQ2gXtGaFJL4bTT070Az0\n7PXpKwhBA/zk6G23SGYscqi8l9l+u+8deKkI357xHnNzo6BvmiQqq6W2AAtc\nPKNj1ywzf5rUJ2rJz27x3x6nprQgQSvVfW8+H2r4xhOH4YbxGkuI0gHdV6B+\n265s\r\n=zM+8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"2a53aa5d8048725819709e1279ce78762b8b6170","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.6e857aae2.0","@material/feature-targeting":"5.0.0-canary.6e857aae2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.6e857aae2.0_1579285229299_0.5939659198831215","host":"s3://npm-registry-packages"}},"5.0.0-canary.e2e764f7c.0":{"name":"@material/shape","version":"5.0.0-canary.e2e764f7c.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.e2e764f7c.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7fb7b7d5acd568d56a972d574dba066d08048499","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.e2e764f7c.0.tgz","fileCount":10,"integrity":"sha512-qxf1cy8MVXmW9T3xtJ0Cr3H3KVvlhRTcFwPE/EAPEMw2vLmRdMbougvETTwuo4PID2pXxELVEgQxerAY0tw8Cg==","signatures":[{"sig":"MEUCIQCm3zD2ReMA2Q/dxbo0KGpx0TdGfaqcyNmVeGG64Dl/jgIgaE94bPoVYa2aWMdm2MjWXfVheSft9kbFua/Y8nCUV+Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":17540,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIf58CRA9TVsSAnZWagAA6WIP/Ai9AmVVlJd26NcgilnM\n+57YDthZOgMr7OPRN7j2Q8Wcz3b0nfa3Jl6xmgS8YqrHetEIo5NtyZ+S2CAH\nO7Blg+mSd819TQtGDvbksf9gJw604ZjlId08zZGXH+vgwzLmnUok303SRYFq\nnBESjHrIbkBb1Qlqp4ZwrsSNybcDiSBCakg+sDIwFQmtYkCAL/FM2rXE9Kc4\ns3L1IuYDNxXFJaKwE3p01+ZMAblZ8k8cKOHrRptEGNgglZn6PvCk3MWQE5bt\n6mVfS/G765cztorvK0t1KfBFTjw40OCtWy+DxnMRRhqxHtrzc31k941DSoWk\nWm6k5tJhYNpG+0oHVmwQO6gZ/m37V3ATNEsz7SPcf9UO1NJrAuz3CyTWhKR2\nVpFjZfy/blPj8mnwDY/qFvA/apH1m4nFiDsuIXnZgtNAVHkKQAyKGUD3tSpd\nIAcedWcTtiyUUaRpYpqmKHK0rHV8DJXQErFzjsTGTHSKor0CZX2ytz0n7yjx\niWBY1DCMwV4rPLZ3K1f1iNQTzP4pDFNPcbIInS6vnat+JHzPAsd8jYhYPnmk\niREyk3vsvZdOjw3BFijn6mRK4zLu53ZZtFTEoonnXq0oogt6lkIIu5bD95nG\n5lLOWwikUwAkwgsMXHeTaaXQBshaT3BFEIGA9uvL4TG09Npxx4EWpK3HLzSp\n6ePA\r\n=sufM\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"9dd6d44ba7288e1e0e80905a629b922c21b54e37","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.e2e764f7c.0","@material/feature-targeting":"5.0.0-canary.e2e764f7c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.e2e764f7c.0_1579286140455_0.38772929710139725","host":"s3://npm-registry-packages"}},"5.0.0-canary.7ef986a87.0":{"name":"@material/shape","version":"5.0.0-canary.7ef986a87.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.7ef986a87.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"70236ca9a1bc41e385d1b54fdcc3fd63e7678e14","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.7ef986a87.0.tgz","fileCount":10,"integrity":"sha512-fudXk3/QjypH5/ZHXoO5ZNgbOgxr3cyaanKgNr+diFGMQggLbkIUaKQ4HwqSHXJmDfrL67ARRXY0JHMxvShPTw==","signatures":[{"sig":"MEYCIQDoUmQ+WdFowYc58E5iA3nA6a+l+BP8cu2fL3SQ4vVCEQIhAK5fIXssDFSfsVFYGkrqF2hEjk5KK9gt8Yy1KlluGlgw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":17540,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIgtXCRA9TVsSAnZWagAAJbMQAIAAG7/AIVl11FeVAIzU\nBvVMWjcdUhiqawCUSe+4CZEVB2sOuYqsS/oyxjCrhdMgJP6fJARS3+jzjpO4\ndiUsHbc+tXLbG0uRG8jTeapGjH7F/SpgNemgQC9ldTbiCvGcMu2ub8dzoc+O\nDC3iDa67UmtvfkMRNYICGYLFMWkEs7QQJYD7wtZGfz4ZAri0EZvuDUfNTjAE\nlM013bp+ZKtg7hL/lYkUtxXx0IlPATQpqUYpTmCHgiZAC/0nmCejrLwAOaVF\nLps+IWYPTV8vM24uN92nWPy9qfpKho5GIEXpOhINYqfkLAF1jvYTnkeQp0Zc\nqDhFFUsMw3BSwxBuyU1prSibnqhvaiEzbg7gmunguuQx/ilGjyaIIJnSQz15\npYb+B5OFYJAiD7GoyqOPgMuK8LjHSBjf2V+hvz9QLkahhp3Nvwqd1IojsmVs\nX1WAhPuleL13k03gmm5pKUGXZkG0cJWaE5c1Cw3HGSjNlW3QMmXLUXemOSsd\nwmNfi0mXGVZDMWPy03KfW4OpFFLFB0QjmIeKzzBe3AIFlRkuLLzdZ71IGbb6\n56IugpaValMljWAsOEjsEtDR45wtALj6s8bK9dSt4fMnmbeCmK+6ro+f75t5\naDLx/pmltBPe4vGzVFMYkfrEbphI4YimTcxjK91tUbSza9T1Tz/sBD6YUIaF\nH+2Z\r\n=n2QS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"d18e160fa2a4eddeeddf0a07020cc2cecff9b573","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.7ef986a87.0","@material/feature-targeting":"5.0.0-canary.7ef986a87.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.7ef986a87.0_1579289430693_0.7502340233673008","host":"s3://npm-registry-packages"}},"5.0.0-canary.29402e2d4.0":{"name":"@material/shape","version":"5.0.0-canary.29402e2d4.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.29402e2d4.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6845c703f23d53dcb8d013627dc49abe5a7a76ee","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.29402e2d4.0.tgz","fileCount":10,"integrity":"sha512-lhXxWqHIlt1KMVQWYZuloyN90b0rzSkn+i9ln+sfS4gNwvhTSKhkhJi4tzQ2QlT2dDpfLjS8p+76xxNzNT3vnQ==","signatures":[{"sig":"MEYCIQDsZt7iLhz8WpGcWL3TWUHyBllaO1TSPp1IgtReW20gfAIhALWyM5qzq4Nqrkyi0CDFOdOZfzwdzvNk0l10xHQsthDM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":17540,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIhuACRA9TVsSAnZWagAAqZYP/0Se6GtydPRglqS1wN10\nUxCsJ/t9vONR4QXc8eQbCv4/oq0hbS4f2FtTF/qxVvtjJLhttQiVoSWtmlD9\nT5r2J58o2PTcUllmk6rLHjzG9EVGN6o0NZJ1eFCdih6XJYfHRO/dhlsT11Cq\nSGcfUazx1GNhjwGmCe70FoWYM4T/ZdDDAnnYXzlyBKiIrvD/EmdakmdpkSOo\n9ZPe1fiFoLuxe2yiVb7cvWFP0QkTKiIOC6hKGZLXKkkTy3YFLfcOFEr2cJeG\nDxucFTeelK/upXhDCsQ8hkRZa8IEwKQocLm/1agNxtpBCKdPuvSRdhVV2E5G\nr+PRUc7Vd03+6IOt2kHxeZgHlygwBx8+J3ZLS+2zcOu/pRKRPNmHbJ0vAFxk\nfXOKbzlnAb+dKL5k79GU0EnkXOQOkCImc7duSIyGBxLqVr0/amUWBh8zdaJi\nCxkZMw9hNLT0vNB0cEUtHd+XaP/LH2/st0F00qhPpJng3X62d0fr9d8BOpgN\nSX4KBI2S1FywGCnnuBQIwVPMu9pbIAZv9rpAnGAgAeCohvVxf//GGgD55XXS\nKy11W9Qy3vKSyyas5/cA+Ijd0B8lpJmHjqxmt6dZbm6P6bdiGAYXhMbqxEym\nz+q6QAGeu1vRXv/CiKKdHIPvHnwtAS0Hyuvi5BZVW+IptDfqB+Y9OncWS9yT\n4jhF\r\n=kmwd\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"6c6caf45e8fd759ec1c6409699c53250c8c41f25","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.29402e2d4.0","@material/feature-targeting":"5.0.0-canary.29402e2d4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.29402e2d4.0_1579293567607_0.4129302939798225","host":"s3://npm-registry-packages"}},"5.0.0-canary.2b3ec563c.0":{"name":"@material/shape","version":"5.0.0-canary.2b3ec563c.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.2b3ec563c.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"00043aa5dea0c8f0467143e3bdb2a333e2dd7fda","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.2b3ec563c.0.tgz","fileCount":10,"integrity":"sha512-tNruWi2T5VPydIFwLd2cCo+Ohy9u67rrk5ui8yHY9+iThuljbZhL/hH6ppHvz1cNdHRQX4RrR2HY9qHOLbdEFA==","signatures":[{"sig":"MEYCIQCwkQiZZa9jKSK2K1t7FV3K7pQ1HJ0Ap7exvxVwgxNvRQIhAKZkA3uNpLasaQa+jt0t6m7DSKukzkl1JvHq3VbelTeF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":17540,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIj8OCRA9TVsSAnZWagAAxqMQAIlYwG0HiWHaIyyBc52t\n9zxjyljm3qhl3FfrigkyoMPwKc3/jDQqTfNR7rU/tEqMYKkx63kY8pXs6bw1\nukpTpB358FTt/vVj5C3nc935ZeW8akxhaMOLXfOvyscwf3MX90rTeq8G510L\n5TNHOVxAf7xI+JlohyQpKZUpv7QtZ8Lp++YT3Y+PN7Io8opOa6QngHghQnm9\nUd4ul6p71GvBcoLY3ZY/zbAAhS+DdE0tZ6PbfA+YemiFEXJOomfhzQN1tMsA\n2QDNgk8IXWQ42M//lxGzNjkeFJj6xSczeViyhR8X+dDkSCcXHrKo08C2CEjp\nTV/fTmFBexZ/H/EvwB+jsiGF1G4vY8II34FLUdxjCrAxGSXx4gUgUE44tNrx\n6C0r1xgK25i8w7wdpCWWt74HQ9ElLElSGh9PVDJhq8SwHGGAPx3W6BtbGLAl\nLBV0ctsduQt0q0rKmxQfvIb8Tpcr2wUhs3nKmvE56dAx/Y/ktvVyHNewYHBF\nzBwQ3izd2p0TQS57I31imprJ2qc1k7/thINRdPU+z7+NGoBgMeQCscud+uHJ\nCeM8OEXyu6a0FgsHsyfXHxeVM3l3o2O61mHx1IbNDZmaKMvKWqHKQUPvJ7Qs\nTY4FLIsYy0/6v86sDo+9vKGj3CZ9wZC1jYtwqBcKjCBeg31yg+nSa3zH9rgY\n4hD2\r\n=XJ3t\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"e0de6399e32c2553a23c71775c8e5b54fc527e5f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.2b3ec563c.0","@material/feature-targeting":"5.0.0-canary.2b3ec563c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.2b3ec563c.0_1579302670577_0.4626364927778859","host":"s3://npm-registry-packages"}},"5.0.0-canary.e8a993677.0":{"name":"@material/shape","version":"5.0.0-canary.e8a993677.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.e8a993677.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"defe3b51bf51e82af9f74e92d0187d07df965994","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.e8a993677.0.tgz","fileCount":10,"integrity":"sha512-1okAqJDaYKBBcLG7whBOZemPQJyVBY2cwxnHbiDG+6mdGU7GLXvpB1xXY6BBUKiCFxSLNyf9up+Ijdxb2byIug==","signatures":[{"sig":"MEUCIQCrGt282904St+x/v5LaMSgltPDK0ToD0eZ085/eEiRcQIgNFoNd5Al9ASpShLWYMzz0oLO3i6NUJiqvIWzdvfB6Eo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":17540,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJyuUCRA9TVsSAnZWagAASUkP/jLKEn+5gj9IrJINQPqp\nTL180dMMzm/nprXZ6a4GG9qRwThqf5jfNB3Zlg1W8CF9Q+Dw74F9WOgrplsD\nqk0wO41TJiZcFwJwI3UonV+TYBwTC5fH/cg67c9AjKw8IWlwwlHHfTn9RevE\nrzW/TT8hk0FydAg1vUitIFVO/fvv1q23a6m9FgsmDdYc6uuKP/Q7OPCmTwqy\n5zCgwrI+tkwhXOX2E5OzN6FbhAiwNGCvUaA+41Qv63JIqJa0yY8Hq98NdUGZ\nsE4/VB+NDnCVmL7Q/1M2SFbkuIw/3AM0ZABggIoIxjLLtcM3br4rSWtJjy+D\nN61u9zHKzQ5DerzAz9dMESTG3ApigZB7QBg6Or7F1TyFEdoZYxYBipW+ZiEp\nLFJ4uTmOrbeX159Yk5G2Nd/KnfOOzb7dDjUhEpzvmcB88enmzk86BJ+zQ6MV\nM+BdS9CkvFsO8w+igC01QwNGiY9FlEVxMJ8zMI5crz2NsdegYPyf5Rqjxhw8\nsTPHB05GtBcuE+74Vu1QzhqfuTERDuXAyL79+PqrAw9hgBzHG9+gHG1vuk/Y\nUSf17DFurxBCgA/XF5Iyf+PlOtl89546hiSTWKkY0sMbNO7QfIgEEO8HxW66\n1/xnmE9OPVRpRCQaLcVVePbPHvfTIkm3lZcZhQgyO+ElAXwXj6b0reHqpvxR\nhcZ2\r\n=74t7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"653e52310f90e65950905e8fd8fca6f99e87ba63","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.e8a993677.0","@material/feature-targeting":"5.0.0-canary.e8a993677.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.e8a993677.0_1579625363716_0.031683230755145564","host":"s3://npm-registry-packages"}},"5.0.0-canary.cd4903304.0":{"name":"@material/shape","version":"5.0.0-canary.cd4903304.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.cd4903304.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ab324225a72495150c33de0130835379930c699f","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.cd4903304.0.tgz","fileCount":10,"integrity":"sha512-ckos/xsXU3OE0fp3sGKuFu+6VxgMfmh59nNF8w92moM0RPe45M0WkFrSzCVPXAO/4CGb1LjkamZ1foukjfGglg==","signatures":[{"sig":"MEUCIQCSrLkLZUIyaxPCm4+5rwgsy33KP0HPWluJzQvTKpc8jQIgAqpvPbHJpKxyUxE12a7q3JqOzwk5U34+AtB81Diduuc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":17540,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJ28BCRA9TVsSAnZWagAAMCYQAJizoYxDDwmGESnKPvOT\n37vrW+iaVJZr8lPv+rBT8ZyDR9eQxkSRBLx+PJmaJFj4ZafvcTyNUYZflx9u\n6od6VDSUw1s0D7VjzkkzrlWi5as2o+aLLCdyQTe/nB8OaWm0z8ez8NYvIGaP\n4esgDWuXFcsaaw2vxQvuJs+nVKX19rKw0FRthcrptMQgoZwoivKHbj3YCHT2\nj0BgXL7Y3xw0u0+p7lJWpfhRjAX+EMPZqbvvVthMqgl/yj9Ep8SH9wduoqB7\nyINIFhO+36vCspDiADPVm8BQqPw17cHenR8ZM70sT2eYTGYPMSch6JCS9suo\nhP6qiJ8oge+yGuillMrjdHlEm2Y+f8xnYr4hVeU9Q0H88pJZci+ZtI6cT92Y\n3lunVUi0CgP674QHZWqHMG5bJFe/J8TRbBAbRu6/FLmLM03ivwf5C6tzCHFO\ndJDRgcJC/c4S7x81paPlZ7i3Y2bmUUhRfo8UrcN2dJpSN4FPm+kVJWzD5+3h\nu2/2ghQgeYBSrsHL42TLSJpK/DlFWmtI+5zlz9xzvoXs5nw/NrH5DjwHmZpc\nvYLwGgJ2e9eZgO3RVocBTWs9cli5Nv/7RmEAwCXYy73VJrcpaWsp4wUCjx6f\n9yMmHMBRWLsw8+xqVa5QljVYSwpN1waMHytZmjlFhxcW3RVJ4COOjqqLVmDc\nY+Xp\r\n=Vl7k\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"0a1f35ca90587cb380a06e8b6eb8650279b9953f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.cd4903304.0","@material/feature-targeting":"5.0.0-canary.cd4903304.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.cd4903304.0_1579642624755_0.18361369912795644","host":"s3://npm-registry-packages"}},"5.0.0-canary.7e4b04b25.0":{"name":"@material/shape","version":"5.0.0-canary.7e4b04b25.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.7e4b04b25.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2de6008e05a54245dfa97ed0431bd80011a6e7f5","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.7e4b04b25.0.tgz","fileCount":10,"integrity":"sha512-SINXlQOzHFR1O3x0vldxXjy4EhrGyx0nO1V2yGjk3nOYoNY7xHRzFMBWCp2aHk4amovRSPuZkL5k77dHk5O4QA==","signatures":[{"sig":"MEQCIBSocQZulZbSu8OOydk7Bgz4m7SmPv/RgpNeeCqMyG+BAiAxyxSFEwsZUMfkVA+EwzcspMRqVmRq/q/v7qRuV2perg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":17540,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJ38OCRA9TVsSAnZWagAAopUP/1jTZ6tyfuCFkHQZifdz\n0jJKN+UM8+UTd0Zq1i8BCcc7u7Q6WN11c51/1pqJztqQGAhXW9NsOQXP5m5z\npT1z6ltPR0anumI4l1U/Q75n86zYIs668Q1CepWBwsFawtzS0MwDaRLhmBwI\n+t/Nj8NCK7PzNXq0w3Rqfldy1vCl9qDsjpcAOUAQdepNYflBL+GTWHanrZg+\nV3b+l8muXx+HhACew3J1CU707WqDVyBKtkX7rGHFRtGfKN1Y+MpajKpQOzIp\nsEgjupHh7VckNncvFvQhp/puLKQ/FsL7LoEQwiGt5eoHl29J7tc7oei+XfML\nl/2Ir2+Z/u5UxSebhLRSxdjTlrjrvy5Qtk91TMaYTizVGz4YeCtzJNlAcQBQ\nezPhft+CniXSoB9zW4qEs9zVZz4dlwCSOvKEQECpr7KIjBAyB+yS5+wjHKfJ\nLj53F274oKjFrNE4wVoqfofVdULk3K+ABb1VPfC61psdJ3QXnjNgqNpwcYk2\nPjtT2RG/NDwOf3CrR1k7YM3ZjuDoHHsqMaKHwcMXTcWWBbSHCbLmQ+QipTx9\nCa+V+D1giyooahRKjeNsRWxcvuvK67mOWMnecXIjioBLYHGFmf779AU+56N9\nISq6ft83WT1NQwAOD03cC7H2g45m+2A2ABYImnKBXhTCZnzfg2tgv8Ocpo0F\nn+l0\r\n=+k05\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"5ce556593315b470008c9bb156d98d7624231a5b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.7e4b04b25.0","@material/feature-targeting":"5.0.0-canary.7e4b04b25.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.7e4b04b25.0_1579646734435_0.7641450733044926","host":"s3://npm-registry-packages"}},"5.0.0-canary.ebc296937.0":{"name":"@material/shape","version":"5.0.0-canary.ebc296937.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.ebc296937.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d34023bc579cbb62a828a08b6cf69dab45302c25","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.ebc296937.0.tgz","fileCount":10,"integrity":"sha512-zdfapl8DVS65DSS7ymu4F+GOLqDFB6kis1LT2DC+jordvIpScmwybpyng6K+a6g/3uzZli/DRc9B+NjKEEjf8A==","signatures":[{"sig":"MEUCIQCO7FJyJLulIJf651vvs9sT7aq/W+YJVSpBo8DUCDEu2AIgHn2Lnd92wKb0c8J+cvkpnzrCpI4zQP7GE5H4aG+jPdw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":17540,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJ4ziCRA9TVsSAnZWagAAG9EP/3j28ZC+Gr42H0s4a7a0\nv7Q6I8XCdAPtyKCxPKWd53Qrydkr+BfGDjmLJ2UBnXC2ITLwBp+FnyLGBRoB\nBHueNuDnU0tvuhTtjiuKsZJJ0g/nl63ADuG7u6uPtxp+KtnN8EwMHbooV5of\n3Y2XX2VzxEWT9U0YKs7WOq3TNR6Z3LJuPxYMsxlyql/dw39wS5kQTZ6FOCk6\nBuQ9+SH1cAthihnJAVyF8HOGIbqDkSi9c9a7tYpeRFGDZSQ5/6OQ3ME8zELT\n90sNbtaDntIQ1fcrt3SgkjGpMwhPwQCK/ZjenPPvo9NRVUPzBoJab16Eaj/G\nrwaeSLoSViRg3guNcf8nP4r39WhxB/BzBRNCLvEh5mud1roylp73gVIIMxIk\ncDLqxU2dSQYVQD8gkd+dQUy2n3eVbFrKgqs+X1eQcTAwiFa8xE/lHcNKtexa\nYfPhagwu4lanYt/3xjIIC9Tz6hztIBlzeQwO3AExnwcMQDbBueLdubr3Tppi\nrVl7G0tYQJswc4ky7L1sB4afUilKcFAbTwp6cLU/pTRwGIaYv7wd5Wm9/GdK\noGSxCgj8ZU4nRoXv3g1HQnLtpRzy+SWuw2DMkKPdjolKpC0GKotsFdHGethS\nQD6FHNy7SBxIbky1JEQPVcaIrLITYsqmFheBLtQF6MK6/hnGnxqh7Q8mndH1\ncV8C\r\n=DMRp\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"56393bf41fd3e60f82b11c9571455b6e0b0f2025","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.ebc296937.0","@material/feature-targeting":"5.0.0-canary.ebc296937.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.ebc296937.0_1579650273871_0.9622631855753001","host":"s3://npm-registry-packages"}},"5.0.0-canary.cf33f113d.0":{"name":"@material/shape","version":"5.0.0-canary.cf33f113d.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.cf33f113d.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3e9014208e3285158d45e6ef3374f3ac57b69dee","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.cf33f113d.0.tgz","fileCount":10,"integrity":"sha512-yvPxw8KhM8X4v/aShBc/BwnkTJwtEtYWkIDSideB0r+VG0Ow2TkzO5TwfCMJXSkjPIgfszG47VhZSoMQl1iTdQ==","signatures":[{"sig":"MEQCIFmbZNrgtFcgsXCkFZgmWBU3rW9yyFMELk4HhDhG7h6xAiAdlUsqR3vUI2YSNrWIdN632ZTrBzUYgunUGVNer7gb2A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":17540,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJ6O6CRA9TVsSAnZWagAAFDwP/2jzgmet9yanrlOS+uUh\nrxqPllv5jcgPw9ncV8yjtkGcLJAir6yNDgcH5uDr4Y+0H+txwZPV2VeqdKwr\nTpXhJ97nIm8tIcvJmZ+60+OA4Ms1x6jdeCgOuooPgOMvA81VNFCNPP/imLFT\nfnjO1a5/yMrp15+IXb7RLFYBB/zHJIo2gE20mjyh4ZEOa0AoEll4zLObR1FA\nG0R9CCshImUh9vMxm/hSueb5ICeZD/sKujHkO8dwRWaTY0tNfhGANCRrhsTZ\nFsG2K/BLmPsQTH7WcIohHO7vI28v7iWMMjEhdAFRrLwXwH9wmVv+JYofJmIA\nyUQtS/L6zxiJAW+GrqMnfg8lBv1h8pXckU6pMAxc30Y1QALojSjTDtXDH6WR\nvnXtOlvnvv8CU0Ca9aZJ9cmNrXDRnIAAsxttvoeWxPHv84vtKYMWEKG7Save\nh2JlfBgSutfUyLwg/carINHLUFH6xLuNV/9wPinoCiK6NbQijNtrPtB3SW6o\n28vrpdUydlJpLZ7dYoJyap8FItZTPa1HhhDGqEma6w3NxthB1BJMRukHpEda\nGk8NhbnhETN8d+YBYaULNyRL9d/g8ddFDbXz7udv9IHuL21tJDIMvcjy6Z3O\nR6IfsWFAXT9J70bddFe2OhnefzogXMJzBy12HQ893v0e3ZHEMpussIJMZJAC\nKslq\r\n=BJMK\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"337736b1343fc4e03714756c4fc2ccfdfe1e5537","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.cf33f113d.0","@material/feature-targeting":"5.0.0-canary.cf33f113d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.cf33f113d.0_1579656122410_0.1091142047160436","host":"s3://npm-registry-packages"}},"5.0.0-canary.e1d5f1be5.0":{"name":"@material/shape","version":"5.0.0-canary.e1d5f1be5.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.e1d5f1be5.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f9ce7bda0f247700156a7a1ad5cf2beeba6ce245","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.e1d5f1be5.0.tgz","fileCount":13,"integrity":"sha512-7lvDiZ2iwamzuJiKnBjc+p0WGhtt+/Dz1MMnjNYW7ODRK2jZrsKVN9fnnTTpmIg33IeaT2popDDCmCSkpgy8vQ==","signatures":[{"sig":"MEYCIQCaxt2/odPVnuKcbpzaIHmt2WQjERzj3Lsku2MWMHnobQIhAMXZDKPnl12bOjJVE9T0gBN1GEXXlRj/ZgOTBlt3uP6x","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":19427,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKH5rCRA9TVsSAnZWagAAsdsP/REdDSg01CmJporFIj9C\n7qQ7q9V/BUyjXTkK2TxB+xcxT58LRw1DYszOQR047J/gHn1JnSz9wowyPzj1\n9TbOh71jPS1LkKzvzJPL3QDFIlC6+0RgR+m0DUOewAKtXRsrIMdbGZNfZWof\n3kvIuVbamYn2j6fELaoYSkh0HqmhLp80iZJZopFuIOddHwwbcyqaO6r+dgSO\nHRucoGeRY8m+/NM5PFdFVb5zSFYZlUkwm0Ny7yToEshtmyufHlOT23l5m7KE\nIe6pMsCI4LQ0zyoq41lLVD5rOTBP5vas9bM9CYxIs1QVJ2CjRTHGEMuSR/VN\nHuI5pAGBojXcqh6OLC00u5WYSY7gMHEWggggopl7ZBUbx7TJjROPPIgH5ngL\nD30GbiYzgUCgZ6oYOoU33/Zq7xTh7aqJ5J62zYUlCVH+IAmv/S9HTZiHfAKT\nq1d8+oovf04Mx6x1F6w7NFxMT1N7B68uGI5s21lR/J4NpbolSxSeebXJ5scd\nlveOqkXwyc5wZ4dBCSahRhY7SGt/CBC74HSxbCwZMzQrkDzAMq7ygEpMG1sH\n4pQFSjYQNI4Gf7y6wX6kwdvAj/k8iGYo1JhkPouvYDAIGudg2JqcVYkO4GpU\nBM4OV8iQCMIcM5TBwm+t2ExHfRKO3cUIicx4AeKyBrZUFGP9VjYGLJnxU6l2\nuEkl\r\n=Fa+v\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"4726896d58f0dfdf4ec6ed819abc20912d43f2de","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.e1d5f1be5.0","@material/feature-targeting":"5.0.0-canary.e1d5f1be5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.e1d5f1be5.0_1579712106874_0.7181866429478885","host":"s3://npm-registry-packages"}},"5.0.0-canary.6b6a4ff92.0":{"name":"@material/shape","version":"5.0.0-canary.6b6a4ff92.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.6b6a4ff92.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"76a2c43513b69f41518ef2710d3870438e3fe228","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.6b6a4ff92.0.tgz","fileCount":13,"integrity":"sha512-J5e6Z0hT3yl831gNOk26Sd7wPgrgL8LdDs4OxMQAcgdMl2UquuuKKiKGrX+jerU4AYbaLQSo8PLNhqIu5KfHYQ==","signatures":[{"sig":"MEYCIQDxg/BREH+KWL56qOW+hKp/ZyVanoTgcezJV8YJc/TS7QIhAIcWa1fCgvz5gDG2Zro7R1px5oEF6QsDSPMlTBK+bd/s","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":19427,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKIz/CRA9TVsSAnZWagAApIMP/3rvNlrw/We4ZaFAVzop\nqVsCi8oMKaaPHzrzT2F8AMKbBra63H6RIhzonbS7nbmoOP8ajRPhkukeZk6F\nSGUOvfMBf/jW2bJfaOVmI7/98OVmnxJgc04ErfxmZCJeG5H0xNk+5dE1PTxE\nvHsSG3MeI04s3PViKs37lGuo5VUmT3Z98q6bX+JDrcHGbcRk4daXt2t98HLD\nlrU8W3ho6Mt0PU7tI6iJ/paVJcF5N7eYunkTbnx8jFCVmRD099OmCkxqLjE2\n9EAhLRZGnOyXFM6JyjnQxw1N2YU2dY4OkHXSdMdDHvGkzmuL9+pepR9oBWqH\nVJdFZ3YmLUuCrKKYTtrhsOl3vUeEe/QctwnQAAfe++CgkTrYUlsydO6dJvCO\n1iATHU1KXqV40eoNWRImdsrXhoKQOfU2esxy98g7g7r/JX/MSN1YepNG5vGQ\n4QrwTTi7hkVyI/DXhV3iZO2KL19rDkIaHA1hHFqErO8Ez/+z0+BBA/olW7WJ\nZ0mne84ki2TJfa/5X4ouJKEq6khMihs0ozBM2LPDZwn5d7zHC3SI0Z4TRYG2\ntFY9fPHFtdKQ1h6rpsOxzonJ72CmDjCJtdEtuyg4RjLIbbPlg62izwFB6QD7\nPnUbELW8UNRQgdRH1BSRyjd7pbWbBNqLDykzH7e/Njgw4t3R8SCpum11SvuA\nZ/aD\r\n=CjVF\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"a4307ced3400e7b61e83495c8903f219bba0ae44","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.6b6a4ff92.0","@material/feature-targeting":"5.0.0-canary.6b6a4ff92.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.6b6a4ff92.0_1579715839309_0.631842739815351","host":"s3://npm-registry-packages"}},"5.0.0-canary.6092f71ee.0":{"name":"@material/shape","version":"5.0.0-canary.6092f71ee.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.6092f71ee.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2dc8e57992ca7a88179c2a6168d3af05f2867d44","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.6092f71ee.0.tgz","fileCount":12,"integrity":"sha512-vCSvnmSPSdr7ZeXK3lFGmwxSl8bWxCNHjCtMw5D6LED2MxWSgXToMfZml6xOTPHTjgQoPjc94nrVrpkOoNZXmw==","signatures":[{"sig":"MEQCIG76+hjjhdOHJhr38th8Y4PGc/b4SUTD1rAc8uHNvwFiAiAe3ljVo3Rhy/x5vi1gb6JFFu573HDbcMcpbrYqaYVvpg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":19190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKLu1CRA9TVsSAnZWagAAfUgP/imYp7k1vHDk6aCbOLAO\npAW2uBbefBP0kXr6vRtyDKMZzUFRDS+DWKWVsCdosepiNzbL5I+oKg7tnevp\nlLrzVO+laUXkkTjs/hHxiO/4g+ji2yxvGc37e2K4i6yHhBDq6rULqzMwRt/S\n4kQDqYOkAB4trsgD2DJazGVKwCEnKyX4soF1v1AsQRwgsP7Xh6eZJE11AFiV\nsnTOKZ/2i+x3kRRJ479l3NOGXn9KQrI3VEAO4o5O+ZKFvEAlnTa9taTg+SPR\nk7+Vu1ovw7I49wk4YaWfA20nFXCh9xXaJPifx+wVTo5MiyYesZSw96G3z1hf\ndMs8dhNXXgw0tBT8CvJAM6O1a+BJqcO+4U16Y90Ti1pfg0oqb57BAjvZ5nIy\ntPSKvgL+lWD56/Z9xxnsYanNsy9SlDchZNs1i2e/tXfq9szK5CazclP3M3tf\n9heFqkHEXS4m0tDzLkK0IIpB6RZ0o8Fg2TL8IwlqDAnZkFiT9XISryZGIVcv\natcuRr36KZ1g7pASaBVW+widiuetquT8muTHbdzllWoh2dfzL8ObHwXf7WZg\n+3w37FsW69DS7KmPwIoQZNt6R8MJJzCmsVlJb4x/wmrZU/sN01B2VidIA+t3\nlRD2pNX3Z4qaKjrFqUjnt9AFCWpVXJQeAJJZ3ckXOwS5ZzFKeOnp57UtYyyo\nGLZu\r\n=N+aa\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"da5d9e639c767fd3f9ad77c867d990afc21cd359","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.6092f71ee.0","@material/feature-targeting":"5.0.0-canary.6092f71ee.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.6092f71ee.0_1579727797430_0.07843611279261586","host":"s3://npm-registry-packages"}},"5.0.0-canary.d8d95020f.0":{"name":"@material/shape","version":"5.0.0-canary.d8d95020f.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.d8d95020f.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"620e3bc2876913d61e26a01d5ef7e96e071483f0","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.d8d95020f.0.tgz","fileCount":12,"integrity":"sha512-V1IW04UCfJOeZMwFlLOiMNYNIY3dyBq6tJgwFttHQcD1AhsH1Gm4bJvkT4WBELb1W5v4R2+VZVghFA/a6QoRLA==","signatures":[{"sig":"MEUCIGu79UyrvRDlduMGCf7Xb08aoWsXId6UucibIyyDBx3vAiEAuDz9ceU87TzEvDMPuKTa23u3JDUJHBXoRW+VeJW8l1Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":19190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKNYYCRA9TVsSAnZWagAA3AIP/jctJQktl2uCx+UTXojt\n+LJ9SOIGcMCcWUGIX5PPYEaF0pswHtqnAbDS0Sg+BEAwYCUxfrepsKJCf9DX\nUHy9VsTPGvTvTbSoTnPK5rEFeF6CMdy2GYh3qU0hG1Qp/buobUj3Lof1d8Jv\nIkZ+jlK7/mU/ouLOiPG7SreC6n0klPsF9SiI+9Rta4eP1Po7VWCwInb292PG\n7Wxmfc2s/WdUzW59qaTPvWECzDkTOmjcOGHupAf7QEjQjZAmDjfmYAM2x9p/\nJVwHYOxDfH++lPHOw1JHR5G3CNjOEM80aoSnnMf5t1LmzD/1bGPTeziBssLo\n/24+hEOayWymFTD8nCwiiK2vv0DpUm4PEhtSQvxTxIesuqczTFvAX51UiEVw\nvFIb4/M7WKXv09w7Wajs95HYWqWUi51rZO13dTeDHjMbSOi3kTlaEE8xVhHZ\n4dhpWjTYOmcz6hicl7k8XAC+wl/3yvi0YpCPUyS1kA5x+YwrMTaGhKEVDB/e\nU0bhpCEUnX0rzxJAOiV6Jp9eVIktNn/GklSW9ST8CpZpZV3cPATAu2VRFrUj\ncd5VtxYKZZLRKVjWakUUB4GHdaLMek+dm37CnxHmBTB2/UN4YKLYfZI2DIjf\njDGoInxLGR0rw0bw+xNrPbLJvPJzVoQQpWtSPKlRI5PxxTGXqD0/RFHPfj2Z\n6Yx6\r\n=+Ydh\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"6360c5189134a77fd45542c27776ac2f86b16a49","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.d8d95020f.0","@material/feature-targeting":"5.0.0-canary.d8d95020f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.d8d95020f.0_1579734551694_0.10203416689928702","host":"s3://npm-registry-packages"}},"5.0.0-canary.b7facc628.0":{"name":"@material/shape","version":"5.0.0-canary.b7facc628.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.b7facc628.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ef7b4b5d8e92a8297107f438dc08f73274d1f4a6","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.b7facc628.0.tgz","fileCount":12,"integrity":"sha512-HPZh1rmj2sW1X4IAmirz8brhXtCcYBOVYhBCDmw3EshAENQqpqZKrBrzcDjPwJbBXwn2uZ90h/PIxIMDsUAQzw==","signatures":[{"sig":"MEUCICj8b8JPaE1YK4E2ndaMlx7kGeCRFaNfcgRVhDD3b+usAiEAsjqoDGUMGEqEr9AXkm6TpN+OuUSrWO/fDI66XhfNeQM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":19190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKeH5CRA9TVsSAnZWagAA230QAID9R+vDqSCZNHMRXmO/\n9/GrnXfT78uW9RAqzqNBoJ3qbVrOdGqSi8vsjnOzNVob5OEZtgs93vnDt5iC\nnRE4x4BAeAgjBpoplqzG6YtbZkyouHEgztF4HD623XWkCKzXv2tTbfrJcPHU\n7zVqi5IFq5pB3cYPx+V0/9kRxGNjeXeMQPgdmFv0v17oorS32rKb6pCmwdtA\nM5xaVi/1uITiIwcwozaukBHJ04N7lc59wZKWYu/aVtJva0JHTpPPAWvAN3kX\nOdi6na+amdU4TwAj3TMbNo1op4Ra+jKdhOeqAE9eJgdOMl6UptQm6iDEXAqX\n7+7toWJT/it6Z/nD7lLwU+84wQjEAKAlENxROWCxVnsmIvYLFp7eOGYM5O3y\nmkjHInc8cVs/n5B7Fr1W8K3EJ+m992zIsghRy/LwQBHxUjCPnJPqxjjYdh3/\nSaPRHIonSIGW13yvMGooHG6nFEXmcIHAQ0d1gz0fsEty6RN+jcDNSgoMDoaU\n4JLfPOIESsDsgcA+SLvEcK/+7Eu7k26ifLHD9UpiWoPTJ5i2GLhc4uW0NAab\ng7GMJ7GzAGe8uSzQyaBieGnyc2hnJ8rCQNJdOXa0zDFI5JM4EwJm5Sz+hJlT\npc57vb6RlSUvtC6miUKKlcOpvJmxGE5CHzFW/JzAeyjgqgyBlLaNHDK1L5gW\nmOmr\r\n=hkln\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"265b39c05dba4587f44e16eb788b56c1cb0153a4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.b7facc628.0","@material/feature-targeting":"5.0.0-canary.b7facc628.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.b7facc628.0_1579803128760_0.755459450494224","host":"s3://npm-registry-packages"}},"5.0.0-canary.63f357dbf.0":{"name":"@material/shape","version":"5.0.0-canary.63f357dbf.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.63f357dbf.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f353f02d078af2bec7c957108e3997694841a8b0","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.63f357dbf.0.tgz","fileCount":12,"integrity":"sha512-NTmL3i07DyjZTjc+0/uwReBNS47lMtoQQB7BVK6eWqF9oH2Zs5Epu4dhO9dcRO+kZxosqXU5N07GOyuw3JBYpA==","signatures":[{"sig":"MEYCIQDmAtYVNELfVq06GMBcXpc0ius4rTi0nnfE3+nqbha9MAIhALn9ekvrr25I6Ge9oxwCi9jnPHvyzbp4+Uv5aUFKpXnR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":19190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKhY0CRA9TVsSAnZWagAA5e0P/RhKiCQPe12QD/C4U9P6\nUl4gobhorqfXvIrBDBZheXLBv+97KafSSooFZeokfn01fjXTk59Vg1vJleYZ\nF6xKr6HzRaoyIjF8ddugkmJ4av/QHUl0pM940CdPfCEQFa0scFS0Zo+Jt8DM\nDGtNhJy0/RA0/nTlNHbGeL/I2bk5UShd0jl1S+AfelZBkVLfVe9ODRFkWLPo\nRyronR/IJW/OOtWesmeDjwL9HV0QTAmtWUHEQJ9IWwfshFTKAbSaRcApGKU+\n4QaX/3dvHOYhhn2GuZkdBNFQ9ttoyg7wN4ZpHKerwaq4ywmE+U0FDEG0P2bE\nPXGFQP3t6hrftrac2UlyTEGzJoMGfwrena1+srC6Bz2oXdvmkiTqpUd3zUGL\nUOg1+9gUTTY3hniDTzg3HEGYk95s+rKpRMpUuDAqomshxc0huIklwe+JWrv7\niQgkoi9DzamGlpGr6VBsnnrHdoplxK9aZjyUonA/OZWmNnW/+AYtJf3chM8n\nb4tvUCDxBVfeZfZQc6g/Fb31yz6xgHTVvEgUgMaGyn63Q1egQgul3TI1nFH2\nIK+Qyvn3VHA0wpnBuagRB8q1SJmKqpv3WiUwzA4Qc+xwJJ4hrJjf/nOfyl5B\nAn8ATnoAw0lVxUMfi6CzuAS+KZ7a+Qzw8V1TwxLPLNCLCmxibojoRFUG2CCt\nqv+P\r\n=dbDM\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"eeb2b38a1cd8ef32c66d35119a666a4b01da6d7d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.63f357dbf.0","@material/feature-targeting":"5.0.0-canary.63f357dbf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.63f357dbf.0_1579816499916_0.42888649162015136","host":"s3://npm-registry-packages"}},"5.0.0-canary.f2426d26e.0":{"name":"@material/shape","version":"5.0.0-canary.f2426d26e.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.f2426d26e.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b699d437acfa339ecae7862325a686fadda3b403","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.f2426d26e.0.tgz","fileCount":12,"integrity":"sha512-BzKrtOUj0WzcyvA6hds/CU/HCYZcjNHPTsocgIUzXR/F5HiZji9vWz4M07QoNk6q9obWG2FmgjLJWsGwNaYo2g==","signatures":[{"sig":"MEYCIQCJYFuNIZ4k+YO10u6UEJoqjSsk88VXOB9ybDOGeww6fwIhAMVgScPdyueMIKLrkX7Ky6ii3pn4XdA4EHOhwM9Q3sP4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":19190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKjJTCRA9TVsSAnZWagAAO1QP/08asggq8VTCgaQxceyQ\nniteWYTw2ASWnUO3ZJZkZLyV3HoAj143J+DU/TnxmpJt6vWnUMcd49O9cn/L\nOdjtWBMuNxy/qdfZIw/PTO+9SSP+zMktKGomuXTNNkzdcdbQ0M/h0ogHsUMl\noI5DjWKpdiIyEc3rDIpshiR7SxieYCuwmryrNJu4rRhIbihkPzEppGVqpVhF\nDe0NxomG99VPHbaAAXjWPDCccRbytQtukW4NTo2yV/kNnGSFffNyXb/rI+c5\nqeTCcdPcJXTYjHrX/054kVXCHDNMtBe3IFh57jMgLncO9PlWnkCx3Sl1DAcH\nVTLKLIeVOpaj8CmfFrkGJoaguLDOEPxWS4G1O+HTUJm9LjxFXu2nKjjoh4r+\nD34m7VZ7nYUeGbf6M3FJX7Zf1IuUN+BoAVcBrPnFYebjCgoOxNDpWmTC2HI2\ncwAxMahUYXsmadXhWRJzTYmB9gsI7NqPRoxyAb9Cj8YhGVvNakBQiAZLi6QV\nhX4w5SEB5f3HKLsLaVRUvlmpjbclawscq/2p0G/zJie1bAEST3a7fiXminOG\n4vspvh410c4a1soT2IENyzZQpNFT7iLgOfUmoZoNygJGEErrDKedY29UapKc\nLUiNi1UwgcNTXAmrOe4OdnABoCAyiGxaGa2PRQsY8DNxGCHnMFzF9DPh+W8f\nY4tp\r\n=wat+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"f25cc47237fd4889c25ddd16c4d80cff95fe3c91","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.f2426d26e.0","@material/feature-targeting":"5.0.0-canary.f2426d26e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.f2426d26e.0_1579823699233_0.37911354930122165","host":"s3://npm-registry-packages"}},"5.0.0-canary.7f5e0c23f.0":{"name":"@material/shape","version":"5.0.0-canary.7f5e0c23f.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.7f5e0c23f.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2241e93de7d897e1cd50baf134b3053e463a8d61","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.7f5e0c23f.0.tgz","fileCount":12,"integrity":"sha512-ohTw03/MTMnr6siQ8lZ3vbH+CfKh26HowaUmJSXhfQUzwCZqJcNOR96pDsoU2cCHWgRvRh0Y9bGgPv1HBVRe0A==","signatures":[{"sig":"MEUCIQCpxpEGWGcIoTd1fuLquSFpFi+ZEz3KisZXM/w8EKSjkQIgeJffxwNZXTM3hcK1kPXn0cRI3RrKtMxPo3UoOt5Vrnk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":19190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKx+VCRA9TVsSAnZWagAAcnAQAIP7UlAArXtgAFXzjfHv\nKPcTN3S9QYlfkrd/WI9pdgqeDKXolOoyr/4AUNMdQnNtV3oj4ClESNI/u7OW\n+Ze/L32g+yxQa4rGkwa0goDMrx+3pRIUTURUgJX8gfAJqzZq3QE8cWLrg6Qx\nyjn8J87Q+TAa+ArfXVZKrhALllNjD16cnydP5PUzvo12VGSpdSiK7EqJvDlF\nozN5HQD9IrC3myOGzOx9wmLi8pz0X8nBhHhygwO+4CZ27OB68zZm7LSyRltc\nuhvFUe3+MfQ48zzoCxQCl4rTmiNCZlc/BXRyL9lJYCsllLTa8faJFHIaClvr\n64utwRiicD4zV8LmdsRsX8VVhar6PC6SPHiUvV7nvSuWx1oX6Nk261bfLLLU\nx3wuaeua6U9D/dx2wM10HfTaAPf4+JZBUZDt9r3Ud98BAHZ47OigEuK7yFY4\nY6esllAY4b53+qPHfByXzPaore5g1ytZ67SXr0A5LicJqb+boDC3nVEQ1nms\nhQAAF4DRq2hsgM9fupFtZU8hzvDMME8ddBBUirUN6VSTMqulWIjW3jAoBd1g\nv7pmNgM+pmvR+0ukFGxyGvPIA7NPu02BeLDk0N+HukQck7O13tTVzta/MzxE\nAyczeuey+ty6/EXOAWqc8aWFNKAfKBRvnAIrIUenbb468i7jwULHYzK48/r+\naXH6\r\n=vGQW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"619b057dce90a552f56e341228cfddbfb7746acc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.7f5e0c23f.0","@material/feature-targeting":"5.0.0-canary.7f5e0c23f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.7f5e0c23f.0_1579884436802_0.8488482560494472","host":"s3://npm-registry-packages"}},"5.0.0-canary.3fc3ab520.0":{"name":"@material/shape","version":"5.0.0-canary.3fc3ab520.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.3fc3ab520.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2f75004624eb9bf2ba0f5b9b01ca30f0f84c5202","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.3fc3ab520.0.tgz","fileCount":12,"integrity":"sha512-VvbtRlV5QwRY0vH6wn9iIbxqv/AZ0lUZwKgniUPKqY6y31fWSH9WX0NXRw/ixJN6rFdJndExVN/eK1oIBEGryA==","signatures":[{"sig":"MEYCIQDFCOWyAxhSpgWJlkFtq3ZoJOlfmIDdiOZelrr0a30FDAIhAP8hDYN0ljMSrnMOXq1ZldyfhOZTK8I7Z1G6EI2qXqIE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":19190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKydfCRA9TVsSAnZWagAAs7YP/ieHzUkrAkY6BbJe8C2P\nYJISKuYNFOODz/DUegWOHXnmVTez1SHDXiHmpBTleMczAxZnbQOwiDifCHuB\nR6fdPPjVYiaY/V5Ga5mvlUNtUHKiADr2Ql8BW8jidPZHWY33GmH28x9tXDzy\nzJhtuh0yOJQgWoTh9wMVexzFSirXJsArwt1kvcHcYk0+CwNiOA5i0ednP0bD\n3XNuUdsKcwOEtsG7uUm5pEoePsCFNLpsOkZc8MDlxXFa8XrUdrJ3WwLknePT\n/88ez+7p24OCRrkwdIK5b6pgEtmYlDCfrrtaDKNJ2j+P7LTKyKUDwUiQ4IVi\nQlpyVhdmGukE/5foetg6Xm67frhL1N95MdSaC1iiEMrBqazMlyrxOYf7bBvi\ngqzJmt+uVcrIDLDVsLoAd8ZVyvit6zg/t8AHRRNdZEsNed4OqnJ9gR/HJAXc\noBOKz+wRVd2it2qmhLuxngWNYA76BYM8m3vKfE2Qa0s6REISJd9iqb78Zovu\nGU5Z2Q6RLlFJqw/A73CmT4rlz55zE9It67D3+Rmml2VBjELH4qZOOGIxj3pf\n0x4wicTdY3ob7624pXDq8irab0A/EYbyzu5mRP63rJREfcEtb7gwmdzAr9hR\nCMjkS1KH7zvk3Y1T7+xN/k1HARuPN1NNs1AkxBvCVdKkaWdR9MqWo7RPwnpj\nC9jX\r\n=9g5r\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"d15050fe97c7130fc9607ecc53a7eafd2b9c58ef","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.3fc3ab520.0","@material/feature-targeting":"5.0.0-canary.3fc3ab520.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.3fc3ab520.0_1579886431121_0.14243016283448728","host":"s3://npm-registry-packages"}},"5.0.0-canary.80a4d326f.0":{"name":"@material/shape","version":"5.0.0-canary.80a4d326f.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.80a4d326f.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"192f43f62bf82d954035276669e1911908300149","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.80a4d326f.0.tgz","fileCount":12,"integrity":"sha512-cT1MOXaKUDgBfXs6MxBSHGK6r7b7LU/uyubUg24o+yM0KvR8XcHjlzm6dW1cRTr6bmfyFsCBEOyEQOFDTzRKVw==","signatures":[{"sig":"MEYCIQDeecZA7+iFd+jNfZjCTfhZXKZYY2fpVvKL0DCaMsSY3AIhAPF6TEbphqP4RH2VNUUFlbUav1+dRtpmH7zvjWk5cUNj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":19190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeK1dpCRA9TVsSAnZWagAAAWAP/2lph+CnksOTA+sNn3Rs\nmS4v7oy8Q8kz1GkBxALWI3SnqMPkq9RQR4enE94eOaatQmkG+A2CIHvbj7eQ\nHLWGJpdn73Y0TKplmLFMTG5BZ5Dg69L0gLndXATYSoRpg8eoYVv262cKsarZ\n7bT0mXSUjDvUg8HdCfHYrkofnZlwzIwK0QjRxEWfiL6pHrsmR9K8mt/iRoQ0\nuST7L8kQTO2oCi1DEmSABcV/ZK5gUPMIhGW8nhCXWi8EdSHvu76CB8CubUrj\nWsf4/+H7fudXYsm2WRDI0EIktfUdJwTmvBqDyjWBXghV7+lG/KAlzz6KCi4K\nHS+oY5HhpmyNHcqmMTi0JDswGkwAxkXFKsYcWExg5P5bg2X2PD6jEF9apCSk\nlQ3f1GT2E2SGM0aEEiA9X3nFGonEpcTvWFRdiw8WT3Iv7k/SXvbWRILuebhm\n3crQFG7RvtyVG41VMvocHnOlSv5WKMmuNEM1teiSam4MjTEXaqxO0BEbwE+L\nefEioYqYYHx5GBxaqYOV9Uo3lZmE9W3z5LL5yjl1aREqZufJBLRzGEddDBoO\nnBGDBBEwmOgi8CZUy39BciOVv16lAIuIgTWrdNvnwABGAUQ8MU211aW0UhVg\nkH0x/QjXkFn+tcQ6aSV9LeaDGaJXpQOM1zybGILU9fuQcV+Z6dTAJIIMRDB0\nt8xU\r\n=z46J\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"b0001f5c4ba1986c74470e492e82bc13e15e2ad3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.80a4d326f.0","@material/feature-targeting":"5.0.0-canary.80a4d326f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.80a4d326f.0_1579898729202_0.3264933051320831","host":"s3://npm-registry-packages"}},"5.0.0-canary.ef7de4def.0":{"name":"@material/shape","version":"5.0.0-canary.ef7de4def.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.ef7de4def.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"95a37d6dd58cc5b53ba68df5b07fc2485a776074","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.ef7de4def.0.tgz","fileCount":12,"integrity":"sha512-pdO+0w8QAcSXYdmMupc/rcMak3G33o7yo5o5AUWJ2RnQnKamHTYLCjGBymHGAHEcVJrtY7yldXShWT2ptLxUsw==","signatures":[{"sig":"MEYCIQD6o+kUKhQAX/CWucr+/iQTBxw73CMiXVwf93qiScgvLgIhAIG0pg1s3CE68W/Be81qsU7DQy7OXsQYdwNbYQqXiqnF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":19190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeK2JGCRA9TVsSAnZWagAALW4P/R9XdwaUc11bDsFVKAKa\nIQG7UWZ/+K3fPOEuR8lUG58YBJxhGzTtB/kKwXy40nwYhwg0K0kNli87aeqG\nbyU0DVfmVolZPjg79c0J9qeeZ4O5Kpz32EmnvP8NTfkin/G5MtLJnMABtnIe\nvt3u1+9EzotmOHLz4TYSu4vLgQTNIGRSHX0heL2HTQz+5hMhCTjZrQNLu9KX\n/3KZ8l2IgAgBs1wOW786cren4boigl0ShlKsK/chUlNfz1UCAL+drpDNlMWR\nKJ7XjmWXSVdcvMxdIfVbkcbnKy0YUQEb9WO6wvxVk+L16n3J2usOquPO09tU\nxzEJPdXon9sU1Py8EuB9OdM0M5F5Yb6qzj9udl0/fM/hofyIiAoylH/EA6tk\nc3q+SYxC91XjPuj9WpsArY8Qu+fGyEbyZPTxaAiuAD07JUjCpFn9HPbltaSz\nZpIZmahqd4gYPOwe85tWFUS4UOYdgRKzoVSWOGLVpQkGqaB4IYB/IAOP0hYM\nEY0lEoSxqFKU3FNnTGjhBYJWob2R+YnVlRjri85AINYigRR8IzS8EY95IKZs\nFHneRX0zZHiLYlz1BrPtRyjhgIyR14rekDgFPQ8F5Z+0Xszb4Zul/zH7SH1S\nYS/GFqDOkO4whDG5maXjH7yiF4OM2rOxDlwA0soTkYuwC5dhohk5mB5o5/43\nAYpZ\r\n=sIGN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"1ac98da12680a4581dd0427e23f1dd1b95a939a0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.ef7de4def.0","@material/feature-targeting":"5.0.0-canary.ef7de4def.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.ef7de4def.0_1579901509844_0.674266404619676","host":"s3://npm-registry-packages"}},"5.0.0-canary.93e2288b6.0":{"name":"@material/shape","version":"5.0.0-canary.93e2288b6.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.93e2288b6.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"82575eca0db098bb15052bb9ff1d06d19ec548fa","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.93e2288b6.0.tgz","fileCount":12,"integrity":"sha512-GRjZebBMUiUKRIBZ0NdLiYujYdSnhzTx+L7xbXVgw7S1/A6Tdm/6dIUHn9fNYLd6MldahW8Oh7CTRiqoZ9Vtpg==","signatures":[{"sig":"MEQCIGHp16BqMybkebCyIXLT/r2kTlYrVJMQzFrkhpqs7sJhAiALLJ8Zn8LaV2n7ZFIgBbDjG2S4cnl4AQbIfxSB5WUcdA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":19190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMGd9CRA9TVsSAnZWagAApJEP/Au4TvNmx4JE/YljJj/M\neFrd5imEL13KODnSTwlA8lPz9ZoiMgtUCMaoXwXWa6eR03EKf5x4S8mpa516\nmXPiC/n3KJrSHveiF4pDL4EO04QZuFtFGarpssOdhYweJO+HuPKakyFbTokz\npie+U7E6YRUxmhezqvjh5kRTnVFeAFTW/CaHIP+MBUsrztfjkT1rl2cQ0FU8\neSw2HpEcrDUWZFrM8VDXyFEIL2+Oza1Z1GXLECvThJ8onoLhQWwBsEM1vCaI\nSrE+s2831sCSgDClTjHoLOfUlKNy2zqxcAdJd9BAFpCXIvCzOM6xtJQ8eVvB\nGmzkux4jEbi2hN2SYA1+KFmlgTfkOOEDCwTImEah518qtxJGlsgj7qH41s6A\nkQwKY3YI0N//aYAX47RRJQoj8byy/PwMnNrSzm33KcirluJKq20mvxinxkAc\nQQoUVm5u26iDBLTwutN3ydppdV44tbGGVSpVdGk+lLOPtEVmKFk7XqoRNFOi\n3KIjePwDcogHCTFGF3L8fWQRyF8KAZDb6DJELXEIq+cIYu4gIg/IinM853br\nTCx73ojR6gXmFzVSEfnUPhO02/wEwK6kmpLjlQPzKeizOLVvYuK0g5f7r2Sm\nJDz1vlz7qhP8yHYWcmEdhPX2MDgIUqMaaPYGXEJfyH9zHxTMW5QrrFYfAhet\n7upm\r\n=e/jv\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"00984d219befe7ef5ec7c042cd975979249ca8f0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.93e2288b6.0","@material/feature-targeting":"5.0.0-canary.93e2288b6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.93e2288b6.0_1580230525557_0.6957064805204898","host":"s3://npm-registry-packages"}},"5.0.0-canary.34ef15f67.0":{"name":"@material/shape","version":"5.0.0-canary.34ef15f67.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.34ef15f67.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0a39c62fe78cddc871e0ab479b9b6569db1f9466","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.34ef15f67.0.tgz","fileCount":12,"integrity":"sha512-XCdVC/9Lg1t3P6cw6N3k3H84kH85n7DQlDRp+3L5BUY8YiEshicFtnDKgHAPQUEXEE0pB0uXPBiIcF/JCir4Gg==","signatures":[{"sig":"MEUCIHzgEt/zCuDw7XW/l4wwHbr5lyW7OMoLAai2LYwwoqm9AiEAyQlSFPVjvdef3j4DjDcS4+e9yfuUdSWEdPMKYlwuBFY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":19190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMG4jCRA9TVsSAnZWagAA8gYP/0tfSL+xofOfkkewMRir\nd9sSR+JRoH+NQB0dRNaHR52EjP6wp1mU52mDfTt7zZtUqsoYpa0qEo5pH7oA\niZ/t9RyDGE1vyitD/aNMk7VvhL5lVfBX3g48cMBgZknDe5xGPVd+3lbaqZT3\nK51KJ7nPLWcLb3q1It1AvOo3eSgZ659DhjX5P5hU7vNv5GN5EI34+YRi/R5q\nNyFKeI8iLc41FTACSuxuDPjoXloECiQffQUDWcPi3BD1KFeZ8CwkAL/Tk2sx\nMGCHB/FbO6pnEqJV0dwzjtQX168ZfCI/VtJNXZPyZQIWqjm6sduahW9PUWCn\nSjN6/GVAarvxjrxmYzsOmdWU738yfjUEAq1oTCZJMz3pasIYQe2thdIx3OZk\nhpowJr2ED25IcY/axMPHmJFWto8wBWMouWzbw30k5cyhonNL3oZxvvenBi4o\n2M9pgEpqvcMCd9guEkOwVuNaYzr1zboXSvQC3qwuARpHfqNyApAEX+aE5Nuv\nBdyE+50h5fMvD1kRbdA6ldHPAst8XO9Sy1qPpBBNn5S4n+etGW53z/QBFM3H\nRMihysNJv5rvjo1sJIfnAvK8CVumcDs8hL9+MwGgn1JpC0s76E7Dj27VdSnP\nwkFbTpHT11nJCKFo2u7BA6PlcMTdE5UDBPyL8NH3i28jraajL2LVhXbP84lY\n9h2s\r\n=3u4X\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"21f8c61e71f0a9c48eb2042e25093b7a821e30f5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.34ef15f67.0","@material/feature-targeting":"5.0.0-canary.34ef15f67.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.34ef15f67.0_1580232227129_0.0504354654920931","host":"s3://npm-registry-packages"}},"5.0.0-canary.d3d176ba5.0":{"name":"@material/shape","version":"5.0.0-canary.d3d176ba5.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.d3d176ba5.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0da3bffdd39c2863d1c91e1f7641541923c6e914","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.d3d176ba5.0.tgz","fileCount":12,"integrity":"sha512-fB4jmiDuaF3vNucH9gKugFecO4lsZFVqEZytaY020dG61kwwKJTK+mJ1u7PpBT3RnGCm3h3QjSmzM/G4EoYNVg==","signatures":[{"sig":"MEUCIQDq9vLJVP9lsZGOKGYgErEk3KIc4zlOvwEmZTuBDQ77RgIgVs6ytC1MY9yNEAB77zMyORX9dyVZvXPiEOkFxZfU7MU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":19190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMG9kCRA9TVsSAnZWagAAB4sP/1oZwksVyu9mdhlthkK2\n7IyYVZmfA9cUoEt6eVLTWyT2NiAWOWxUf7Uc2yrFJAzGYFupSgS/+JZ6ubm/\n5hjuJsXBlTVU+1Krfa59UiBY5YJnUgQVgKItsgmaQZwSwm8qXnqDTG9LCiO5\n8FW7GnUMgnUQGmcSvW+dn8i0fwNg9WU6Vdf4lBpw3iVt4Xas4oXiQmCAkXEq\n69joUTGpFUgD2tXVLOEeA8WGERSD8smKCijmNC2G3clPJkkPG48Y8oQoUIKl\nbcEJilKsWbMxS2ty7whfXkeUEvd1rLP9ddyugHtzJmjJ5Regyzi25/xx3FNR\nrsoDxvUdP/st+0ZNE6GOBAyNM9UkN9BFT1lLgGCtB54Mq7O7DKbeB57/qGQ0\n2I/d88Tyin8cBVBCekdkNCDkEhEOIWBIS2z3mPsXq/xaOmDiQeHLmgEHxj3y\nre67HuKth3cH7fl7aS6toduiudaE/Oa0//XBY0AwWzCXDVAcxgMcIbK3owYo\n+LhVDNnhrI+CHe/HHPcNjUWmHJPSvkbqSMhj+5N9k9rbf/Jg8nEDyCBSY4IE\nSbbgyxwUvIgx/EpIKWcYrLUIg584mt6e/FnVNsj3u+K2zlbDc5EW1WUMF3/l\n6Nuba4ILD7rgdDw+3HCso5Cr44w/uFS32nxCfZJ7Opo/5zEBfGBkGVSv5VQq\nkyxH\r\n=8vJQ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"218eacd6961bf740e059146072cd9e6c710dcdc3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.d3d176ba5.0","@material/feature-targeting":"5.0.0-canary.d3d176ba5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.d3d176ba5.0_1580232548409_0.9213232925617381","host":"s3://npm-registry-packages"}},"5.0.0-canary.32c1df133.0":{"name":"@material/shape","version":"5.0.0-canary.32c1df133.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.32c1df133.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1cb11024bbc3a0b6d1f8d740b24d2ee75492dfe0","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.32c1df133.0.tgz","fileCount":12,"integrity":"sha512-2TNqzXwAyl45Gf5eTdFZ8r/b5k2j3+9uGh8k4foebQeLo6guzzWQF/Vi3ExQ00R3BC7A4UDnjr/XacN4ggjTAA==","signatures":[{"sig":"MEUCIF+R1fGuIBXuyXU2T0jeQ9ymVlCRGDksFlDQJELPRIKLAiEAqP7iRPKahaoN5Shxs7mJQ+8C8WkVZZMgoIRx0h0HBkY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":19190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMI7ICRA9TVsSAnZWagAAGr8P/2RupoHztoPUdheGRzl7\nmaw2SYitOswC55Ajbq63Wp2O7kuz2XC7peOlyZcL0yjZmyn8bKyVxVDs0HkP\nN4BJiCYclNC0KDUhF9NbKtllGNz7Nsq/gFmocteFbk1jWLlOBIu8u2BDzO2u\nyYz75AB+rOl/kxaPtIQIK3Kai8oB1TtWi82AgLFjk5whkgevGo6j2kv2hZ3R\nFteiIF9CsRHtA6QQoydoCQIAPNMcHxSrR2ldSXfkVN9KGqcB+yuj4vzU67XM\n4VCa/CVrzXohCp9XXHYIvgvy1uINaQp7iaehQJNZ08hPyxD7SGvVHf/H7rIl\nsWKTZXRM8CIanPIUX/mXmkcpaxhrulIeT4H4JHxk59YLFmZam6LBOQDZRYhI\nvGc2byMfF9SKpgRNBSr5Sua7mg9cAC72gxEPXsqzxFeQxGxj5QFjm3G/QAcc\nZSxk/oDCR6lRcrF77kYvW5sNIJQzejWnxlMYkhdt6w7qGg9iQDtpx0IMpwW/\n+FTxMSdLRLq+V2sAplpdRMoo9R+gCBkLVysIAhJRY8n2AGWA3ZpuPpbiIKW9\nG4A7w1f6GHnlvzFUxqcPx6hDmXaRdEg2T9BfAmgwSmhUswoLbx0oxzD0HTwZ\nYCgXrS6lmhBEV00MOSm+e63sARz9D7U8TKne9RkzXoEXfQpReZQqe4jYXZEz\nNyPl\r\n=M/n6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"1f36bc15da25ecb33aaa27693bbcee65c1d56eaa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.32c1df133.0","@material/feature-targeting":"5.0.0-canary.32c1df133.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.32c1df133.0_1580240584162_0.052381234532536514","host":"s3://npm-registry-packages"}},"5.0.0-canary.f3adce86f.0":{"name":"@material/shape","version":"5.0.0-canary.f3adce86f.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.f3adce86f.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ca050d8191a6d51cd0baa613d1524b8b583d53cd","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.f3adce86f.0.tgz","fileCount":12,"integrity":"sha512-XmHf3fccWvsi1pW7ABKV3JntcKv9sVsLLh0s/58ZTpLuGLhLc5bj/wOQJMsq5GauZbcB/5Q/Zrn9XhupEDhetQ==","signatures":[{"sig":"MEYCIQDITbS8k2GDxUIFfuTvF1V1VL0iu7gCq3vmTPqwX00qlQIhAJNKDrbHBy4m4x8oSVfHoIo6ii6rizb6LT6dFgMJvbKE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":19190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMKwyCRA9TVsSAnZWagAAiagP/iEvesAUKED8AVTsG9yD\ns/W3Z8tuHnuvHjF4QzyUE+l/mir8vd4ZCNRmcmInMQBLhLWZ/zOwCGwCAItk\nnRrnSpcSCNC64cxokiczVPtYOB9osgCuOyTREWV/3qDSi7nizl2m3MF1RLY+\n+OY5uibyrDP08Ss9OQ8J5/CMhToDj/In0cXWH5mmqpD6juWbQqh6yWGPh+YR\n9ithU4b7ZZVoSNk+e6gXK66OuH8DzS1K52LCCMibi9lOCw2LOl0Hd1bnf55i\n5GpzGwbwD2WS6ctk4EqXF5f7kP+0vbweWVro4xdOCT+CG5alKu39QwbEc2Fm\nwtLl8ySS8ruv/XK4YGuANHcOoClOWgvwxICk9fooipa0O0BZiJn41Uag3uFj\nPtvlEyTgGJ29rs+huC27uJTxAAfS3h1iOYeJXNMRMe6qC48Wy2jQyRahT66K\nx+VMpmAVXTau/ZQfIdl1urDu/rYo0Yj7VLD1bHTrmaxqkwT1dowU9rN4Th5f\nA+avdrG+TMV8VOj3zt0JbQvBN1YMBoaLnBTiE29S6QarNU1Id4+br4vI5fmB\n3UAvcAowXprQs9yLaZnx+R7GeuwqwHmTr8U2hJpLSowF1x6YlKC6z2L5bCpQ\nR/1Ji15v6LDRwuqrL/krboEsQAJ5UqBc0VOteZk1uovI865Povsg9qGvqYg6\ns7d4\r\n=f/AT\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"c352913b9c3e29f7b404b08db88a506e692187d7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.f3adce86f.0","@material/feature-targeting":"5.0.0-canary.f3adce86f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.f3adce86f.0_1580248113830_0.40633858545094603","host":"s3://npm-registry-packages"}},"5.0.0-canary.a4423f890.0":{"name":"@material/shape","version":"5.0.0-canary.a4423f890.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.a4423f890.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8d5e8e16a683006202a053151e6320e769adca3e","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.a4423f890.0.tgz","fileCount":12,"integrity":"sha512-Sjml+hMR5WTaVXEcb+aYf+o8lE3YoyUAlNKL3L0Tck2G1yMI6N1Ru4/wTfoKB05ymJ9/Yj7hnTRAh5rMtOrjvQ==","signatures":[{"sig":"MEQCIFHjbPR30KxGemcsptpPFD89BBf33L97es8dL3xlyKkTAiBNa6o+trsZUv29zj/3z8eaUFZ+9CN4qFvXZmPwOyLeMw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":19190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMfR4CRA9TVsSAnZWagAAZnUQAKRIcnwLBRrv9o82WNFP\nffZzxdMLMC8iXjoa24GUhkqH/sNYMZcUIIhVJEwfZN2eMpgGFRSj6z2J/baG\niwK6tKd7HrqRX3Kkm8R6RRWtaUaraWTizd2fxt8dhpdPmGIZsEG5F/dbDP+J\nHJGdFGELqSh2cjCfg31sKtDYFV9+nL1llQQyxMu7Ltcfei6rmummAA23VwWP\niQbl8/Enq+JqoEV3GmYvxCm0waQvnMsaqXlRZ8APtGtByTeXp4DV/L6lvt8I\nm1m4ijYxtQIbNIP2vfKvggh92GaKa8HvH4oWFA2fvbrRf06NiGvx0Mhoy2OM\n671qeMly1oG6f2QZ40cJml7q332yV4BFvtxRJme36N/oZRQ+yc4c53EX7YVY\nYvrLj/AlGPilP82gTPLhjNvfdGICbnd8vg3ssef5w+6D1JpivV6GEoe0c+1i\nMK/Qr65/g6dT08KvHVb5pHtYvmtyUZKRSUInzPz1WYNd7i3rinzL4cRj1TqL\nctjKKfBr0WBsVCRcZnLgI+JyvgYMYFoyks30GbYhcBMsVpXMxZ6oVDZa4Edz\n4bIGx7twZOD+k7oY/6w9mORBjtv1v3LfTpiMNvhnENVxKVFRTBQNLhA70K7i\nmVh3+Ou+tF31V14yJRJrJ/MUaJ3mDelZefRu2VF9VX7Am87QrOq3UUlC7NYY\nevP3\r\n=Odf9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"981df6741191636b0a527b318fe896f47f74cc0d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.a4423f890.0","@material/feature-targeting":"5.0.0-canary.a4423f890.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.a4423f890.0_1580332152264_0.20592487886544042","host":"s3://npm-registry-packages"}},"5.0.0-canary.9351f167d.0":{"name":"@material/shape","version":"5.0.0-canary.9351f167d.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.9351f167d.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d235144f9f06e14891c41925db02125e6483145a","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.9351f167d.0.tgz","fileCount":12,"integrity":"sha512-B0kxwLredTviANYBXPDX7dUgg4CcMgJucGaOrfJLzMfmFdGFXW0WN96tb1zAt6OwNE2P+WFfTqSZ56cLj+dOIA==","signatures":[{"sig":"MEYCIQC56SE3yCO0JSol8WCpM8MnpP34W06aYA/Qti7E+Bvu+gIhAPHyu4tP27BIMFeN5gnSWLedvMvO1wT7/rd+DxuYiIlU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":19190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMf9FCRA9TVsSAnZWagAAmNkP/jp/84VmzMnElCJohvCM\nokP/7b+wVFvp5jmk+frpjnpcBhhcGOla5SrZGDN9ITnvv+pz8Ekb7zv1G2aP\ndr+WIAKIWmMEQgWg3RXYSM0DunIbgf0Dpux9sS+3p1E8vcQungtHhumJSRaJ\nbAAe3VkZyek/xTqkFEAukfqK9UClKB5KhwHfj6LwJql+jWbUhg98i3oNb2Mk\nlpA6Lhw93MErwzBvQmvQo8ActWVCDINO4jMYkm5qlnGcv2aqEooNR+HJ6Sxi\niiMROizEvYtvd8q/Ems9l46QiNhxweUBY/CJF5cUC0YMLjProgyjHVQBQPSW\nmkGYRQzcBgHfp7WKqux4dzazJRiQtdwerJhoS3NP4zKVdDbN3iHnuXdenRqW\nyes3pDlofnAWRIqzveSXML+tk/EGefrmixi/f6r9wR+nSuY0VY0k18TsmXf2\narn6Ooy+K91tAhxQmoSibFuTMoRKxXqsifRRww473P9wnc5yot1n3G/IkyID\nSIF2fVqxR1FFzVNxtVFEr/PsqzrlHvNT5s8DoftYIOan1CMzQcQeO610KIYt\n8hZd8OqrN62SWEGFGXgk8QSTf9x3o44xjdBeBuPvn02uKOhprMpzp8c2N5sl\nF5yHvweTRCC+yb3y4rVQiU/pg+DPVRddI5xtwhL/86YGQqsK5/0VkyDQlXZG\n/rN8\r\n=7DCG\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"6c1a50ef6adf8852f326e285227923411e60a63b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.9351f167d.0","@material/feature-targeting":"5.0.0-canary.9351f167d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.9351f167d.0_1580334915749_0.34659588851091105","host":"s3://npm-registry-packages"}},"5.0.0-canary.29b89dbc1.0":{"name":"@material/shape","version":"5.0.0-canary.29b89dbc1.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.29b89dbc1.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8d629064016c6fecf66d72cdf15831d2773fb50b","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.29b89dbc1.0.tgz","fileCount":12,"integrity":"sha512-dWTUcXEW+Fm8D9wx4r3X3BNYmxJKR1CaET6z6JH32ygm1OODuPwtGToe9lUOZjiHd8wX+sdSwolI9QRZt0lvog==","signatures":[{"sig":"MEYCIQD7rq+Bq7XcInCcctM/BJHCJIE6ofjG6g2wjsedP2FkKwIhAKU7JQR0kqhVjbXCpZ9H5ChXR0r8+tQBDlFkEFpJ2bP0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":19190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMgQ6CRA9TVsSAnZWagAAO4gP/1QGXw9S+yXP99ise6Xq\nNvSnwjFMc9/iYK3cWCYmBRB2sVPdFopj+1PKZ+ykqW6YtnpL0eL8EBPoRNPe\niJ488LoF1Pa4D8u3seXLh61PyrDoeEpkmDmbfO+Xlcj6NecF/f0htKnemZkX\nKyLz5kLYQVteOCMrR865BOak/6Rdx8borTAcYzX1Fkk7gOeRA4XH9Dkzn+zM\npmqfWat1uQv3HwG5iZo6L4plgSya47FDTxM1nJcTGgmtwgTXBE1yKLevTEKZ\nNo4NEnwGF0sNR0bZG4nTQ81HKOsuKOKU26+Een3GDy73HT91tAX91STtT4Bk\n1j3O5U+ix71GMhFlkPJ9kS/ufHfkd6kJr1Em6ko+E/73ABUTXQgIS201HO5S\nEztjFViZcbQp0q5/RUjBXCvqpbGwh9YMs8AZuehSdtyrtri3D7OPdH91IHPJ\nB/HwqZ/Q2Bo57vYPSfGjbS0aXwuC6j/nEHcg/VJJgyz3N9eHCTTkDKX4pOrL\nyR+sKEcMK2FgJycMzUtFyJTAftOoF4pH7KzaOoJq96SmX28M7GU83xf2B0MG\nW8DXna5nzh9S4+DrPDI8CQlDLSpdGBWxNPqPnBzTGriDE2Jj/Ajs0FTx14z2\nen6yZSFQjOQDYh4BlcUhpAG0mxmVIth5FOADYoYbLnQv2nIjAyYZxThZDCN1\n4Y3b\r\n=FelC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"662c3c36b5ac6bb47c841a10193f2c717bf9ca86","_npmUser":{"name":"patrickrodee","email":"prodee@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.16.3","dependencies":{"@material/rtl":"5.0.0-canary.29b89dbc1.0","@material/feature-targeting":"5.0.0-canary.29b89dbc1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.29b89dbc1.0_1580336185831_0.2631311009276298","host":"s3://npm-registry-packages"}},"5.0.0-canary.45985457b.0":{"name":"@material/shape","version":"5.0.0-canary.45985457b.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.45985457b.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"affcf3c100652f1c0909baaafbe1d55bc852c4d9","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.45985457b.0.tgz","fileCount":12,"integrity":"sha512-5voCAuqbSN/UFM11UZWgCIghlJ8O2LtF/gDsfgfA081Et5YmaPhG2OlHVfMHwzT6psx11J6FWx2bsIbwgDnMNQ==","signatures":[{"sig":"MEUCIHoWEdkf6baePniW4c2ph0vMpufwSZJSUpNNK9VdJX9yAiEArkodx/5sXiXd5J46nIwm3s/H+r0HWt3JYp1W7Ul5wnA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":19190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMhYOCRA9TVsSAnZWagAAl0YP/1bb76izizfGvROKnvGV\nkJ03MTNY5GJWFZd/djj7U6j+dg23olCFwow45lNDMrrAUDqtrMieXM3tZIfk\nb6WRmwwSSkeoQG0ID/nI7HV5slkhTWy6ftPt0j09Fb0Pec6wr8T5s3XnyFfb\nM7ghp+JteyEfbSwhVCPDbr2Z7w3ac5SfMOOxHKMWRC8oLvKugeVmLPiz6wew\nMnhb3r1vcXAQ9kybhqH9l0IOtN9u28V8ZLUhdVNhs9FqR0442HnXcHJYc8zl\neIKdNVag3hZZDTARM69BahLNnBuMIMT7UsB4AKKIZWZhje+SKfk6QU4tyynV\nAZ8unM2Zot5ykARv78JQL+A50b5CeDyF7jKfKvaHbxFxNRVnKSpLns8uUBCI\nADojkwHl1eol1yMPMog+aTz0s9Qi2Dv3FB9/iWgVCOb446FOYcncSixQpQs+\nXuXpsluIQQ5XYPLfTcQ8wz75BJAo1w0iAce7gvP9tj+aOqCYnigO7NU1wPQ7\nY+mshQbYsw2gbqRhc5vglYEnXlIG5plO7bD+Gf0KndFHWQf6qWmLYnMYUOqo\ni+e9bZ6zEMA4lklmik3L+6oa/s9R5nZrD3DYHkCnCVx0J7vr5+YHnoIb5+ID\nqtu+lIWwhXdpcReVamNPo/g2ARp4qT+eJF+5j3pp3wE5AXtwTuRWq6K6Unic\nCaIo\r\n=fCtO\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"bfd13ab23e42c09d1390ffc6d7cf1caf1a237485","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.45985457b.0","@material/feature-targeting":"5.0.0-canary.45985457b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.45985457b.0_1580340749600_0.42766611891397144","host":"s3://npm-registry-packages"}},"5.0.0-canary.a1a0deb3e.0":{"name":"@material/shape","version":"5.0.0-canary.a1a0deb3e.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.a1a0deb3e.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"33fe7728a2ef2093478e676d8755114a1ad6c757","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.a1a0deb3e.0.tgz","fileCount":12,"integrity":"sha512-BcZ9fDjdmpZ1DxVfuK3q0OQ5ocizL5+p3Zk4bx2l5eyTCqOs/v1A5SQaTTBz6Lg/7isNaAvLKmEpRA4Gm+/AaQ==","signatures":[{"sig":"MEUCIAme8FxAOVD83aanRsPoJXFuWyIpdptCEE9YgWucuSE4AiEA4eF3EdWsu3WzjQSSdxBmAhbJ4UkWZAlF5hbfkhlsxH8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":19190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMxQ0CRA9TVsSAnZWagAADeMP/i1zq4DcxtlTWRi1mdIz\n9cPMWpnBqxV/IIY+hzoVvAt534q8IwdHAFVNEZeD9Mzqt1EWvEHABagptBA/\nLgaHMcaGNSKOFPtPzDWc53zLG0BKnwRT1JRcCEPGKus0VKp2wQ4qwqye5/gj\nYYjWfvRQiWc7joVpXtoJvy2j4m69lneR8jgWl3+/5eLWAd+CuyySiQp2hE+5\nrrRe/AkZnKLTf1CKpUbAbI+5dRpz1LbtiPaj3LGFOixkxNjlzs6/aheuPcGN\nRTfyT8SJll0roWPc44rUsX5K/yAvDdeqOmbHdZu2GwURiqJ2q2/KHuU7SDFk\nNZo7eXhvxi0FoaVZZZj2O96U1I2x6WzlGRgQvkc4UYTJO/4OsLCrDe0uq/8n\nJ9mmBZ+pgaxO25CwBvW7udQcwgpu6U23YkgcFu+/s4OEg6DPwWYpE+MEBY5K\nU+A9OAtUD74zIoHj8LUUolipfK20v6BJ+cWu1LzVY4htgGInGV6xGFy1pcPK\nRldqcoBch/4f2ZV9ObqUcJ2p91xeRyRSFBHRvShwX43h6veNK60/2BK80LAx\nee/igBKIwVQ2CMlVxRNnw2tscPNaOEiTYgxjy+R3ORHtshywlLcyy/ysd/7S\nFFRnzMzxZVbiQaHyjJy/1X5G8CWcTP3gWz/1icyUbxFO23TKo5UdkXjFns7C\nTFwB\r\n=nEcL\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"515cdf56b0195423f7134244b26cd7999b647d68","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.a1a0deb3e.0","@material/feature-targeting":"5.0.0-canary.a1a0deb3e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.a1a0deb3e.0_1580405812362_0.3967440787345806","host":"s3://npm-registry-packages"}},"5.0.0-canary.181486643.0":{"name":"@material/shape","version":"5.0.0-canary.181486643.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.181486643.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a541b91b04401ec840893e9e080566ba89de9ced","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.181486643.0.tgz","fileCount":13,"integrity":"sha512-DsFr/6PDLau1HUSMvOM+W55dJ83b+c6UiNEGWvIC9Zn7JIsB8JtUm8ZKjbVNw7nLTP0o6+teMbgd1HtWsudr5g==","signatures":[{"sig":"MEUCIQDmzh0NdVhmW4CpAbe+5nXJIYTeFgxVV0rToowKExxLLQIgYO9lwxF+Yxm7agGQQatokYmNuFp0aS7vUWGbNW0X6s0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":19433,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeM0LQCRA9TVsSAnZWagAAIHwP/2ghrYdUU9q0forFq8/j\nPO0Lf3uchsB2bvi5ZTrTw3IUxaHQsb0RU1kAdGmEjfQGz71RO4SWQooi1xMI\nqhv5Ot7Dlu4JinKC8tw2gmWx2DTvC5oMtVrXzqKSuiMIszlWgKaKE2XsNqj2\n6Dr0CH+fWgXYAGHeV1MJbvLQQQ89uUnjO17HknBH9Zyy14DBA6bGPV4jz5rF\n4fll20/mo5QFzQCMrnqZNPe2ZyyIJ9YlAYWLHnycZ16rukcXa01xseqxNdak\n6M4TKnpLrofY7fFFqYjn1HYxyJyo4gY3BbL3+64xXqubBcvluaTAvJr2WPDl\nSJdhd5dCHKCKhKVOrpF96peOqcAk6pppTWjrDw4B3eAIqz0XE44rF66YKE1H\nX6u+FTQsK4PEf5mcxUt7UjO9o9CoMwmfHWqbsnwOU8+ReSpNeH5PEYPwt9tJ\nwkIMZ8bD9zOOYPq8sPG4v1hqVfwpyHJuNTDUf+aOGDvo6/wJd6OrfnqXDQ87\nhDVi/nIRvh4DlSKUU3AKTsFRigc2KlREg04wDBKXpuzzn82kHwqd576+QjCk\nKqgLucyY2G1rANJVgPUHXw1HimcxfiEJ78CYO/n8/ZFsHZzKeJETkmD9KdTn\nHrLIgu3CmhH5xD+0WUq1bGcKyR6/AgP6H2Jfh9JIycI3ZfOZY9iZBbI3JIf2\nvpCJ\r\n=D4IV\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"8f29e2225089ac3fbbbbf9e1a64e9773ce276236","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.181486643.0","@material/feature-targeting":"5.0.0-canary.181486643.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.181486643.0_1580417743700_0.46067130769216313","host":"s3://npm-registry-packages"}},"5.0.0-canary.3a85313ac.0":{"name":"@material/shape","version":"5.0.0-canary.3a85313ac.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.3a85313ac.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ffa1582db4752d3bc597021fb4f3238538b2ea0a","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.3a85313ac.0.tgz","fileCount":13,"integrity":"sha512-bUwQgDUMVvtFHe8HGwFNrBP5RkG8TvcpvgI3hz2KYxezQGYmfBU1rlKW96s0WbVvQPr6MVxtflGl1lB1ZhNudQ==","signatures":[{"sig":"MEUCIDPZhaXDW8sVYk/fbHU5epmsSY/1sWCZr5Q7fe0eD0sBAiEA0PV8teM9A4sSeWbtLMTfn+GgqnbUItCGhqDJ/XPdUjc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":19433,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeNFRcCRA9TVsSAnZWagAACKwQAJ+wc982CQ98+AggD3ho\nHfkCu9KpxbMAx/LRwTAuKhekfYsYLuYQioSAfGvLDzaXBt/RR9A35yisxF5M\nYO/QdAfX2feqcWBPDclnLD6xh+tpWioo2DRTrUbiUnHfYtcgeQBHvmTfp3x+\ndgy7/iRXWGNaMUFHfikQLP18UEo+CvhmmHgfqjeEMwEHz2OFsFiGc277kdIQ\n5y6B2YGU+pEC9MXeKrTfR4+zWBZz/q9h3DeiwWnR/kr2aTzqlZAecXlH6r8U\nVRG5ryBiDBzMqnUxiyOgn3W4DIce3ND/B+Q0pymrG/cWjE38w7BDhBNBSv7o\ns8U+HIe8UJ43Qakmg8K0kXc8B2r1cCn3mlO4iK58g8BtrJaKi46x471Na5bx\nlVIuNB8muyJm5b+4g85AhgmOwvp5evgbTo/EcXG2aOsbbjlEXH4MjoZ6H0Zo\nU44wOeJYQeGLB6//wexYJ1ifCobFNsOUhQeUozt70HRUW0hoHnlaQEenzfnK\nQaA2jglBCBfRCcZ9UGGhCPORcByuzANoxP0om1cF48N3Yf3XdwTISoaYsulS\ntPSWtWD0Rn5CkdY/B5tYKT9c7cS49SdERqhl19088YXl5b2vtXMdI4UVpssD\n+zb748Lf6hBT0XdibuJu1qg/24pZV4hmVZW1d3GUbygcuS/hFyQukktU+xAZ\njhSU\r\n=D/lS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"a37832202a98646a817d62c20ce70cd38f089d31","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.3a85313ac.0","@material/feature-targeting":"5.0.0-canary.3a85313ac.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.3a85313ac.0_1580487771734_0.43709473349937134","host":"s3://npm-registry-packages"}},"5.0.0-canary.b6c7f624b.0":{"name":"@material/shape","version":"5.0.0-canary.b6c7f624b.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.b6c7f624b.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"99cf8dc403fe0bac06fc5497fd1ac3cf90e6634a","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.b6c7f624b.0.tgz","fileCount":13,"integrity":"sha512-hb2gmOKlo6HKR848uALDLcEq/ATyZqRaFWZpVJfHLg/E0l8lLirpuqzEstCWoMjW9XCOtTgnhyHz9fureAHQqg==","signatures":[{"sig":"MEQCIG5LvVM9hTn0BWcLHYmMICKrDH/YXlplv3JQALidIF0xAiBkcd1MBR3ZqZO7w4vPRNDLyCfV5AI3WupQZmY0imP+7A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":19433,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeNF2yCRA9TVsSAnZWagAAbE0QAIaR0SXwbhr1yYCRrzqj\n76Xpl6Z/1wWLgZzov+Zf6X+tEjcJgZG1L9VvKyNSAhL66hHJ5nM+x6mCiBs5\nC+SNZgkJAYj/VBjLNRvWIpakXjfnd2qowUbEQo6QPJl1X8UivjzxE5AsN7fb\nHOf5dYgrWwZYdgPDMlFQO97+30TLfT2aiiGpYBeehzCQRqesi+z8pOVk0V9A\ncibemuPzqSpLLmB2NLC5KTZ11UrMnb/8jed5zVJ99SsXi7maI3H7SV49Drg6\nJJISy/ot2ZqBJfJUnD60G6SQzM63fdCMdLGgcSwJD8nShnSA7K8RKPe8cgtQ\n9twy2PR8llLFP/97+OzWAUXyx+8PVfy7PQxxf4x+hvm4pMGq2YM/WhDMTM08\nOdaAdueo3kdSPV/55is1jSyehAKLMP8OYj7O8ds/ZOxddXx0LTnOaORvpY3O\nTrwR/4hb4Lz/DKGrBmHJbiaYU3mEP9XHZPwZm/OJVxSnCvb6vSXlBzmV5eqp\nwQusVY+3pr0g0HFXvl3mMQyetYcSWm16264AnzBn5urEN2Z6EVjrH94AsfIv\nRCTJfXdXsbt5z2W6vCdEv4jpvmatr+1IOhVw/2qhdeLhMPhlr9nHqTJSgLge\nQ31c5i4Sc3Q+u8DLp8pxZ4hrHmdGaHqG7JiM3m2ugTmIqNoBSssp+GIXBDUa\n6aX2\r\n=OUpi\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"eb607bfa0326630c63037143dc919ac8ec5c3636","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.b6c7f624b.0","@material/feature-targeting":"5.0.0-canary.b6c7f624b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.b6c7f624b.0_1580490161926_0.7934992446260194","host":"s3://npm-registry-packages"}},"5.0.0-canary.b3f70ebde.0":{"name":"@material/shape","version":"5.0.0-canary.b3f70ebde.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.b3f70ebde.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3e545db2c3a9543497314e2324bf822d3169fb52","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.b3f70ebde.0.tgz","fileCount":13,"integrity":"sha512-mVUeVsOA8vNX4TyKxjgXSakEde6Jn0TMwVGOsqxqFDf+XRNnuqsgs2pHy8SZ4rUGX4R45RL/IITkfwr7ADOI8g==","signatures":[{"sig":"MEYCIQDEr89qdeuLeVqFgdIf7K5OsH3nHSCuAqSd7428ul92eAIhAMwWbK3BZZS3MGWX2GKCuLTwrTgR/Nu0YhcsgavbPnSG","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":19433,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeNImMCRA9TVsSAnZWagAAWFYP/2xcpPpHPx2n5VWTLN9N\nwIjIDb6rGAko3XPK3SwFJBeMPqNCrMWcmA/dzuzFvrT+t2nJJSh3ue7DUH1T\nZufcZWqDbiK4GaoEBNEdfkdAO20euMGC3FesDndnsWQhE5azHqAmNdqZnBdv\nBqC1/uHK+lCiZxn7WiwR5nw2ffoM2zWS6OxxdmQP8jEDCPLksL4hFYsPUEu0\n2ubX4AnwiQOvy2ND/S4t+A0wva71p1+c2u5qWa6peBStKqutynsIcxyBS8BN\nPVfeXoRynWa6G833gziHxrwMcmfkvfj7oRIcAwD3rff36WRt7lLzyGMUPm3h\nFJF86JGRHioNh+PuW7KSjdQroyHZIKD7P1RpzSlC/Qrev9601fcEmlIeX7X4\nCcAovNC+Fs+9UZkltz0S4Z6RkxJORFj7T/j1ZU/sLty4tsfQYsLTz+WOQYJH\nvqEvjZ/UohCHsf9wfKCbtTJ3k5i9ewja7S+UH9iTfJ+f2JPtMDXUXIbtr0F+\nB03mD1nrUEa4SvdvUSJtoZ8I4S7arE1jwEh7/FsiWTOQGg99ssI7ZA+KJJhR\nSL6+f3aKGawyhGM+gSeOlrG0W/5m20RF+A9WncFLVPwlgNLzLSzgOPpM0rGh\nDG6G8L3qeH5HlWABUvUEcPRB/S22Qdv4l5pnu29sFOQTzQjDNXrdU5BUuan0\nmYf5\r\n=bO6Q\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"00a0473670032b0ea60db83e614385e1e3166dc8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.b3f70ebde.0","@material/feature-targeting":"5.0.0-canary.b3f70ebde.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.b3f70ebde.0_1580501388071_0.8954678757210044","host":"s3://npm-registry-packages"}},"5.0.0-canary.3e782d8f8.0":{"name":"@material/shape","version":"5.0.0-canary.3e782d8f8.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.3e782d8f8.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"67476ebc8bcd7e5ecfb19d8381a9ba2569010810","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.3e782d8f8.0.tgz","fileCount":13,"integrity":"sha512-HES/mU5xUvZsEUqZ2nHsio9wr+bSW1qb28UZs8aQp2++32COUdAAnK/0Z1aNKJkG9p3xtp0gBOJjc8Db7Dax8w==","signatures":[{"sig":"MEUCIQDEB7vTUX9sSfdGchBASB959xNsa29JdmckYlgC+Ee+xQIgYGdRUqqbim51X5D4f02/AvEIyIFlKrl98o614d2IQN4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":19433,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeNiH4CRA9TVsSAnZWagAAGnUP/0yyu5JacZh1s8vsSQq5\nwobqoqOAPtfCJJbZg+tKMFyYiadzNwjYHVCzLZOfquYbvx4Bpomcih+gnZUl\niIqGpbfbYtWvr6vqbCqO8ryvOWhMqulzx9Ep5x3ZtHDdAratkZlsMriTLbWW\nSMdfgAe07w6w3q3F1j1OX0TjdOI15RXBaYpHEC5p93e+uzyb2KHzQtQS/qGY\nS9PQ+YjLBxlo6EQCD5Z8We9RRGyjo5WfqiDWg0epq3HDQ7gyLEHLb5C2iLTz\neBzjDjp5iswdVTuekDSGLUvbBhyU0X0CsQoBWmgC69DoUTl5iPO5jhq9kG1R\n/A0Z6s68nmw1i0edkGwMvr9vf5kVTPLPEmwic6tugwmVzF1B/LJAo3FGxwFZ\nPZpBa+rpHB2EKhQOrYJMYBbOguMjnu0j5p04k52wtZINFkBXYpO2xTL8v953\nkf/sBt58VcXhP3XBjbBBAkn3iqUqd9hSbmwp6l+Nl1rcVU5gSUxUf4hXGg5u\nelY386+eCRDQ+9zjHgMqLfJwL7xi7sxBXGODwq3lz4MishmlIX9MfEK1teUn\nVy1LH7pILrargxh6vqGRgabF5QZVeVZacMz7GywsPFa4ngCN3mzSi3iU1kB9\n2t0cmKQDs/rN0vVlYGqvzQKYTcV0g16bzpBgDngGnvDo8dOGWuRAu9D0IdtN\nme7Y\r\n=+nHU\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"8aae1fd4299832f77f4d1d51398e5b28ed5af5a1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.3e782d8f8.0","@material/feature-targeting":"5.0.0-canary.3e782d8f8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.3e782d8f8.0_1580605944161_0.5746474109374655","host":"s3://npm-registry-packages"}},"5.0.0-canary.535398572.0":{"name":"@material/shape","version":"5.0.0-canary.535398572.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.535398572.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bba6c2bb19e25370f771dbca4092668ac6ddf280","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.535398572.0.tgz","fileCount":13,"integrity":"sha512-2jgOfrFBU6Hmpin5MKA8rWmLiZ6ZdaZfuRl8POCNx6xUkcHBbH9+Xv4sYJsikXmxkoGq8y105Z53Oqi4pvnFQw==","signatures":[{"sig":"MEQCIAJlqZosIdl41EKt7XtTNLxNJTFl9DA+zcnYDbpZk3j/AiADkj+m/4qUG+bC49jODCwAMrKhhReMA3oLbN3BJREIEw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":19433,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeOGI1CRA9TVsSAnZWagAALi4P+gIn09vy3G/ROSiKYUSA\nC7qWSd2fSlACk2g6/5IA+pBinQfyRh3O5DK78KCiIBo2LHrnFD9c1ya2Kcsg\nsUmraTWCLj+6OYQAK93+FE4+kgGx5Xp4g/SCqJ+K2JHDSA9EwS2FcMijuqFt\nwsCAk/jjUmYkZ399MstfLj4iqYvqaFpn0QdX3eVGV6HjR2pE2e4rGU6sTV4n\nITHkth2R2gyzWs2zzH7p7fDhCmjaI+lXLo2ptnIzU9RylhOsOg5SzWJSaIw9\n8geSex1DjGtwPkRhhJ6difRt2G3awBKB0LcHqrmG/yXKLOPTJheTL0wjB7Ni\noXpRjEKTqJjNhRJxFMVwp3dHqHhwNVu/IwXtK1BgcuC3dTgQvnJ8sNpaGY+T\noWWiznSvNbNqd+dBoYqsgx9/3CDDMxnKMQ6LKSbCNaAuhFvTK4hF1OJCoMne\nDHTrIWqMN4MeWxvjj21rRfCGNADJ5iEnN48iWiUq4VQ/viy26xRLdBW7wYHZ\nl/1So4SwkUady1offJcHyY9XvWrychG46CvimBZCr3H9oIttuq2Xp6Lw1GT9\nRV0rXhAyspwzBpZPaEa3KvUMdzlRt19qBW0o3BdUHMV1W378MwqzCy5kMw/t\n9Dlk6NcU8SnIT9uDB601LLktsrCycT7Q8xoEHGv9iMRS06iuY2v0occeGNkG\njEkH\r\n=9PbQ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"7f68038e23db60e7b4c44c1b17a6a82329805553","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.535398572.0","@material/feature-targeting":"5.0.0-canary.535398572.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.535398572.0_1580753460669_0.21607208033956837","host":"s3://npm-registry-packages"}},"5.0.0-canary.5ff33802c.0":{"name":"@material/shape","version":"5.0.0-canary.5ff33802c.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.5ff33802c.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dbee3816d140b882f35dea0c02ee27dee76a3fa7","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.5ff33802c.0.tgz","fileCount":13,"integrity":"sha512-OvysnxPGuh0Id5nby5A9QjaUdvv50RAOEhmgmynMW62p/d3aafXKYhnqbZ3q82IXubC2bqwqAKeH1kKCYARKMw==","signatures":[{"sig":"MEUCIExzVv2LM7OkZock32tbDD3XOqWP+sDIQ2rd1SC+u3ZTAiEAjWUKT4VJOyuHmEdZeg6SyoipR94koIr22VX4RLU3IVU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":19433,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeObHyCRA9TVsSAnZWagAA/NwP/2pLUuN+bipihPxOAzss\nyncOWBNa6QLQr7HqW/MHvYiTyhwnMqjJimIYokGJQp771tzWUCuH/VZ4Vqh4\naABhadVo9HzBnRSHZ3cXwZPtczQW3RFYHkin+Z6z5cAVKIOv6rmw1GLFjUxe\nqqhyHuq74pPxXX3fsIEdEafgWUXmR4Lg1YLTRe13MQkW11kJERSxQeEnq6kr\nf/KEoqphyhWujwMI2NTrhOG0OOTon3WvdYDwEpphcT0p5o2Ii0wuru68G5vZ\n/my6D8zxNBd8mhVGB0oiz0WlGtMkVeiAjyajNrM6w+B6hS9aLU6E+F7kqLLv\nlpu+xehO7TpPxaQN+HDRUP6Ke8wN8U4r5xE282ZNGKr7qBzAP7Yrc6HRO/b0\nIjagCdA0gaxER2kOGII3zh1CY3K/3pG1jIRh7pcBoBc1H9fmAKhuU9NgIUZu\nK2Vz1PHAFm4+J0afptB3yyLBpqHSBz5lwtGUWdHFuMranWQFugox3OGDkKFS\nWFjXww6evXAn7Zmj3I8GHOuk5p1Z6QXhE7KdqL+NnkXTZLRgUNM0xfNE4T5j\n2EJj0xmqKJzkUyFNusUxjOt+awc4kH2cpJH+WdY83u2caKhQPm6F8Gizku9w\nTyb564p97dkYi8SWYr1i7N3aOUms8MBhv6NbxiY2g2zgTQlg9pAC60FevIui\n2qrL\r\n=wGYf\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"61246014f77c40c0d6594f32e40f4ce98d8f7c8a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.5ff33802c.0","@material/feature-targeting":"5.0.0-canary.5ff33802c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.5ff33802c.0_1580839409594_0.8330125984404129","host":"s3://npm-registry-packages"}},"5.0.0-canary.1eb29491c.0":{"name":"@material/shape","version":"5.0.0-canary.1eb29491c.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.1eb29491c.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c1e881dfbd8dc5c1c4fc2dbefd0efc27bde6db90","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.1eb29491c.0.tgz","fileCount":13,"integrity":"sha512-YADo9dcFyymkunOOYNqVkPQtNG0CtKoBm2tz4k1KqN8SFZqsVPNQ3VA46r7orZ+i1nc8YzJMpt7Bbj71VWrdrA==","signatures":[{"sig":"MEYCIQCrLBkeh2VdyvYxU8yp3YNZC3hbsL5RGZHWc6xdWPlBjgIhAMcKky1Q7xaSxyfmBbtfW+bhxC8TBeK0OoZChP5a0uEH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":19433,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeOdtVCRA9TVsSAnZWagAADZEQAIOWaC4bQj3CiXjhUVax\nBlDrORuIyJ02B/UDyIr1P1AcWYIkNvRm1or/PUWyvsdo0HNGqNm/7vjRePmq\ndXbuwS0nZkaayZVaAq97QFftaG6YUs6Hfbo/DBUyPtep1dGD90j1Tbst6D83\n+56xKINPlxtxd4HPmuEEOrbB901bj3Y14gYYjdeFweSo7IWMhNcuHIM8U0MP\nYsTl5v7cVGGxkK37LLtGzUK617OjL4vSUsE/8XsNfg2UXbWoWq4BOWT2YoGz\nivLWHsu1gI4+zU5+ty8yt+e2qg+XkKUlkFoxDm5p4zcnAj6gn+PGvVcKVngb\nfMzTDkwNKyiVKM4XSNIiOVw8Sp+3n5ud7JHOv1UJL2yzmO9bFx+oHQqk/Fk7\n+r/7KpXJLXeeoQmLnlDZI+5PA757y5Si6Y12txH1NE0LlFcvnKcAVXDRo3OW\nthEV3b8CHS4gzi4l4lUYBtwCwteJbebdGi562VnZ5P1aaRWy9CfwaCoWWtuV\n1mHX3e+bODYsSPdkpw4c/x2v99PQlpepe99pRuNyO1F4mJwoRMCnp71i/l54\nswiNKp2eneI1XMLvMPrRwtpHWF2KPqxDLqulRmAS7Q+XfXiJJVlwMBVrblu7\ng5Uu/m7XJXWrYTUeZ9TzWCSzyZLc+k8GdOBdk9twJTc9/EC0EaPJhya2DZM4\nUmDo\r\n=c6fL\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"689b043c66790b1c63b5d2037a1ed800248443d1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.1eb29491c.0","@material/feature-targeting":"5.0.0-canary.1eb29491c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.1eb29491c.0_1580850005499_0.8782062140906293","host":"s3://npm-registry-packages"}},"5.0.0-canary.4c7154b26.0":{"name":"@material/shape","version":"5.0.0-canary.4c7154b26.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.4c7154b26.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1fae479a90d55cdfe990f797304f9238afc611a3","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.4c7154b26.0.tgz","fileCount":13,"integrity":"sha512-Anzn9zosGJdclTYZuy3Z48rWzdiQoQzibHIndn8bukuKRIvfG9EEA+ZY2tXTdM1wTO/lR37RWMEzqZcAJkUfDQ==","signatures":[{"sig":"MEQCIBn0cGhL21TSYABzZ/vTMSfnVVYe3oKPYNqlCEoTlvcSAiBcWi9meA3k53i2/Ojf0NFHFid/Ne7iTouGZ7QYSTcpwQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":19433,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeOucRCRA9TVsSAnZWagAAf/8P/3b8ZwKGaUUDuXaexw/E\nxTxuLG2rCc793SAFtDYVRjR66//RKyxCY7IZOozgxhbJq3rReoLseNvktNFF\n0q1sVnarz4QP1JXglU0QYu4ZV8zx+kZrZR6oP3JtomHvYJDZ1/pl98ZkwjBz\n8N0+DKZRhIDCIWaqWja5HKmWE109pxg4ja25T9H44k0ipAzO8logFBJds5ei\nvEl3FG6ZZVQorlNee6K+66S1LzlmeLpET9FgjA3ZkJYwJCbpKPQxk5kXVSlx\n7ZIGioVLiJwJW2SCcgoDEeW491BT8bE9jXYkOgX2rGO7Qw3aoZBfosGIKmZE\nlfZ25DOBMpHAD7exLLxFV8IHM4jfmbhMsjeU1a7VCSCdHOJyXhLpTAfVKugm\nNDHoKsGVSFbCSvaQEI/KapXF693ERc1lgg7i1HqxvNY85xGWUX2nceqcrgC4\nXDloh2u7Xr6AEVFxD6yT0IO13zvlsCKxHWfJ3EAD+rjQXq+mF4IPRKezj5wJ\nUkGztcBWLdHz6bT+Zg5rV/uYlrD42Bdv2xbbOa1o8VsSuWNOzKJMbvJk2/28\nZK/eSTEt4NWwk+Wc2H3muAK70TSkCChlp201N50pO+rn2hZcR226LIDYlGsb\nskbObmONECT+zJfGtOL7f2+djGiuQSqLbkBE3AFc7uRUGkTLRcite6vP+7vs\noNsE\r\n=+zXb\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"e15f799c180f6eb07455eb8d644b93db93df5402","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.4c7154b26.0","@material/feature-targeting":"5.0.0-canary.4c7154b26.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.4c7154b26.0_1580918545312_0.5613420701293357","host":"s3://npm-registry-packages"}},"5.0.0-canary.ab5f49a2c.0":{"name":"@material/shape","version":"5.0.0-canary.ab5f49a2c.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.ab5f49a2c.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cbc8d43e54d141fba72d54ebdcd93196a62d6723","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.ab5f49a2c.0.tgz","fileCount":13,"integrity":"sha512-qgjEat8oeH1SdLW8wRnICGdmosTtbm4jI+QF8FbeY64nG47kRvslnwKchV1vZ4JwN9ZTBBor/cSqCEBG5q0T2w==","signatures":[{"sig":"MEQCIBIy3qIz8sk0/uczpfFOf9l5TY+3AXhEIYSh1nmSQcspAiBeGZ/Cf/j98Tj2d1i9wZqalcbY64FT4hKPvJPmOHJXEA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":19433,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeO1ChCRA9TVsSAnZWagAAWr4P/ApzqTM4M/AVqangH1PL\nle2iPICdf6vI5hDbPcTIq5IDR3vqKPgjXfYwmAq8jwDpxgkGMbtbA9qeDstP\nVjIEgI5uO3ucq9zwoWNuKRJMjWHix+R74TBEyp9aWtbWS/BXUyXXGeeUH+0G\nGFU4+5AjeGXTUe/6aTtRDAAWqhOzvHgqd3HUdImaCHQ+3rqINwxNgGt9atFO\n7BebgLoe2oAr2R0qYDxuNmQL1+5452fQuXZyDHWu8I9R0Z4+vyKtMhCEIxtz\n/DviUHkgB/EeyQbur4DjpxqFXt+LU3ZtWc+mlRnPBrQAs4jaEMIlfSyMz6Zp\nMJsT8a+TYJlXW6HQbAsTwupupYPlfMSD0E39+AFFjEjupm4QtVSLSGYkpRIA\nb03hKKDwcmP/BYUh5Q+HRU6jQIr+V8euKPtcorblsaMn9NpzHj6fewO/MnpT\nRKlxByWjurqg2O5wi8M7cX1CKdAe5tWVpKvfxoaaxcOfB6msvT7ebbQBrGi4\n2jNctxwq1qTEZ2iN7meqVYbYniShhtFfm2+Uky03mGpKKH/IJUDLWJhmVN/r\nNPwl4y3/Anz+drcLo43bu2UlkuCcnX1eunmBGbSz3zcjJqazl16+8qee2dab\nZIGO0ISRLJdicPUsNne8Zae7R1HIfQq4G4JGw1ozwQJ7ylqXU4f+7pHdjXM3\nHT45\r\n=nPWJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"9e2d33465e4a55862766486d77f187c0bd37883c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.ab5f49a2c.0","@material/feature-targeting":"5.0.0-canary.ab5f49a2c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.ab5f49a2c.0_1580945569377_0.9706295906254956","host":"s3://npm-registry-packages"}},"5.0.0-canary.c541ebe15.0":{"name":"@material/shape","version":"5.0.0-canary.c541ebe15.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.c541ebe15.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a5c10c20260a4efe4099b2b0c1b76311d677115c","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.c541ebe15.0.tgz","fileCount":13,"integrity":"sha512-1G0x0s+HR1gufKU9DeduE8H/cZrnONf2al5s79YswA0sHX0DoPf0IO9eBWXGkmRqPPQjGU8QpH3om4hgJ+s8aw==","signatures":[{"sig":"MEUCIAda06LOogTK03WtCzC9++6NbkbpRP3lJi3xXjnh+/O0AiEAoY7olUgC2x/a7W/XI76IVQCrOK7H4qDw8/ZxnfLdLjY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":19433,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJePJNICRA9TVsSAnZWagAAY9gP+gN6Gv8JN7AD5EXq0Wuz\npUaTySpes3mj35eK7iu1mVQssY8YUVvw6fLJFbuFxJFIh9wT7kRK7bDJYpzL\nMoCOXQgih2Faw4OmqOAAZjzVgNYgXXiUh0kolfCxqIzPag+VUBbCgo5di7aa\nwsObG66/YPnaVA0RHJa4CyZfmP9l6BX7JYzYXXCwOYZ6SouAYKnl/PJnkwOc\nSrVE/IkfSWuNDWk8HLaq30di2igFH4WZfMBUYaRWsHtyTahxKoKvDAZJf2vA\ngiWpHcvq2A2sh9UBbKbTFO63z6iRkms0Wv70c3+1TMgy1gK4xq/HgpmDvaaj\nSn+1gv9G1N19ni9Ibo2rNvDQ6/ybv4uDBlYdFsMhHeqmWdwWEkOyh8cX9nq4\nPZ52767I3rTx6Tpf8bO6OjBMqdl2+0Lv8wonmPJknMYAcSkbFdHZQBtBDZgT\nk/iQE/6ZwyTGH9vUZQi1Jt0IR7xZka6owMCUlRlDeQ1RXGZjvrIJqEVGYLHM\nu204s511NjMADTTwSOctFA2zeWZFMimmXccZylt2DJKeetVVrQnDcvQilVKo\nTdd97aBVQzu7elv9rvrhDMIRGew3rNOITyqLc0QxzlXOw2jh9suc0Qh2SvDy\ngSxWkAQajHqQhoppZP5+Blingsxk+fnsd8lnR+5PojRkffmQ7g2gfEupsfQR\nq3zY\r\n=xyur\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@import \"@material/shape/mixins\";\n@import \"@material/shape/functions\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$mdc-shape-medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-shape-radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `mdc-shape-resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-shape-flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mdc-shape-resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mdc-shape-mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`mdc-shape-prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius));\n```\n\nWhere, `$mdc-button-height` is the height of standard button and `$radius` is the size of shape. `mdc-shape-resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include mdc-shape-radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include mdc-shape-radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"87d5a39f72f6a882a8412df86762c91328c6d985","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"5.0.0-canary.c541ebe15.0","@material/feature-targeting":"5.0.0-canary.c541ebe15.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.c541ebe15.0_1581028168444_0.2987903525648683","host":"s3://npm-registry-packages"}},"5.0.0-canary.98f7faa05.0":{"name":"@material/shape","version":"5.0.0-canary.98f7faa05.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.98f7faa05.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"899483b556d50f7f3bd85a4d540f609c0f0c74bc","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.98f7faa05.0.tgz","fileCount":13,"integrity":"sha512-clSSpokaV4ZfLiZLo1RIlmnsce2QX1GfiKTaIHthnAgp68z6KCrN0vH6qF2sUEE6/n4vwfDrVjjCjkrSk28DgA==","signatures":[{"sig":"MEQCIDNDZcqSHBR0xZnG+wskqGSVg+Msll+gCqKqAzu2XXA2AiA6ePXxAEN0PUw7m+1Ut2zXaP1kSwCi6gEjSBP63hXCPA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":19264,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJePbiZCRA9TVsSAnZWagAAMbEQAIMwH7K0kr3+v5aRmko7\nu/1miS2bzGEqzstQyeMOhWcrlkbYqulNa9cBX1RHn5/3vgS80zaThzzNFscZ\njFbJKePnNSlAebvrhnQtbpevF+sowAVatlDRj3Vbg2ye2oqd2UfNv7eV2aDm\nQ6zOb88ijwQNe08Z4qGV/ueAvT1ItKYyxPDFT2vbs5cRdYknzWlmaM2/7/MS\nXLXhZCFfJm9Xlnqz3TTtdX7qVxfpqOQyxs8yYIiLEPNsHrbVcDXoDPNLRjnJ\nJZMomdfg7nGGBpg0QeN3zQR0AKQME3YEEb8JHfrZ4shOMJ+TR0939nTF/Rh5\nDu8YOndI8CEsB49SLhJLvHvW1/8uIiEzX8BAdGcurHTRIunewq2mj4tiyt2F\n21aauIxcqjMiwMD97PW20Mm+g6sY9JUXFqUcI0GalGJgAERuJ0CoWVJYuBld\n1TLqhuisdRXfhOOrIhb0tBOM5tlve7cMRzcPviaEEsl0Hp+gu3KsvQcPwuxB\nh6tEiCCBB83Mnh6yfoC/e6znGFCCnG6xhQnuIk33P8I1IkD+0A6scqQny3Tk\n1jp8KBWdw8ONqHNSJnvSA/Lvit9q/u0B5lA5yWClGhHFz7EPz/Q9DMDkZ2/4\n1SGJ7YVL7YQI9we1vef4kfXdSVY2BbWRmsSSw88/CMhSYUv01/9VwRXV7tBb\n4Bn/\r\n=0gKY\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"698f18ec0e8c9dcdd38beb5ab6b4cfa6218fb288","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"5.0.0-canary.98f7faa05.0","@material/feature-targeting":"5.0.0-canary.98f7faa05.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.98f7faa05.0_1581103256821_0.9978648960808809","host":"s3://npm-registry-packages"}},"5.0.0-canary.b4727e43a.0":{"name":"@material/shape","version":"5.0.0-canary.b4727e43a.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.b4727e43a.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c27aee0fcfd3a84549f2b4ffa33dbab6da39a9fb","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.b4727e43a.0.tgz","fileCount":13,"integrity":"sha512-r/medocyeWZDRGgNb/vosjrjt/lHTGXD+zDxwxYGCa3Rd6ZOOa91iYC0zjm6tybD/KI/sd2ZCq5QSmqU0fNgDQ==","signatures":[{"sig":"MEYCIQCv0A5WQp5g8rD6Aa74DsFq+oz7Hh0XdSOGLW4aG9kCpQIhAP+TjWWFbbjZkWUym0rpEwLgdIUOiqA0GomvSum/0NLD","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":19264,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJePcCcCRA9TVsSAnZWagAACtAP/A+IcZfiY3lIrXNFcRSX\neGd3u01P9JObtmo/XDBdQ79ZvAnz2iLNLEqyIULsxNbWteK9nmhHZvgN1X10\nkEKPQezixySLTd3VB8gqPTMQGiXvfPntaB1ypt6IyNW6/nM5UnvW24qaV6OF\nYtsrqN8mI0wYQ2RVptp1EgDlGuOn51edMf4ktKcTP0ylBUVt4eO9Y8xktfTG\nmEzcrXVnTE/fc9t62M2KrRMPh54jbhfDC8W/6zLrjo8pNLSkDtAF8Ll/s6d7\nGN1HPVRoXoBTSElZ/gTPb0aEPPw3Rn+4SZp4hkb3fW+xesNdDWuobmYoKi2R\n2j/OHdQuiicNQ+FRhb57w4QwldbO0hIrh3jJaFoMDh+o17ndgqXGxsrYzoYD\n39b2ILmXvyrc9SgbnEx/b1WJG91Apm+SDBk1Ggscw2A2cjf/EVtoy0CXJTnl\nshNO1BZ8p0yJjO9LzlZVx4Yh48kWwiICGGHdPx+6pBcJDYKi5rXBevgQv0Uh\n46AIznt9ZyCEDamkv3PkyN6ayHL3Zzy7OmQMmgra8rZeaFcZ3l5iyW3MAwWJ\n/1rNc1domULINjWsE98Uio5aY3kLD+SE217O3OG0l8PyLJFXzncRCODyVOfa\nO3wa54bFtdasOWRl2Xn4stkY719I+Paat3Azo6e2ZWSTaeWY7Q5ce/B9dFmO\nDPdc\r\n=ZNzT\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"140a0d7a10f30d8ce4b10dfbe40bc63136e206bc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"5.0.0-canary.b4727e43a.0","@material/feature-targeting":"5.0.0-canary.b4727e43a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.b4727e43a.0_1581105307806_0.865165841851256","host":"s3://npm-registry-packages"}},"5.0.0-canary.91d9d5a65.0":{"name":"@material/shape","version":"5.0.0-canary.91d9d5a65.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.91d9d5a65.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"60536fc7f0cb1229e7389aeae9e7f43d0ef16f89","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.91d9d5a65.0.tgz","fileCount":13,"integrity":"sha512-28yFfXH58BiTX8iHOrZXyh17HhGfmXPJpadwCQyxjuG2LKNdq6h/qeGysxte0wWMhcI5gZT636Z25MtkAqdGGg==","signatures":[{"sig":"MEQCIBNGiEj2aygVLHoR0nqgMMysPYLSUn/bMoBUa1w9KrDBAiBnqVNTO33/bjCnc9uhpYpfq4qnpQLbkoGKln/G0a3Dgg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":19264,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJePeuxCRA9TVsSAnZWagAA2HsP/239apyYh9Hg9ow0mEUB\n0cZrNWojw5VISvvN+4zqFKn0JtzUbJrcrM8cuNxkj6ItqJHiBNR2/8x7wyhR\n1skhwnw0vB6zkOA78LXd2onPN9RnK6GtkwEdC5ArInlXvDHDI8cbVIStvnCR\nPIHZKtJy/pCtkH57+DFruNPZNd4p7Tj0lBtiZi8F/G57mwPuNvfPFehPpUC8\nXACUmR3KK0I2VIzMwZr5h/2oR9+kYNNIDe5ah7EqmRF8MVUZCOGPAdG6eo3r\ncQYvDcQs7m80YwToe8pLlWCKyNPk0vMLj+BTGjRP3X5Di8NenxJYQeMzQGUy\nsCP/SuJURNpb09UW7xRSk3stVJcpVKt2RA9oLMS+2V4VZtgmp5sGYpJepe1r\nsgbNUm6AnUDyERfkk3QwAxd0/RlVxWcOW5bgkd/olabM7gItg3gVvTQAHduh\nfZYaU3nYHbIE2XShnoimZQUhSWuDSO9AlOtmXtLt4nxnklQe7OD+aXSnduNh\npdDps9gcegmsAJEJV591WaNboJBDTo2YDlWWgT3MG++dyte6UCridywhH9Uo\nQEXuUDKRTNnS7xwJPv893kvdQSFtDj3Lget36yu6pqNDcdhjSCpJKqVmoqER\nG6l6nrIRdXFSWyGOgnrhiGCIGVRwd19BHjtuLRSxOFB4UnrPsP24XqR4bnXu\n3L3+\r\n=3Mwy\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"f98276c6136d4bd38889e0b4d6354081a3ca941c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"5.0.0-canary.91d9d5a65.0","@material/feature-targeting":"5.0.0-canary.91d9d5a65.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.91d9d5a65.0_1581116336868_0.8655204981877267","host":"s3://npm-registry-packages"}},"5.0.0-canary.d5c006ed1.0":{"name":"@material/shape","version":"5.0.0-canary.d5c006ed1.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.d5c006ed1.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"edce7f5915122d8b7857d860c669f700633f992c","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.d5c006ed1.0.tgz","fileCount":13,"integrity":"sha512-dp5rJUcR2NI86Pbnwr2JfyhQOWo3zHElIPSe3+8/o8Q/0nGhLIcAvbUxjr1lBhpzP2U3WC78iTfQ7R6wqmTSMQ==","signatures":[{"sig":"MEUCIBV8yIusrxXW+UJQdu96A9NOgTATYeB2FrxNxtCSyZD+AiEA8gTIYXGNrZgsOzmcggnlaMTr+jIlzC3aHDMfFU9O1tg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":19264,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQYlOCRA9TVsSAnZWagAA+sMP/RJR7cWE68cEzJcRivzu\nx1cY4ZMV2uc7fVPbbXGfK7svUURD2z+UxXuekS44neHEW5aJwAhzy1Scc+wS\nI5lKxxhJk7/uLUswXdZfmKObD2/oTWVS3EAjPQq04+vsfsTc0Qx5ONHC4CJ1\nhyZEzTv7aio/lvya9QUjwlDDBB27ggq/MH/tA1/y2ZhtcXAxbMS4eX1RGrd8\nP0jxXEzfz5SD+g/hnXdXtrjeR26szopHNZZ7pJfl8LhGZLNggU5i1f4fRkqd\nV6V0moz1VjX5PGV71pg9gsLeEqORhVQyUY3zkUUKUxYxmWI79jcSt2HjJjJN\nKTIA442vOMwyWU05Oel8E9sDT3copv0xXWb7P9od3F80nqLk/OAsftOWrGkA\nmlNHtJnyouC0ZgAfKBMZJIEpwpXnAnEelM4R1N7lWwulM8d4U2KCUsWgupzs\nswMnFHGjdIUlcmeNEXjbIsCG0ptEw1763h6P60bhH+bY9bK45QJjSJVxRLBf\n4y6+pEMxZkshiMRSHtM6An9PA1mD9v/tnEu+/35VFPfhOwxrOwdr6S3X0Af1\nhnHW/Aenr5KlAxFkX1EuqeHM+5NPTa3yOdFJfkMDc8tokPytMHRU9+bROLB/\n1DHaX2ry3S8BssicRDockanMS4YcjFjAq9syM7ktVtAKNNiUi5kFgzQu1fQm\ntqtp\r\n=/vkE\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"fe50932259fd2af2b34c60968682a0b94f7fed66","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"5.0.0-canary.d5c006ed1.0","@material/feature-targeting":"5.0.0-canary.d5c006ed1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.d5c006ed1.0_1581353294509_0.8451891753419074","host":"s3://npm-registry-packages"}},"5.0.0-canary.559f1a570.0":{"name":"@material/shape","version":"5.0.0-canary.559f1a570.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.559f1a570.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6f5feb14d6e607667305f4339deaff9d6120ed79","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.559f1a570.0.tgz","fileCount":13,"integrity":"sha512-d9VdsUlemKGl21rhX0J8TJ/shB6IZy2XkC2Unq/d8+4qzOjq3X3eAnmqgIZxnDhWHq6Qr4rpvSLCQm+6OH0d4w==","signatures":[{"sig":"MEYCIQDt9BJphf7BS7+Pb60sqZ1TFZ8aQHGF5Bu6KO1YCx09HwIhAPsgog9hCclfb76w0kZt6VXAOAWr6n89ntx/uEbCvy/W","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":19264,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQZHECRA9TVsSAnZWagAAtH0P/0ScW1NXt5ZFRiDeMaST\nIsppByUWinoakutiSzeP+MaqJw5I0SQy0AW3UcpdSQxB5ySvb3Z1CMVvapz+\n5wSzLFybTE61CW9v/RcdIzmRGG02nj4AOIsxijsMfUE/M+vmZ9DCwSvz3xze\n/2Jb++imS1sdbBcd9KUJ27gf8TQG3BxUIFg4omfbukr0YTcokfRCO6BhZAkR\nunfbWWff280uTNTn6RK6bJth5bh7WxOV0nJpNZj5JOXG5RaRlRBSlvUV7dNC\nMYMjomISWV33hvP072mhkAoMZWZx6BKzDnpAuZ3/5fJK3UUQs6+nSVzqYfWa\n9BV02hZkMlEPgIHNqcHhZ9fxAOToZviMKv797sM3cIY41A0Hq6/jxAuwrt2V\nOza6JAfejpKaMCbt68wWlLgi7jiZgalR42hnIKhz7zfLuoYh4fMDRSz0ARNp\nSBGTrPfk8g8XfUMPfcwF6BDF6UX1GoVqgz+XKTSaeGTZDASew8ce1IFYCPTS\nPGrNKJWURSECeRhtHJ08vcu9RaW7LUGQvdD2aFTUJvEhll8gqtmUAggaieLO\naSDx4HI1+GQ/mwkJNctFIz/K/2gVwQoYQyk8LJhtzTZbls1pZRx15ReWs3jN\nFWaC3wHi7+pMK+8aZrjAiFxYsGb5LbE3IwGHMDDU0b7FiQmxs/h6/pPa6qtR\nP4vT\r\n=rWso\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"a4adc0cb689de4e266e65d90d614fbe1177aa5f1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"5.0.0-canary.559f1a570.0","@material/feature-targeting":"5.0.0-canary.559f1a570.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.559f1a570.0_1581355460275_0.5011674884590562","host":"s3://npm-registry-packages"}},"5.0.0-canary.ad3bbf782.0":{"name":"@material/shape","version":"5.0.0-canary.ad3bbf782.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.ad3bbf782.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c033329215323bc5e435faec80daf2b44b2a3c4b","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.ad3bbf782.0.tgz","fileCount":13,"integrity":"sha512-eVlPPH30yZaMh5AkAfccorVcVvHJI6PRS1My9j9AC4Z5Ji4hPr+56CjHFkY83H0DiRqzPuTC2vBXlVA3+qaKNg==","signatures":[{"sig":"MEYCIQCSbil1+Gf2W9WEjg4jOudrvK/Y5CccXp5By81nFJpSEQIhAKrya1S0JYhERiF4tp1rnfUaSEMhTwz3hOMnfixaJFMm","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":19264,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQarICRA9TVsSAnZWagAAK3MP/18owiyIO9+tNuGfTj+C\nNxR3B8qGhcSnQb/OMNQ9cAtiowp0K7dD47nM4OtLYTQBqCPc6o+DDiqiY5j0\nFi7pQKF7h3nM7u76pxNDqHVN5yPJJ0ErU9zYPiESgvT7Q2yeDZ8+kQle94Ct\nRUeERPY9xDGQzFrjkAYFMHw7yFePXC+YhJHuO3x9csJVY0dAQBxU1BpBTJBi\nu90SJzVvDDVMoSKhUBQi2wbEs+UQL6D6mRizsuJXNxe4nrc7amyTQHqtcnu9\nCBkxAJtWAO+nLEzz7UvjXDyHeEkJqU7Nmdw1xqyZXVXwENmuKmlSNof3PNOV\n39nqgJEKY8l1oNOHGnkYqDKbVG/afEpaGkH4ASJfk0jL9w5/mhWhFkiaNvuK\nLK3VC8y1PKIBrjowDf5jcQjiqtAK1zPKOI4tuhWdg+q6S8OHC9t1SCFjGWnq\nyi8ed4vPdL/nl51Lj6GavxAb6DTuL6VYb+l2Cv3u3XRfLM093ROZECCt+hPg\nYUONCd+1uXdn2DYNKscKs5sIt5Dh7VOuw8g0Uh0CiMIvBWL8KCqZgk7tPAAl\n3I4SWTJuYcTTiJdFsiEIBvk5QjF/wzmgSXYaiMdJPT81bO5pCcePxhrTV9vt\nddd3JkatnfaDBJJriNACtaM45rTvhY/m92m3Hccst4ZK6a/9siXcmD99LWCm\n1+Jo\r\n=XUQK\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"48e565307134ef2e860fdfd1a8ce59613a783ba7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"5.0.0-canary.ad3bbf782.0","@material/feature-targeting":"5.0.0-canary.ad3bbf782.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.ad3bbf782.0_1581361864079_0.19138940864589382","host":"s3://npm-registry-packages"}},"5.0.0-canary.570d8e49c.0":{"name":"@material/shape","version":"5.0.0-canary.570d8e49c.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.570d8e49c.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a15cd8921137c3fde216954b2091ce26957f4acd","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.570d8e49c.0.tgz","fileCount":13,"integrity":"sha512-+zrmc8/vfbpvLrCnb1bK/31O2lNehhil+buj8hGiSq++4hsZJrWAIAlPLKPtHeg+BGoPzsqkUXX5d0i6Eig7pw==","signatures":[{"sig":"MEUCIAujNMWAXxz9A/eKrOLOkFxhv0Kvd7zE0aTcGV/KeMvxAiEA07IZPPKuEhvgKzi9gKMf7FAYfVoPSpIyysOORLJ6P7Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":19264,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQcBRCRA9TVsSAnZWagAAYeAP/0cLOS7bgq86EVyrQu1v\nE8UZANtpBrVf3Ytnf3K47VzCzhwD/7QvPtCZmYznzZak1i5od0T59pLGHRPA\ndL1w+J4VwyBejcSt6JfqQmnttkfNZgxAiY9kzUAg1BrjOBkXRXF/MctvN5wn\n8ikpZPGramgu5evEqTivZ0PeAQ2hiZ1DELczDuFfY0J1Z2RMz/zhgFQ0xpfe\npkUds3kK+2DCThBGizhTsWLz1E3b85kNQHiFqMl4JPxbZWRi5HWFEhnWjHc/\niau1ewJsA8wN0r1XHLmsS/S0C9Jt8NX23F6hsFoKAnuyUuDTrkyHCDmHc2+w\nR8b6mmtx8faQ9Pp+gjzxBKpGkH3Zwj1GC8Sy/oE7ercBiC5jszpTmRIR5VWU\nHtHnWmzbqU3C4Ok12pkcAfDge1H7t6JiPg/FfUfTIzNQib3xk0U5uEZyagu7\nhhoEIpb5TPo9x7u9pFNqbeLvhdImqwq2EnCnoUmJH4Hrx1pYKVIrmxONbeLU\nMSCcQKM1aQslgBSX5JUJ8IIM5AP2mnyfcBdSJlz1LwR9VYKq1u0KEqGl/QFm\ncmDlREaIfK7XU/bBZ8xAuCzS5IZf5qJeiOuvtTHIB2iGZQSPQDm3Wc8IYL4l\nOKN864CHmSW5OTqM7fd0YcvOBHGtAJeFlibGTjV/eeaZvOc0PMY3488jkndU\nhM/N\r\n=3Jlf\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"b6857e33db49c411cf5f55873a45f72841824fb7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"5.0.0-canary.570d8e49c.0","@material/feature-targeting":"5.0.0-canary.570d8e49c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.570d8e49c.0_1581367376545_0.37663181261951184","host":"s3://npm-registry-packages"}},"5.0.0-canary.48b06b89a.0":{"name":"@material/shape","version":"5.0.0-canary.48b06b89a.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.48b06b89a.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"71aa3ad494e7bf7f08764552b1859a9377b6783a","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.48b06b89a.0.tgz","fileCount":13,"integrity":"sha512-NMgiMhwqnyAa+6bkviuHShqNy/ObKzZJTbRBDC7Wz2F8jpJUSJ0cmr/QBnffEhgtSLk4cSIHJuq+1mluqNoxiA==","signatures":[{"sig":"MEQCIBNyarDVen9PZHO6FcK9vd0V19dPLrT9keBHL6mPekYSAiBC39WPbKRzRHR75CACAStfvNwr4YxUtMEQZiBZWg2ATA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":19264,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQvWpCRA9TVsSAnZWagAABWAP/jqrCTpZIpJW4MNF+YX+\nUc6ZHY/b+8GAUiHMYuVmJY1kQ35a30sT1/ZieNJUokJS2aarAZy8/Ad52I/z\nOtIrjlZanloiAjo3bYt3/JOABrzSBTAvA0P3lZ0b8qiMa9KTxnB9ngZFKUSC\nSMWKeMjLtlypCCZu1PXKvsyVzRbdQaLo4cycRkMxthUWPWN7l7Ao7qzF4olk\nKqi2o4IUBjyu7nPJZ8j5x/hgnIyXUemPp/JtgiUlfTgB/t8yvAAj+s4FSHp5\npcX7kodRMqnyuMJz1oyQ9fs+sAOYXG8KEoCHzSIArZN6lkzzzbn1EngFrro/\nD6b+8RP5ujVuDcWbHtEgVStZSXB7NBxyQuYJDkZHMY0eKuYCs3w5Tg9Lp5Bn\nhe/+jqgPrQruQwrT6En4uJ0JtWfV7RxwoeOs5VI7Ut5GMZhAt4z+3ugekcnA\nIe7StGQm/oSW4oclARLF19iMWIfJS81EeJ3KDblwDRe+6MzXLrVoetJ2wMho\ngCyXxM1i8p2oUn/COxQjiBbBiWjPfhoE+oeBCf4uz6FRfo8xkmFcyuHZOg1/\n5ZypBlFuWfJZNpj5GwzhNBCk3QnGe00ro1xpgCD7qz7sOfWTQNb1kaO8MUGD\nZSHd3Vk/ucyWYC1PO+b0PJuyXfl5zXqFJuKJjGi8/F+q3LOrqGfLjXRAUh1b\nnacB\r\n=fRWA\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"540a576f2286061b02bebceda7cbf10554255781","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"5.0.0-canary.48b06b89a.0","@material/feature-targeting":"5.0.0-canary.48b06b89a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.48b06b89a.0_1581446568867_0.14296939781169438","host":"s3://npm-registry-packages"}},"5.0.0-canary.612443dfb.0":{"name":"@material/shape","version":"5.0.0-canary.612443dfb.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.612443dfb.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"46fa164dd06ca8c4e4f085d6a11867dbe07c4572","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.612443dfb.0.tgz","fileCount":13,"integrity":"sha512-1xAAFJv/zHby2SvmTd2QqVBSFT6uVI9smVEaac8a4h5CmrKA+htx3FuO0/O1VVnHfVGo5NfoPstEwyTO8i7R6Q==","signatures":[{"sig":"MEUCIQC2o2k9wGR5e4CHrfdNVOL8+2lyeNCUB4ww3TznT11N8wIgJfoAC2VCLDdZThMRXW7z4z6x1eexmsbofdzfrhjHofI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":19264,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQwUOCRA9TVsSAnZWagAA610P/2OsgqVZKoZkFuzwTflY\nzzk0dbzhqtNVcf4d9PoL52v7B9KzMLBZKRlOZBWVPaSZFWCqTMSj5NUyzWwg\ntQ1hVtRQMtuh8m9mDg+bhA/TEPzYoDn0GkHcvlxKSvtKEgZmeZkJ+hQ6/6bZ\nLHUrV+6s7ZN4TPQzaBIo0X9MtVNMNugDeIvQHnhWibm8sZH8HXdBj5/3ZhqL\n72gOjgcZdLgq2GvgMkcs0OttoYLrNBNpM0bL7M88N2Keikx7HwwJ8Xev39pV\nHuKKJMcSZVMIBVUjv7r7B17dNlp/P3GDTDQGPzRkVgV/y5G3fqEF6p6tQyIp\nU9FaE7DjoPCDpZ3r3ma3BXLAKbfBTYPU25Bx6XWNDsYfvAHsRhGKsuqGDNIa\nFlY8hN/5EhU+lM8dtOEPUnUZhuQoMJb21h7SdYM7ieB4AsmcL0BPZchOVzvT\n4b75oIb8h/BUAb2Cdg9U16wGoWiLZd41BiWETfIxNkfwU1m6TbZoywgPjhA1\ncSU8OGdv41VVxvhEvSiCwfI+soMGrysBjn5CMHNDwQ2J72fZ3Zm1ndHRxraG\nlNK0tf7Zo0Gen1DwfZazN7yVff78hh7aMxOTDdFBZwFm7QF0X5hL4El6gaMQ\nsENOT1blm0zNLhOxLiG78kvUrIq379EnOn5eexRCa1dbGdpO+kSyNL1Xis3u\nRtCk\r\n=pEbe\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"622585006b9702fc93bdf0ae416f6c58e398243a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"5.0.0-canary.612443dfb.0","@material/feature-targeting":"5.0.0-canary.612443dfb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.612443dfb.0_1581450510283_0.8398170084842751","host":"s3://npm-registry-packages"}},"5.0.0-canary.8c11ea2a3.0":{"name":"@material/shape","version":"5.0.0-canary.8c11ea2a3.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.8c11ea2a3.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c70bf6d40e4fc06bb484893d21bc6f88551134dd","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.8c11ea2a3.0.tgz","fileCount":13,"integrity":"sha512-54udoA76OSf0rVME0pxjhGP86ogwd5qZX/ubGLtybEBmW4k/8EGMJok4uYOp/M2h2fpxiFgp39LEOW14Mpuzxw==","signatures":[{"sig":"MEQCICnmIFV1KG3gyH5yjbs0PAV12HLyNUXnSljlnrrBwqdWAiAF4T77G785jDwA7J43YdrslSW6Kliw6X6m3dHdz/dNXw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":19264,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQ7x7CRA9TVsSAnZWagAAilsP/1QgRKN3qRsBD3ZvJSvm\n+cVBvwD+ZRTMAP1UQF2CjkhPOIQMgY7v6b4pIKNyzx2I/9Xs6oOCHcDfFjyW\ndkBFfTSnY5SzqljVAIFy2viIxT5Nki/HLrwaKek5wAWmgMOR5bGGplAAPFs+\n6rDQ0/b4wUo4AxxCKN+4lYbB/2qi3LvLxVto25FRWNsGHNq8/TB1QUsNC68q\nlKDJ3qSmtU15CPc0JFfShcOYr3cy5NbBdQPXzy4KP4+Z4H0CeU58mfVjcbaW\nNzQ/o3Tizm9Uv8jzNGpDwMPMxudTostN+7ozsbfyVdF3LH47/QxmNNIFcCTy\nOcqQmTvlNIRNm0mnmGu/cjt3OTXjmBnMVG8U6nptox1h/VAJgILQzgf9SJDk\nnfzOeFK0hTLUBVVXjX9PyNUb61KWEvEhQRm9p6WgAszey7yp4VmiWcewcD8c\nukL/ZYsdgUx9SGR3LE3fgYEvVOPJHqqJNjHZXuVPcEkCMJp7xtKRrr6jHc2d\n8hZBHw0oKu4jNG2Gj9Xk1bNncjy0STpYb/mNgSo/iX8j8XKMVOWrEGMsCOEh\nHiBQ2P1i0ZAxQ+fVmU4B7Yo2XsGECD/TL50Y9o9pQQVOGAAEIQfKGiFuSXPJ\nPVu57YiZeDk36cU5JX2bKJvhbgUPAjBD7uY8IsHmTLD5NjymrGgWcmVoZ1AX\nEqgy\r\n=AgQd\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"47068a39cd18bd1e384c83a2ca5c3d53ef8bbbb6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"5.0.0-canary.8c11ea2a3.0","@material/feature-targeting":"5.0.0-canary.8c11ea2a3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.8c11ea2a3.0_1581497466633_0.8264530926102929","host":"s3://npm-registry-packages"}},"5.0.0-canary.b2f3d311e.0":{"name":"@material/shape","version":"5.0.0-canary.b2f3d311e.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.b2f3d311e.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bdecab98af3646d90c376816bcc3df03e4f4f845","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.b2f3d311e.0.tgz","fileCount":13,"integrity":"sha512-Otkhu8GuIP2/VXlXbgJeiqBF4Reb6m0MSBH+qGseqyMr1xisw4apHJKOulBnqpwBRD3HrZ+XijBoU0QOGH29jw==","signatures":[{"sig":"MEUCIQDtV8ItX5o7RBCF047kveZIww2VWKdHQpiI13tORMRMOAIgbHoEnQ/SQITUivIwW3M7dY0p3dlMEXaAdbvLxCc+vWY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":19264,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeRcLzCRA9TVsSAnZWagAAFWMQAI6EtScWyZmfsRrvxJ3i\nKJjWN/5btkgUjqaeB/6Kgdqd4BzWfvfJ4CKEwYFb+VbckymgEtygdOO+y2mz\ng428oFwNs/cZFDEEyo3WyR7BuouNTfPEHRVCLlC/9mbcXQTFmFzpZvVv7muF\nGBNNVr01As6/JI1uTMrAt4IMxsbYgJ3M7HAa62Jpj8UQ7klhjkLgY+H+K7W7\n3UtN+3V9mXLbf2uRbmTHdK+lCGoYfjx3J4CZrWiidvIrNsPqzCVWdej8xG7l\nms/QF5vynlGhjy66nDw1ypVlAjIHURb9yCxlKJAJcbldfeXVyZ0teFiFQJys\nga7Z/I/dRPWdrEosGskP1d546932NOSHrc6MKG7neO7eKrEC/0n7pgp6cZYd\nXrJ+3IMGCKIhYS1zfBcnKFlAlVb7kJ3hPn1EOf2AQCcgKameFtxmN0h40S2h\np3xcHwiStZu1ynvfPp64kDEsRLYGr+iwxY6tHcgpRPkfd4epHTozfuHToDK/\nxOhD5i90betMqf2jnYqpcWdlRmRQ6Q5EI4l2yljmbXtld/U9uFtAcxzT1SFU\n6fnA7KrrrxqE8zB8Dv75GUMSXZ+ToKeQDqLWZAOP23wwBL9dmB3Qb3073RsJ\noLDehs0luxIamuSl3BaIhvcN3meHMsxKAdODIlI2PgLHdhry2KX8ASWkCIc+\nHDz1\r\n=9Dg+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"e8b88d39be927e40deb73ae78a049ece8c80b9cc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"5.0.0-canary.b2f3d311e.0","@material/feature-targeting":"5.0.0-canary.b2f3d311e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.b2f3d311e.0_1581630195485_0.4495628458379537","host":"s3://npm-registry-packages"}},"5.0.0-canary.4f488d0ee.0":{"name":"@material/shape","version":"5.0.0-canary.4f488d0ee.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0-canary.4f488d0ee.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f13d5edda2ba4cbd9a3def16042d880390729df5","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0-canary.4f488d0ee.0.tgz","fileCount":13,"integrity":"sha512-+Ic7EoxxGXF9KCistKWmJWoD6qHnbN0wenORBxc50BMEP3ZcTaxwKvm1EIG/A68OX4TMmT/kgHwXiiKHYlOwOA==","signatures":[{"sig":"MEUCIQCXqSbaUl6XFHV/eyGayqgGhY5yo3V+KQw4FlnMd27InQIgWGfYS3iP1NiebqSdH3DW83hxp40A2phJvyEvOXYEbvE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":19264,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeRdZRCRA9TVsSAnZWagAAi6kP+QFSVcQyTNIzDQydXH0A\nNGJZvVRO7FOsE9vTCyhrWeP7HhFC9na4MN58ly7aRGCTCfl98rA7Bff3ZomC\nto9Ewtx8ZF7qMBioddy8uPPkTnphOwa6T6qVl6E9+BxdmRmpxJSlWg5iey5B\nndfhDs0rzkJmS73RSwoXxaJ4z3lqR863zuwSGhlxWRSRAp5bUqeIuiVN7yOF\nP1DktH8X+n7A1iiXYYqI62iijRd7YoTZYzcKV1lOraDfgbBheEtMUXeY45bS\nkT2Upysvn1mGjp4YQE/3iAbzghOszT1sp7X040HEOMTKGzwjp+q86J9McZW/\ntjsAqc8iBv6BT7oK1khBAmr4DD5qKc8PEjAFwQIz4mKrO9V9CuBtejmmyN8U\n497gOY0+t/0us0QsTFY1hq/frYE7lMt/c6MJ4hchnfNTG607URyySqNP7u0V\nh4EYcgaA/J7noiiH0NTq8M1D2x7InhW246lCA33wYhXF1kzYkhp/cqjpbXio\nubPzC05w3spaWyucr+9O0aRMDo1+W8tRjhqXXeInffcukDC7Brcjo3Vf+6SU\nQ2Gex0MIxGzVLqyCKkhDVanfrRP524YqWIGOMpKNhoaUR2LHseVOnANuXNGZ\nYjmviGGSPtcDswrk4iGBGN0aWw0hXWhKiK01kMTzivIh6tcm8t1miaCQSSFW\nngs3\r\n=GhKq\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"e3b2ff94a1a6e30260b88a9da6e55d6ed122c399","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"5.0.0-canary.4f488d0ee.0","@material/feature-targeting":"5.0.0-canary.4f488d0ee.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0-canary.4f488d0ee.0_1581635152534_0.5698377428385959","host":"s3://npm-registry-packages"}},"6.0.0-canary.fe79de07d.0":{"name":"@material/shape","version":"6.0.0-canary.fe79de07d.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@6.0.0-canary.fe79de07d.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"776551ea7d2b632257f408304010e17f3cd96911","tarball":"https://registry.npmjs.org/@material/shape/-/shape-6.0.0-canary.fe79de07d.0.tgz","fileCount":13,"integrity":"sha512-p9ip5Tw6W9JNcy45Sw9F5lw/qgEdPQH4BvQuh8mBKFP7BKhQ1xAVVQ/xmbjhL6tLqjjMmD28AUgLvKjouHyTQQ==","signatures":[{"sig":"MEUCIQD1zY4VAv+70aFgkcFlZJVJp2Q4WNPrMCuc7iK4fsHydgIgEcejNGqcqwTlCAZrWIFDRtrqiGAQ8ikUwQ5QeMMwa28=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":19264,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeRdpbCRA9TVsSAnZWagAAOt4QAJC9NbKzrY+h7cCFHBWA\nU6QRCBVUZiiBeUHusn2c6OfogjSjc3NqA1SEh7jV3Q/1KjGfbHp9zAKUaaYi\n4s5PCtCszbJyp46S/5LKzWxlHXkalvrfLZAI1H/T+Z61ddd9x7nNg0dRiCrs\n/IPjByeoRck5f/78h6gNxRL3xUQIxB90PnYbnErO7J7lq1M6YQQRNwXccLoA\niTnYxu6FVD/bjRdZ3tHRvH/pRMUzUgCd0KIoYaZMUNOEs3qVDHSNNy9wLGSG\nD43t3YAWFWtb2juX7yB5lOMjE21zZRqV9wbLXNKW6gX/wMVRDvwiAcrNFJdb\nT+yDcvovnJiUm36EKnA3yzuKN3gPCUj9VSz5s7pMbMj2tEXhdZWPxvBGAcRd\n5c7ZCw/sYn08f5+wQzzawucQdc1pSVem9iq+u4Xc0moDFrVJ0FW+lTT9ZCDT\nL0U8nC7tjslA3RscpcJIzoGB5X2cBtgRX3TTxaXhd4GScrxFQUh3FI9MJ4uI\nPTRE3fHP8FQ0jblxmtXoOvaVUWvXkWyQ71hd2/+e8jyjAI+Uv0S7eurhNQwc\nSoQP6aHvJCVC+jsQEEU0j7X3Ol+f9kIOiE20AhTRMnKGnqLxy0AsOwJ+w4tn\nhegODf8DT2hPwgSB8vO9HYkVbutcQ4k4h47H7zph894g0AsOyHwcND2vvK+X\n1Wdp\r\n=44MK\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"e2b4b3810f62a16846d719ee7439bcbbac266d30","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.fe79de07d.0","@material/feature-targeting":"6.0.0-canary.fe79de07d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_6.0.0-canary.fe79de07d.0_1581636186628_0.6992226034028961","host":"s3://npm-registry-packages"}},"5.0.0":{"name":"@material/shape","version":"5.0.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.0.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"55974611adc6452e6091d23c06d7dec28f860e77","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.0.0.tgz","fileCount":12,"integrity":"sha512-Qo3nzYfPtEBiU3ijseRDypbhMQroxws4OxwKiyyTeu8K/z1iGPNH2323S/LSmyUuLtkhLFvwAQM2N4ZPAxofRw==","signatures":[{"sig":"MEYCIQC8U6IHY5GSWnj70od7P98SfJMrXua2tqYPFvyeuNB0bgIhAKYnXjklMnKNOtW3S2FCNZqlROPB/EhTU4TJ7SPmpW3L","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18189,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeReT+CRA9TVsSAnZWagAABycP/2PjMMSa/Rkk7msOmIub\nu7DUAWWwUNFo80sDl2j98Tasws1yVRjY2lyY3I9WAERsHMKGezZRyKzithtJ\nbNHl/eE9Eu1aGk8dTEBhLLocs/7KqgjX6oSpJh1HU90SvxvYX6rY86penYL4\nxCdGrBbaW62ewN3UZ1N5Zk2561U7VIHWQoAnf7IjquSIJQl/Ns4uYksePl4o\nzPPECBLIbkWfM3V8XwTE8iut4Qo7eI3cyL9m6HoSWBbBke/qBwPIzwBZhlYE\nJz3ZWtvSrWJFEByxZ0FkPlHC7YKHR2fyxBtP81KAS/KEDu9i9mQ70gAvK/Po\nGFbI1+ZqamzYdJ1nQm6N7+PC+DZ6SgZA6/7rDPRyMGpuumcpgCMA/s1HMIaU\nMTB0bXDqBV8MSsSLlsiu7nNa0jts0sKfZ/stW7rVIqxTrwdVlNwalErTDggT\n7GlwwU6F2ld51WVpwBatYEu+kYx9KXIOCFInBPSHPYRloaYPEejiJ+K3uQzQ\n38PE5FnejJkyuXL3bMv2+abn2rxKy9MDvpbJGfUZMjtR7xGovx85+bdo87uX\nuI8HmODt/l3oghQqdr4LKSydqhobH2CN86qMn2oikBDgo4q9P+cGjUPgUXkl\nBYw1O8uArxO71X952PMYwOAu7Cpb8QllTfnAuknDpjmswi/PqzXR01BZQYyL\nnZBs\r\n=xHYA\r\n-----END PGP SIGNATURE-----\r\n"},"gitHead":"47845087df2f88107786b4577b1be4422b14404d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"^5.0.0","@material/feature-targeting":"^5.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/shape_5.0.0_1581638910305_0.21341542679076708","host":"s3://npm-registry-packages"}},"6.0.0-canary.5e313b1f2.0":{"name":"@material/shape","version":"6.0.0-canary.5e313b1f2.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@6.0.0-canary.5e313b1f2.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0b0978f889fd03f47e4ea8bf5cf377397817ca81","tarball":"https://registry.npmjs.org/@material/shape/-/shape-6.0.0-canary.5e313b1f2.0.tgz","fileCount":13,"integrity":"sha512-50puHXtd37Z8ZfQ+Ay0YVJNtSntnt6z2ezxTlDqRJgdRbgCw54lwYEU6kTm3L8lxKk9XCCsB3HMpJk5VGIoFiA==","signatures":[{"sig":"MEUCIQCe98lnpASLZ078C+ECeZxe5f2waC7Wf8qRP0Jv6NX4LQIgZZTu5XXobbbnbQONMUlBa803Qkd1LV3vZsae+01PbFA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeRzGdCRA9TVsSAnZWagAAzIkP/iJGr5a3HvHs3DVyxuYe\ntVoy0zFYTfmrQvGCOKezh1AS2xpZYe+fc1C/2CCMraNKx5PK2shKdOnvPayM\nlwQTXfmHI9xLI4wgDoFANitlpiZ45GZOvzK1UQTtibRmAyoqq8eyQHCxZIvL\na0VnjiVl9pe9RnguILfUD8gxt53Xn2DNHWuewIT6JcCNmU+wXfqTqfrx2JlV\nRZMLgVUR29XKoEMwXqOhnlYio6BhgAEyuWntuuga3arRpvCITAjKxujHO0md\naw/No8iOUS5mvBraFXPN24e0UFEKPfl2LCWP9J2xMQ5V1zLl5F4QnzN+dI1P\nuei5TYvVhu6Nlxz3ho+KQGMava3x+zpHes0BEkxFpQ+8BHLesueCyDzQiezh\nOKHCc/Mt8PypgBpBVZhZj/nXtygDFyzOpRjqNl+dzL4cDtVheYgmijaNUpVs\n6rcuE5FBY1orEMSXvMVzFEd1gaTa6ho/ABnHZT+oucgcy2V3wTfrERm9/nt/\no0Jm34teRq7V2QyuPPsmy84dnDGxTfLj20ZD9wSCBPcx2c7S66e4bPo+tBMu\ngs4xjo+qnebj5rnQhUL2jhohtLtJjDESgE2RKZJQ1bvmsL8Bjf3/A7FixSTL\n2E+AEkwS7IbbP5nmHq1I6gL4enDZQfqtqdoPBcohQOO33SBu6mSdFJbmzKGB\nB6VF\r\n=aavO\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"c7787e7880c79b0baaafb2af1123bbc383025b20","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.5e313b1f2.0","@material/feature-targeting":"6.0.0-canary.5e313b1f2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_6.0.0-canary.5e313b1f2.0_1581724060911_0.14989440152640143","host":"s3://npm-registry-packages"}},"6.0.0-canary.6a56f387c.0":{"name":"@material/shape","version":"6.0.0-canary.6a56f387c.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@6.0.0-canary.6a56f387c.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"51a13516e3cdf45c4c3d81c8d7bf971e9669e139","tarball":"https://registry.npmjs.org/@material/shape/-/shape-6.0.0-canary.6a56f387c.0.tgz","fileCount":13,"integrity":"sha512-2eMRuUgqH0oPwwMHYEVboPN9nDHgBDrXpb3ekP/m53o9WSDwE1NFtXExIshCtpT9GNM4n2t2UxaCjHI/4Elh1A==","signatures":[{"sig":"MEUCIHAQCwbO+Bx+bvK9gZpw60MAFIVgh3hDcW5G1aBLWQl3AiEAo1s2d39WBiuKC6mgu7F+pFDoCfGN1pSo8o2opxIFqwg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeTD5OCRA9TVsSAnZWagAA1KoP/19F7kzk+qMLAXR2jHA/\nG0LnqZ6mBkTM9YkM56Ne5o5zQjqP2oZEGN+1MQmqw0ahu10bwteIEmM+CcTi\ndcT/27AJu95Pp81o+KktHA9nuSFOGQPwTcbPmiQSQYjHCRsx5Hrg0vDW/bpg\nRatahwyFd8MH5rAXo5hSU4xaRYwcEK8XrtQcR0mK943u2GD1qHbRXah1teuQ\n6i9t7FhdQN35wLguTByGJGyEdunKQnqk/0zQKyLDP4GUmHcJiXNy5PQfq3La\n6DJE4z3P3Lqrp8iO7jaQBilXblxJ99xRAAu9jok4/o/oWyNJsTg2LS2JRcMw\n2xLJlYhhqIlr9lNHgHx0p3WCdZjAcTLPOsKN7aa9VVFyGl1Glk1pwEhWXN26\nWYkvvQ1x8z4c975USYWrziFKt2QTWUH922KC1jLZXykAY4gq0QNHqoSJQcAF\np0RI8rVpXnrBd5z8eZMwMqH2WIrwEdM1ogRkPflyoy2ltJbwMNAcw9RWOYTd\nEzvirh7/Qosp+GBAWULjYR1BFoqIQnF8YM52oSek0QBAODKIf+wvyc1rwoor\nw90F3L4mwNspsZnXCxRW9ipilpf975KvB/ERAnXM9R1U6pW+YPkE9ZqdfyJ3\nF6IschuFJBANLQzZ2FW+41Nhbg69MpoLyN1BhQvwDjMUSbEdMK07sLeKNwEG\nM4qM\r\n=n287\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"1e3f916aaa994ac19a65c62b461edb01c08e95d6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.6a56f387c.0","@material/feature-targeting":"6.0.0-canary.6a56f387c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_6.0.0-canary.6a56f387c.0_1582054989681_0.4552381768031164","host":"s3://npm-registry-packages"}},"6.0.0-canary.bdfd52632.0":{"name":"@material/shape","version":"6.0.0-canary.bdfd52632.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@6.0.0-canary.bdfd52632.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"26d624341e746708dfe3e882d86843ee7b6da8df","tarball":"https://registry.npmjs.org/@material/shape/-/shape-6.0.0-canary.bdfd52632.0.tgz","fileCount":13,"integrity":"sha512-vnuC092lf6/Ahegof4y2iooz9wWWA+K1eBFe+Qo67s+QP+7leHvDbFqp7tgpURMOB4rAHVuJ5xEFQ/2lsA8fpQ==","signatures":[{"sig":"MEYCIQCuVwlLLlZaIhxpFcpLljgFzZVDlfZR0KgqpZAJF0rN+QIhAIphOXCU1nFLRAviDpbULl9YCw9LLbn7s75xrBA1k0eO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeTZjxCRA9TVsSAnZWagAAhuoP/3i9I+Kl0rMULpGwpUDi\nsWo2plJpLfo42OdRGxbxj3qUr5Gk7hN0qPc6uhhG8cecESGES0TVRVKoMHS/\nKNF2/ISZ/Mx2CdpRUg3Iy+9MWo4kthtfBZU+J9IO+zfZtnNrxSNkm7r8ZN+5\ncf9G3JG5LlPZX/t6I0o4WstPvTPewcCT500LfYWEdScv5tjHnOP4HsHgcYQ7\nbQRybB+JiXRpBTZDvnLHv8MOObSPTij2O8/K3gQwcKpmX+aqDMAd/Df7zeSW\nYM0h2lR6QLZJwLRk8s/os50LIdI63Zgl5LB4x6KoFEo+XYpBMklnzwurQebt\nsBB5IiGT+o50GKnWxdjrK71AOMx52lRr+Oh1qIRmHqfgmfkyk/OeUyD7ddBF\nMHGzfLr2YIbgQlwyK1MI2LArGv0HGgWcOI8Pk3IhJgDshS0kQqEVOlaczSMh\n7rD9YyixXMjhMrl0wXcVE4KBAdiCb4mU51prUgWgiKuWTAPeM3OTzniO5tAG\n1+bnh7Jmhv/bsvEq9b81DmDz8SDs058HeCjLnw8jKPJ8OTFzreHUWmmnQYkZ\nS/aeMrSWGMvJVKiIAOTQdjZI7kCrDA1Acu85IotdDOZ0jR0u3ejuSaDQwBZ9\nICWhY5x3DuewF5Ft80fVbmmMRl4xRiHPcEXG1ua8PgeMm4wujSu2oAGL2xVh\noJFe\r\n=N1uO\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"533f28d31ceee3f93d9c7695d4f394323e37af4e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.bdfd52632.0","@material/feature-targeting":"6.0.0-canary.bdfd52632.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_6.0.0-canary.bdfd52632.0_1582143728714_0.1534638291410364","host":"s3://npm-registry-packages"}},"6.0.0-canary.ad2e4376a.0":{"name":"@material/shape","version":"6.0.0-canary.ad2e4376a.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@6.0.0-canary.ad2e4376a.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"89bfe960e5e5e0bd33ba6c237e39f68610ed3811","tarball":"https://registry.npmjs.org/@material/shape/-/shape-6.0.0-canary.ad2e4376a.0.tgz","fileCount":13,"integrity":"sha512-q7X1DTefjHzuPjHSDdluL/JIqTl2UEgZhEZXjJnyElsJ9xPic4y9HdnHadKzhenRceQBsOxFQgqW7JJ98yMZrQ==","signatures":[{"sig":"MEUCIQCWJ0NVT14xUGntsJLJqpgI796aS7P0VPdW/QV3Yd4g5gIgDz4AZpYSM2pDZso1VhxLxv8cIkEuyKi0fDUVsTb4+e0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeTxMpCRA9TVsSAnZWagAAsBIP/0CIdmmtXE/UqYkEKkqJ\n77J+v3X3FLfk4uRUfm6QEZpDLf4zSP+rPRP45eHsDzj2yQ4l1RAoHGAnCZvg\nkRc6zA967BABW6Kc5E9L9fcxuchS6JZkVxtyYXRZKwyMMVp8p+Zg/EgGDiGn\nIe7poAnnejTkX0Q52Nu0Eq3/oBSpqt6b+/QbwWIdsBxfqkO88ki7Nt16jmVV\n0du5q7YT5qjSP5VUMjmm6W0ANdgn0R1OlIs9Et+Uf1A+jji0K+fI86ZJyMYu\n4p5i3sEcZ7CKNZCd+Zel78KdyuUd80kpAAaelCb1wg7kHHO5E4iVVtPDSBkC\nogB7DezZQrbwG7rWHYBQF67LADSRirIIx8/aTtwISYtW9bWgoPn3Jit+cXPM\nz7Yphkg4rv5c5psiRN3DnJJHLfevDPawSsdvKIELmHI7FxgUSIZhNJI5eaga\nc0OORgvgkye5Cw0bl+rdo5YgLYgSbGn6VRmVRTUB/+Xa4vllGzgpSLKr9jjZ\nrrdBZIxRYKcG2g4cjZyUUynD3FQqEYf76ORh1b2op0pTN3gmxUtD9sBQDVGR\nwRW9fRxCv/UfDqi55SATVus9sYaenX6zswPMqWqbYZOzkxFcAShEPUrNRRI2\nbIQm2GGYZ6cTAn2VXXjvMeS/rQ+SfS2QMfIJQ465klGiAGmhGH4c1RMaUWPf\nBorB\r\n=NV8b\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"a91629ff788e0ccd5049a85d588ddf65efe5899d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.ad2e4376a.0","@material/feature-targeting":"6.0.0-canary.ad2e4376a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_6.0.0-canary.ad2e4376a.0_1582240552561_0.45146244843413896","host":"s3://npm-registry-packages"}},"6.0.0-canary.765caef18.0":{"name":"@material/shape","version":"6.0.0-canary.765caef18.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@6.0.0-canary.765caef18.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"06ed55c74c11718c2995b2030a53dae409aa77c8","tarball":"https://registry.npmjs.org/@material/shape/-/shape-6.0.0-canary.765caef18.0.tgz","fileCount":13,"integrity":"sha512-zUh7TDP4d+2WD6zUHnWpGyTtqk6rRg1igz++8ml6rOeSwa5ZzmVg/AQtQlMo/4d4BHYvpQuPK+BgxuiYoCOUCQ==","signatures":[{"sig":"MEUCIQCj/vb/UzkYwmNKFPjPSgPov/i899sBUdP+b0xL7W7JsQIgacUoFUTwVOAW+g52ZSfEP9Ss1JTUSznLw/9wgAmII3Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeUBRCCRA9TVsSAnZWagAANYEP/icFFP8NgpEPfigEaDos\nNTduy5LZKY+/iFQvAtRcfVbJP7yw3PW0iHKQKNEbPlw6ReWMQUlqqFpgFR7I\nCvK4qBjapQ5t2gOOPhnKGN3i7EtKcdhCWdr2SRWFuNDMjCxPV1QNqpa9mxyt\nwkZ+Mo0SD83/Mfy9PltyvOgb979tIixbTv5r6bWKdMno2DoFVwe1sSiNgkdi\nxTG7nU2Wafq9ovNldXkSZLY1L87N2++GuyJz2v/LmR7+Y71FEgktwX04O8kd\nN1j1AE+D2GkvCzYbmRWIAU5p+QyDoxdSdwgAWUzK7JGBczQKV3G7E+kZzTF1\nP8ECM8GKxj4kflvenhE32aTbFpPRC0O6m3cj4gwjZf52ZVNXXMg3xaTJAyO8\nEE04un3Wr2CXTyVpxRa2gr60JPQS+OC/Kh4e+sl0pJsS2czhtKxtDozD9LgJ\n1dhU1kC/92mLDKb0b7YBvb2h/h1NDd5vUTNJbzilN8vU1jk7qpeeIp7GXOHu\nyU7P1Z3utJ5nmM8USn5vEBTKIPzzYIso3/5Cjq1vkkO2mZGwMarQ4tmdmpUd\ngPT6pxTqbKjfUrm9crRnVOWqD/BwIpvXJoFECktAYaN4QerPf2X3ezAL8kp/\nzW0YrnYyT0NoOiVVPNMqDj4NL6BYPZ1gOtrUDUSWKPOEBHyjI6MT7wRtkdJm\ndTr6\r\n=oyGu\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"e18ae69dc972686bd9fa70c34bbdda38c5caaf0a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.765caef18.0","@material/feature-targeting":"6.0.0-canary.765caef18.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_6.0.0-canary.765caef18.0_1582306370268_0.11173774692936944","host":"s3://npm-registry-packages"}},"6.0.0-canary.949562303.0":{"name":"@material/shape","version":"6.0.0-canary.949562303.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@6.0.0-canary.949562303.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cce68c49cecc2fa98b53b90df011b5773e5de10b","tarball":"https://registry.npmjs.org/@material/shape/-/shape-6.0.0-canary.949562303.0.tgz","fileCount":13,"integrity":"sha512-hTBgiacrFo6xThAGUW12cCFDvhsOf9EMyNqM7NkvGvmpZH3jp0loJcHHgGYTL4mKxbMRnsDzxa60xxFElcj32w==","signatures":[{"sig":"MEUCIQDTVEPTnL8q5rLzcEa2X/vZAVnPATNLpRXtGgGqJQm6SgIgBCbq3IDfAGM74C+jRKfxGT/p8G/cLcxI/d5vXvxlMUU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeUD+DCRA9TVsSAnZWagAAaWAP/RuIeX/LlcHZmuYAFwbG\nVKpvPQTtbB5QWqBr1/k7MwJY6QY0gUnLDuNu+KLQ0dTta/8rF6A01DQeObwj\nLIod1Zv8pJtUppOYDMjorQ/mZuSJ/EtikVcZdQeVWktJy9irzMMNpMB6jCB+\nZ3X+TCt6N2Cva/TITyt866SlvP7ZNsYwjnGOfXZIvvOk+SAcbZX1NEFYq1j+\nv0Jf8bRRdWueaOh40NJ9Q8aL0OHUTRigDLm0BOu3wySlO0tO41dcuTFe2K7H\nz9kGoqhWa4aCw+b5qiv+alnAxQjXUCFOSe6nm7Fx+tenMvOesSRzqlE6Wnff\nZjBjVJ7aGKcnhfa4MiCsxTdYYGEq9JcsLlYEx3fgUHsnw0ZOpN+AXZhUeCto\nhmcVOfFWMBYX5Sj9vGnwHhQXTyutgFOKfqTNAcRKIziBnrWyUV3ZS2paJNIz\nyWClLSLmKo+MHOrdOhZHip1TiOtGzpXERnbyXph/5pMMgIiU6T79EncypN44\nkiBcPsLDMcETOYP27LpiyVFij0snzmS36LaVLl+aloOThpWOa7VK3vTPeqYz\njr/lyTAiAkqVicyRe/f95XdtEYmT1aU8lqeDmlrDkUqv4jtw4R0a/MQcJFoi\nnaiiUffvzhAuczdPLZNa+rhv0YIPM0teNk69+Yh73ADf4blHiEYUMgmHphQ0\nZEJc\r\n=tfbE\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"b23ce78ac58e49e4a566fa22d5a4001cffa160f9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.949562303.0","@material/feature-targeting":"6.0.0-canary.949562303.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_6.0.0-canary.949562303.0_1582317443190_0.5257037917297533","host":"s3://npm-registry-packages"}},"6.0.0-canary.7ec96974e.0":{"name":"@material/shape","version":"6.0.0-canary.7ec96974e.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@6.0.0-canary.7ec96974e.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3aef2dbe22caaaa9ffa5639338c660d906fdc205","tarball":"https://registry.npmjs.org/@material/shape/-/shape-6.0.0-canary.7ec96974e.0.tgz","fileCount":13,"integrity":"sha512-lk2tO/Dkwndz46jVWQojWOW5rOumVeFIvn+5JDvycnckVnala8FGVZ0DSZkzqgJ0CNRxHp4ubx4GKSvr77Kz5w==","signatures":[{"sig":"MEQCIEIGDuMHWQGR2wySA3qGFSzMMx5NRbgsyGcmmVY4WhCXAiAqgYtzxhOnNidMFthsPOPGrCRLAwet+2WqiikOGKBkCg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVByfCRA9TVsSAnZWagAAK84QAIPX3v7sLIdu7EeCcujR\nHIaM78QGWp0uewtCK7VtRcQZ4Yv3F+93tzgnnCHjm9jl0PkK+Ia2umQSGrOS\n918YZo8+ikkRD2Vs83syZ0aNLgqy8poHHoaJsDViEl10oujuvpgpTiyEVRSx\nV9CrupkG1/kF5a8v0WfcK5tx//w/FYrjk6rk4DvK6UUAdhO9TJPy0dmVSzFX\nUotHk41Bv/Zle1p6ODcN/3O0H9YymMhkv99jTV+0srz8x83f/38sIBG3liXD\nvWX62iwO9AFkvENz3T315QqVyU0afODPeUg9Evhvd6WnsTRi3e0F8MzWkpCZ\ne1jGT5UZGxoGl//BDt7K/sUrvdhFIpZO2KZKHu34ysxvRAMd28xnTNuDk2eP\nmSxoziqnBPhb6QxB6e0Itm3CJhj38X7huCsJuA9TIZ14YiWDyrqBeh4rcmr7\npe6EBwKYZI4c6aZwyHghl5ojnJCj8SKX0rW5lj18EzXhnNoYz5f/ylMC5/jH\nFgX1btlTMJ0mH6FQmSErMrUK7YK8qHw2Mg3eobniCaiQOMWiZrw4yhJqLbOO\n16YO7rswINnRNjbVxRYRWCQTWAp+9v5KigdaFxELZgzRqQmZfhqaQmnLNk5/\n3baqmaCY/THeen41wvuQzJ2A1hHw8R/xrxx12N4Px9g9xMzVTWUSix7jbMm/\n4K07\r\n=PU1/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"79d3bd54f6272eb54a09e4cbd6a0e62f64e30a98","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.7ec96974e.0","@material/feature-targeting":"6.0.0-canary.7ec96974e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_6.0.0-canary.7ec96974e.0_1582570655287_0.2602827432450676","host":"s3://npm-registry-packages"}},"6.0.0-canary.265ecbad5.0":{"name":"@material/shape","version":"6.0.0-canary.265ecbad5.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@6.0.0-canary.265ecbad5.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c0bd81f5c7ec3c4e9145ea5ef1e851e5219666e0","tarball":"https://registry.npmjs.org/@material/shape/-/shape-6.0.0-canary.265ecbad5.0.tgz","fileCount":13,"integrity":"sha512-oD6C8sFrBY0dPzYpgK/K8mzTmLRZlZt3z65P5EQ1ZbR6titRmMmYtTjhuwp0M4GSTv+1OfjCzWM5ixS6COlw9Q==","signatures":[{"sig":"MEUCIQCOqhdYgeIliiW+TW5olrAU1JCg6ftymMcHn0qrktJ+PwIgacg3UNIVmpEBQDxKBCo9itW2AL/fwDo9Zw94E858sds=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVYrhCRA9TVsSAnZWagAAqg0P+waSkQR82yfzM9xRAGtB\nWr2+iRNDXj3feGab4lv8/mYivbkJb44b6jvjfROs/ensE6r5ohvNvPZAtyJ4\nVHCM2WL2uPEvzNK/g0cxUiOIcZhzpyuWRTAya6h5SqdGn2gsNBzCsaeOO6vs\neHLWTZdJW9w/btMFMROizL0nyY9tIHU8ecW/Rpq/6tOR4Hhn1KuV3ftamC90\njUgf5jFtR/sPIZqqylA3zMTOZTdoq7WN8w93FYooCDkhevt8xdiFAjnbPZIa\nnajK6nSpuRwx7DTHRjIucAN6YNfAeXSH/MwvJDUnZcxTWZmgVCdfNXmHILCF\n6rJF0QNyjJwCvQr9QfrDvc/dbf7HbNsTG+Hg2Gdc/0Gvir/zQIQMEVQDjtH3\nMVbqln0O3FFBCFWk8giztcPhvWh6EVRYvEIpQ3PkR2pjx9ADLVMcERNPLam8\nR3a4ReXwDh6CNmhvTB4Ixrxuq5eAr9suLgDrpyVj6PDTJ3556u7j6rJ+lAl8\n5+9QEvRsNbIei0FBHuE3uSPkKVinVM41vK/c5XTBXX/JBRRE54qM8KTj7wAz\nFvOHsOzRdkhunBLMX41cOAtmKD7q40gvOROeHvzhia3c+CycBo4fUsJnQz3g\nKqAEA2cH2Tv6OlS2flPLHdqdFQZlI6B4gIebBakAFMo4ME3Eql/rTqv+2ZIs\njqZ9\r\n=md9X\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"1600f4154da0a0943fa8aaa13dfa15c79b0ef89f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.265ecbad5.0","@material/feature-targeting":"6.0.0-canary.265ecbad5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_6.0.0-canary.265ecbad5.0_1582664417039_0.9667239837638713","host":"s3://npm-registry-packages"}},"5.1.0":{"name":"@material/shape","version":"5.1.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@5.1.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"155d01c6fdc90a9225fef297fe146c1946a6c147","tarball":"https://registry.npmjs.org/@material/shape/-/shape-5.1.0.tgz","fileCount":12,"integrity":"sha512-/k27T9fhQ1zj7VCsS26nv0TzsOi142ncik2mycEXq8753PDBotob7Y19pbwivwt9QxkglhMGH0EaWdZPzBoQXw==","signatures":[{"sig":"MEYCIQDrj4SEsMAO2fWfC1tCt1xFiw+6t+1wI4ZgLcAH2xnvKQIhAP0BGAduhCRCznEe0Hm4sX34Pjf3x+HLqxedSM98Eq/v","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18189,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVZOWCRA9TVsSAnZWagAAKP4P/Rd9Z5gy1frZUZhs223L\n3/Nd50RFrnQnyLQCIat89UxTvg96sFSUBpYcUMCY2g2KF9FeV0sFzvCbxx9H\nJigB5DiELxQ7FnfrggqkVnuz++2cvwvw9GOz6WiPGZw6SVPoZkp4T0tvexGg\nVuk0i84d4jRgj+5Y19S+a02oE4TcHZUD7w3ohZpy8UdGuhkA6YhLYocpDtkt\nGEqgDLMawyyvh5G/YeUEyR27KbSE81YEUWZX4Lv6DH5SBKxit1mcaVBkRUfW\napBb6Rk9zZRP/E8NfPkIMMWRd5qJfEmG7xDbi0HtMYOOQiuYbOvsBrJalpIU\nxirMFT/Ss6x7plYel2/gvpXkhVK/erpDfd6SMgs0aB07q6y+KpS0rWWVQNO1\nxpm5M1eTvunn5TwaqYNDn3pVBChUn8DgXgYsAUxDQcPv2pDsb/VwzJ1H+/rQ\nuGf+m6VDXfgcNSUmj/xh+VMfdIugNpwbY7YFilDmQNYaWIqkMXJtH/FIBGDG\nhIi5s1eHgGonlA64QbCIlvebiGWBboa9SEePHSAbAQ5geBTa1Fli7hZeFliF\nBWG4UskRe0jryrWPcZu0i4ouC17ufT2Jd/tUEuaJVIJlhJH9GRYmZr5qapFN\nwmzoJF2wPNxr9b4FCJlYzHb//cfXMFkkfEtvVR17u1zAd3ughdVkgiCw9Q/l\niwU+\r\n=muMj\r\n-----END PGP SIGNATURE-----\r\n"},"gitHead":"2cf87456f7b6bb4803ed5f1b18a06320c301a1b6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"^5.1.0","@material/feature-targeting":"^5.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/shape_5.1.0_1582666646408_0.721330768657708","host":"s3://npm-registry-packages"}},"6.0.0-canary.2cf87456f.0":{"name":"@material/shape","version":"6.0.0-canary.2cf87456f.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@6.0.0-canary.2cf87456f.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"22e21009203b5574e3e207d97e1449964b52471a","tarball":"https://registry.npmjs.org/@material/shape/-/shape-6.0.0-canary.2cf87456f.0.tgz","fileCount":13,"integrity":"sha512-Iq/3CmqN/mpsCMd3GCMfCRf2/x469VrQA58EbpSvBsbFNDaixlAmPacZh0by6y3Jrew37iQUlKKgL7fkG/hAbA==","signatures":[{"sig":"MEUCIQDIGcvWyR2Y9GY3s3nyW1MUBM1zaEJ6o39xPI+k7COyfgIgFjw9QCJ2Qk+HTdQ8tVfpKyQp7MkVXmGQmZtdeFH/4uM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVZPYCRA9TVsSAnZWagAApEgP/03Vr0BbZso3cLAjiJq1\nUXEh1Ll9TGcGwRk7j0KdvxNMskCRPgsTVCSUVZDVhDEiA/xba3ymyaOjAWuZ\nisXCzhihCuL5abl9T2HEyXywsFTXKDhwVgZJmqfpOK5i7zfCuLWIYiG0WB0Q\n4SMVNqY3jeA1bmiElCnPZ6rjFGG4gK77Grgbcfsv6SmneaSUianlsSDP3flT\nlqJRthFiiFJiAWT8yStrU6CpEk6/DH165ITQ3HCfewIjMkvztfkxue8byl6O\nhuEdU4lqrD5ag4SPHl/Pmaq1+gwsnWJ3mxbJQtshuYpGBoDdvDFHPhpnp5g9\nE9sdEimCgqrLHKod1IbkuUDFx8hQC1sf1fZPqAIqNL+LO15HK0fLe/HQQam7\n7b0h8KBFE+WQcKGNxI8s/kxoOaqpoqmuCuqRkGhAgnaIgcEnl+0e8YfGs609\n1iu3gTRnErbqRTttQgDTVaZRLLZewt2F5x8/eBLQ4R/khA5paxyRVlmUSj8b\nGkttBYOSqh2+NY456OKg+CPJDppuzBwuB149NtVN8G/jCkf9Ckjn1NKVmPOp\nXkosdhbNSa03cTEOc9qmJ3RO+BgzguxosJQtI9TjiOweUkjF4r6nZzqW9kgS\nmmByfKb2z+mxUTveckVSy1+P9t4vMGmklHJ576UfHUetw06xEEQrsHaKoFc4\nbRGc\r\n=hAkC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"f8e328b58b1986d1b2e248ebeef472088137ffa9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.2cf87456f.0","@material/feature-targeting":"6.0.0-canary.2cf87456f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_6.0.0-canary.2cf87456f.0_1582666711928_0.4990415592056665","host":"s3://npm-registry-packages"}},"6.0.0-canary.781434a92.0":{"name":"@material/shape","version":"6.0.0-canary.781434a92.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@6.0.0-canary.781434a92.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3d062fdb864197148437bd49d1e7faf90144987b","tarball":"https://registry.npmjs.org/@material/shape/-/shape-6.0.0-canary.781434a92.0.tgz","fileCount":13,"integrity":"sha512-zLAcp7NX2L1QNispwSYA6WIU+E5JG0Jb3oPIEOjKfGDXpe1zSgLG+x51hF7ZVQY+Px2lhHnE4ntrjxIwCSsqLg==","signatures":[{"sig":"MEUCIQD/GZ6bxBrxJs5oGX5pVuJvXA4qYfw4bf5sN6AwGDtqvgIge7rZkragN7xlZmw/yqYGLEwikIcn+VqxQHfcirW6ZtE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVa1lCRA9TVsSAnZWagAAgoIP/RipwObiCo0ynG6KxTiA\ngYnOVITIOi9AnYunq4i/i5hWtYvnJpg9lXL69IWwLMwkr1TBqaDvFiSPwSsO\n/IqJjbHQ9Cf3BpmMEu0Q+mo+2Up4KY1LD5jaBzfguZOvrCRevG9pA4LC0iBk\nX2P33T8WlzGSglTjfNjWwQ0/kx2J6rtxSz+NOoAyxRbS6CIR0OBs0tSDR3Gi\nanUJmsGXCBbOUsnI3Z8slofg82oHQifbQR9p9LJt+5Cz4uzJuaTRQyaM5SCx\nTHxOa7VsccWORkdQ7/DnqIyl7+yajK9LBuIz5KOzXWieJxZ/8+SedkE8JhRD\nTdk0I4QsahJRMVWjPt9OQKezw3ADfvEreX0bUZOA3Oo05zvvpC0bVXyQB7GU\n/ubSuvInduwQfHDOUW4RsR0JO0paG6FYYF1H8Hodluqir3gqofp5+lMKajUk\n8B/OIoAu9J3GGzT8DDQcoGZphCpyDQE8SjKgiRhyetKYfXCjUE8Ky+RZeaaA\nfGJsnc3sgwv4a69lZbtm5lHltPoo1Ab6qGJSLwYYwfS/ntbe2WwoZxgn0xLp\nYHz8Dnx2JBftEyml7lDg5yeBggP7uOokSx8NmItcuw5aUtPOv8jFdUfAEwWg\nw+RN7nMZIOHKqtiAFGLJbqPu6/bXYdBseMZ+3uTAqNxboa6eSANrDiBQC9OZ\nCYLh\r\n=3k+r\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"550f1e0ff50e94ece83c72bc45536fa64683d7fc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.781434a92.0","@material/feature-targeting":"6.0.0-canary.781434a92.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_6.0.0-canary.781434a92.0_1582673253477_0.5881577042623221","host":"s3://npm-registry-packages"}},"6.0.0-canary.d6f60c98b.0":{"name":"@material/shape","version":"6.0.0-canary.d6f60c98b.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@6.0.0-canary.d6f60c98b.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4b0b0896bfedb83189110ca8c5db8d2dea351679","tarball":"https://registry.npmjs.org/@material/shape/-/shape-6.0.0-canary.d6f60c98b.0.tgz","fileCount":13,"integrity":"sha512-c5qWAJjbZuPazPQPa+14RC9climkNg2KzWo/HfyTyBfZiNrLc1kuyD4oVDU7pKkkgvNjgQ5HSkVy4BK1rP1Kfw==","signatures":[{"sig":"MEYCIQDeclRYCzFh5XNluViHZDRKk/Ul+OFRfFBdUnqNGKcKOgIhAI4WYPRzwWnfQJqqAPnjgCsC27wmUout58iyl25e/SGs","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWY4cCRA9TVsSAnZWagAAs6oP/0HSTPdWkBrOWWYP1vSx\nbIyw/E4e6EUadP6Wz88isUkXcLYcATyJePuLSX0AhXacVQlMNNzeSBc7HhwB\nLR4nvWfBmNBysi6SkHpr0DFmshxWY3eqDamQONfooud2ot7oRYQ4eN45gu17\ntzw0GEDV2R6RPzfrsQOu+D2P0omsl4dmWbKn/11btnW7kEGon1r55ibgeHag\nkaiWZo642zWqnhJV7G0LNpXWkHuHepOWXuTuIGWBXmrRrWT0mRcbGK2W9ViV\ndEESV6YEYJlr5I1S3Mh6VJIxMcuudZIqceuHezce4Tm5k8wp/N141jm9KpjS\njDdlkIHPAEPp1mKJtZ55uakrfihIeC8YGfStg6u+kNXVIHasdnsw42S8pW0A\nyjjUvgRgh2dZIrJf/hRW2z8uSnMiZJaI4rywqL1RKKggk1HZQBPKlyirDPpB\nGawty5iAliyv+YUVSU89OETah3P+Wpf7suHOV8VIBsCxPVeSOnMoo909+8HJ\nWI7X4xiZOdnApvgqquYCmEdtFk76YYgczaIQFZR5chZmqvbXS5X1x8pYmg2i\nDmzkLplsbOUGxD8EOelEqwNoTd7hrkvRJh4ea6RpWYJCeYzPJOOBo1uRwqyd\n6LxiNAAGDOlTPw816eD3w8J/WNBBgf5Cu2pvnlBG9BOUVmgtZriWxSd/DwhB\nnYL6\r\n=A4HP\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"51319f628dc2d5447017b393bcdda8ea48a93896","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.d6f60c98b.0","@material/feature-targeting":"6.0.0-canary.d6f60c98b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_6.0.0-canary.d6f60c98b.0_1582927387800_0.6323518043241909","host":"s3://npm-registry-packages"}},"6.0.0-canary.69edc6e28.0":{"name":"@material/shape","version":"6.0.0-canary.69edc6e28.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@6.0.0-canary.69edc6e28.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2244d7d496bd5899e3a2fd38c0ce84c547beb6e3","tarball":"https://registry.npmjs.org/@material/shape/-/shape-6.0.0-canary.69edc6e28.0.tgz","fileCount":13,"integrity":"sha512-pND1NP9aeWd8sdZQSbAvCPmUMtobdWk+SQZ11WLoldTEa6tzznfq4glj2s7bUM7Z6Ib2Yascp6cdx/XnqU2pIw==","signatures":[{"sig":"MEYCIQDYjTJggUEjwSy+xsrul77W+DLzvg+yV6yJJ6zLDgck9QIhAN+7pIFUi2TstzOixtWQULNHieTTsZzAiYqY9HDBPf2q","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWZAeCRA9TVsSAnZWagAAJZcP/jcsC4ohFR0E152As1rU\njKep4ZJcCERZAb/AbGRulL5zAxIrWdDDTd9Bg7zLqktd2a5mMpI3NGcZEAog\n5lscGKoEL34RjxJ399+35SbRHOptej90o2AaUKe4U9ifWxbBO0nmBPgjqIFR\nrAH+8itBvU5ahkNF3iv+5EIPH/fTBZru8GQjMt+Z0QJ75u6SRvbREWRO63RF\nps8nDT4AuzYtc9Qy904qg+ofe1qTWEx+AA2ow1sSPWClZ1WxeSJp7Hs7b97s\nOhpn4MOx4HAoKrTBrGl91ABPf9GEcERqMCy7Ci+lYIWbOX7WwsD7NGtj/ZDi\norrL3LnZEfFSVF74+HgyQUBEESBg83LLHxh9WFA/+LjSOoPcaxC1i9F2dQR9\nxVKu/l/cvrkcHTMyGLyk3zIJXjr4Lh6//ubSlEAvW0SLU+Ne41jtNe0OoUsk\nBlpdbSow4mQT7QKvCNu5KVqZqsMCtYv7UJxM2wi4chj+d05CKKmkA63f3iju\noaEN+5I4b/b/oLOCGhD7OMcnw7kR7LFUmAK/3uJ5XKctCfI5ysyQ2OSX9HL6\nt8g4TtIK1ixapdTYfWPbdBGdLC5319pnTOoy9LO+/ThS29EJsemyNTpPF1xQ\nqlRtcgQjqnny+DqzjOCTxkPYdXEDp4C7mRmTv8zHncHv2ew1FIlZ2T6Cz3Fb\n34Lq\r\n=nsYb\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"7394312b46cecfacb3ac97cf147ed16fcc42e538","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.69edc6e28.0","@material/feature-targeting":"6.0.0-canary.69edc6e28.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_6.0.0-canary.69edc6e28.0_1582927901666_0.4059690869896371","host":"s3://npm-registry-packages"}},"6.0.0-canary.9372e4939.0":{"name":"@material/shape","version":"6.0.0-canary.9372e4939.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@6.0.0-canary.9372e4939.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8e2bad3767337f6fa1e7ad78003a5a07385c8900","tarball":"https://registry.npmjs.org/@material/shape/-/shape-6.0.0-canary.9372e4939.0.tgz","fileCount":13,"integrity":"sha512-lOa/8xi2bA7jJAoZzrJD6yDGHeMjvgMF2x/1/7c9h9oxsKFykfLOe/bweZc1X8SMjsYfJ4XXwM09ZSHurLl9CQ==","signatures":[{"sig":"MEYCIQD3jMmo9lIDm5jVfs7mRshmuKdPzyZxz9sNSWj1p9WT/gIhAOFrVYclPuSTLrNtQqFpvRpxkQrYSY9aunPf2ppytXQ9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXqtZCRA9TVsSAnZWagAA2KMQAJq+I9owK8vYH+LhP+2h\njNHCt01eACr1VOrSTUi1OjgmcseyXiSMGsQB/hExGoukixi19NmNbUAEmjgM\nFCcIf+ILaSW3ZBLBDqdBLKBBYveVw46vijMaYKumCg0FqTcsxAdldVXvt3/l\njK2mXXZX4AJ+0leeSJC8Jly/titEFb7K1zEVR4TNjlkrIoiiJxqbj3tYaLIs\ndd+f12jUyZSV170UQXjy33DpFKJrUpUmJSSd64hkXZmNhyIh4NBG/PIZRcNG\nkYQMfz7q5nDSv/lSUY9+JQNMHkXtYasogv/lETSK2sFopPEzMoq+obphFWN5\nVXNjhdqk8z3e4rRx8iG2tTd7p9x0JAtoD9aALR0pSvQaR3qHPZF8pTblqw5B\nEkhqEhTXXEre8WLlkCU9WM9qT5Xkdunv6f0Fwt2nt0JyU6Zrblg72cox8Cvh\nsYCqArQ0caqAEz77wmB8TRh5ejOCr/sSnH0sk65eibx7NfBNA7sWlTLbiZGs\nSMi74Xpt4TBq2XYagRgjiwFqxk6gzqTyVUEHocx2q7jNEgoybLavjZNicUhE\nKm5OIUbOC7eHK3mM2yyXK3ZuYEMpGHRlyif90AskxfGlHpJ9XhVqgHC6UTiQ\nonmKu92i8TK4JC/6fjGJrBQhkW3IrMjfrf3S9lI9sz51+YYrbw/C04m2Ewvf\n3jYz\r\n=uHax\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"e54df7e88218f93cffe81e63d7e28371126d5611","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.9372e4939.0","@material/feature-targeting":"6.0.0-canary.9372e4939.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_6.0.0-canary.9372e4939.0_1583262553405_0.012479737880749076","host":"s3://npm-registry-packages"}},"6.0.0-canary.9cf5e9842.0":{"name":"@material/shape","version":"6.0.0-canary.9cf5e9842.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@6.0.0-canary.9cf5e9842.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"041c5e43f70eb88cc05e7c8510c685b71a26d132","tarball":"https://registry.npmjs.org/@material/shape/-/shape-6.0.0-canary.9cf5e9842.0.tgz","fileCount":13,"integrity":"sha512-jtma2UqGcO762+xjHT7Tft5k2eAY/Lzi2jOYnh6XQ9AD0Ia9zG3oZHZ71B0I7uYVOXWAheqpgSvmFu9kJZkfMA==","signatures":[{"sig":"MEUCIBNDZ8bcmzsRY29v2DHxx5bxJYsbRFCalOLiMJ3dcUQPAiEAlK3GqLvdGycNXJzY6Y7r//c53mpZJS3JrAFsdWzeVz8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXudhCRA9TVsSAnZWagAA00gP/Arf7Xx0GkBft8DBOwYB\nsiGMEQeneEc96tI/PV3PI4ROfKtdXjPLYUQKLa9XJhTozb+kfDZKCDXqHUtx\nd7rz9MJDLINGZ7ZI+UeONNMJjaIx/OnilD+l/0l3GsX/6w3wmS5Q3WOEfVco\n3RNtYoBaXs1/VoT5i2AKgGPVjI9sgHM46IoKd7jSC6/GeE9RXEDMIptXu95+\nHQCDLyUUH7h6AFfca0PERjNeQXneSJ7vHHz8l5lqbmM21ZFlMPOgPb9KDN7z\nYoxTy7fK3nJJUa4RuMxsMWrd6BYHkeqVhH2xmL9JXCZLYldQbUCXYqViP6ne\nKEkapaiuzoAgvKk8Y1Gm6iscI/51ETeKsJATPtgtJ9h/Cqj0f/vi4U2jPCfB\nLwXCL+YQKU8l6++PYdOHLF0y5FGOtRknrzu4P2ByJZDva03XYH2cXpGhe7qj\nNbVznyrUXSPIsm+iuqRrt1VTwfu3Q9WKybqdoqutTW3W7UXNlAFmVmHXbONT\nmg1WV1pTo7hT6uwtCRC9EOKBTsFhWxht9O3/DnOZyzltX2TbXKU7RS3tOJzr\na+pA43vb8liEy4ldvniTQVgUy4KqPmx7VvhDbYMyq31CxjSzvIvpRxPpvHI2\n7nL1O5bCW4ziBc7XLE0ZXDQJ8nvZIYOFZu9L8pf5W6ijZ1+Pa+Hx52hqp7FI\n+4Oa\r\n=luKd\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"9ae3d1faf8362261d4cadb5f9386265501b7f143","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.9cf5e9842.0","@material/feature-targeting":"6.0.0-canary.9cf5e9842.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_6.0.0-canary.9cf5e9842.0_1583277920609_0.2774419213176851","host":"s3://npm-registry-packages"}},"6.0.0-canary.3657f8863.0":{"name":"@material/shape","version":"6.0.0-canary.3657f8863.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@6.0.0-canary.3657f8863.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8a892117a84c9a56caa8ab942cebc13d104fa4b7","tarball":"https://registry.npmjs.org/@material/shape/-/shape-6.0.0-canary.3657f8863.0.tgz","fileCount":13,"integrity":"sha512-PIdm4E0Y+8KZFGESnqBNQRk6OusH/G6QA2IQkK9xrm8DOlItQRRBKNogJ+JcA+RmmkkWbOpzZkpp++UwIGTP3w==","signatures":[{"sig":"MEYCIQCUv2qmNj9jJvxkXOdMFJ7ONYzpXLMkSvX231GRzN7ILwIhAMA8WMsNwdYD1XDdf5xTuWzXG/8NjAAvPKWW+aGg7x04","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeX+jPCRA9TVsSAnZWagAAdbYP/3udsLAaq6tojfzEIG/1\no2alnlm4Rf7NsqwV/cinuKElII77o6egPdDeiVLhgEthHe+xrCNop7wR8fdQ\njp1JTfEVqrE0K40b70dMkgqJUMYhgjuVTdxtk6QMr0JgXTML8KruF8CwTgNH\nUDQKU94uNz5IiInZaInc4Bd2K1dNXJor9PsqNIaQe/puRHpBa6bSttyBt3Cg\nxh/mFGNrZfwZ8bGi4mWhWJhJIDXHbwH7YD/Z7LtAlixmhrio/1PC9Z2q2JbI\nSznTk/yHE7jt4YV7h6P58PkoxDeN1fCLgX7kFsroW9MKKN0sX4/xhnCkewd5\nyPQEz2C3sKsxiRhtHXjtuEMOlM1mX8BX1tyJ0cYjTF81MYNiZWXZWoyqJ066\nOYSoUs+K4Pli4IqCFTYBdNm4glYX3LAqfE2ckEDLbhtKLPmNTBoAFYo6SDOV\nOsu+sUd9VSrQUrIyVxWf4NPIg2sY0Vtrgg6/4QfrwpeKC6iU22dPijoFjBow\nASpWjIiKsO+6Xh0eRdJDILBwf+rPP1Du1dA2a7Y2Lnq4vfnABkA1C01yKAKt\nvk1YQrgH7Cfpz3reyVwHyXUwrWMpIcuskTkN53LwJ4YZ1UAooQdbKY8TBgkR\nh+Ut3unZsOeLtq1W2Tpom53drivU0J9oL+JExPcTCd/5N4KdgfQFyzwqRekM\nM8Wh\r\n=9eIh\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"4075a5619b546f352f6366e5e90c61777ee28f5d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.3657f8863.0","@material/feature-targeting":"6.0.0-canary.3657f8863.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_6.0.0-canary.3657f8863.0_1583343823257_0.4018296112678976","host":"s3://npm-registry-packages"}},"6.0.0-canary.98b843417.0":{"name":"@material/shape","version":"6.0.0-canary.98b843417.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@6.0.0-canary.98b843417.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b652e186bfa72a3c1654440d18b176d0ab651790","tarball":"https://registry.npmjs.org/@material/shape/-/shape-6.0.0-canary.98b843417.0.tgz","fileCount":13,"integrity":"sha512-aD1FA6A1jcuVuizDHb35j4mXE8Pp62nv4XT3+s6QsKoUaomRlaJBvLaHrCKSTjauiPNtkHGQlapVKM15hUefzA==","signatures":[{"sig":"MEUCIQDZ6A8o10uZ7/Etu5boCnl5pkPGXw+/DQSDRmRmaBOOmgIgVtdh2M++1rbeA2nUzHBGWxUwWrBCgdu9Sbgy272C7fI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeYUVLCRA9TVsSAnZWagAAbZsQAJKulnP1iZIp+i0J1OxB\nJE6fwFEkFG6RPJFugqQ7lHsDr3/YbEAmobyUBG2mbaXWG3IdUmDyaFAme2HL\nuHOn4RyVXeM05u4RWPFPlXa+5AvlENjBdEI8CgIFRywfzdGwSJRMYGCDr5mQ\nuP5Vi3JKvRv8d30HEyNPh1HNs0XSILPvpYSGKX9ebyOfOsY7BVPiGgvaTGIq\nATlY6F09QcZpO36T0AC+uZYqJf+clL/A2m6c2uGPI+nKNyDZY/8uG+FE3Wgw\nU5OMwK2FGbOYeni+0yDXfKAFVzffbMiYRPkJ1OMSjUSM7ZQw0c3g/hN06W2H\n0vvbpHwihHU118TljG0tFWUoUM+dbgQC0CcOVb8d3LhS4i71oA1/AstegUY3\nw+YiTgH5XLsByPkoY8dnJTm2SKsNfoy2rFg18qX0nOwQIKeEWeV/vIZgpndD\nwsUZgvsg6j1YWsP2dAOdtH63+sRa1y1rFR2WMYj2PGIliBq3TPTfntbZ9Imy\ncihuw3DKUfU2KWBVmM/IUZSIJptwQTzGdzd5eVrweR3iv14wDt0oStQAxksd\nasm5c47By0/8r5lZJIH9bl8wfah3qo+X5XOfeZSi72Dlqm5fbrElkdcMLunN\nYZRN0RSKlP0dT+1cNXHkeU5HH6nPqhYsTOr8dQBO8tTlxTzIZjo/0/PFBk+y\nFzXk\r\n=5uf8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"68f2aa7dce5bfe926cedccaedf1c0c98166d0bc1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.98b843417.0","@material/feature-targeting":"6.0.0-canary.98b843417.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_6.0.0-canary.98b843417.0_1583433035555_0.9075463121639404","host":"s3://npm-registry-packages"}},"6.0.0-canary.17b9699c4.0":{"name":"@material/shape","version":"6.0.0-canary.17b9699c4.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@6.0.0-canary.17b9699c4.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7bdc6282265a6dd6371167622d12329c0db45b68","tarball":"https://registry.npmjs.org/@material/shape/-/shape-6.0.0-canary.17b9699c4.0.tgz","fileCount":13,"integrity":"sha512-gGU9Ab93oYygeuIXms/OtLf4ylYzlL72c4qA6mpA3AIPv30oQ9Mdeq2rsr7ZYj4Ga8td8YcO1CzrY34ASgBuNw==","signatures":[{"sig":"MEUCIFjybYos/s5wCpcu2XPyygy0w2VuIEMtTtHJYJyFJEPTAiEAwfHIUwZT62KUZT3gB/X+7tfzB0eGJeRhGVvsAciDUiA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeYVFTCRA9TVsSAnZWagAAM0gP+wVb0FNIrg0yIt41BilS\noiwuN0yjqIonLGYDTKs6ZOIFw6+48S/pKt/stcEzRVS4+r1iQjbgqluGBa5W\nIvjU0qlu8tb1lhLd+ipLBQ9w7oDay/3pHFAOznri/O2xTZrjDUfgHWFewAXQ\nZkUJ4Q++PpYHeVBsS6BGTQcTDl2arTKJZRUtginKxgokYWkDvt52bhbwRenn\nLXeLyoyaACMOxapyfV3aoR3oRm9Snmym6xvXAeJWeVhT19HsbMzMbb5de3zX\ns9lHbJCU36L+okWz8u/LYA5TBSyIIzB96ss+QZeQaY5iWMBDxAxHKGtWjjUB\nfCAwEgiuGrMcJqhq0FtBrCdO4mVL1spL8gIAgZG6pmUEIakP05K61OODyTsi\nKIAbQtYYbJZi1Lok1OTzmROGMVx9TvEN/yEvyh8Pl98hYqdZEo/SehUnBtU3\nzLDfAWv+4VzYXS5ibtz/HkKuSutDwjMn1Cv6z2RpVOnPjFdiM9uHWfbD7XFM\nm2Xclpuh2saADxBXIb7UEXYbYNQrIRgSFNJO44eFQd5sAUa3s/XqTO/uapLK\n2BlBf9ndBs4/BB4tMk9VG+8Z/fyS2Slp6Bvll5gWMAz7GvsRFO9/oIy8vQMq\nc2vRq6RFndWP8He5luo25YFT7x+dgYLZxgvhbti8wDHKw0jtHxG4RS6/FkLS\neVsR\r\n=iKDz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"5cc71188279f7fb4c0eb3b0b6b98b59815539374","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.17b9699c4.0","@material/feature-targeting":"6.0.0-canary.17b9699c4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_6.0.0-canary.17b9699c4.0_1583436114042_0.3913890770479205","host":"s3://npm-registry-packages"}},"6.0.0-canary.6ee035572.0":{"name":"@material/shape","version":"6.0.0-canary.6ee035572.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@6.0.0-canary.6ee035572.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0ea789b278ddc756495800e3d714fb73b0380f6b","tarball":"https://registry.npmjs.org/@material/shape/-/shape-6.0.0-canary.6ee035572.0.tgz","fileCount":13,"integrity":"sha512-+dRX9IyW9thTZDenz6AMmPaV1sBQkEkpM0OFr2RFKYwAx1zwDUBPQHNrrvNLlwi622jR9KG5vqlxpJwZfdumuw==","signatures":[{"sig":"MEQCIAcDEl1koJ5W06q/WPCC4DROPqtbjMeywZXGjJZt98iiAiBmOGiZPgHIF/wnj46qWEYjG4g7GP1I/0PGJsFc4TxkWQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZnLMCRA9TVsSAnZWagAAmDgP/1mwxdzOPCGy7oE67Li6\nvMvQADJNkAcRXf04lYNgEMR6RjuKurz7OtTavRhUaVIlxFTfPODfZ6I4BXzc\nPmuD9i5sGEH5hcjxUTkaRcK2MO4C4I3wTNTcL+ikEBFx+d+TkfOu0axwhYzK\nxdrE8gbOf3O5bdTYqw7T39zBgG+Qadry0CApO0dJOF/Ly5BcG16/Dkgzb6ef\nOMlLStojfnTbsKo3jiidt2NpLs7rihTHe9LtuiB7r+sdEMbZbPU1CfyWb6qd\nt31Bm8I2zpNgj13LK+M/+s577DmhqWoFxiVDUGu3j6wxW8bYGvW4oyEr7qq9\n9DNdEP4x7HRsRU3LzN4K6UW9N0c9WMU/y4UrXH9NV/WPnVt1n4uIflIEz+8T\ntaxJ4+lYO2qFiAsLX1huwJh6wwf/anM9tqB12ZTt+niAM0hHLeIhbsHn1Xfp\nfhbccd7vrAHH6QIEDBYH3t7Q72k4oOzwMV6nbSVjj39YIUYALBDWDJjNozBO\n5bBFPqxWjEfalnEqc3xNvniWM6VwQ+C9iT6EqxcrorEIitCNwu4EZbikyCq8\n51cDzPbaIhfG2/poSBsiKQ7u1237+s8LEjApAjX5F2UTeONVrTrO3P1VZtv2\noeeYku6CYIf+o2tKgL9Ann5IYI04CD8EZzG2fOgA1/EwY2JZIUYIPPVBStad\nZebk\r\n=amcp\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"f7d234455251ae34ac1d568b4654bba0bcadc57d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.6ee035572.0","@material/feature-targeting":"6.0.0-canary.6ee035572.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_6.0.0-canary.6ee035572.0_1583772364095_0.5063039225170192","host":"s3://npm-registry-packages"}},"6.0.0-canary.bd33cb56b.0":{"name":"@material/shape","version":"6.0.0-canary.bd33cb56b.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@6.0.0-canary.bd33cb56b.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5d329e00e25ee274c86e57d3d2c877f60dd145ac","tarball":"https://registry.npmjs.org/@material/shape/-/shape-6.0.0-canary.bd33cb56b.0.tgz","fileCount":13,"integrity":"sha512-BPAGgAl3lIMtf4p7mtvd4a8Jq9F8KOLy+cMJ0LbEPsM9HLFn6By83LLsGHHKXr8j3iJFKbPAlkz8SGi1ir4XmQ==","signatures":[{"sig":"MEUCIAVMY3yFsgTUE+4Whbw+l6kGGucNgYV+iZIsJGau76bTAiEA83oA2lmNFu5pSsJ8eX6fKzQRAIVeHKavUOWGeqvVimM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZnsXCRA9TVsSAnZWagAAF7kP/jlZkZiPb7VDL3RqQQWG\nneVvqkfrNLTu4ct4yJKFVB9apryUADEN78lv37gTutkP8Y3tat2UmYoaulCH\n1TrNEq2OCL134Ftnnkm1VfAWPJF/oNesYunYX1+hhUkSxn2lqsNCBwJ4kXEt\nadmAiKuQ0f6dc6e0AhNT7HRyYZbGE9E8yARzGX7At2kOVIGHacT4xKTGyNKU\nYR/NGTiNHfxqoLBRVqFWSTznfBKHUS1gaGKkuKhr1S9ijj6kartgxYM7BOp2\n9/IYuMH2k+C5SSgNfZt8SOgNAjs0XQSH5hSeOfqo+BMakZg3vS8OGKmbChYq\nvJXUR+sXSux20HILZzyrjgk8X6S683C5xJTkALj3GfkYa5pD5QTqdSA7I6rt\nKCVWfoH5nzHRs1WiyDQwx0kyYB3HXqbDCuhA8j0tJbmVZ86wFS+WW22ygeS/\ngRNweddSw9tDMxtQwMFRlJQLDPfFNc0wRhw13JH+RaIRsOx5x/py6Wtg7NFw\nlErDcq3Fea5z6+uyQNjKGJ6IrhXjPsvwZ0vvjaM6cM9FIaxAo7kthypiV30G\n95HzzEwAPUZ/FAJsmAFvu4HnkAEGP8+b0apgy4MudWuxS1VcOvw2+vGa9ocF\n87S12U9OjfI6gUsF/dGgWLVCmSvCfhWszQcXjT3cuMpZ7XoEZBVDEdPkykLQ\noOVL\r\n=5w1v\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"8829857459a9b7c92653d2bed2a8ad63b58b672d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.bd33cb56b.0","@material/feature-targeting":"6.0.0-canary.bd33cb56b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_6.0.0-canary.bd33cb56b.0_1583774487544_0.7924486623144515","host":"s3://npm-registry-packages"}},"6.0.0-canary.9ebee4ceb.0":{"name":"@material/shape","version":"6.0.0-canary.9ebee4ceb.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@6.0.0-canary.9ebee4ceb.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"814402c4562d024a0a1d0eccbcc7f2f7312324fc","tarball":"https://registry.npmjs.org/@material/shape/-/shape-6.0.0-canary.9ebee4ceb.0.tgz","fileCount":13,"integrity":"sha512-4iPG3zCM6RwaJ/KCJ8bLch9peE0wXvbfjy0S+Mma4zmNp481dHLNDdVbpwXpc0TIPVuP+vMh7OoVrUvJ377JDQ==","signatures":[{"sig":"MEQCIHiwFSN3MSVC72libSzg+TWfGtN/zRAZXHRaci5NCXTtAiAuoY2GJO1VLeXbIJLVEYomF/nh3LXLy0n5Yc+yf2Z9HQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZrFzCRA9TVsSAnZWagAALmMQAJ9RVMn0pSNfkPJ741Ul\nVKT1zEmWWA0lnMFq1gX0BwbwUqS5zyEtlUi73tJ6vv/n6BHJXqEHDMivugcV\ngBhpifaFhaPvtEihjhe7Ji5yE2+qPb5Y9ron5qdHu5H9jR0xl8Z/9ZKJBxAM\ncj6qz8PzMugDNpQF2UfJaB2vTjAxDQUqK8bg1tjKrrivPPOi5+V/UvjkFlcl\nYIsW24vj2M/+akGny0MjYspTFtlbX8Kv1IBA3Hg/2dD41VdjZC/Vu8FYe5ZZ\n6KmqjCbuILh+05IUQiUlMi4dkrzrqjCWZ+fZR2rAzjd29EaZU/L9UUoYiU8Q\ngDnoUH0XGDHIKA/jvo/pCRf+6sKiS612JlzHJOAZcMhy54kbZgZG43B9+PKZ\npJGhKLFH60i55CeyaXYd+DLtC7sG6vLIUd8w4SP+a00kW/KkWEEJ1dIG4aY7\nl17QCDB0WbYdz5JcCEO7/iAuocreO5rKsfb1PsY1ZWCPLEvtYIjWVUWecpci\nYQH+cBzOQa+7ofgG/oz294G9xVnULwiPiHQ0FFhiu3vi+vqJnht3A9fnTqTg\ndoLYnBjbCvVLLTp4+80vt024l4XOh+W5p0YLGsaHnGf4wPvEFAKGu2UOIxpV\nQ9Mr5KZ69rAFjeYaqaQ6Sj+00Wa4xKMXVTqKVgRNw1fGDc8zfr5UpthfHdGP\nh3VZ\r\n=scFR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"dfb57a81f5ec017319a5b83b6acaaad397e95839","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.9ebee4ceb.0","@material/feature-targeting":"6.0.0-canary.9ebee4ceb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_6.0.0-canary.9ebee4ceb.0_1583788402918_0.3207412974385204","host":"s3://npm-registry-packages"}},"6.0.0-canary.26c049afa.0":{"name":"@material/shape","version":"6.0.0-canary.26c049afa.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@6.0.0-canary.26c049afa.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b6326c98fdd03ffaf8c20162850506dcf190279f","tarball":"https://registry.npmjs.org/@material/shape/-/shape-6.0.0-canary.26c049afa.0.tgz","fileCount":13,"integrity":"sha512-yjdxzFKkTwtjm6iWPA6o8j4VMMQywHrPq62rNDtTHIN2vurbZqennHba4ytRevsO/DZuihkDACdr0PGLbl+HzA==","signatures":[{"sig":"MEUCIGDWbvLo/T4n6jFQ9SY4E5hnisqwPsz84ZDs73kbNlRWAiEA/35c23pzkhGv9q2qQ7tXVluhAV6UUVsFOVxAuvJseto=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZ8gHCRA9TVsSAnZWagAA+UUQAJkCiKdQw9vKbfSUcDCU\nFxDjE2Eapf9E5a5OpJLPPzxDp93Qrq8Nab9Dm3cR5+jVqSktFIscd1FmKZWu\nh6WgQ+O9ncjIxO5lU7+EdD3G1DsUDTf3gZO+lPtfJSfHINupSz84n3ho6EzY\nEfZZVKIB/wbEyL7pNP61B+1BUCDZJ7MegUMXxtS9IuXsjaBwp+kcPlzgb+y+\njBzg4d7gkANDY3wrCEsOTZXPyACAjYSvq4O664ae+wSIw4v4gnS8P7bYhQ77\noJ6O237jXGYNf4IWizBYSdTRexJy5zce73GNdtq78FUmsxtoaQX/WKk9Px2m\np+OFPFnh+sjuk5/VhOocxAgURDm2IkvXDmFV8JNoCirJ2+fysXvuQtH2aViZ\nmM10PKkfE86SvQhB5itGKjG4CKCGAFudekk0QvZYegbAVWSevYjch7nH0XfH\nl3KFnR+BYYM2FbTYbs3Yuu5fa3Qu3QpUc+raVaN0ovvxYwthcsU3g8YN3lO2\nfjESB1/x/X04LYHm6dXhTeIUaKoZjUL1ZghApixJlT7eZEhAyCiK1669t9NY\npQmJKxdkXHAOM+tF7IRmGIervNW6GMftF2HAtYJVyGJHGagecmUjU9Hdai7J\n2gg7Jz55einlaB9NV4ZHzX40KibQgn9jdIcUupuATNm2NVu8H8RLACdQM8H1\nNHCv\r\n=8qhc\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"042ad06994baa2c42398713e57185e4bafc82a3a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.26c049afa.0","@material/feature-targeting":"6.0.0-canary.26c049afa.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_6.0.0-canary.26c049afa.0_1583859719327_0.19420986411003116","host":"s3://npm-registry-packages"}},"6.0.0-canary.a731fd0a4.0":{"name":"@material/shape","version":"6.0.0-canary.a731fd0a4.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@6.0.0-canary.a731fd0a4.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c8e4507b9d7bb4e3517863a4438ff3598af64f54","tarball":"https://registry.npmjs.org/@material/shape/-/shape-6.0.0-canary.a731fd0a4.0.tgz","fileCount":13,"integrity":"sha512-m4Ln5jg8ervfzGFQeU9YIiN1mnYYRGL5zOJa+apsFC9Weuoz/fDK52mdwAybQapwopz0TGa7Q7eywb5G5OvDKQ==","signatures":[{"sig":"MEYCIQD+HhgvlYlPAVVtTi1+WWkrdZryJrSub9X5HuhJ+OXjywIhAO1nYfFUYB48LZbltbOCN11RTbNhq7yG0urkphNVbIUV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZ/k8CRA9TVsSAnZWagAAIiEQAJnZRwg+lVf2KAgj29++\nFVEGeBaaS44apclDoJFP5wAVyrlqWJbiIEFgWf7FfN9Ka2p0XRY+CyRaeKGx\ns2fCCV3RWF1isPVDfOcuoSKCwDfHQCNNQFk6SlVg2+MSm6Kl9bzXrZt8+EPN\nSO/3jtgkI1ej1uPLhs9g1+rV+QYWnNglcTWOxYrQKqRjdrbjGClSJyyScrfD\nK4nRzq/unuA6bv7E8rumUHaQTq8e0YlGGM/4VwRQZG2NMVw9kxDImqcWfUOa\ngH65cE0qKHyCw7WV/ax7cy5sFty/TI52ZB2Jo4m+ODCEtxpc7J1VyySMLUbc\n4cZucLFxJUBAj4H5zF4Iv+QuWLoE/9gfQCPB2AQ8ZvuRqUmVGdtA55PMpls2\niDAVeHqmx1b533a4bzHfC4Vjwv3iUsrx4jYLWamEpqr07h5qsIh4bdSaBtvf\noVle39Qv81LyxwRu7sTBOJrwhKEUYGSSD/7Fec/iTjTa+QPXbJTL5jrc5wtb\nOQcOrmmO4OhdKeX6uV9zmBBagc38mC4+0Orn7SwpMRBSQFU+khOjaFKfnh7U\niClXe++BacYyalcLUSc9raT0ymXstmU7OJBnQJqmt9+Ky/SRxejWQbWDKaL+\nhCNIB0dy1tTqleK5duVJOmgsmkbjjgWYSzemCIp4j1os9O/tNSWoWVS52MC2\nMVSj\r\n=meI/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"6216eefcc94fba4c66ceb4b1fe9352d3cac861c3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.a731fd0a4.0","@material/feature-targeting":"6.0.0-canary.a731fd0a4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_6.0.0-canary.a731fd0a4.0_1583872315791_0.047131340308955716","host":"s3://npm-registry-packages"}},"6.0.0-canary.1db5c9fc8.0":{"name":"@material/shape","version":"6.0.0-canary.1db5c9fc8.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@6.0.0-canary.1db5c9fc8.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"acbbb34c78d8bfce57312dfeb3848e5415ac1be7","tarball":"https://registry.npmjs.org/@material/shape/-/shape-6.0.0-canary.1db5c9fc8.0.tgz","fileCount":13,"integrity":"sha512-YdUh7FMly00ZdTuYqkLYe/dGaV/R1XwAdPfMSvWIT9Qg9DmemcIC6mT29MxJ5dfF42kCIIK77NzwoMhsaE+qVw==","signatures":[{"sig":"MEYCIQDzPLFxyWa2LTygbScTFCRhBXlC4OWI/KNuYheIJab0RwIhANi6S6IuuNMX7YWXHOuahv3Yrk3gh/1Ef/827JIww+wX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZ/ouCRA9TVsSAnZWagAA6DUP/2EPD7yvz4tvgZdLt+v5\nnQKESmmPMV+resbN+Ym7+FHL3I/fm/P2hPJbBlZKXkjjycelgffcVwS/iWog\nEBjktQjwHFm7/oqCcMm3w7nrFibGh2Ah7qLOCjflVGFyJq5IGhssSWJNcg+C\na5RFoINQtWvYTmw5m+7BuDEUAbR7XW9FgS0Gdsi2fHApl9mfLOGZQi3ZdZRr\nl1X2h9foxVce9Q3wc6DKJD84PJFY1m08ZDZvkTQM8IJJ+M47xLv632Bp4wJT\nZl4DUISWbICzMeu5oAxny6ZrhQoMKoSMusBSHC5VlOg0HQF59/aSlFkQ7IVm\nWLzYpD9PEJ8ZY6qn8Son72mMCC/kGVxD0EsGHZBy7oJwhZnMmBe6B2gZv2YH\n3Ah4kIoFXpU4rF7XLPQCUYCFIZ7M9GdMNQwtqkl51Mv1CQmBUpSqaA4KsHe8\noxosoQmte0Z0rrzkbsjRRbNocAN0w3nbI6YhCSMxArQCdIPu+zUL8ZAHzGFP\nEBdJZfVp2+gogOVWjlZ/7YP1McJQyxy8PC2QPOe/dzFgujdn+ZHRFOMRVjIc\nN+/Tf79G8fslYR9sG1Zfd7bT41sqSUzIMVEemgTa94GZ/73+/t4IEYA62kAi\np5wwtRBRzFKYBsgKZlvvDGJ2wKfrUvnKkpzLYiZ7B0HtD8xOGCHbFgJoABvy\n6VGf\r\n=l3xg\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"cc90b13bf23ae60f937a981d548d55e3641c74ed","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.1db5c9fc8.0","@material/feature-targeting":"6.0.0-canary.1db5c9fc8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_6.0.0-canary.1db5c9fc8.0_1583872557632_0.34921289345533735","host":"s3://npm-registry-packages"}},"6.0.0-canary.4971637f4.0":{"name":"@material/shape","version":"6.0.0-canary.4971637f4.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@6.0.0-canary.4971637f4.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"09d00b135532cb2946fccd279dc3945ca3227009","tarball":"https://registry.npmjs.org/@material/shape/-/shape-6.0.0-canary.4971637f4.0.tgz","fileCount":13,"integrity":"sha512-e/7tyKv26CMX8x1vdDuAiW7P2mRg3oOWDr78e240ZwjuuBABq9rvQv/155D+//GuxFSiIsxOj/iHl62e+PuriA==","signatures":[{"sig":"MEUCIG7ZIPHIECDjCRXweWBCJWzgyE9kWYxW1J+VUZUmErl2AiEAuWkPnjbMXrKafxBTLoRblIu4cZ5/HXrNHfqmd09fSaI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaBtnCRA9TVsSAnZWagAAXMAQAKMrdvor6SWS3AEUxg92\nMbsMHhjnRrBFrrr9mtDJO7T0UNNRjUVsfYIncibdziaLF21WAK/8x+N6u8DJ\n6jBJ+hvH4PGKcQD1NC8FIfn0X3rLaIHewLBprOpwxugDlIDBWf2O/8qrEi9P\n8qc+ELrG1nxhYLvQfA+3yNZ1DL8/0+NTeY0y0JWsnFh6wqCS7LLCDbgCsSEI\nYwAYH3HTnlLISXn8GjOoCwtxnHe8U3QxuGUq1pwX7C5KHUV3Rs6eeAuAtHIE\nd+iU4fKJsPb+aFAIB3atgdECmOnZuAhx+zmrEyGXlexiQZ0prqTmcT9WTfrg\nLr9EoLvT9DO3kX36i7whBOY+oAEhVICRgCR3H7P4FR4655y/K2NhFr4Kvg2D\nf+ZPimrtum0Dzckqe3Ua7oQU0mZ3SA4RL8pksV7zO2EbZ5wQhhqTexODOiJj\n2aAY+5U5LWcI2f4Htvtk2suSOl6MIslYLQZHI52+y9zsvU5BXYzB/TNWTXTH\ngpSQcbRn2jvLFC+h9mrn3BteZ1YVabpbiNHRlMao4GWtbRFDhxb2EUB6Y7pX\nfpq6lBlMuWuwRcDtePKtfTWKY+kV+iEm4fTTAjkVI2gIh1iBSlln40lzI/B0\n78ObRQjsLl0EoUPyoYICxDewDq0/pRiUEq6vTF1iffGie/VoA3tmh9SjvX/e\nR5Ce\r\n=HzuE\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"4a67187585998b5863a9eb407a3ac0a7e550061d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.4971637f4.0","@material/feature-targeting":"6.0.0-canary.4971637f4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_6.0.0-canary.4971637f4.0_1583881063454_0.2853161194997451","host":"s3://npm-registry-packages"}},"6.0.0-canary.1ae8130ce.0":{"name":"@material/shape","version":"6.0.0-canary.1ae8130ce.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@6.0.0-canary.1ae8130ce.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b4ba94f885a2ef0c604947ccf43c7a2e7c0a74f7","tarball":"https://registry.npmjs.org/@material/shape/-/shape-6.0.0-canary.1ae8130ce.0.tgz","fileCount":13,"integrity":"sha512-TLBHbi26jWk/UYSxcL7rjFPnCWG7SHbkLwAae0X57klPgM5TEdZnYHfDwqPXOA99k3d+lEH318AiYjVmkHFuZA==","signatures":[{"sig":"MEQCIAJ8TsxlV2FqfIOorpy+0lx+ALY6s9kaBwXS8vYjE6ZTAiAw277uI6pIs6t8Qn++bd5nzieEHG1Wt5ezksQorSwYZw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaB0cCRA9TVsSAnZWagAAVG4P/32SqOdI6qvptckaA+Hh\nQ/8eXqlh3zFrcu3mtjPQsy5Wd+U8B5jy4vJlpr4DKZkmYdSK4xsnARSNAlFq\nmU1GEX4rM4n/aXjk37xUBhqokQErGLAnVTGooDYfXFq4AIe16k8VCRS9bMKj\nh51EVc+z+mMiK+Y3PYw6rNzV/FjxoQQInbqJmq+aW/NUQ1QuwQfDJTYnmrHw\ns6XTbIunuywFYSiYzsYEyrGZlo/Bzt7yj3I6UVwvLByCPw/zZQC3obeXklX/\nP7eBVVFtSbBQL9tpTVRAqgHA8+otTws+vwE+xrBpuciRLEy5cEaLifDCIC/G\nYfs1l7FnlYoqxJFwBDCRqUIrybAOz9EuWDvTbOitopbTN3KTSmM3MegF78Rd\nD2ZIDxky9Qw/jFPhoSHKKM0qS0UhInz9ZNkhWLXrbxddqbE3YX0lBqIXkfPG\nLmTkwmr8uITgnjUP38SQjtFhaLm/tkjm9TX9100D8Mdmo76TqyCYxlSM21iy\nHJJCvGCJhIuyJTncRzArotNI2jm86DgXd13k6TpWocq9x5zmHAoIaHbwSfUu\ntHW5AjawrB83Sz1HzLYYv2Oc3N+wIPIvDKeSCdT0P+Em8axbH6sPmWFq/9B9\nlZ/k5GcXDNUjyvjJRJtE730PrpkvjRhgbgufLktCSBZogkXQpRgTzFk/SOMW\n2JgN\r\n=2GkB\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"e5b4831aec2400bcd99b87f3537adb62cf047dc2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.1ae8130ce.0","@material/feature-targeting":"6.0.0-canary.1ae8130ce.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_6.0.0-canary.1ae8130ce.0_1583881499866_0.6167953754442572","host":"s3://npm-registry-packages"}},"6.0.0-canary.8639c2690.0":{"name":"@material/shape","version":"6.0.0-canary.8639c2690.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@6.0.0-canary.8639c2690.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"79aeba21d1194a631de6aeba8b4fb7dadbe842fb","tarball":"https://registry.npmjs.org/@material/shape/-/shape-6.0.0-canary.8639c2690.0.tgz","fileCount":13,"integrity":"sha512-3xIk9ARhtHd8tg/qy8TcXSZPZzyoaShanPLC5Gz9g08mSWmUcooq5W1M8qO9Mz4tB6TkUWiUooi8Rx8yzDMJ8w==","signatures":[{"sig":"MEUCIQC6w2I6vD7PzbkC9mZlc5S3Ggur5+QXOdZn07VBxoQK9wIgPzVfZfPQ/71ymfQBuuHo+exAQdS/cDHshBgCOANDoTI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaIYPCRA9TVsSAnZWagAACBsP/i/Xi00qY154rC/BSXNA\n58S95YkT1PaI1uB8U0HwtPteLT9Q1Ek4evOua7GrtN9uc3zrZuzzG1pFxcjE\nKJodW/sbjt92QUD78my5MXwExKGA7ySa1yZCBuwjzYMSDr7fGqGVkb7PO37/\nZo1912CxLxuj84dJtbYACyhXsd5pNNVq3H/jXWupp4AzzIhEPRv3zIDObKQb\nrq3cT8sIGTmFLYFPdd2Rh+HYlvDdCZhkvcS/dIPAnIPHA0pV0dqkUPi1g3cX\nWgd1/72xYvbrSw+dyfibHdCjQ0HgSmYooaHyZPWrChF3tSp57ciWXUJY5O1m\n0BUfCyzvi2CtsLPrkF2PiTKGI02yxv01xlQbsEaz038n9Ej436VbjLJy0qYl\nkez3HQdrQO022I+ptn7ylneGW/dBmCWK07wzZ5V0fLGpVejbQ3ZpNszvAk0j\n47f8x7seGLZ0dvm67IGGCPFut5B31W4jqiRwHZatKP/gPngRa/lKwddeoDD0\nkhYtCXBMzuEleguLmkAfYCI8GAGJv/LEi0jlWcjDWyufA+Q6DdF8TF6FIImR\nBZBbkvwoffHq9hPP9s5qGQnfeVoXtMqV1y2AlHzaAC7LugQFcB+sH/Vn804K\nBoE4SiReFh7wM/uw/avWBlDg8yx4/nnGO5JFaeNdhbNv0PJ6huQiqgN2YksQ\n66uE\r\n=13C5\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"3834dd0603f05e8710f74b00560d4aeb887e5b82","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.8639c2690.0","@material/feature-targeting":"6.0.0-canary.8639c2690.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_6.0.0-canary.8639c2690.0_1583908367135_0.011038993858174528","host":"s3://npm-registry-packages"}},"6.0.0-canary.d5808057f.0":{"name":"@material/shape","version":"6.0.0-canary.d5808057f.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@6.0.0-canary.d5808057f.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6c6823be4b63f125422c9bc6b7dbd138858fb3fd","tarball":"https://registry.npmjs.org/@material/shape/-/shape-6.0.0-canary.d5808057f.0.tgz","fileCount":13,"integrity":"sha512-aK6yosG81h9qhF55EwA+ytmyL0DWGLU0Tge9tIVkxJ8PR+ODoW7BKv8pPiFM/4q6mUj8QgxAwznVX+XCoSpPsg==","signatures":[{"sig":"MEYCIQDWJ3XKgAOvDSnbYqxoe0QIDUs6tJip3ie8o3YwCqpS5AIhAPFbMlKbhCAooJFm7VOXkmJJrNBtZJsLe4o8D3uAYL5F","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaRDiCRA9TVsSAnZWagAAnBEP/ic42zTnUe7kI97vDm1w\nO0fuqo+RB24nB/fACedL1Ouk8fPOUZplecftZQXEz+ePjxZeMMiDoM+yZKfI\n+f10GDo9BkGvnROB+IMhlhk0BGlaLn7XB3reEVItw9EzzUyBb53efNSorVN8\n3jcTLixVRwuLxC7hjIWapTPc3E2NxFIuAyCDXWPjwNLhLHH64vahLaqV8/Z+\nZA2TD6c/1WPY/PWE8EcRVABLfGna/mGq65O2H55SADobZIN1R2ONbTQBNs0p\nGre9Lu0V0qwxcCIrokWdlRYMeG4Qw68NNqDYlZzyKAicvuF7GSc2aRGHktoZ\nE5GZxFiwVPGAzF6OoAuXZKiiwS82XruijFrggu10e5qn+QqA10NOliE4eeJN\nn4GvxGWvo7NrujfYa3KBVOABGSc06mdE/kR/51vOYHngRBD98lZyNl04BBoQ\n4SKIol6sp/WqNlyV9omyDVsn0c8oKX4+pw5LjqjxxTPEnYDM0QvRUZ4Ifh+x\n3tg7qOXl44CWYPoGA/ev5WHjKcNOs1bmqLpFDwksGbEySEW7mvJ1mQCzc6RI\nSEdW53S2LXCfOX+uKLD4G24EiFqMTxmV2+dTRW60bLcLHvzZmcJqzMXq0+W7\nrTVa6FLDFxcVTHEQYFZc9Ji9FuffaFDl3aJZK1Wrg5Oos7fQbpVwmmxHEoF+\nRBHj\r\n=MBwr\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"00a6ffbbceea71ed3f3126dbce724119ddc06379","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.d5808057f.0","@material/feature-targeting":"6.0.0-canary.d5808057f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_6.0.0-canary.d5808057f.0_1583943905695_0.26021779961449165","host":"s3://npm-registry-packages"}},"6.0.0-canary.b3f58203d.0":{"name":"@material/shape","version":"6.0.0-canary.b3f58203d.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@6.0.0-canary.b3f58203d.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8813f9b83f98d64d8530afd76d626187e992476b","tarball":"https://registry.npmjs.org/@material/shape/-/shape-6.0.0-canary.b3f58203d.0.tgz","fileCount":13,"integrity":"sha512-kMhseHcU0Pk8UZ0nWWkSQ5iJjNBgWirH70tgFVcUXrfMdKfZ5JURH9Zwb1yQ4m+44qxKLzX8ZnhTl4YoAxCy2w==","signatures":[{"sig":"MEUCIFH/0CVEYqTpCygDt9nwoIFkxUT8qMQrvf4dyv7n9GeAAiEAz0zdlgRsAlnl4OZ8liqDH0TYS2iwx2M1qkjkaSUeQvE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaT39CRA9TVsSAnZWagAAhfkQAInEXtNZ7VTSjIwc+u+U\nuotsix98sfBnpRJyVyue+SlmlRcM+DB/01TgfdNNCYlKFlbSPEV5cWM2+g9F\ni1qZBUws57ofBAOQqbtzObG31MhOOMEVNXX6hUFlXZQdoBRD+vyQ4D+qZlnA\nxSxJiJKzoipQtkDO9b9TnsTyNsUCshwCdMUdIsU27TBPcX1nuNvmU6jG68ep\nmztfxNkUiQIOR3wLri1SW3elyRH9hghx1OhCzaa8wn+bgj01Tt8oF/hAamRn\nTdC5jrL/QLsmQSxUhG5mpLShSsEPnk9RHs67FHDYvJQzZg8p6ER/FQuHh57B\nwh2zav+4RwNXBsWQs/l26oq4MUsJo345UtlOOUtx7WeXNdjdAb6jxQBLcOxI\n6MqskNj1+oGvOUKX17b63ABby7tidPJZzc8vzzridsEC0/GZL2d3lkqS+AZ2\nD8YazpVEW62u9Lza4yzhnBxZa5oO2u5Xa8PNOr2T/pMXepySL0ZlMFpv4jLb\npGy/sL1bvvM1xodd+c9OCfe09O5dPgaWW320nRKE7ksuP8Fm8H55Awen2ygk\nlnbPAWfLgGmbiOp6ZPOTIHKA0Cx8hiVFXP4tzc8hr/jj7fPwOWmZZa+myMxm\nocOOqF9ETcVu7CxyB6okK3X/PMm7UFTNGPjAUmlKD8VOh2DT/hvvZJQWEbnK\n96mw\r\n=9elP\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"b9ad376b2ebba49982e9b605c903e752e4fb28cc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.b3f58203d.0","@material/feature-targeting":"6.0.0-canary.b3f58203d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_6.0.0-canary.b3f58203d.0_1583955452665_0.2940824883846833","host":"s3://npm-registry-packages"}},"6.0.0-canary.bec065920.0":{"name":"@material/shape","version":"6.0.0-canary.bec065920.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@6.0.0-canary.bec065920.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ff7b21a5cb9bd4e74c1555d88868822aeef4b7e2","tarball":"https://registry.npmjs.org/@material/shape/-/shape-6.0.0-canary.bec065920.0.tgz","fileCount":13,"integrity":"sha512-GQ9PypoNZgOleWq8yNTWHUeWcfavmqcko77k48FSDQ+k9HDIuOP41Sv2dcbs0bY2GupAg0nOm6Q9XlQabx00lw==","signatures":[{"sig":"MEYCIQCcarxIA3l5ebCzEYiZsxSzGKBbPKJ8E0v6W22bEdEmgQIhANwrJM7qxBdSQ5Bft0IkkuNKWmvdnuCvXUdBYy2OKlaq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeapl2CRA9TVsSAnZWagAAbtgP/2YhoIY1/JIZChQnd2Nx\na02rZ3B7eqlFlQFR6f5ULM1SLNQfXGojeRrjcllv2iULhyNpk+6a+uB7bhRa\nboYqkyojifhx/49xU8Xk/dbUmpqTJD69Z25NH1jt7k0KH8PdnqktQ86HcjPp\nycJcRfHqyu0OUm6kMarGfwOS2PhR1kLMuTWXvDKLOtR5ralBWkCQN0l6WHic\nf34drzKZbFBX6xKQ8t/i+nT1NiK4dmAaJwo6epi2aZ1x1ku/Zp0et4tDW907\nu4pQT40glDSQ65Rn0JRvAgEGt4O42RCOb/IgAngOlv9ggL1+/3OJqyKfDqfZ\nsjfVdMoHSKYz+q8ZuW/J0bNTYOyS5zDJpcyc1n5T2uGglQ/7Nl/hFFXhnytB\nvksD0tSwZ6urf++ohI6SGEGykRrJL8R8xTvc/elEvApO2XaxPyuGHMp51l4u\nTS6niI0x3zfT0BQQUVd9DS0AdL4d/V8/qlNoY67wOUpprxRs2skP8+jvtnvx\nOSCblFu2Zj/uc5oxh4T6b7XtT7pjt6Yf9YasH4W8WRFSNuGFca+K9s4fET5P\nq9HhIBpVEd7YQJUDdC6GFcByMXsl3aGn5CPSQSWaFkl438RSY7rXUbN4Y6yR\nKJqDnPLFIWL+OYpoBf8jrF7FiK+errMfpvoRowmxkcFFbWY8DvH9zSlsDmvw\n81Qk\r\n=u+mN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"ff203cc1a864067909d369c1408fa7ce64954660","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.bec065920.0","@material/feature-targeting":"6.0.0-canary.bec065920.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_6.0.0-canary.bec065920.0_1584044406288_0.03819460310765166","host":"s3://npm-registry-packages"}},"6.0.0-canary.776291ef0.0":{"name":"@material/shape","version":"6.0.0-canary.776291ef0.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@6.0.0-canary.776291ef0.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a6c952dba85ddf7ecd5ada95d6dc4d9833f4c8fd","tarball":"https://registry.npmjs.org/@material/shape/-/shape-6.0.0-canary.776291ef0.0.tgz","fileCount":13,"integrity":"sha512-oiQBlstsqBOt5s6bHKbYiuwoxR99ipJXIKERMlaJr5N0Ed1AzAUAT4b3MNDcV9pMBxXpOEY88369dM81jmf2dw==","signatures":[{"sig":"MEYCIQCHQHZnMm7k4Y37qsgVHl9L6ljgS3KjfETino6Ogs3SUAIhANi4vOX0ekx0mFspnc1BRZq2PqBV9sH1wqYnbnpW0PxX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecSL6CRA9TVsSAnZWagAAbg4P/Ar9dOEyvQHmTqtKxAPK\nI3RR/H9Fb/4lMcFgzLY446cRCDHMkrrSB1Yj4kBG52pjeNvLDdSQxQj45qFy\nIhnt//SGao2IhpqXhcCgnj1aZujBaSL/qrxqIK1XCG9G48EEjlLNGsZeFhhe\nMofNmzdX1KIWHrg/UUjZ5ZbrriCokSKeyXKzyj3CYOPdJIdnF7LWetg1HoNO\n9eHtG3q5VYTHqvdLG85hQBFGmt4wP/m1rB1b7tFkFyaSNMSI5MEI4cCJebEA\nsO/UmaDhQkPb7o1VSCftxyjUnISupzlqDORUbqtsEmkMBo1F2udQAxUxrdBj\nKBUEbSCmCxip+DhawmKnRdudpQ5u8v4vduiR87qgIbNiVVMt43idb4FhM2/Z\nzE5Vmx9SvAoomqhNUBkEk45KHvMdHNyscPk02sDB2DDOeoXCRW8TTAMhW9QK\nEWRxM6a8QcYuyoQH41ryq4+56x31OUJiceyMqVZei//Jhr/qls6FsmksxMT5\nckXQ37Ly5prD2L6t1itXug3iHjD5ruAUe9PoqVoMKrZ0Q50ISnTjcjLpUhW5\n0nOCp4Gmvk0WADoSqWuabB+a486t+uaC/TWiL7VOhFwQu7Np6JRu+BTDTk21\n264KzqfvFEPze5IA8uEhoHTMjZnH/JkgRsAXn/L7//RCI1wclgP6C0dpGopr\nrcxV\r\n=U2Sk\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"32f95102d2dd047c662697060685989ec64bb05a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.776291ef0.0","@material/feature-targeting":"6.0.0-canary.776291ef0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_6.0.0-canary.776291ef0.0_1584472825867_0.7976324122827421","host":"s3://npm-registry-packages"}},"6.0.0-canary.ece19f3dd.0":{"name":"@material/shape","version":"6.0.0-canary.ece19f3dd.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@6.0.0-canary.ece19f3dd.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9191df5b8dee355d4484910a8399aea2caca3218","tarball":"https://registry.npmjs.org/@material/shape/-/shape-6.0.0-canary.ece19f3dd.0.tgz","fileCount":13,"integrity":"sha512-7zQo0QTBJlvN+l+O+RCC6tY3SEaIelt0626kajkmzrCfgz5JDZhjGI2rPR8x/LgQ5ugqknqE3TL30L1Osbz0ag==","signatures":[{"sig":"MEUCIQDtxSKpkUUIRxOotPqJxjjb1zDaG6EX38r7qwTmMTSDLwIgIqGm4CkZxpU3BEuMg0zerf6pVQkU4YObEbxYf+6ybYY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecUiTCRA9TVsSAnZWagAAT6UP/j/c7GsytlkkYt5atD7H\ncho1ohIXCAEzcPVrRSCyD/UG9DfEdYFOvZzELz4bA6aZD1mv8ZojqLHKhvqA\nAOGorugvRE+0gMqsSCQqL+lY5767tr46ESdg6BafihmF9sI5rwqvzpCNNCYD\nyB3V/8sXqLWRtv6KZQupwp0HEBV1+QGNbdVOpH4k6aYMTL3AKS8hEveX9OSm\ns9OUtq3y6LhZ1kaQaqJVozlWK5v+2gYIAtshyBkwg0rtGcU8wSP/hyp6sLPT\nj8J2taGULbDXG+Buf9dr4KFEETQd92tBwqRMAZK+G84GpHA04JB5RFJI+pN+\nr8LYFKKQ9UlmE4esQyhay1XnAD10TNJvTRnHo7DCrbzJ6xE95MvzL7MOUgyI\n0mU41ygmPuxhnzHE9QUhHB2+zlDEOobsxY9MCAZByqzXF85arh41M4ErMjsu\nYic9gmkSmSUIgU2BjPYjoFKZQ7ZJmzDIQecZkGfDjN4BQwzFYjco1cfn4N73\nGdqmw6y+Mr0iAqAEvUsqtDyyn9I/AXH1zAjJcqDD6vLrKC4nnZ16Uv78LDWo\nqhiHOrkKu0pwGTmEtXOy3cbknMZC8fVGFMOaecf9pA37BN5iINS9+eQx6NMT\nYS4iYk9QmnXXyQM7RWf+ar3nfyDAsCdnKuydD3dlaFqTikOwNZEXWtGfcmSl\nZ94c\r\n=Cr2R\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"41a07e9906ac09ddaefa5cbf8327260df4eacd59","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.ece19f3dd.0","@material/feature-targeting":"6.0.0-canary.ece19f3dd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_6.0.0-canary.ece19f3dd.0_1584482450839_0.7520443854839838","host":"s3://npm-registry-packages"}},"6.0.0-canary.4dc45af6c.0":{"name":"@material/shape","version":"6.0.0-canary.4dc45af6c.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@6.0.0-canary.4dc45af6c.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"966e7a3605c9af98d721816d655ace8fe7cd3678","tarball":"https://registry.npmjs.org/@material/shape/-/shape-6.0.0-canary.4dc45af6c.0.tgz","fileCount":13,"integrity":"sha512-r+8DAtV4cwa0YCswOgdrx4NXsaD2Zc5zpvPOgFxfL7fcyD0hRuihMUwn2PDqeEckX+I383GzPv4EMWsH0FbCkw==","signatures":[{"sig":"MEYCIQCf8G2HuxO7zxm2d77OyQA1q8LyvV+koqBKLqhkQoMmlAIhAKaZO/yRH7HJmtDBnW7f/twTXZzGyjSGVFixvZimORlx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecX21CRA9TVsSAnZWagAAEAkP/2RGruV+XC8E7EDoZLQq\nzTl5mTlXz0vPrbLyaTTIs7pbdulyTfwNvu8vejKDWRkjOt1G82oVLLHPlgQa\naocGDgKaNzdZuCuH+MnlslesPXgEeX+ssLoIfVMyGfRxFGHN14yzVFNZLSPC\njeInjlOnsiiuRamOE9Ub9lMinrG55octIFmY6hqcIGtLWeXTC4YI+y/9NPuT\nXhXZyfBMtsavU4bXo2vuVobHzq3urmS5SwuEqDKJq5dIwIMLmE4TaTICT/sI\nlt+m7DQsuyhKLLE/NWNCXeYuzSMEhPLyyaHWwgZoC/GAVv9mRC/9ClVDSHOX\nmxRrk2VqqVUrNNO/sxYekh8jv0Y7ps3DnaJrZp8Y6Lj2Jkw4WooO93iAHT8U\nZVafvYAWJX61jlvik8gDjU7SejQjDWQGcxxEvEez9BBZTGsVdKZsU+0yNGTi\n+LPoD8Hth8yWldxi9nYK+a/2dn43T9Fgk9U0IsLz5Z55FqRocFLqnZsUao80\n4LeGF6O0NrKKHwq+o0I1lSO3g5h80jERQIUZIJA1eSDQYiz4Q681wslec3qt\nM9jR9T90+gLHO7rvLnnUlH3vgwt8cQPcbZNZhWmRzhRcD3voViXNY1g8S/py\nkOhnnYz0K/BS1gw5tzCMaC+VZLV630Jqe7AqsA9PMX+9q/N8REBlmodqzr9H\n7BDe\r\n=LI4U\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"a2b97fbd4b046de86f7e8aac6b54c5a6d31583b0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.4dc45af6c.0","@material/feature-targeting":"6.0.0-canary.4dc45af6c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_6.0.0-canary.4dc45af6c.0_1584496053021_0.8799017577109736","host":"s3://npm-registry-packages"}},"6.0.0-canary.6b48781bf.0":{"name":"@material/shape","version":"6.0.0-canary.6b48781bf.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@6.0.0-canary.6b48781bf.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"876571deaef5c773289351db3003561d0ddc0296","tarball":"https://registry.npmjs.org/@material/shape/-/shape-6.0.0-canary.6b48781bf.0.tgz","fileCount":13,"integrity":"sha512-F5obM62hspkemYgz6i9XMs3r2KnDX/8jUDGOqCcGVrMJvCUMID9luzX2MOIBvRNKghyAjGfApQ95KqvQNAzEIg==","signatures":[{"sig":"MEQCIHIXUJmTdiT/nEAljmvqkD32DZdMjjhI5ARUO/lcGOhwAiAb0mOWrR1oAxaqpagCsMM7giQYO7U2noUbgsOyfEPfsw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecj99CRA9TVsSAnZWagAAZ5IP/RwRix9LMPp93791Ou5o\n772Ha7brbNZDg/6FXxdRatMTy+j7sjF9WUE5PtABHwwPtPI1pcMEVV54k2qi\nPlg2cCFJ2whavZXWd2EjYe3WGx69+D3u47zH6LZtwaiQ2y8r0U3nvfZ6swzx\n8JRn3xzrsTuDNBxr4AG1TUzFNM+yi4/SSBzYI+Wy1vmq/e1vdxsSGl0UW+ZA\nFKUZ2dEogLuTsL7lF3HDhH+97PZfQFOgP2B8C1xoz5NLUAB/5A/rKH4lsNmq\nkcRWrpGGL+ZZrZib2dJtyEsuSomeIa2gUpJMR6W7aoAJuBJJCwXtdNvp9Saa\nAf8x9lO+JpBfcDyY5tD+XxegS7M6DEJEVfGqNJLomlVkesLEvC6rdosokfLP\n1EkjXIWWSlxSltHfGebJ+GNSyKxlokLGLHaE9RnzwyL1z1bCJdny1Xz4Cwwp\nFlYJXg17QerslhCzIkyZxpoBQJaDI3KistM6ZIRmN1Y4xF4spcn/LC1N6Bgu\nYmiNupLZ/B7YuH2FDOQaBL+WFxMAYtWRu/XwpDJDK9iMMjiQe6/kDkzO8bkT\naz8/JzkTfw3etIrzdg8dao+PRt1GUerp+H3UoS2S4/gYoJP23bJErk8JngPn\nXFVAuI+5GVEzfKEXn6ffyo/SwWKf5POmg0a+UnceYLcyklX1aB8jhGbvBAi0\n7kZn\r\n=fk+K\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"1da9fc619190678090689bcdcd73eb5885c8a35b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.6b48781bf.0","@material/feature-targeting":"6.0.0-canary.6b48781bf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_6.0.0-canary.6b48781bf.0_1584545660579_0.671835362127361","host":"s3://npm-registry-packages"}},"6.0.0-canary.a88c8e4dc.0":{"name":"@material/shape","version":"6.0.0-canary.a88c8e4dc.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@6.0.0-canary.a88c8e4dc.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2bc24d3aefb3af6543583c263da05cb22a5b6975","tarball":"https://registry.npmjs.org/@material/shape/-/shape-6.0.0-canary.a88c8e4dc.0.tgz","fileCount":13,"integrity":"sha512-d/Ng0mXr7sgH9qiXOJQb08c7wUPBkaeLQrbri5fLuM2XuUQIauvSeFqtooT9g1wmXuSzvDbhSNhYVZbyNHLJWQ==","signatures":[{"sig":"MEUCIQCd67bGWw8wRI+hVeA+802619pS7Zr+MzdsPLugCgiWDQIgCYkne8g+x3ncOQdEMvq+mOgFTbsCbquVBJaDNeW/Qds=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJec61hCRA9TVsSAnZWagAA7wcP/jnh+GnzZ32ibfg+Zsqr\nv+OEcb5T7sepk5lpHTY5ZXo2oURH585lGX0EXzOD+EC+SPwERUtIF3/NupPu\nQp3b0zv37hyYjnVpTHDBekbedAcNr+t7S2rp7kGSG0wQrVVMAc1a7q1fyrsQ\n9eVJnUuNXwB3YTyA/qh7XfSvt9RkJAaMmGA57yHK57nbzzwQfnhmoHagqAB8\nH3pkM3rkKdmA3GcxeYoo/azqKrrlOs4DKDNCQydJKYo4reeMLi35FK/iyNkC\nHXVcrqJcMhe8mSduVTdUtysF5Mxd6LmgUUJDhpVHoY+I1Yq+yz+gJZpNPoQt\nfLPgl5+dIy+xcPakeefW8kBuJQ5iLIAF4hHtwnbVKxRY+98ICsQPu4oRsXD7\nuvlk2DSwsFwb84WtUXkp90Lbayf2+X962eUiiu0HoFF1KiYoLFZWvcVRiYdO\nxNoj5cBYut9a6P9yDeM7WRhU5BZMPaf2xSmjaK2EXHyHi2MA3NyNedPHTwWJ\nwfW2UKC4BgOS3Nw8jGn7wAwWvkYqoSTHw6gh+e0urwCjq6jWcbXA2eLrDfnR\nSo2xOB2sfXoxVCTRtRc4xTUcO3xRfcifuM6fdxYPlDdjGgrik+p2qaz8KrnR\nJc68RovqHsC4x0mt2sGw+FNt2ja+/m4zHWxsWHvGEhrRJzkL9MUHY7RFnMeq\nzZBx\r\n=/++P\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"3d8bc73a5f46456d2ada622785f02cbd3b81c6a9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.a88c8e4dc.0","@material/feature-targeting":"6.0.0-canary.a88c8e4dc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_6.0.0-canary.a88c8e4dc.0_1584639328631_0.12921490841116334","host":"s3://npm-registry-packages"}},"6.0.0-canary.cafe18860.0":{"name":"@material/shape","version":"6.0.0-canary.cafe18860.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@6.0.0-canary.cafe18860.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ad2f05d62e3f68a47ef3aded6f2de61843f6ffbc","tarball":"https://registry.npmjs.org/@material/shape/-/shape-6.0.0-canary.cafe18860.0.tgz","fileCount":13,"integrity":"sha512-1vZGQYHmNoRCnExixMk3vjce+jrLK0qqdWBCLLbvTnHPJJYMNbHFtMHnjkGE0Fo4Wv3S+hdICx37yST272WuUA==","signatures":[{"sig":"MEYCIQCF2aIfmS0/nGzhfMRaQNz9t7Gimszp3vvskSmDK/bosQIhANPkSYbjRiprELfOtnQJDldekPAKGkwH6SxivqIC90Pu","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJedNjSCRA9TVsSAnZWagAAIWkP/0f6zLEaqOx+yNf62W+7\ny/auWZG2hvh//kx2oGLQXRqc0Zx9iRdQs1LAZ1JPr4J7BTd7I5ZvXPva/89i\nUoha7Yw/0nP3bAbHWu7rO2x6C6zZizkqY8VfD5tgor2XymcOtDB4lb8TEZzJ\nTuYlIATWCMaBO/Al2Fepmwye6sb+XLwbBSKhThbFjY8VEPYudXtnRcvwLjD2\n5kk3OgRB9clhvfRczsVsXhJY3LiMVKlwSDbfSZPcUlFW313Tgj6fP98zU12R\nC5DTntOPv9/8LhrI8yGb0nwzKzyVofXYONhGpZ1UFNwxWd1WyX/VqoP4gSbi\nrI3RiGLnvceSWRROGeruXqyJV470un5HQSE8moPdta+2OLMIT4MhhsgdpoLr\npYRnhdUmkfongV7pPJHGVCEunoI+seNJOw6a0kA6kkcz8O2H5VI1aQyPXQ8X\nMzVbidR7rI3xxp5YC5Ulk/V3DypxLAwFyHe4r4ZA+IHD1v+k/RFOiJBbkViz\nwIUnJaaqgb4M56PfaAJ4l1R78wgwo9w4Me5q5JZicXiTsc2m3CnHlBJWbnI5\nIjTh/BOXXy9k9wMuuO60mJCIAAdsHX8x71xi90P3RqHQxIm5A3HHTrNC8y1y\nFDHU+0lARr+Kl/f6nxzwnxNIHmnrju4yeEwrD9rL94SfNsMwCx9m4bMBG/pM\nK70t\r\n=epbU\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"51706b933143947baefab6db8cd069a22ed080ae","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.cafe18860.0","@material/feature-targeting":"6.0.0-canary.cafe18860.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_6.0.0-canary.cafe18860.0_1584715986038_0.15721900541272382","host":"s3://npm-registry-packages"}},"6.0.0-canary.35a32aaea.0":{"name":"@material/shape","version":"6.0.0-canary.35a32aaea.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@6.0.0-canary.35a32aaea.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3b401c74d310ed11b08f1e568641866d53d519df","tarball":"https://registry.npmjs.org/@material/shape/-/shape-6.0.0-canary.35a32aaea.0.tgz","fileCount":13,"integrity":"sha512-4QN2Ura9Z3sdYwbnqGDaz+Cqq97skkdf+K10Ps6HH4j1sAmiwALDWO15llIHlLNSNKHcrrQwJeIei+q6rPdzXw==","signatures":[{"sig":"MEUCIQDg+83o6x1OsQ/yoSAeMHddL71NSGcVIo+eOYCe5JDg+gIgY7u/i++63BDzAgwwKx7LGNBUhUCmXnpkMyCJRqMDoUk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJedSBvCRA9TVsSAnZWagAA/voP/iXSlf+g8d3OXHFvc9H1\n8j+3A2k17KaSU6zYTzTrizPVpOkCL7GVkaNwyukZYwk8EfPjuQb2sGdbk4G8\nishgDh3eo3c2O6P0ISK5yC8/Dy/grZWZxk2rZYZGTVWhVkRTdpGtbbqzf5BY\nWVRTRAkJqW/+wuPrTDJdPK+DekyBlfoNLdzA2cyrPo+A2Qvcsbu3EX1hjmrT\nai8M71nsujJy/Alt6TaLxIDOcfOpFJMIKko62y92IWDeNT2njCbLOuJJipXA\nINrsZnWHOYrK7hrP2DvhRuX+IL9bMPpUlMJU/p+Os00rX2tPjZlehtHboNcu\nCe8y7K288oS6uuLVgr+dUOvS/DEMAmi63jwvJaNUYTgt0jljT7xP9JVSHAnJ\n2uTUUnDEcEgLvMD8ay/A7LaiN1U0dsEPtS4MCd+CRPN4K3mAqrKSKGkS5Tk/\nKIRpWbTzajQHtquz0hFtrgFmZgmdLg9k7wRyQtojVMXbuKjizcT10rT+XVh9\nIi/FjXVFSKdYdsQzZ16qABKd8WHLErV5ce67S9y94B3NvzQMOviFvy84DuMw\nTU2WE9ssw1BK9HYqWMMz8OVWl6u0nzyXXeMXxvpCKIpVPGoKk3Zvc/7EbvtW\n8W19U3p/Hwgn1PT5jz99Z98682jAo+fyBj9hod+RfB03HyzfryvM8LuzLNfX\nlRcm\r\n=35kC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"09df3d66223ea8f4d4a6ee61b9e34bfe08387774","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.35a32aaea.0","@material/feature-targeting":"6.0.0-canary.35a32aaea.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_6.0.0-canary.35a32aaea.0_1584734318600_0.2729738668638273","host":"s3://npm-registry-packages"}},"6.0.0-canary.e75deb854.0":{"name":"@material/shape","version":"6.0.0-canary.e75deb854.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@6.0.0-canary.e75deb854.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6102b5d24fd2bff22c600c65b9eba2d9e993efc4","tarball":"https://registry.npmjs.org/@material/shape/-/shape-6.0.0-canary.e75deb854.0.tgz","fileCount":13,"integrity":"sha512-BBc6T1i6/6j2SNJjWsAbIVfxcaVC+PBYMLsw+bX90nNAwoIzP8/7oU07SsVlBK67ZZSMuzKe49y1Hy+X7ZB1AQ==","signatures":[{"sig":"MEYCIQCj+3J1SxY/59u7P2FxVV65S2wahfQHltvXvkR/MRURXwIhANWQVhEJYjqZgy1ss7bzvGfbcLTzwD02rpyl23wac200","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJedUBTCRA9TVsSAnZWagAAFP8QAImbynWriaJpHhfuCPxi\n/40EqGdoejZiXvoHxfUyzCRYnSCyhgRS3UMNrQXQXUcBorBlchCoNkVv5Cph\nzhLKODhdnrySM6LG1j4aUbQYYbQQbUfd9umr57W4BCZp2zb0DWPg4H8Zayei\nrHkZ9wEKO4qJUpc1ordFTUdU8rFCaiLaLvw83WbzM8AODZGjWLTZIB4SbH3N\nEf8/zcCB8KGorVPZB+YgZ+rV1K4oiYQYVjBfNdjcrOYyD/G+LZ2uc0BCRB3J\ndNAFJdFoyNY2zNLCJIAmCOn+S0jlci4nIjfG7pQ6OOq3GG5Zdfw3jHYLKJj5\n7PWUMB+dLeaU5gCO+k/SSYREhgfnEOtNMsxXTwNLI0jLoVpHyWsHhV/Qjp2o\nFGAZHhh68Y1xth86bFf7dEP7Yxc1TXTXseeW3dOANZ1Q1hl+s1aOYBYmbG0R\nawuORZYiJBbnAbWmX+vt+Fs2L9jug8R+jYxJO9jCebxOtogEsujJ/9XIok1A\nLOx+GekrysRNknFtNE2y1WkhFBMGZE/lGun5oHsdwu2NUfgZZOyGn3hg8EVT\nqLfQFAlVTmPVgd3vmdoP4xQju1sJxJb2L9whqcFLrnLwP9LpTI0ZdKioOncj\nB8C5vfd4Hc+hgcCqT5LveyeMV561jWssBUijTr7tbmXz08d4m8In9bNVIMnu\nKE1f\r\n=JROe\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"a461f6b9120827a65ed980dcaae3ff77d0581d82","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.e75deb854.0","@material/feature-targeting":"6.0.0-canary.e75deb854.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_6.0.0-canary.e75deb854.0_1584742482594_0.5183953263223824","host":"s3://npm-registry-packages"}},"6.0.0-canary.2cc6966f6.0":{"name":"@material/shape","version":"6.0.0-canary.2cc6966f6.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@6.0.0-canary.2cc6966f6.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2f5f498616108fe4370be9017e5ddd087121f587","tarball":"https://registry.npmjs.org/@material/shape/-/shape-6.0.0-canary.2cc6966f6.0.tgz","fileCount":13,"integrity":"sha512-1ISyc81KDOFpOUzGm8IJXeGdIHtyaFaq+SQnwFGXtzlhHrCTpbVz/mG/M8zYWn78Fl07yR4pJeu+9etZYFp7gg==","signatures":[{"sig":"MEQCICf8G4Dep9WTq346dCa90V2ynR2fZEU227PD+9GQLEuyAiA9CvnsdgrEDP4UK8rQGsHO2A0z7bZ7PZzMD5Lg6MlhlQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeelS1CRA9TVsSAnZWagAAFtYP/1U9/KB9S6ShGlP62dwn\nEAEo1EbIP77B0Qrsp1S/kzjkrBR2I6CDOA+T3eXUVPq0N6bTixGKtM9sNV/A\nRnnAhLyKFQ+X5pG3bI+HLLcipbk73fsJG8t5BIfER+odI7eazE+8twC8TMfv\ne46cSVjjRSrEnZeit2D02U3vC4kqW61NJjKMXnZf6voq4ikuwyum+dK+/s4z\n7+rURzOp/pkvJLOw6IkE03+rsriBJpZBAQeGp7zyTfhoH4WMSX0bUdfL3WxN\n7PSNFclXXx3s2i/GpFg6saWAg5nsnhUoqgf6BoBMG2hcXAxzujW/IeQ/0Sv3\nnt9FOg7OTKVF3xAvdldh+qhOdTT3mOxXwIzTCNAEoqQAqY7vngjswODED73W\nAeowTrkEfxov5moiW9Z1kywX1uMlZGP1Nut4dkz+GDSVJHfIObBiV79/cIrR\nil08Se3WSFC5OKOoI8Sw1CEZNo1IgRjijSyf0JQ5oKpYepAuQeQ0ytiO9Ech\nloNw7A6JEJWH2IfzSJVXAd5jC6c03HdlOunU7VzXeUz6xbaRsUeh2xOmG151\nbumUNYOUFgc2wqrAgy59s1tHitgMbZRwch6XmUudyxBg1Jb/fyCUZCAlcT+5\nyzYAYXGg+YyIJnYJDqgnmSAkLjWBj3f4jYsnH86DF/CJsfBUXPZfRtaJm8u2\nbl9t\r\n=V2gw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"4af7a6e31c561afa46ba7b74cb35de52099583ed","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.2cc6966f6.0","@material/feature-targeting":"6.0.0-canary.2cc6966f6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_6.0.0-canary.2cc6966f6.0_1585075380698_0.35305846132189456","host":"s3://npm-registry-packages"}},"6.0.0-canary.8707953b6.0":{"name":"@material/shape","version":"6.0.0-canary.8707953b6.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@6.0.0-canary.8707953b6.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c93c5a57e375a94ee87b4f5a6172569a5958e00c","tarball":"https://registry.npmjs.org/@material/shape/-/shape-6.0.0-canary.8707953b6.0.tgz","fileCount":13,"integrity":"sha512-7bbJ0XYUJwBBW2cBH33inIh8fIqqnrh94rnaBL8I9V5Sch6kJgtYiUExUhyFc6zn1ZcxRfKT2a0tlUC24Vaqaw==","signatures":[{"sig":"MEUCIQCHyAUngyTqcdEoWgrPXmxxu1CHaZUcRYoRjFldGrxcJwIgMsgCtDFVs2Qv8+HisRfP8ogxauyDf6lrGw+o31tPhWc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeelWTCRA9TVsSAnZWagAACpUP/RxHr62GjeOu1BX2BHI5\nmEWEnaPj5ZrXIseAx7+kpbIGT49TDDsqQWpdoFe6ef5hSKsgDI+17kN2r2Ah\nAdnaSJF7DksW+rUQz2BGgLhrv4qH568zkd2xZEB/qeHvyF3SaWaHur+OhVXB\nTzXfR+ei5CkSLcLdh1dT8CVcHeSl0L9M0TlgBHbsCC6frCVhERED34iDnQiY\nWdRnNMCX2hI822F+Q9eELqRJZEj9es4WandM75uxFA5H5VMUKUn/XE5LFeUs\nPDKYG1H/McZdtJfooyAVHtTButjj69EUuDjfTCcocFpYGkjGUtPgZsc0oSCB\nKd0t8ldjS8xbR5D3HLxBQestHQp+KHxUFiw5coAZX7dpLfx8QYLUESMgKtWy\nPTjggq4bjkuT8l2De0Gv2pYt+umOGI1hBEzXf1PPseOmzV45UlAcCMEF6u5X\nXMPH9QR0pyt3k9qOKGO12udvoY38gsoKkJW4mitaBrVxx5sjAvSBKzQEUHBW\nCers1Ss1ndQmriSNKN+nl6cQLJG9DJ+En68C2LgHZ0vazqeFKhk116gKVsEU\n22H5ghGtK5ahzJoAXEUL5zu3KTfAORfBgzwNo69RH9ssyiZR6cMeJiQhRB7y\nS98pD41ReOTz0wWMooiqrTzKcT0PPXQTmunCkXMYD61gTDytobzXlXSxmlXb\nofHv\r\n=n4Ce\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"595709807214943e737834107d12d3318e69112f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.8707953b6.0","@material/feature-targeting":"6.0.0-canary.8707953b6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_6.0.0-canary.8707953b6.0_1585075603030_0.9835098418613595","host":"s3://npm-registry-packages"}},"6.0.0-canary.10af6cf39.0":{"name":"@material/shape","version":"6.0.0-canary.10af6cf39.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@6.0.0-canary.10af6cf39.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"31e3469050b143d6a191cf92d0a174ecb489a1ab","tarball":"https://registry.npmjs.org/@material/shape/-/shape-6.0.0-canary.10af6cf39.0.tgz","fileCount":13,"integrity":"sha512-VWItezQLBRioGXLlLRQqfBwphCbR2Hr850tWqj8MjLkauZvsailGzSnqL749RnPo1qFEcRh+zB6bhJtolshILw==","signatures":[{"sig":"MEQCIBB8okThGjb8Owg9caQpugDEb/yyi75qdfm30IUo/b+DAiAGsys/9EhYKa7NrcYQvx+YCMbN/oeVsIJgQL1roUKczQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJee6BWCRA9TVsSAnZWagAAg/cQAIcMC30D8/rEkk7J5zrw\nAZBuQf4oqwiqOV4qhhb5GdCxAbvn6dFzbKFOz/SX/a3nTH++qVLwflK5SCvn\nhaB3TreJsIhuChV/dzPriP6qTa+N3kuNMk4YbqzCbryn2Sb1lywTy+AM0BXU\nWUzloz5Z9t7pRNf4OcmYxGx+xqYqRiGkj3Uj5efQTZK9vpThxO+NynFFw70z\nz6hFrSKNYLhrqLY/QWrJGGjaIVBlJP8AYxYi7Uv0afj39QAdKvKAuOWu6/Pb\nLEo5nlAXTRd7uzXdh1nYbkJ0K9sRl1Zqrq28xjXL1L2GPbfJQoePuc0nMxak\n8IGeIhJlhegHDudR1voq2gwTQnpCpaFu4t5A3Vug4dy9mTublicT7HPKt5HA\nzD0J9xUvG2fESxTuBGx6yqJCo4lfWiAbpvYeWnO6YPYttg0VBBJxFXNqE5dn\n29NZCGzeqOWtf1QS27IggIuGYzOHmECC7vlj954p6vxiiZHklUM4tYQL/1rx\nnu1J3VGYA24rDZCh5blrdPNlP3Cf39oinydVnTq47ChAEaFy8GAE3XuA1csN\n26r2lXqneV7VI3E6vs6vXL/KRZh9xAYrfWsWZm2e0jWFx7gCy1iJz9W2lelJ\nyLhW6LAKk0EOhz8t9BfUfoL9JaKBuGVsjl7kW05vUFYAloJCX3fCxpIUH5G1\nls8A\r\n=KA63\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"d618b0c9ce2ac312ce4b887450bb947ed367e100","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.10af6cf39.0","@material/feature-targeting":"6.0.0-canary.10af6cf39.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_6.0.0-canary.10af6cf39.0_1585160277408_0.955835581452281","host":"s3://npm-registry-packages"}},"6.0.0-canary.7d8f9c8d7.0":{"name":"@material/shape","version":"6.0.0-canary.7d8f9c8d7.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@6.0.0-canary.7d8f9c8d7.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9d6f0b61f05c7f0939df4df8fe30b16ed4689e6c","tarball":"https://registry.npmjs.org/@material/shape/-/shape-6.0.0-canary.7d8f9c8d7.0.tgz","fileCount":13,"integrity":"sha512-Nc1N/1ZjsCV7AoHM8/KBTqyega/+yJ63yIS4yA7DVJn8U9brOzfUwbfuXCPy4U9lf2h6uH8mVbHkApHgbyWi3w==","signatures":[{"sig":"MEUCIQDeL2hu5k6SeeyvpN51+lRXsF/dK9jhyyMLHMQ3k6maPgIgWqeTom4oDUNUTpAiEptYuRidertnYvb+7bTiB/BuxHk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJefkAuCRA9TVsSAnZWagAANxcP/i6b/+l4hsseigy6jUSx\nEpSmrNXY8QPIsUrgT0IVXoB6TdS1/EfGRQLjMob1H2ZFqzSdFKgCFuW3BUVm\ntjbhxocttHbSycUnZAhXxRy3zCR3hQTx3E/BpIPCdLYItzNPZviRRxJA4kox\noJsWBBVbXfN1UU4f37rxJMPKEXMiGczd6nHLjLS55itCyEpVHbJd5c4TudKS\n1aeeDENZXUwVfk75hBQk47/LVU5m3gAVyZDUaZDu8I/I6yxjzz5Rw7DpvkOp\ns+uIfCcfNhRAREDPOdaDrU4Nnm2iLcJNqSmb7UDN8k5Viit45jSNguNNxE/F\n7bOi5HTRLcRSgxwWvpJPCRzqMJz30xW/gE9Y146E2k/d1gJkjhAVBAR2jd32\nEFfvG/6p2XxXc4mJCEh6Gn/1rl2QMDCyLEmPMQuPOBwGBHYCPSk9DzZAz98U\n5UbgSblkUqY6Cn9chFhnH+0g9tpBIuzk60P/SIr9TePmLEQzcv63YCimAnN8\neW5yG+XcSpRMxfzXMPD0dt0jIQHJWCRKVzzyTNgiAAbzG5ZNrvN+uZ1VPGI5\nkBOGzHAsbpYVWLrCORreIktYNLAuB8ShIASa8PGZ8bWXygmqf7gWvoFCIsep\nGDsvfzNh5ZYVDifLLk28FOKXZSXpsOHz3OaqbefQD8GMzTFtdXlPkCBmGQVC\n2Yo5\r\n=YrQz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"764519b823414bee993cab6845b42f5b60f03c1d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.7d8f9c8d7.0","@material/feature-targeting":"6.0.0-canary.7d8f9c8d7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_6.0.0-canary.7d8f9c8d7.0_1585332269788_0.7969440100246481","host":"s3://npm-registry-packages"}},"6.0.0-canary.d6315efe2.0":{"name":"@material/shape","version":"6.0.0-canary.d6315efe2.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@6.0.0-canary.d6315efe2.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7dd9f4802a3cb9a0d97336b81006c8b9129cd0ad","tarball":"https://registry.npmjs.org/@material/shape/-/shape-6.0.0-canary.d6315efe2.0.tgz","fileCount":13,"integrity":"sha512-0VnpfcnHZBLuVShUH6n2MXiMVje5dT0To9gV6WJJmuQyPTJbq2Gx4XUYK25DDPKt8/I8GUeU36gFd8pxxnHA5w==","signatures":[{"sig":"MEYCIQCgBIEMPp5RrBLlZljhBMri1d+ryjIv0zXcsWkuQZdEVQIhAI/2mDe7KMJgoeEldyfRTuUESHg2SKcZnBYTMLjleoSi","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeflpSCRA9TVsSAnZWagAA9ZQP/3D2t7Air9vKj6pbXujy\nolJmM788Xz8RoQPQy3p5bN7kvsJCwO6JqN7m9Zumy3AluMlHELlMBz7/gu9/\nKIY1VwveBbcsV8XfyfJxfeQNfUaCt6biZao/yI4e+C0FZu5A8GolTBp6sHVZ\nUkAuiHU0UL7dop3JatVMCTyYvKRT21wnog1Fu6mgGvgyrmFhniEOjEH3JYOV\nQFXAte0/VlWdFOQmsRYbSW4oH/cJuMVv/3in2u53IZa7iJ1i8Qspm/e+lxzc\nGJJLiPEjbS2na1yMMMkbcp2MGGZYVZCObXYf5DXu3hLNwWX6GZVaq2XFT6mi\nuK3SUmawqLoSYDT+gs9VCF9HuTrjlxxJ1nmA7BI3zuc31FknDkkmHEL2PAsN\nLP6UWpZxAZ+ejnlYmsHzd0SIXIbCF33Sfo4xlWKNjwY+j4mWABrJJZjwTOQA\no7ok4ACVxDUwW7yg6I2qw66HuBEsFlkXCxOHeGSIUDVCW57iVRLiKQ21K5gc\njOHOFT7Px3WP9ktxgoyi64QGfetTdhA+x3FM6byGjtcHgsztWkZ+tIIMbzX7\nIfTTv12ouP1qP6CGE6dCmCSux5kpuGMiiYFY+TYJusUDYcz7NU57MWhKzdzU\nGqv7WmKvv3n+U+1796bDQPfkusBwLvlQACFAc3Lw0MQs3VIeEAzQpsgicJTq\nJ1TE\r\n=lV1w\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"87fcfa262498dee051bef9a0a8e8b8f39869e6a0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.d6315efe2.0","@material/feature-targeting":"6.0.0-canary.d6315efe2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_6.0.0-canary.d6315efe2.0_1585338961948_0.07323324351455596","host":"s3://npm-registry-packages"}},"6.0.0-canary.a3016368d.0":{"name":"@material/shape","version":"6.0.0-canary.a3016368d.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@6.0.0-canary.a3016368d.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b3de767a3a217749a18a751c28f9f37918e40d7f","tarball":"https://registry.npmjs.org/@material/shape/-/shape-6.0.0-canary.a3016368d.0.tgz","fileCount":13,"integrity":"sha512-Oujp57LUZRlr/spAFZko8JDSFqqpgsnl1OjkTTsZGHAeWeEQoiz1BaByuwxF7wA3j/hY4wXUvG1rDMw5vbIftQ==","signatures":[{"sig":"MEYCIQDwfLxeQ/nNHwxpWWEQN7lfXHVIg9bvz6xamXr55nIfLAIhAObSMgas8Vs3Wp3eNFxDRQH98G0Oa2MS5/f5E5fAHuGd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJefm3NCRA9TVsSAnZWagAABykQAJkUu7bq2naLzFMWTFta\nm9ZupUrYIX/xDIdYB6rDRZFD+YjKcpIinshfwO4/riDl2cPsbXxvciCvJ5u3\nBwjQhpvqc94U97kpvzEUMrWarmZZkuTxkY8+hO5p2XSGk8qbdizjrdr05Kim\nlCH4VS/MLSK1775LF4V+ScZJYuArxLF9MH0OZyxvMBG5XKsWXdfD4ljdA/9Z\njiqbVPZvAx8BCeItyeSPboJcG23FyGeayRY4z0asl8nbIpl6w6ObC0oq/RLd\n6YczeyeTqnm4T+M+M1HxUadh8LKBQqBjuBZVCvf4skl/NFb6BDLstqSaNbZT\n6MyxGQ9Z88/4ynEtIO+1KHmjdaqvhddrFxB1eDkLjbGhcS2VtlsPFDxKT/2e\n5oiTreNTZiPCTLOs1rvULBsTe0/iYfUC4VCiPYSgDjoBhu+sqhUDDrOuoimM\nnMzCcCEp3REB4de3hE8TyQgYAA6vAzRG1ODjflH4IXOhcHoyJRjP3HZ5HBKj\nus0U0mM9yaUaYAB8B3KjJKKAcpwao7lKkiT7T6fmiLiylGwA/iTzHOE/dHn9\nj9YlN0kvPQqPic6Qe80Ef3mgKz3WjXyiSdTMhm0NVpQzH/XCKG+txLbXOPyA\nGRIWz+IPWOJQIS9Hmh9G3OY87ebGmlBDgDvqWwLmfoCdTtcQ4VDVxHloBDiF\nmS4K\r\n=F/d6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"e41b28d8c25aa5e36e88910a1404e7a0730c5d2d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.a3016368d.0","@material/feature-targeting":"6.0.0-canary.a3016368d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_6.0.0-canary.a3016368d.0_1585343949157_0.22632854736901842","host":"s3://npm-registry-packages"}},"6.0.0-canary.4b45b6620.0":{"name":"@material/shape","version":"6.0.0-canary.4b45b6620.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@6.0.0-canary.4b45b6620.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c811cb5a6a3b9c596e0518162738f804d8abe3a4","tarball":"https://registry.npmjs.org/@material/shape/-/shape-6.0.0-canary.4b45b6620.0.tgz","fileCount":13,"integrity":"sha512-BTzHTMGdypkvytdPqeK6wjrdiSOv/zbBp0xRPZLpBxljKTI4oceb+uZKHaCBjUJbtkUSDLehKOpvhpCOQhtlqg==","signatures":[{"sig":"MEQCIC671qnx+sfi4sH1N4TWLYVHIyg+VAyYSmdNQ1npdG5ZAiBMBpRpRYPkQTBYQw+Gi0yVN+QaO6w4x51ERN3nttswLA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeg2gICRA9TVsSAnZWagAA6PQP/3kqmq4FoekESnrJYEJn\niiPXdw7HxIAu5VXZX2Bf1SPdxaB6e5fKhrJk35G/yrjDDLAtgBJzxEYP/USJ\nN5fss4B1URBNr0ahBPCxbPWxQ0LD/KdHDOQkEa5wbErK7yoVsNID8KhHyUz1\nBRyOLszjFg/HE1rRwoy+0Grvps1QwnXhhoMLCKTFkGBZW2gck86cvsmQlM6n\n+S4zINKn7MeG9MydbKmylDCNR6+G+8T8X7U/2RmHomo6lPq8DHrM5RHqrCPk\nkEfsykpWiREQPme2EzqhifGv6GJ9FjuNtrySwCjgpYkRfia10QTbOZHSgc0S\nxBTUJt40iKMgf6n6HD922tkPf3gFFqU2qox8RdOk9FUQKDNxWq8kqBya6SC+\nFHHKulBf8kQfUswjP2eBYDVnDzSJjE+ZpjztA55yCsqimpx+LS4p+1XMflud\nCDVgejzXdvluTD5y3oYzIIQNocIqr44KbLr1oMSoDip/q4pj64CSUI9tM/X6\nzdNgdPKO/vb8rnoBGXrsMqpEUhxYjO/siUonupwaIeEXxDqPIzwr6gC6eD4r\nXbNAgztwD0moH9VhpsY2jpHyDAf3EUswOCfF+vU5JQpL/Mz9rVQNIJr9RwR6\n259uZCDEQD5i3UU7B6T+f2kA2+3rWcBA37mzdX8dTPHrGrQp0mGommAmHK+E\n/pGr\r\n=WM7l\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"9d49d0fd4e563f312e9b2a25d111cf5753591eac","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.4b45b6620.0","@material/feature-targeting":"6.0.0-canary.4b45b6620.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_6.0.0-canary.4b45b6620.0_1585670152012_0.20342039005207568","host":"s3://npm-registry-packages"}},"6.0.0-canary.e84b9c8.0":{"name":"@material/shape","version":"6.0.0-canary.e84b9c8.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@6.0.0-canary.e84b9c8.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eaae6c38ee5a2e31e8791c6b24827add8b0be139","tarball":"https://registry.npmjs.org/@material/shape/-/shape-6.0.0-canary.e84b9c8.0.tgz","fileCount":13,"integrity":"sha512-I+vNv29249QQp2GCk/huVYVFeK5qMdIzaOYrFXSPeB7qMIxfch5NbG6qB3jjLkVhyxziwRPfoF9fYoP18GAHQQ==","signatures":[{"sig":"MEQCIDC4Q4c0omOHN8KpnZason0PrCiww+MJ4DGxNPl4X1CKAiBd1anLE4UWl0dY5/um48B9mL3VJa04Dy+4dSW83w8bqg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18723,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJehMeGCRA9TVsSAnZWagAA4TgP+QHj48apPZbS0dmO4gmy\nyX1IkTKmnP3mVITYJgm31JMVczPpqL9d1B2R/QvOTOgZ0sNPOPZj8Iv2o075\ntxqVeJ8UpptpQWjEp0ZV6dFW+LFiAjccnQR8aX2dpIxM+CFbDA6qF4UjTkMK\n2mh3HhMhB+fU3CmRqHZjxqre/4TYTDpk2kuQoJJmeqq1U4kp2gHno+UuNBfz\npyt6wnPLWq9WnAnm3paFg968rgfHtiNX1tfVjIHoa0WVJKiZvQvZFuXn1Y1Y\nEzr18d32ZXTNJN5CZwIL05RuJVoaXGchFuiTBc26HvKIVHGqxXx0w3CCSus2\nQoe1mRed3EiN48jhGMn5UrQf3vNMUVIjmMOAheGER9hRlYP91E8GZc93f2ed\nPnjLJkRpqL5f/9JzIVutaj6KvwIboAlWPLHdmn991GjxuuvSm5PzXnJlxjo9\nZZhBYME2LD5SkZj4aNcTQD2C3q+WFtQBOiiaS6rWsIpDWeVFXZJMxOtKlgt0\nIVzB8N/SittxqvrHiRTR4TSjlawC92qdUZNKAxHIwsqIiGu6qWrRZ+YP+UGZ\nwzKwLax7SC7IgcO6QjprcGA8hPnfYaJSmtSgW1Ljze5wt2LND16OSjTTqn/+\npR3MZpCjkzEId4MribIxwBLVR+ByKs4CzH+ttlsw0LwAuPhzBwwuMJ7ZU0cm\nu2Cg\r\n=IBtS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"8c119e9b02d2718e7b4df7fb72c1724650583b0c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.e84b9c8.0","@material/feature-targeting":"6.0.0-canary.e84b9c8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_6.0.0-canary.e84b9c8.0_1585760133845_0.3267608151115835","host":"s3://npm-registry-packages"}},"6.0.0-canary.e33c49e.0":{"name":"@material/shape","version":"6.0.0-canary.e33c49e.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@6.0.0-canary.e33c49e.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bd13063697a6e87e7a60235663184e35a9d33d09","tarball":"https://registry.npmjs.org/@material/shape/-/shape-6.0.0-canary.e33c49e.0.tgz","fileCount":13,"integrity":"sha512-JPPegDtc2SQLCVtgQ521ykrQjSZo9rKdr20V1sR3eNaDjg3Fw/ltcekapzFkoTXtUoQsikXmFx3C1W9BfYAfQQ==","signatures":[{"sig":"MEUCIHLPJr6igUQbRcfvIrCk9AVrAcEZyhzKkpfyrHznhFhFAiEA7HbyX0l+oepQGf1SV9/uu2BjRWEoxHuzoetSi4l0pCg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18662,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJehS0gCRA9TVsSAnZWagAAzDcP/3CxM6K1akk6CEhDq2DZ\nQvhWIQ+yaD3LHnIOUvewPINpDqqkyW9JPgJnFvY6X2in6rtNn5fGwsfQWliW\ndrR9IDWdkkZO+4zEn5QdHd5Osrf0083lX6Xrj+ddp6MTkpx2SmTOyvplYveb\nobE8JBdUMZAQIW3+aMxYmCi9v9l5V0UN0ImKb2VOeGKKdN8LxOkhnpR7MUFW\n1HSy6QfjV2I3XDiSwOpEBoeOMdUVxhteEEXU8FcuHolHoPB7aOd1bSA0vcOW\ntSutg7d3h9na9NYMDTnz9d+qeRfPjrN1BxG6MEsqZrNVeP5ZT3PwPZmQsl+X\nxS6sD1ADxBTBzS6+xif9CJysrfFxy9nZzLpR8Px6TYqPCLhMLTmWFGfBvpJm\nXAApeZX6hDvQGjis9tvDQ8mpJFpk3X0PZfhJdtdk2m3ukMA4tKe0WRKB1i2L\n4C9AiyTa1ZTrf6FycDbDn3xelzQIvft/08HI85IcoFSeZ4YAcvspxJ+jL21e\n5fQj1EG3CqHc2bUYhmOyz/DxTKqcTEmYlhLlBEL1jrRjtM7IRh58R1shkpSi\n3jZUvuzzkT32o3c0QazmtgccFBHHGW3MFge1U/cTx5yqKLSnBqP/HEIm/eYz\ndQy5Upkh0szjodEtmaqIw7XeXUtBw6FtvpYFKFiNLgqPGlbh/VeYp9FUmN9w\nGm9Y\r\n=w6u5\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"e369357845cadf1687509d31fac95d3131a90718","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.e33c49e.0","@material/feature-targeting":"6.0.0-canary.e33c49e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_6.0.0-canary.e33c49e.0_1585786143747_0.004799831269023835","host":"s3://npm-registry-packages"}},"6.0.0-canary.f1f8e60.0":{"name":"@material/shape","version":"6.0.0-canary.f1f8e60.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@6.0.0-canary.f1f8e60.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"72e86f0921c0e9596b9b5d4ca6a25b6d700c44ca","tarball":"https://registry.npmjs.org/@material/shape/-/shape-6.0.0-canary.f1f8e60.0.tgz","fileCount":13,"integrity":"sha512-OaunmGirM+LA/puYN1A+a+99e3+TGOF38S3ByG3pdfvIL0mA7zDSQq/l9OS6tlz/zPZpM3njRXCQrUkOsw82Dg==","signatures":[{"sig":"MEUCIQDC8iobW73gvNsxVNq6otaprcNXNhdZxAiDr2qYchR82gIgcK/kF/eFObN7LjgamcHQVaAzHo6nY8GquKTYRga+X/c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18500,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJehjlQCRA9TVsSAnZWagAABrQP/0io5lAw7sguIzi23XDU\nhq3V/OD5Tqqh2fmNkhCWsgMFzILR0mKGEMMxQsu8kgAjZ9eKWENWbqQClUzc\n7SrEhA3RSx60/yOl+F6+NDkPj5VLlU/bTYM7Y8pV4Lf2uXuZd2ohhO5UMPpy\n1Q3Z8kx+UHT9OvVU6p90z3DRv2pPgLMgSJ0izIu82sOQbs3OkQXvUujxKJcR\n806dE648CsdXBJPfXnLu2cRxTodBfdI9PcxRpd7K7MnQ5ZXhCSsi3Fbcjwuh\nwQIfy18VgBeVfUgFNXImqbBFHwIXd+qJINz83t6G5x73YuD8QcrQaV+TaeY7\ncOcE4BPnaKZA+gUb3J2gV7Z4eqCGUo8D9R4ClTWdq2Djr12Os0NL2+DB/wYJ\n/Vri47I/WtrV+wq+WTGUKx/sqFdhYS6CEoMOyf3RSjHYgFwd3UbAe6rcfj2L\nz7/FlnGs5rc77rxswKFzBAMKZlEdCcsS3pcL422YutpkycgI/FCwlUs8h0aO\nVGQ6Rg8XRff4u6zlnx4//gaJjlKe10zIRVasv2yHwclvSKAeot0SGFTb7TU+\nZVSVjjD0nLlttQoER0vHM1KDemngwHhAQ1u41+D+ZfRbybDIXbf8PKtrZpip\nLR/BQfg0zqN/ighCgA+6IsdVlwbbRRPRFYBTILxJLtId1AQdN8jotrFYvCOh\nVQym\r\n=QAYU\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"aa365c532331b10b868579dbf1fa4335e9499185","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.f1f8e60.0","@material/feature-targeting":"6.0.0-canary.f1f8e60.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_6.0.0-canary.f1f8e60.0_1585854800129_0.8162910116968096","host":"s3://npm-registry-packages"}},"6.0.0-canary.1e17c49b3.0":{"name":"@material/shape","version":"6.0.0-canary.1e17c49b3.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@6.0.0-canary.1e17c49b3.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"951182bd65efb27d2ca3be14840462a24f4e474f","tarball":"https://registry.npmjs.org/@material/shape/-/shape-6.0.0-canary.1e17c49b3.0.tgz","fileCount":13,"integrity":"sha512-Kxd40bYFgg4/OC5k/z34f+rfEpnKkeUUqVhLHSm23clki8NXHq2nQBQ7vxawWgfFJh2/R951ktgVoCGmdXy9kg==","signatures":[{"sig":"MEYCIQCXdaVc5akqTlVBE23InHMXZg8FK7ce6de0jYCRDzOfPwIhAI82MelFTyAQ4Fx8jeGvjtgHjBCaAcFqFj+mga9o7C/N","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeh3p1CRA9TVsSAnZWagAA7HIP/3E0xMOP03hWMnhCeI8g\nVRIGgx3jhEcuX3fj0VisEWzF64Zl9ucJc1pk7P4I1bgAbtUX6dHKEh3pI006\ncotO9K8861XsLlkOLlPK83wi1RZ63wnO4pD/Ruvbo3pU6sjr/nbavAboVS91\neMWwEmnbFP7MImRVqpLaP487niSCFPew2z6h8iRRxb3ISIoFxNykykRdLCqP\n6Gj22/B2RJ7mkZNBq+om9zUUe+r7kaFrGrxtTJFld961hm4yDPBmYCC8CbpT\nzMGoxnfvH+R4TBAKYlllDJp4AF4yByhiS9MkGZhq8Y9gOq+aBQcNna+3jnIB\nOkr1Ia/MJP3zCM5Th06EKyy0rAMiuK3sMxNECcBrFJYPRQ6va3AG5e0fLR/b\nfcQcDE66f5mhZh1SgZMxkLgiqSu5TViNIbJ6mEiKFnwo2Jmssmc0Igv2TxVj\n8PcSEXAWtWK+UPlVezDwswDml+rA9ryh7aVU4f2grEtw+8vE1wrNoSlijtMl\nQ961Dfwc8vm5z8MMc6VhpwaSgIdhksck7bBk6HCbLaXMlYbElRceRi9raD22\nrsrE/vsbaiu8O8Z3L2gFCLxBaCyH3KXNvO06JJ2bULeVeKlcv+cb6dag7rhG\nSmK7d+rtZ/2CeGBkGjGII3YoVBc8IMHwU2YOUNeJOa+3zcJf8WnFulnpyZPE\n8lag\r\n=udgy\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"08bf363eac26d705e8c4b0bcda91042b9c73f82e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.1e17c49b3.0","@material/feature-targeting":"6.0.0-canary.1e17c49b3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_6.0.0-canary.1e17c49b3.0_1585937012604_0.6351243476126585","host":"s3://npm-registry-packages"}},"6.0.0-canary.6a40ef217.0":{"name":"@material/shape","version":"6.0.0-canary.6a40ef217.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@6.0.0-canary.6a40ef217.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3a87a4ec605aa7f7bce5dd70d9b26d6d1fd57973","tarball":"https://registry.npmjs.org/@material/shape/-/shape-6.0.0-canary.6a40ef217.0.tgz","fileCount":13,"integrity":"sha512-elSQ5gaZ4ox28je79mfuPEJWtDavuRhdXGS/7b9T6PGWoKK+1LLTcYc/XrVFhYRJwsdzdm6aceJ+6F563dvlpA==","signatures":[{"sig":"MEUCIGhIv21JKXsb74aTvAbE4VYLoem9MQPVDtsT7ZQocpNUAiEA0LNshXU0Pd1RqSesRYxAI/tZlq+juYQk7djNlQvNcss=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeh41eCRA9TVsSAnZWagAAtHsP/176QOryn0D3LpEb6Fvj\nE7GFDHdhDM/l9CwnEzJtBkeHfK9dPE3uwd7jMOcp8qIRdsi7+8+Kpin6kaEg\nW/PlEviYdSdg6v9TD8JqlJsgjXzDGfzUxNQd3Bx3LyQ4DhLEV5xG3rO8osg7\n0VuIlx+/59NysI3R77Pq0n2B8+SwTAqUR5zRyNXS3+X+kld8BLtvrKfGNr79\n+hKTRDfOmpMjQpCUkXJFhGuZH8USCo/dpgfm1n3TFid23hpsbIju/viI0iSp\nRJ4H3ORraWqXX3CREq/qlNJMCd2Mtqggwacx4E5wdCUH6N95sqDsqiRw/Xf1\nTBOi0KBai3LLkThynful38tl30gFjJPH61LoLURpeAytK0fl8MdX+Pa2xP0i\nXQ8sqDQUzT0KKVrC/KQbBb5o/bpxgM6HHkTvqm4unTq3b631a/8NnXwH+Uzx\nkcmWDpV02oJWSWYGY06P2jQgSqoky0l6kA5waU3WX+DUXPjfzSryEnw06eR7\nl9Ya/p6QNvGMECq/SMx5a6F3DYrUahBt3RlD7T98LnPVwUA3MfppBN/N1o2p\nHJ5BW8XVdAZFEDnfjN0iKITTlIUtU1OF5e1TKprBdjdWUiO/1UU+gE5C9mko\n/qjm+PUYHPe0swD5ISqyZxZhvEEOhUF6Cdnz0GZhc9KhlsU2kNkERL4hKCdk\ndHJJ\r\n=q170\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"94e553cfa7e3fa8977ae7bd2ff7df4021f815787","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.6a40ef217.0","@material/feature-targeting":"6.0.0-canary.6a40ef217.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_6.0.0-canary.6a40ef217.0_1585941853725_0.8586280478959307","host":"s3://npm-registry-packages"}},"6.0.0-canary.5f24faacb.0":{"name":"@material/shape","version":"6.0.0-canary.5f24faacb.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@6.0.0-canary.5f24faacb.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4fd582d559fff2113a18133b36ff1d943c57a22e","tarball":"https://registry.npmjs.org/@material/shape/-/shape-6.0.0-canary.5f24faacb.0.tgz","fileCount":13,"integrity":"sha512-nZCCqz883PDiHlLMAno04hNV1Kn7ooXfpvmPXZ+vuzBgdmwZ95Xoi5/XNw6jmVcxURN/0MO/vwEdguPzc+iWeQ==","signatures":[{"sig":"MEUCIQDv2EsrIbXHyYgaqp/JCmvtKx5aqpBBlybZWAp/S7O6JwIgdg+6knD2C8vRAFlEUgCof/f7n2DFEdqYdIyWXnKy1jo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeje9NCRA9TVsSAnZWagAAYbYP/0QBn9A/pCr9O/ZgdmOM\nYdTa1e3qOUNUQ2UvAbXLoBABgSn6a0bDHlM69NwjDnN0ZgNEVtTR3TtPEr2b\nJ4LSVyn96vg8qtUIjPAd3q/trj2nMTTr6rEPS+NZitFjaVDO4gbFvPk506nt\neLk38L84mARh7X0rRNeO1TgbmpN0z3si/nyxX/4oEuWfLIN7G5V+EXC4FA3U\n9BZIAJQ5Er3qKg4VP21Ege1EuJEff5ZvqD3j0Fq7HWCdRsk1CJpQ4D3EwN9F\n+Uj5+tQJHJ4ZlgX2thnlh9fWPfmeI7hk1sbqqSdp6kX1TrEqhZNG3cldavSg\nJDVt1XrvZUnBt1pYOpWK8RvAeJG+dp6bNKb7L8DB3aGvZYNSoCmgNb056E2o\neb6jDIuvQOVzVg42LOwxxVTo0vXo2t1EMSyGfsD/FFXGXYH8jMz+7pqfl+Lc\nVh6Zit4l2u/0ZQ8zdq4h1d6cGROlA+szTXwTFotgZHAiwUONatv/2+6XDQa2\n7frG7jkQBRn93iobIJX+B+F/68cogXcD/0IG6n6p78qLN7D0AtIcezOc/IqO\n56YehKu60qNHNHI25ORBYsqjq00vaOt/JDLnQsM6v9QWb87za9OkAxbU59Xf\n6aVhYoo9W42JPdP9WbEGjqyGH07bsGoVWzl04I0wV92ViGlhcfP3xM6r/2YQ\nsKkk\r\n=A+6F\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"2c7c3d8feb6b7bb5281c1144c43a06f3ca963316","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.5f24faacb.0","@material/feature-targeting":"6.0.0-canary.5f24faacb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_6.0.0-canary.5f24faacb.0_1586360140540_0.607656583641643","host":"s3://npm-registry-packages"}},"6.0.0-canary.82fa986b9.0":{"name":"@material/shape","version":"6.0.0-canary.82fa986b9.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@6.0.0-canary.82fa986b9.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4f69080839f3bf9dc8718b104d954bd5a690c784","tarball":"https://registry.npmjs.org/@material/shape/-/shape-6.0.0-canary.82fa986b9.0.tgz","fileCount":13,"integrity":"sha512-LQu/ozip+TF89bfPkYLUhiP5HSFo0w3vXkJH2Wy7tQ0wOK48R61eSN6jhtpMu5zqpDxNWz+NcE4UyOczzWLNfA==","signatures":[{"sig":"MEUCIQDLp2QL8om3Q/x2XMahH0WCfMrgcXF0Wwpez2TnkQLnegIgQ6GXsJ/iJGHVB2GpmGaC5DyBE8E3GLZbU+BmRMqPd6s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejfCaCRA9TVsSAnZWagAAeG0P/RC/K3ompc0vQXg56e9G\nhs4k9P3zSq+KcyHWWYMNdIDyzqcD9R2snlrxj53EsNheY249MZmuHcXi/USX\n92Ft4zeVAMGbSwHpBJEMDzw8p45NwmgPP1eu0Tat1u63FA/HtedhtnWowKBs\nxLVhPoe3Q7Wa0mlCy1oGwmxRpuF3m6vDrbdqAGwVsb6k0NWGGtoRrwTQJ0Tp\n4a8DgRXtfkQL9dEdRS3eeDEqgQvEiiJYX0gHE1TrDgsAvguHJyFQrSzp5TfO\nl3o8xO5SQhXThPeyXPNnwlsP5XQS7NN75D14OpdCDuTfBzWH90ldolX8NNDk\nMjP8y2yS+AWXyfzyxvqTa5m/HZqHyPZtfdv20arqaWtG0sNa1Y8dXXYxqWG0\nCRugLsV3lhMkfa4etfI98mlf+k1ojp2VInunaOYZJ8wgYK69l6tklX+Tg2au\naQNMXvMm5AGz6teDryoVFKiKpwFovQkXHUTy43J5vbfj9fwwMOvwA42vEhUc\nBjKv4RDIrC8s1A9qoWwhbVYaSQcDmVvEmgFwfnMB3PJopaC/tGh8FEF6i50R\nDZE1lQzWL66MmaQzt//IgA9vHJera8fOlq2tmv3fgr0lSn+7GpMybiJBfBXu\nnYNeajMWm04xHousTk6NeiFfbbTcJlGKUEIkeBbD+lmaJ1KRhTQBy9qV2iJL\nQb/W\r\n=Wr0Y\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"4fd9bd21072735eb447e594a5fade5eb1e846831","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.82fa986b9.0","@material/feature-targeting":"6.0.0-canary.82fa986b9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_6.0.0-canary.82fa986b9.0_1586360473811_0.8653563225793612","host":"s3://npm-registry-packages"}},"6.0.0-canary.9930d9cc5.0":{"name":"@material/shape","version":"6.0.0-canary.9930d9cc5.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@6.0.0-canary.9930d9cc5.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7c1ee6b69ac6556c5626b310c0fcc92f7158b50a","tarball":"https://registry.npmjs.org/@material/shape/-/shape-6.0.0-canary.9930d9cc5.0.tgz","fileCount":13,"integrity":"sha512-4JSmQGsP+qeXdoCMuAjD8rq7H3kGnxNAh8qR3teGqBTtybn7joYhK36sGAOmr6p2bFLLlosJ52y/wG2/r1shpw==","signatures":[{"sig":"MEUCIQDgOHgvT0VpNWCqdxfbbUMeolw8zpAo+hKKBUhOTqNHCAIgPxUlfrT4KPK80YGQ6Ss6ikMKAC6mWSMVWDPZCD/qCOQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejia3CRA9TVsSAnZWagAAOK4P/jjkAx1+UD5EdLeDrhqA\nb/750hJCvLvqVuo9p7KZeC42yU/ll18ptWP2sPtAeuXmYTcgY0/gPj50JAGR\n1ZW33Kq8STBwUI3JlTjEL30SlxEy0P+EQH/9ZrYO1n7pYIS2U03fwJ5u2iDe\nSjAxC5koDJaeK2CAXcQgIuj8YBwDmUQ2XG0yPaUYgTwSZjSq8fqJFkcLvpMm\n5HvQPnOi72FzFw3XDY5Bgpbn+bv9+3xjVugO2zOl7LYtkGUuYUSu4wBm/j61\nYygzZZJ/cWfi4zg1InxtCdPKKUgTvGyeW+3O8lDwAyxxyp9i0np4bS3+gzMQ\nNT5i/HbTeZGzgvMsROpXlJis7BaUDJ/Y3k8lGGfra0xbir1Qb+clcdNGR3gf\n09WSSJLZPnWieCPqRBB/DhYRrMqhLIWlnwNaHdAMBAP7xQTP5bWKdW7LBxwE\naW8ml2amnJ5d4k6WQGDl54NWWkJyvx/el3JUisq6lvSg+tD+RY/LlvzxYJzk\nQEs27bi4Dy3p6SHVmVCI1TxRlPpz+7A28mjcDIpFB2AKlb/i8QUDaerJs9TV\nUC/k8ndzCYFhl6dunSyUpFaxu04aM2GBB9l9UV/yTnnTcOUQSI8Xwz6o1jB9\n0k5Vt/5BTM9qKa2QsZwswpdegJw6dVNJmSNYyA+/136Lc0Czc0T9D0O3ns0+\nMu0F\r\n=fLx1\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"a0382987a27373aa348015a5e2529f301f638d57","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.0","dependencies":{"@material/rtl":"6.0.0-canary.9930d9cc5.0","@material/feature-targeting":"6.0.0-canary.9930d9cc5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_6.0.0-canary.9930d9cc5.0_1586374326679_0.488746339601539","host":"s3://npm-registry-packages"}},"6.0.0-canary.6601d24af.0":{"name":"@material/shape","version":"6.0.0-canary.6601d24af.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@6.0.0-canary.6601d24af.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5aab62025a16b5410cd5324cc0aee3831017ad22","tarball":"https://registry.npmjs.org/@material/shape/-/shape-6.0.0-canary.6601d24af.0.tgz","fileCount":13,"integrity":"sha512-fiAKFFCqLMSYtODzEpxTFuxdVBWbkNz9G8iSdYENq20CV+Fvs5+Yiv+43jThTo8AbY7OVO4+qOk7ehHHY5MqhA==","signatures":[{"sig":"MEUCIAxgrLEYRu6YrdtyyBcOrBeoOQUvq+qhX3iXhxGpziwPAiEA2IcE94d2MICocJmT4Sourpn2Nk5iKEFHAkckO7oBV2E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejmxtCRA9TVsSAnZWagAAiGgP/234TpAgrkxq57jpT3DW\nLYMzxcT18UjzlJ0sFd7bsFTZouTwwwdKXQVQRZ5pJMOcHlnymOnSW0k17SUS\nvjgK0A43EWR1C9LN+7BZzCjAa05xnFmTpI4lVGjOU0GLrKUUUKtJtqVP7muu\nybjvnkSeHKsdTvOtkbGjdmC3gG5w5lq2W2YJYAz0f4+8pJ1FugvYDkhq4+0i\nkOqCVlRqC2IjeZBq4IN1PinLmi8hI5l9ljMsY/MOgu50OvT2H+vObkdOOfbL\n11Xytpggw4GxA5qkRSiQgtgDxHf4Y1LNyU2DC7peYqV0jJdz5R8fk80H1hZh\njYjACYAC4AaJoxM9JxvvAYjjOmFW3YkFkZP5iTqho9c7uM4lpGvsPP3YrrMi\n+iRFmkfFATVLhBE9ABgrbYsdvU2exLy5y5Yo4m48GTRCGEQAvGD+3e2348B0\nvSb8IaEG0MaYuBSzH4C8kvHWv35fkDM8wq6+C89Xt8WZ7ZZ09wRHmKDMsx7E\nD3rNQeuLAZUEsb5dCm8S4X8eIhcODTzh3phTDaJz4tXMySptDlCFrv0cJaFR\nyoTA490EycDObbsAX0SYAAn23BjGWI+XUVm4qh1a/5yNqvn3em3af1d3rKtg\nDQa5d1FB+iLI1Ka9yAp6OA5Ajbbu6qKSwJFO6pLEZDhLsVkeXupRiP64oatN\ni37J\r\n=RJWh\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"f22a45db8a22981a17395184998a94e6a32944c9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.0","dependencies":{"@material/rtl":"6.0.0-canary.6601d24af.0","@material/feature-targeting":"6.0.0-canary.6601d24af.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_6.0.0-canary.6601d24af.0_1586392172904_0.9645536748584083","host":"s3://npm-registry-packages"}},"6.0.0-canary.05f5e1583.0":{"name":"@material/shape","version":"6.0.0-canary.05f5e1583.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@6.0.0-canary.05f5e1583.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f9a3a8a9fe91629a9316bf0c5141de6815040f47","tarball":"https://registry.npmjs.org/@material/shape/-/shape-6.0.0-canary.05f5e1583.0.tgz","fileCount":13,"integrity":"sha512-7ELC1Yo9FKVHYvrAnDa+dszvYzSZVVUZYm6X1FHnEgTOJc5FeDpMXTUsHkQp5nVzpkVGvvf/w+D+FvU+eo26SQ==","signatures":[{"sig":"MEUCIC5GGXODo/Yy+YytCnkn3n4oOwB+tX0qsvTvAh+TF4jTAiEAx/f/84r1zCtwVhgQNzd9K8vObKgothmUunSFK0lNfcs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejnB4CRA9TVsSAnZWagAAu/kP/R/1yBfJuc7m5Ibv2coz\nMs38sQK+XCXGXDEcrk4tlubIQsPvMbKThq0inePZqqNQcIsTm1+nH80qyMSw\nIrX0U/t4SY9kvt/SdyQUcAPPu3Gqoa6281ls5p7xR6DAKrZe2Yp9bxv3rN2L\nwIHCFOsW8Y2xnB7QRrsg+oqzUVJBm5uEBvh4K9vfZpbDcLsUGC/JHHtyTIsZ\njbF0PW2XZrXoS/lOfcOoxp8aSy0BCtEafQNI9pVn6+p3uKuiBEZZmpUJyCZu\nZqszLb/hLViXwPn7i1ZtXIXtJGTe0Lzp/bleTmCX9ImPJhObHP8TbekTCObK\nZQroRQfBTzrzXBDwfWyDY7/AAYVm6zLgpyWRQhVhFQuiHZ4yDNdqpuzY5c4Z\nh4p6Cv49jlBi5yU+PE6hJARNR8ROCktnlQ3SKVGMLsmOZ6wI1mBfNaUTag9U\nCgQJs6AbTbVVtBm6wu/YXbse/L2FDUe4qK6NR06omW7gkftd1/BblQlq3WOW\n1IZbW6dKTfQuecVApbvjdD1I6RgALcNnz7F0o5bSOGe5vQ2UxFb88s3asxzw\n9ivk0jR3YySEdGi4WIghT8eJS2rhmW2LBpZWS9ApwzbME8AaLYYJ0KLovRt6\n77qU684qNfAh5yJTjj6caNlpX4ogWmyk0UmKWVP3Vrmj8/o8Sni7E1shpo+I\nfp31\r\n=Dn5G\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"413c1908165c032ac95dc5456e70978d3994b6d5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.0","dependencies":{"@material/rtl":"6.0.0-canary.05f5e1583.0","@material/feature-targeting":"6.0.0-canary.05f5e1583.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_6.0.0-canary.05f5e1583.0_1586393207698_0.8525894247965409","host":"s3://npm-registry-packages"}},"6.0.0-canary.bce00e186.0":{"name":"@material/shape","version":"6.0.0-canary.bce00e186.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@6.0.0-canary.bce00e186.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"78fba29f5b3fbcff134ab8fe69fe9761475ffec5","tarball":"https://registry.npmjs.org/@material/shape/-/shape-6.0.0-canary.bce00e186.0.tgz","fileCount":13,"integrity":"sha512-P27/tmrAtoWCjUHN3mdryLOrqTkAh3iqOvDIh+f4bjOdhBmu0lLL+n2reBegq0EGjedm3UIqvO/PhyFEcnjjhQ==","signatures":[{"sig":"MEUCIE23EemdqGgwIBpMB6DMegkyQm6VFVflpxX/BaiwUUOYAiEApc9R9oCFLLLqYbBtcy1Fp0ekLaGNL9ElSV8fiEfAyFs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejz2kCRA9TVsSAnZWagAAsEQP/iL8iERJ7bW+Glad70ob\n8vfKIFqhttRsLojo92iq/BcDZLYA9puKYL2azv0f0pntPnKzgVu1F8UivpbV\n1XKWsrx56P6kmoVIFGVx1FOzWbz0BVK/iNuQDa16W5TJ8wrG8IJEnl8Zi1Ej\nG9llK0RnwAcQpRrCU+wSdQuRvamzkpY/YO93Pb1LTXquz8SMzQaz5MPqtmJt\nKMPSiqoX99qV3Gkg2yw1J4Lk8y0GC6LdiJu1nvCrnA8X6O45t6qg0TxKjHUQ\nn02f/OK/BemR5sn3dIlYhQpwQI2TqF9fGxQtNpqLBjDI0INtIFJ77CeFeoIi\n8aFNNR4Eabr0ScCMy4/kKvpNWnEuT9HCiFOAOuVoEfZONTnxkQa96Q2tkoDz\ntfdhehqmR8NxXENrUDe5KIG3o7hoaL+iKwQUm7f5D+SFV1PvBDl1vIn+GZl9\nj3qjRktlNWb/9HkBIHPd44pgB5XR/d125n4Zn9pcg9E9CwcZ8KKktQD3lHH/\nNNBRXg+46sAxOR1j3oENUWLGyF4jFWFEYjknnrK4mZfAsCaNGRf3qJh2J2gy\nOAxIDtNFYGGNsllPvKOomkhiGBkYXPSOmlC56kpK1obRdVigJHMQPYEqeRYo\npZR3lflWBxAZut04Dd173oMZwDSec/4IWToq/sOsTnTijg4JzPsSB2C3MbLp\nk/Zt\r\n=rrqh\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"36e6ce5271637d131432d915870da208d16bef74","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.0","dependencies":{"@material/rtl":"6.0.0-canary.bce00e186.0","@material/feature-targeting":"6.0.0-canary.bce00e186.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_6.0.0-canary.bce00e186.0_1586445732316_0.03605329693860959","host":"s3://npm-registry-packages"}},"6.0.0-canary.927fa902c.0":{"name":"@material/shape","version":"6.0.0-canary.927fa902c.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@6.0.0-canary.927fa902c.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ca171a1c5a47a32d0ce5498e777b3978c41837d1","tarball":"https://registry.npmjs.org/@material/shape/-/shape-6.0.0-canary.927fa902c.0.tgz","fileCount":13,"integrity":"sha512-4KSLE0ROnEO7su4nXb2AMzH3ZfUtg1VAzqD+2angdASLKDZMup0GSPj0mkfJaO9CZObEwNvnkJzSOJ6Aej9sOQ==","signatures":[{"sig":"MEUCICJqfafztHFi1J+aqgry+vB8iXimCFr3k3inw/+euqR9AiEAhOCh9VH0fkgU7j15YsF+RYjRowpUvsu21WTdzWizh6M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJej21uCRA9TVsSAnZWagAAu50P/3byEdll+CNRkq0kFJCW\nJwqveDRI1MDB7lhHKB9FK3G5QC1/Jnw41iSmROzDkKRxNb0A3Hvt4xzU6i+O\n1fjHgHPRSlx4NgQtjVkkSlJq2rIf7NsJo2/WfiKcHb/kt+TtwpHJ9Ad1OHAL\nytLnFFGF1W+58mo4Sh4zEZ9ugnJEEdg8dpDuNPorbbJSyMsx0osTCOIf93kO\nO2kWyETf6j3lYGaGgem3j2sFGLjwpi09U7PYeW8RjnpjKQBZWqh1RZSxXpIO\nutA115yjkHsS1BURDQNcKuLC9ExgnLBUV4jQQfbOXZwOl3SitdsrETELG3cF\nHqRMtXpX7BhZH8ohpY/HyAW8Cf9NRaOldL2yfG2GkGqJqUB0mgIswhZQZo0/\nlPBBtzpGaR5+cHiZY7BUsAK0GCdb7qB0VqeiFNAyO+fqQM5rYsBsytvmN312\nZMc0PIrioVYyWJXWekvLX/PdTXkbMj3zciMffVvi3zyGxmW8FhtFtZ3L3lFM\nhtIGAr/9hkTHcaGyJ+AX1Cde5rAHzml4vjIkgnjlJ0fOFXleN/7pXQJ84zPl\njO5Vx5zrU5uxS7aeDA7fgwipLegZpRPwJDEU/pE8wFuehn906GFUq+a0uFb9\npgK2OUylSwnE2efe13FxQOU/lKQ6qQaSM3hcYRSTiE790lw5Fg5Q4GfCwGyA\nRQHs\r\n=+1Kv\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"6993aa2a4786dba507ed6b641b4c059925b7ddfc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.0","dependencies":{"@material/rtl":"6.0.0-canary.927fa902c.0","@material/feature-targeting":"6.0.0-canary.927fa902c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_6.0.0-canary.927fa902c.0_1586457966427_0.9692946879943409","host":"s3://npm-registry-packages"}},"6.0.0-canary.eb28b6ecc.0":{"name":"@material/shape","version":"6.0.0-canary.eb28b6ecc.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@6.0.0-canary.eb28b6ecc.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f3173ec7ebb8cd8a7a9f4d144d7f2b1606071298","tarball":"https://registry.npmjs.org/@material/shape/-/shape-6.0.0-canary.eb28b6ecc.0.tgz","fileCount":13,"integrity":"sha512-h5nSj/727nbB8ufWdCY8zVb60HtYnOyPzana5m7UwJXkB9OmcMhvkKZaX6LwfAA2zOKS+pOVaaT2nNtpdZxLIw==","signatures":[{"sig":"MEQCIDKIo09VOgV87HFYYBzO73B8goowIoTEl3jTG0nPRz9yAiAOVYxbW+yObbUWAx20bAB8SPu8+/4ku1U3T022ZmAT/Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJekMlfCRA9TVsSAnZWagAAq4UQAJ5PpNNGcyaTYW6JeHMd\nBIJUw1CjZLsJx32ij72KYBhgGJaQF4Dq92s+ks6cymjRcEziRtl7wVp5AekA\nn4JmgfoW8CNI3fGwRL5D22Sod95WeLCnZbR4LZCWtZfjpfxEI6A+ygWcQ6b/\nmtcDF6Ua6AJDoqSIin+bad8fO6LDUY14pEFl+VSVTyQU7zy/zxJahjUUMgwL\nh1QJ/Na7OGwXz7jTgJ9S6TlV5U2fxijJ33RlVb2/0c2rL3VELLqdOoiwEmLG\nyboBD6MX9lvXY6Na42sHN7VG3dF8EfcRykxIEeGEpu+XFRLsjEjnjzVvBpNR\n5FTwnVkOAr12gjz4kBS6s1GrbvKqzLO2mG8YITrvwzOD6HIDZVkLchFY0fnS\nm94fhMgCoWQ2h2yPizQUyyZFFAM76IvP0/PLuxNRBIKILkFWAOlYOpypHZ3C\n7SkXfYtfeK0JPZxubK4+Q4U1i55iGnBjKUtPkjIEyvSMRUdbLUO3pr4dln/M\nJE804DeoyHbn4Sfr6i7eyk5MRLfvEyPozraRoIB1FHK+ZGt8q4wZuaFeSPBn\nwu1rFAwpZ9ZHsGPR9ZtmUOCupfkKJ0g85SRRjqdv+LeZOSScxVNHleLETl5Z\nGDAshGSEdsxgviIVDIFBk58CipT88mHC1K7E1yN1qWixriu+HEGwy96Obsv9\nhyJI\r\n=HWVQ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"14b97cf99132f4a85a978c1799a668eae031d75e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.0","dependencies":{"@material/rtl":"6.0.0-canary.eb28b6ecc.0","@material/feature-targeting":"6.0.0-canary.eb28b6ecc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_6.0.0-canary.eb28b6ecc.0_1586547039002_0.29570341658682087","host":"s3://npm-registry-packages"}},"6.0.0-canary.816a43b42.0":{"name":"@material/shape","version":"6.0.0-canary.816a43b42.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@6.0.0-canary.816a43b42.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d0a4aaf4cf7bf214956afc90e898cc8ffe0779ba","tarball":"https://registry.npmjs.org/@material/shape/-/shape-6.0.0-canary.816a43b42.0.tgz","fileCount":13,"integrity":"sha512-bLQM2w34vK97on6CbJp8zI1aCKvi6XjxdxKY/a7Q0DVtJ/y1CTDyBpftonvwAmJyFR+v9CjwARF3A+B8LL55Bw==","signatures":[{"sig":"MEUCIBwWzNl1itUzE6OteXmWBxkjGiFKI+Vf3shRpovy3x25AiEAmYKq05xOmLOV60Xhrmd1PLJ+kSD/nB9ZxSEwJn3MwE4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJekNyGCRA9TVsSAnZWagAAyEwQAIUcUK6ToMgFWuQa4F86\nfKmEKOOfZbBDJf1h73VC5YR2nYxHP4e1Rw4RBNzXZOI04mLD6lWUlAa/Cbbv\nBzeCPWdm36FBrFbs8CrwvoeC1zEZCsSVXTMux6FdtarIzX0W8fCWVQxXacGc\n1ZC8GD8A+dvArw+8rIg1ahFrF0HB4d1JE9S7bHnr4Bv2Sk6z0je+smObi1YE\nBCUB4AekJtmtfdg9jhTxhVfF/hOIqE+ny2m2vpD7fb8riHrcJH+8062EApF4\nBQ19wyzcpdDbFn8p1G50oOeeDXDajcm4HzExX4y0Vj4B7+/HGoH9lLpzXw6i\ncWLO2auWcW3eeeyiIU8LdP0R3ckWL6hzO55Uw9P++38K7fI81PSD/icLnrBA\nb7aFK+p9aQp33KJXFRREigUCiYLMzYB/uH++Ni7rzMkaiM+1MY7H1fWw2x3c\nHOFElC/N4FMuW1UpMYEOmV2El2u36a7b+3fneuJIRkLMFEesNZKJhIya8BTz\nLkaXCBibQiC1lpDWJ2sogVThjAXiWVvQbOqczI06M3ohSDsjo9GtrPl75+qx\nKkiDim8hQWV6JvfgBZY47KD25D/GzVeko+K/EcMsAJM1vhsUM4xNfuUdm6dk\nGC3ufttT/CobXxsp8w/L8mrB+8y8u4iK+oRJmvw0+jq1xtegD5t6/f7V9yMi\ngzOG\r\n=zq5D\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"55d118d08a4432484dfc732189dae38773d1f437","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.0","dependencies":{"@material/rtl":"6.0.0-canary.816a43b42.0","@material/feature-targeting":"6.0.0-canary.816a43b42.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_6.0.0-canary.816a43b42.0_1586551941764_0.01979891320762528","host":"s3://npm-registry-packages"}},"6.0.0-canary.008c4d319.0":{"name":"@material/shape","version":"6.0.0-canary.008c4d319.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@6.0.0-canary.008c4d319.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0a33a021623bd23ba9800e6e03d6abeec8254a26","tarball":"https://registry.npmjs.org/@material/shape/-/shape-6.0.0-canary.008c4d319.0.tgz","fileCount":13,"integrity":"sha512-S6rCLvrDfl/jx9RSCr3jRbyVNZPjlPfhHztct2aIRXYakweXVxJltf166SQswyUwmdunPwwM4folSzxvmwHEyw==","signatures":[{"sig":"MEUCIDDg6ANywwV/mG4jzvFYZqMvlqezKF/1V6shKmPyWm2oAiEAySyAsK5ijeJhi/G5cWKm4QCxp+gt9NUJlRt7uCvszfA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJelJRdCRA9TVsSAnZWagAAmLkP/3e439DFG2M40hwppTIe\nBV9zZf9wZoZb2j9N5QY9l+CoL4nuygRDl1AhFvsTZAvEiifb+LGNh6BB5bcO\nrfrP9IGH8HDyuBQf0ZGOdRS6ZshvhA8+ozdCOpGTzlLT5nUK8zejEQWYvokZ\niLeWobnpWizF98d5YUJrzLeGrh93cTJnohup2sNrbNSDGRO0E7E1xvehD7D6\n1Qka149MjPubtRVs/khO5TUkVByoDXjMVL5fqjSDNcyjyOpmh0DBz9JvFRi0\n2Ymh2nGDYQCuCvtMZy+vEMQYK16QMkI6v7FASwVT5tVeU28kCf7Lkdo74tpQ\njbxaom+UehYEIyQEr926IW7Si7Wg39cXTFTmz8BAzi/pg79JQxMsBHeJCng2\nkVSGTyg2VkhucE41AzKVMsEkCzyEzlfANRp3cuqK05i9zxbjxGHeaaaGNfMp\n7BZVHmCjsY1c5EP/a+gsfcPpHWvZOI1QoZOgJJNvDcRSn0nwceTwYKmFdzqs\nGJJ4jtgmHTSUXejLpR1ud85bc993jUWvlIWL/vPSyfMexNa1kJMesmieKC80\nhGXFMjLhe1Snh+rIcZrN+XmVsOboAYLgUX8gJIQmgaN4jElxnx79NYET3ohW\n+ifaXqtMW+jFjWRCN1PT6Y5PpdCvVivACH2ZJAugcta3X7BIHOmhot/2SNrA\nMisz\r\n=YegG\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"cf7ff62c921da3167d96b5f7cc7f07ac2af41a19","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"6.0.0-canary.008c4d319.0","@material/feature-targeting":"6.0.0-canary.008c4d319.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_6.0.0-canary.008c4d319.0_1586795612661_0.7179799126456241","host":"s3://npm-registry-packages"}},"6.0.0-canary.cbb3f28ca.0":{"name":"@material/shape","version":"6.0.0-canary.cbb3f28ca.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@6.0.0-canary.cbb3f28ca.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"34fe6b0b329d225201835d1b70387e72edd12158","tarball":"https://registry.npmjs.org/@material/shape/-/shape-6.0.0-canary.cbb3f28ca.0.tgz","fileCount":13,"integrity":"sha512-qG/x/GIB37VrERRODuZ05EHUl+wri5YtQk/ti/T+KMSccLLhMhMiNWEDvrpmUU5MiSt0ZR/mFeDReQg9Gmr/+g==","signatures":[{"sig":"MEQCIC0Xx7KZISkw595kLKnrykPXZqR0DkJxcAF5Zge7hbGEAiAD7qj5Rk/OAh87G9PJfojCRWUyvRcuo+Pvz6Cxq33OuQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJelUSiCRA9TVsSAnZWagAA//4P/2F1wLO2ho9jPTfSlY2R\nv9GuT8eWN1VT0lD+MKey8r6aMuq34EzDn93dLe8iH3oJ2BE1GpbHRVsxrgxt\n2R1vuSofb27GmS5sJZKjbvZOF6UcVl/iP7hXGgKRX19unK2HUqApZcO/B8mT\nWrgpYD0pbjNnTCCP1OarKNBI8M5+kb2faIrLMAivIUr3xGXwhRy4KMuTVJbC\nUVksUkrKTQdWxMSeQD/ieQ28TBRlTVjHvCqYh7DZyPKIS+zPM9TvikglIWT5\nXNwhWYVV67eWyf5f5rStmuOFTcJ7UF9B58xF2+n4+/R7eXc/ke6bUAjjDNTq\nwfNfTyKCh0x9tyiKQRAi8Y1c0YKcohQ6T6oHHmq1HCrE9w4Le4lhQiwwC5YB\n//fZhViNJ1Yk6NcXZmCnEUlc97SuvLoH0n31fGDcUDh7tSGvtMbBZtOMFv8v\nJhK4AxnO3UqVfgHgu6P3W+RS2aDbwrLlEYIHF6o9qBQXp7AgifPqAVe1z0MQ\naPlidgiXvdLHZdhmkuZ2YccpV07fW9ryAbgoH7ELCofYEPnsOJY/usPeZqti\nZnwtbofxEoAoO8PnLdDQfYZI2A6f9PEi5R36WCNnEw7Wx489JRsLcPMUl7oH\nW/8rJmdRCTPyqzgM3dUl5/7Kv17UaP4JPa512/JayDZoeTVCiZ9uPTpaivZ9\nMonU\r\n=IyHG\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"b6cb89b18de9f28799535d82c5ebc759433a5307","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"6.0.0-canary.cbb3f28ca.0","@material/feature-targeting":"6.0.0-canary.cbb3f28ca.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_6.0.0-canary.cbb3f28ca.0_1586840737950_0.5955551595673925","host":"s3://npm-registry-packages"}},"6.0.0-canary.f172b0f90.0":{"name":"@material/shape","version":"6.0.0-canary.f172b0f90.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@6.0.0-canary.f172b0f90.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b66b516cbbca88c69a32408a7fe3c0ea45772820","tarball":"https://registry.npmjs.org/@material/shape/-/shape-6.0.0-canary.f172b0f90.0.tgz","fileCount":13,"integrity":"sha512-wXQ9PgHb1bopBwQiCWooWrlEBu1iVZ1uOgZwYDYO2d9eRTeRes63NK1/YdqcabAHASEO9zZRi2zdM25ZP3limA==","signatures":[{"sig":"MEQCID8/lGXYzOSxIFwRfIqXGUnoRC5pzeP1P2lftQzGXRIWAiBx9Yuq+Q0uD7ayLn4k4uHXA7UqFd2p0XVdWN1eo155CQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJelkLKCRA9TVsSAnZWagAAixMP/1QDy1UxCzKgD5CYkWAR\nWgIRHTTa3y0aZWa2GHlKAjoQ/8znrHHnnCnlIk19Z04Dlf3yNusTpbn1oeSj\njz50TpUKdx0HpuBlGA4soyYbFQrrXj4O/fAdEkuFSfCBK8EYrr41ntAWyByg\nl3110RzP7gox12H9ey6UoVcgrPkb4BaeGJnk7ObKXn7U8ZHtVnKDp9FHzctq\n5zXn1FHpcWBWoJI0yCFle1341oI3YK9jEzeyjmfLaw48WsIKqV41Dpf3PmHr\nwPYOElG/HAm0sZb+tyHoaMFGLGKtsBVb/SYyI2fK4DMW3g3Dytw9mnfBtg8f\nEVtM7URk2BwgiyaAOOh7y5e0ZLBKZs1RG6b2NdlPJuk6syIVk5+qqQyrNmZf\nvcXdkU9XykAoJehXRI30U3Ci9gmtSeLRBMY8e5zp9rNc3iyDn4nEmqVcahCa\nmLxn0mv1nhphmm2eug7Bw+O8CasbmIMCqln2RvEvVgwekdCbhSTEx5Ujxlc7\nQpJLrnf/GWu1aAl88qQga26NDBj+EuS8OzmkSilqzr12TxUFDkevbIxD1gqL\n3nUmJj/e8Y12rWak+j8Re466pZVFE0dPJeU3ofTgHlUmOQYuDc7uk5A6ZFdi\nwOVCfuQXE8iF39LOMG07lTy4jhfcRcmzI59a9/kI4A89qsvsaC4mwlShtuzn\nExrK\r\n=wOCa\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"eaad6fe33949c536d515e1177cbadf504619cfda","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"6.0.0-canary.f172b0f90.0","@material/feature-targeting":"6.0.0-canary.f172b0f90.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_6.0.0-canary.f172b0f90.0_1586905801825_0.7108427754697142","host":"s3://npm-registry-packages"}},"6.0.0-canary.c02642273.0":{"name":"@material/shape","version":"6.0.0-canary.c02642273.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@6.0.0-canary.c02642273.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"00253b4c944351d009c8232207227aa1c7fd2f70","tarball":"https://registry.npmjs.org/@material/shape/-/shape-6.0.0-canary.c02642273.0.tgz","fileCount":13,"integrity":"sha512-WRjlEwt1DemsO7DdTP0xcRpbUWhTXQezJSJxBl9X9oHdW/xHJuOjO+7fZM+G2Z1rDq+PcLVsqRQ+7SCkpKfjxA==","signatures":[{"sig":"MEYCIQDWDpbhppCJpmqlxkV44kytJ/pVR8HM55JwbESQcB2fiwIhAPu4chX0cSNPReQeErMxkZNBDHPzNfJmwTLC2Vw/AVP8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJelzN7CRA9TVsSAnZWagAAG00P/jUP2uzAnoF/MhOtmvVw\nkz51ZdNCplSgoC3kedv+ymtkFNnsxP6D7hdiZQiFxJNzx+kFVkWPemlu/YA6\nSN0FGTnZQjXE/f3LDylNm6ozJYStlIkry95E3zuTL1Mqou0fQh716Yx9gcGo\nQCYro3SwulQ/xICTU1HmXgopXBW4zRitnp6oKzj9jde68vLg4Qi0FRwdKbXQ\nx9PHvGM86XJxIQq4oMiYsjYOVzOq3MreGrR1XGVAFVTuK+xzTVB4O5QNvmNJ\n//R8f0DX55JE4oi4Fu9QPTNpr8Y5OMVe8n+i0C2j06RTadoJvQHDdzQ/E3tN\nse22AvOOecqqu1JXklOESQ+RED8aX0842lvNiZeoOeKDEc7KQuZFmtH1qbpI\n5OwXf5xlvBgvO2FGVhIac/rYyzdHX/fC7BstU3sdzMwIrPRkJi0mlT6QEHs/\ntfJ5t9mbPZIStcTSrN5pq56IBY+F6vdVwPxwTLATEyaPsIgfyJBOcTSRbFKs\nDIQk7aRRtgOBz5/pd/3quPvE6ePtwiy2XTiXFOfw+0+rdRRDKrz6rbbMcrhq\nzD0yAC6K7y5379uiPE2vW9Dl2jmnjfRwzJmCI+sW22p4zQ3Dq8IrIUNVs5x0\nTbn4dzhOZGfbe8/Wy2UUi+mloBZbfPQKZtgRNNdLmUb/XL+lVQsbQz7weJWk\nsyIa\r\n=vqGR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"b648ba2f886a5d6cb78a9dbdb435d18b5f600bf5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"6.0.0-canary.c02642273.0","@material/feature-targeting":"6.0.0-canary.c02642273.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_6.0.0-canary.c02642273.0_1586967418612_0.02644597057906073","host":"s3://npm-registry-packages"}},"6.0.0-canary.8a299b568.0":{"name":"@material/shape","version":"6.0.0-canary.8a299b568.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@6.0.0-canary.8a299b568.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cbff40c5793b387093c07351e339cb7c3c50c08d","tarball":"https://registry.npmjs.org/@material/shape/-/shape-6.0.0-canary.8a299b568.0.tgz","fileCount":13,"integrity":"sha512-4qpoP/6lw9EPrdp/sGJoyOSV4tg2PltsYW51Y1x81RWFkdC44176o5DbrQYmURkT71a3G8hxl/QyyKFEDc6Vxg==","signatures":[{"sig":"MEUCIQCOtIyR0TJK9NEllbW67i9LKzyVOgnP0xVmtTkmJ6IqmgIgNbqoIvpyd9Zz8h+npMe5z1e8KCHodd6V2FOT4UKLUxs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJel431CRA9TVsSAnZWagAASccP/0fV/+oeXrMrQto5K3f/\n8xoQYnFBgWYd9rvcjpj0pd+7oCbjrUI6bCgEmjQCg5RCIMoh1/7DloyRHmEj\nIILys+NSPxAKq7PyloTgxT+UWWf6yeM/BaWpKkp2hKhxUiaVYwnVpBUBsXiK\nt8+7djbQCJdfgngN/QjaYz1vd1F69UPUDPiJ8grmUa8S7zfm1x8LrGw8UULl\nH3Pb+9DPQU6PHv/a2UtLGcNnow/NfnpVsgZyI3zGcnIeDL5SFwQn2fjxgYv+\neZgSSh22J5RA83Bwgol82L4e3E2hP3+6g6JGhxvj7qzRBRafjoAB39a+tzw/\nhJkkM7oFP62iFgSUcHCaOqk+KxSa9nvDrCUtEQziLup23Z0KyjNQ6PCKQo1d\nl3/2ipq7Jioyo1dBjdWtgsXIVbdaAHWcG/Vew+R25wLSYottcxCT6R55f9O/\nDppTdd8CvBs0/dH5XR87BRZka18NqRF2LzgAp5ys66EhDxX1/LK8cHmUIsOp\nMqxx5QRZN25RlKUGhAg3/wKXkMlE8wPWeEBEtsAzgyu50mWBJubIy62KLUvP\n8+PZoL0UFYKy4XE7Wbp55wkibYNU9eMW3kSY7LNVTLPTBKQDBB/BUQeFhJuz\naY52OsoCB9MMU41tZlVvCRZWbX9itao9L6o6y8kun/IyQb6MRKawhAPW9/F6\nHEdL\r\n=QEDw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"1cce57afe783f6d0ee960b6d55080fccc7424cb6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"6.0.0-canary.8a299b568.0","@material/feature-targeting":"6.0.0-canary.8a299b568.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_6.0.0-canary.8a299b568.0_1586990580933_0.5721862299389431","host":"s3://npm-registry-packages"}},"6.0.0-canary.490fbdc09.0":{"name":"@material/shape","version":"6.0.0-canary.490fbdc09.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@6.0.0-canary.490fbdc09.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"72c4870b5c7daf1a8b4b13402c86be6dfcfe7414","tarball":"https://registry.npmjs.org/@material/shape/-/shape-6.0.0-canary.490fbdc09.0.tgz","fileCount":13,"integrity":"sha512-cwoojnoLj3MSiSfBWZuejkD8hCQsBF1Ox+6vIjAvBhywHw8ZFWgbhX4dDESxSK/EL/ffQrfjCjL/r3pI/8z9ow==","signatures":[{"sig":"MEUCIQDt4hIw/+orHfpKKTIB/2X5agLWPFng0E9IuNvX/tlW2QIgQahuOzZctlMzQsj1P7ftMuGZmfj6GmCy5qgmTdCzccI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJel/Q+CRA9TVsSAnZWagAA8PQP/30i3GhqEgshSltW2nZo\nFxUAKeK9HdBkxeZPK/fwza9nN4vtX93j6fr3gcN5EuaPmCHCICw0KcL062Hg\nCql6ytTWY+8p1PRgVUsde8UEspjttdPZZ3x9inMMa8bfFJBA1bKaPOHgSfkr\nAXpwCpWvnnT0SrjMBHUx9tdn8ReaRQh4DA1tjTgqsQg/UO0E90ZSrp09fu8+\nJOqpewdPVGDdeyW9XDz+kEWEDlXI8q62gic29I7aslQXg/N5wD40swGJn8Mm\nj4e1F2xPCRZZBCAclaBKXIxiB2uRVQwN6jP8l8Q6XmAD+XQIIobwcYsrGhxK\na4tMSTFPA4FBlBPWHRKPBdKZmcL1CvQrnDA3jKWdlG6R0Qym4BwEZG5cRkgB\nYpCChX6wf4lFftGyasgL/JLcIZTZm3gAyQBjXlFlBl8UzN5b4fce4+qJZiaL\nXDVKJQnpe6Ve1yIp+u5h67j+AxX2GaatoXAcNiqHYXV3a7C1bIkb/9AOYkem\n8KvWa7nYGOsa93l2V1oP6yxQu1BAW3oL7bx8AUQvyvVKe69og8F94Hl527Zm\nfbEylbZgeZiM9VaKwnrvmT2CjYtu5dOQbjSUCgLoleNC+Q6S+jIizhrT4tUW\nVEyD21Kf07jIRz7CTD2qCGSnlSBnS65EyIOSZZ3c7aFMxKlfrbpwq0UKW5q2\ndow2\r\n=UMfH\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"20bba7dcc3290528bf225184ac976a3b486ccc00","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"6.0.0-canary.490fbdc09.0","@material/feature-targeting":"6.0.0-canary.490fbdc09.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_6.0.0-canary.490fbdc09.0_1587016766274_0.30595312382975814","host":"s3://npm-registry-packages"}},"6.0.0-canary.f838c6e55.0":{"name":"@material/shape","version":"6.0.0-canary.f838c6e55.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@6.0.0-canary.f838c6e55.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e191da0768612ccdc68b6e4530339c236e318903","tarball":"https://registry.npmjs.org/@material/shape/-/shape-6.0.0-canary.f838c6e55.0.tgz","fileCount":13,"integrity":"sha512-4eIFhoG7vrPerV3Pt7PjqAR3YqvmPD0xvqWTaJ3u+RAdnOyxy5QdCtueh9AuSLX3GQlMXzgJcWNhvlEID1B0Dg==","signatures":[{"sig":"MEQCIDRpvaSxNIwaTCW6cVdnJGYsR+Zd69OSA/1tod1WUqTAAiBMm6qDcTOJCAU6JCjNrD2lvEP0WLaqnHNMSPinSb34Sw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemGsNCRA9TVsSAnZWagAAlmoP/1SZP/ZfmiovupZuUwFG\nNd6fvsgL2Q2dhtS0hds/3SVNlPmhUA0oegs0V19Iq4gv5efWW0eOi1e8OQlC\nUrCCa/RY6+Z8prlKcEMPjqDP/cF4BwIjMPk/DPeV6Z/57W3nwZPIQVQvaY7L\nWIuQdTSInD+RMtk/h4fxrfCtjed9jf13BhDvDc0Gn+pgG7i76Uq8Hn3xLzIv\nd+DIvt9KT5L0fVuW+jVzxxt0EEETgxuMzrcySKq6vlDsnhCd/yP3XZ/Bm4Oj\nvrpwxXbFiIO5+gCP/UrHAKhVIY/e+l6aEwTN3jqarPTx1qiXBXKpYHoidoCX\ngNbmwDSRqWahxy2DmWa9G2DK6zy1uKQXRv1VUazrNnEPtqiAYnbVmW7AGzMB\nWV+WFCzopc6YBzkW8OOyh0vaCHjvPWKRmDaYiSzOSyt5TRBBEG51Uam9HfmB\nPDIMKXn9GV6FtwOP3V65Odsp6DQY6hHUnuM+ctTGi9ZN3tESY5YqlN/EHmFR\nhGSoskJnxOH7anxdNmhBuiVFiWLEVsMNbrihLDEbcwkJNglv8NLb/bm291OS\nTsPsuJmdCemYpXoHTqDGfT8HcE19/G3Acl9Xvq4ngyFD1f2HjxiDNIRy2KV3\noyO7cVuRLM1cqEpmUDgWmVyWVidrjAC7vgqrSz+NtJXmx6bw/NSwRKSkKtAe\nKM0c\r\n=k+10\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"4088837a2a2d0b4af544090557a8266202e13a8c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"6.0.0-canary.f838c6e55.0","@material/feature-targeting":"6.0.0-canary.f838c6e55.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_6.0.0-canary.f838c6e55.0_1587047181025_0.8102775636887023","host":"s3://npm-registry-packages"}},"6.0.0-canary.ce6cb7024.0":{"name":"@material/shape","version":"6.0.0-canary.ce6cb7024.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@6.0.0-canary.ce6cb7024.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b2ef788bbca21bcc4daa486bb7b4411c9a623c82","tarball":"https://registry.npmjs.org/@material/shape/-/shape-6.0.0-canary.ce6cb7024.0.tgz","fileCount":13,"integrity":"sha512-+WtslvhOJUZaPxIshclWOnSFyh7iPyZmDIS+85HytLvgiUcxcFmOwdsm6DsxN6mKr6Un0wxBAB3jJN8uN0v0Mw==","signatures":[{"sig":"MEQCIBB86jRNzWfHS7f3+OYkmPQkQzUOZ44enVwQunMzCUKQAiB3Qu17eDR570vxL0mmsjtZwrRAoRsXaMQOSYm4vJBprg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemJN2CRA9TVsSAnZWagAAFCAP/0y+J4L2S+U8xSRfwy3r\ndVwQvU7uUOU6qnxmOdLANISDF4X9wOgy36LOK3cgrkZdG0xOhRA6Yd2NGaY3\n5He4bzvDY9JXpOv9dr9QF7R6gAdI1NJke+iyDmjU9VBjaTz+zyOJGXos6/Fr\nlPkA2Pas2qLBNyeAiXSND9cy/2kUf6yBxFGTQc6+xt3HV9sn9xXgeZX9W9gZ\nGRIt8gYnuV+iS5OHJYagw/Ju1VSzoZogfZc+8ul8By0auxvHtzd6J/FoEVvR\nihTpVaKKgYk+7Osej8Bde4pIhIwr5G3+SuQOKeBu2wiWwdLWZcIu3VG8RPJE\nKYfXAxtE9l6gNv/RxhZaMBmFa+dBdsWZ7HM1x3KhvEb/EKhRR+kjFJGm+jlF\nRIaLfDn9ktiE2DFyjBa+FzCdnrXqwEn9iGdI09xVaoCskjyT+xqjvHc6L4sb\nS6BsT3J9LY+pPU6+7/xq623vd0m4qFy62Mpixr0cgCo86XE+z6HJIIgtPthC\nAxXZy/G8HZyZrzcRKkPS+iSqSn2hlfhgnkWMhugZoTwYFDFtt8jWVYEBo/Zg\nmrmk9L6wlWeM3f/pCuhepAMgScbM40LSCi0r7hPWnPmFqrcb9Upct/ty2ZHR\n38YINwE3NNX95GDjG0REbSnotaC6d9G7PdSMYJCJ95LNv4BWLr5AyrVkBP5z\nSJtJ\r\n=TaEz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"50c11d42dccdf93592bf97e9211f34d95983996a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"6.0.0-canary.ce6cb7024.0","@material/feature-targeting":"6.0.0-canary.ce6cb7024.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_6.0.0-canary.ce6cb7024.0_1587057526386_0.5942018130448041","host":"s3://npm-registry-packages"}},"6.0.0-canary.0ab62a65b.0":{"name":"@material/shape","version":"6.0.0-canary.0ab62a65b.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@6.0.0-canary.0ab62a65b.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7a13689c77f809a223a501c36e9dc00f8b705c70","tarball":"https://registry.npmjs.org/@material/shape/-/shape-6.0.0-canary.0ab62a65b.0.tgz","fileCount":13,"integrity":"sha512-y6muN4kSs2lZ2qHEYqy/7O1PdFFgF3LMyjqvR/273DYVZYlU+dw8sLnJ1q1UD6h4dbEoycPx1RWvTJPVfl9bmg==","signatures":[{"sig":"MEUCIGB0fyVeF89BAe1xJu3ksYj3yLnPinDhKRKk0Yv8ESP0AiEArWqj7qqGKqCfCfsV5SFRSDTtQsG0wp1yR97QX/al0a4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemKnICRA9TVsSAnZWagAAsjYP/2Qw183ZomeWHDjgYELq\nEY39Y87ww8aJV3T0MO6xgC2c8eTd7H54+OWIGrA7O1333E5ED0Ztozhm2zs9\neSohjderzqHewRq8JVEM152eTpaOlLt9kshzdVdhIQoSLMzSB0QQ9xYWZoSg\nqwdIQcn46tpx1ZLc44xUaS/98Esal2VRxg/EZIEB3DFKz/qd5Q+awWn6bLcB\nezVEhkeD67Euy+oeIi2Pf0UsbU9h0FfcyBNxaKDVpcT6jhI0JV1qnaKEW98f\nSWgdlOOvuJYvrHdUytdc2XjCVHPe4ttNC2h1SAwv6XeFMCrCdRelFDvuOkLG\n9CtmVANOCv3362NugyBe44GmfWU5XeJQdCOqS3nQKo6elaOkwNphuOtEmh7T\nMh8gjP6MJyhmRMx2DjdfCe4CwgdqjQgXJmKzs2u6sPv+rfX/Vawxah8gb6IF\nnLNYp3E53aHU0IfLwNZkzGrmtx8gohq3P19mxOWaDnxR18j8XpAke2Y2nAqU\n180c1rZBvITRVpz6nr2OTPHsKoDCdG7BtkDUrS4kAvrpynHx5HBhWYtnboMZ\n7QtGc1EF41Kuft13qn/nXqGhaC2AD7UxPV/JzVoBINQXeDcGvuDhuPEm5scg\noydIww7cdjBUn1U97jg8w/wa6yl5m91rV2GJmAftG0N/mVbXJMBMoHexbJy4\n4TR+\r\n=IbbT\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"f8890ca1119e1fc3b197f172b8273c05b5fba35d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"6.0.0-canary.0ab62a65b.0","@material/feature-targeting":"6.0.0-canary.0ab62a65b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_6.0.0-canary.0ab62a65b.0_1587063239810_0.055563553480126426","host":"s3://npm-registry-packages"}},"6.0.0-canary.ca61b656f.0":{"name":"@material/shape","version":"6.0.0-canary.ca61b656f.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@6.0.0-canary.ca61b656f.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d58c248975ceecd736216f0adcb02d4dfaafc2ad","tarball":"https://registry.npmjs.org/@material/shape/-/shape-6.0.0-canary.ca61b656f.0.tgz","fileCount":13,"integrity":"sha512-uEPX3lLZ6J9B43OJt43cqNfcxeNHVj/1Epp6ZGm0PCUGpWlV0CvF7kh/FOtHgsrW46KKeQfcynaYLgK8ySwOGg==","signatures":[{"sig":"MEQCIAN6ydPy52Mm415Tt4CnvZWwahwKeg19cyfytuXcGIb/AiB65dc+nQQ8liQlD6bD0HBVFDhJznBMSAvs13M3gMe8bA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemLksCRA9TVsSAnZWagAA64IQAJ2BN7Ratve9ylhyE+0q\njUgTzTY+w5bHrOXTK5o+o4s9gJrbHYXb1BPRt9vEQg7qX+B47RpmZybk6wLX\nhiS+HFaU13YM9S3mG+buNrO02I/z7nzkH2UEHEf7hevjujKTT3W+3/C6oZxe\nRVRW4gfTTVnGcHgniOfJbO8XyXb3jeBqEMHwVhQMi0glzPMhqqviF7L/vprD\nCvo5NAu1bVm5mpZ+GeHMaxDOLa8gQL0b/JrNfiuAa/RJST7ZibpMIRNjb4rr\nhAZsbC0mWo6/MHJ7NzF4BOXWyWoWtVQnfY7JOeS30G1SqEpaowCT1NsMaAVD\nnTLpYqgMv/37SyKYS465PqgzlKvITjuqPZ79/pGCSEkNTAzl8WHUhicEQmG2\nH0sSaJIRVotO93op4/a8yWpfg4NtO5YUvWzmc189Mzn2T6pJmtW/NNDEwoVC\nyh2BHBs2dp3Yn6jVxZuYiNvR0UELCB1I0bv0POCDny4UyRv0X7ugYP7LbHvV\nL5ZumLG0qmjqaAI09uTNjQmjf2VkgseFNbbdLIi24StIX3NZR2+yczd7ns/w\n3wK6s6G6Yx+FgurL0f0eoRYGlpygZtxcmmEV0QA/1sDBJ3eV8EmfLp94SZEY\nUac0XdwXR+cKlYADmVYi7jA4VJuEh25+TNiS14A39HoIe+6CJ/vo6QhfD94s\nxbQt\r\n=fEFX\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"967c93bd4843f43b3821bebc6113ab9c73533ac0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"6.0.0-canary.ca61b656f.0","@material/feature-targeting":"6.0.0-canary.ca61b656f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_6.0.0-canary.ca61b656f.0_1587067180513_0.6609658096638498","host":"s3://npm-registry-packages"}},"6.0.0-canary.45a6615e3.0":{"name":"@material/shape","version":"6.0.0-canary.45a6615e3.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@6.0.0-canary.45a6615e3.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0771d21e284dc66dea856d92578d3096c22ac31d","tarball":"https://registry.npmjs.org/@material/shape/-/shape-6.0.0-canary.45a6615e3.0.tgz","fileCount":13,"integrity":"sha512-t5zZRFQytqSWogiKb+NkuwPmyf8TMns1fflKhgAo9VeCDH3rzXsNChJ1CC3f8B+uwpVm2oS0OfOlQ9P+PlttyQ==","signatures":[{"sig":"MEUCIQCqFYfDUEm/15xGmQ66W3wYQAN3S7xLyvBBNSWhFsknwgIgSNi+jkmJa+X6ULulRbg2eyGLKpuCYGDhKFC09021mpI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemMDmCRA9TVsSAnZWagAAW2gP/2MNKI2uLDeYZpUi8YuO\nVhOklms2GMZivgDGCMxQalPIf5zLbaqjA/2qDo+hkVLS0tPAN1m2e4uDmg6m\nMVulp88TQ4LMPUxHaKB2kzf9SF4ItFkrD1MTUvLMUY/hrwXaBa/trirc+yMQ\nomkBvfWDkWHnvdklsZJZGkdLtvK3QufhFBneSnng1k6+TKuxVMWtm1rJG1Sa\nsGbbWossx2ZfMNqvZY6gFa+5N/40M7Z+v/huSRSTlNmzfBDotTUaF9JBBJcq\nxOyPPEggnAi/NpcS0rJvJE/xyU4Dj6+mbY8RKw+c46eEwkeh8KxJtI/KoAat\noFoM9AWL2pJe7mQ0jqRkyWoMZZlxsG1xMzXVLIyG4D1CMfnRO8VdrwSUF/WI\nSxSFpKytRI7dvQDeJocI6fHPJC+7UhvQLkPHx9hpBlrY8d8Ie6TXdaVoij9F\nRwqYY9eXqxcB7mMJrTogf09PqXtGoCyhTHF5mL8p8a/RTtUW5PjYmrAmgFom\ntaQJJc/lbW5qqEDGTfPRvTmwcb27yE3y6yKXEhl6sKANgHWAV8YYahpjwiK7\nOOjPGSjlP+LsHTHNsI68lNjhJnk7qjyQOHPPuTm/sodWh0ozurQMHD6w5Mzg\ngOMxtbu80u7Pycyr1oLLa6h7UPnBL6XTyES36Fu0R97HL7KfZrxzHShGVI+r\nEIN5\r\n=EsAl\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"0ad3ae693731b43b2c055b2fd649a42e03abd2a5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"6.0.0-canary.45a6615e3.0","@material/feature-targeting":"6.0.0-canary.45a6615e3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_6.0.0-canary.45a6615e3.0_1587069158061_0.01734937780508594","host":"s3://npm-registry-packages"}},"6.0.0-canary.4b04cdb0f.0":{"name":"@material/shape","version":"6.0.0-canary.4b04cdb0f.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@6.0.0-canary.4b04cdb0f.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"04910dfe596a056791e264f18a0a762be68556bd","tarball":"https://registry.npmjs.org/@material/shape/-/shape-6.0.0-canary.4b04cdb0f.0.tgz","fileCount":13,"integrity":"sha512-Pxqjk1AjY0VaMWBlqLAC51Q005o6uVbggFSONeEutfIIwXghYGFzuWNN1i0iEZNPR5/bGbCWtEr3cUQ1Hc8tPQ==","signatures":[{"sig":"MEQCIH5CKkabrAlhNfif0Ui7wHYYYdOwmSxgqU8GTNxJ+kIaAiBFCVuYl9fzfMJaJhFh/qSCg5pi7Wg213yHI2tZb4ZR/g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemeocCRA9TVsSAnZWagAAGAEP/AiSSZ2Dijgz3o/BjzmJ\nAhP2f0TbAwg3CfST3ziVUyPwh4GCcWGwWur3fPG/TUGA/UBLQPsuMhl+97LC\nF8tp6bPo8lUO/pFFJiTzchO4xTxTHby72v5sCiQYSyh6f3C1Xi4ntqrysyxH\nIpYiwzpMxoWZTOo3kv7E1+TmIc48DqQFApRLGcxBKyezkMow318WclveGjZC\nXGA53FbdvWhIk1f36XTH0kxQ9EtfcZL4bGFgFm/JETIl5n/ZhlC2vaKXS1/W\nPY+yyFT79mIPTrGOuFUsXSJwSutD+JIToGCqiTw1ADpFiOrUSFpAIzy2J+31\n2zTKJ2RHRX9lPd91SJ2FW0tyOXf2G92ISHpK/I1rx+vS/u0yKm/gcEW9lcwF\n04PeDGLyS2StQ4c2v7FY6BmlItZXSABge32q+Z+6YW5za8idrLdIHsfe+UJW\nlH/ThRPLx8wOIomcfnr78Ht3o1Lm0StpC5VskkQ21QNEDSPnz48dVzj7wz94\nyAaHIj2D7/n2Xr3P+W/X5CYQYuoRg7NSu8RkukODKGFyaVM/6xTcGVdHSUta\nxEzcgxhX3LF9rq0BCjtY2OwxwFdWrmIqUBVhnPcCZrWJjXoujrDOzCCl6ngH\nyUyV/QzHNCNlO02TDVbmKx9VOEZRCY9txJJrQ94aTqidT41plLTETJLZ4Z0s\nLmDd\r\n=zEr2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"bedcd48d2eb94c37211fc93847852f5261655559","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"6.0.0-canary.4b04cdb0f.0","@material/feature-targeting":"6.0.0-canary.4b04cdb0f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_6.0.0-canary.4b04cdb0f.0_1587145243581_0.4075629772921108","host":"s3://npm-registry-packages"}},"6.0.0-canary.b273afa93.0":{"name":"@material/shape","version":"6.0.0-canary.b273afa93.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@6.0.0-canary.b273afa93.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ed61bdffaa36b9aa3955012264746cdee35873ed","tarball":"https://registry.npmjs.org/@material/shape/-/shape-6.0.0-canary.b273afa93.0.tgz","fileCount":13,"integrity":"sha512-j0E2QQqISk0/Wr+JTtbqOqKWpab6s1yvRxwO44GJsryT0IDE4QkU1T/TPBgyceGZipWESQ0ARpe2UNRS/2OWbg==","signatures":[{"sig":"MEYCIQDzDaSyKoZ2hbBzgEMYrp6/z73cv4mJJR7hYgSWpQ3ZrQIhAPh8tt0Wj/76ABY6npGRpmRmzjd9q4p6Svle/KAlPb14","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemjWOCRA9TVsSAnZWagAAtlcP/1onRRx4RG5Gfz1MsOTf\naDbUOXBwdz1hW4tNiQ4mAu0s+h5TxIZcJ3hatXue/8Z/VxTrjtqkKATDplaS\nb9wc5Adaxj3qSRc+jO6I4WmYB1KBK+GvzOjqh93l0BFGtxjP9g/o/mXAA6DX\nPuKyOj3Y0X4IcSHFpcp4h8YUciBB+QyUJT7WNlQYT26I5u2Ig6SLSJ/+hB8H\n7S+oPpjOmHUIj3DmsEcyWjcMX4oEyRavrHEzyVTk6spnBYFBKkEeOzJsWTLs\nDKIU4lxqLUzfRO0J/ele6lj06owPTfaDGbWDq7dHiXEeCuUcff3BgIPFBntX\n3OaR/kKEyQPqa2m2A54CP3KGJMXmG1DkS0nDrSi/LkqO16Xfy7dDPj9p95YY\ngAfReh/y11pG7NIKVFup22v503XrTzjXb6jbd3zyV3ml0HO1viEUIm0JlH9F\nOzyYa7Ej35q1vC9CCZ8ZwVpUj07bMz4KdjUsyT5b6TBUUi+GVmgaPthVSFip\nAg/fFu9howQAQa+uIz50oHoY22bsG9QMrRAlBAukFct/7RufdjAZX2nRfrjz\nRlminpgPgYuMJaYCc+4y4/lj2Ic/s3RgBz9J8OinUkPMcLrs3jDSSsc44yEs\nWzXmQlG602eKOTOTJftzBBaos6X44ExKzF3H20fUb8s+MetztzXN4Z0ZE1+n\nFqSQ\r\n=cy95\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"446d7bb0e65fdc3259b7b9025c6c058731ff02c6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"6.0.0-canary.b273afa93.0","@material/feature-targeting":"6.0.0-canary.b273afa93.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_6.0.0-canary.b273afa93.0_1587164557504_0.5010276389573844","host":"s3://npm-registry-packages"}},"6.0.0-canary.b70bc601e.0":{"name":"@material/shape","version":"6.0.0-canary.b70bc601e.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@6.0.0-canary.b70bc601e.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b882b15b97a537d7d89fd9a0370be61ccf3e29b1","tarball":"https://registry.npmjs.org/@material/shape/-/shape-6.0.0-canary.b70bc601e.0.tgz","fileCount":13,"integrity":"sha512-6XrC+1jDbKWgFyJrVlNkGQhnzJX+g398CM69yYFIat/0dRyjSWLiIDM3AssH979hdGuRErz7TU6JB3oB87IBjg==","signatures":[{"sig":"MEQCIBGmjzcsFqiXUifAnfiaR/KCUVYtX1bGbfiIbCW2+JYnAiBMgQhHbwkCUciyN2ila4Z/544UnJsm5D0w687P/qa+uw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemjnqCRA9TVsSAnZWagAA8jIP+wZy2pg7a3r16Nh2Rrfx\nHN4dvdThKBzAH2SdKP+p1Gs2cK0U7ZuFtlwKUuVTBapH7NyprknCxX9bpqqw\nFpajExKWBjIE13t4qCkjcSt6UKHUN7qfrEbXpnDO3r/w2AC9n0XPSUFv5LV3\nBZ9kfAwRJZr6WA1i9hdejQLKLUgFl8KaFH0J2v+2ynsiD6RZQ4Ep0Mqlyhi+\nQ1BtjZg0VVRJgoVK2KbXPSqY2zGb26SKBsZr7obl8KeQu8Fb65B+0UFT9/qx\nINYDwgXYx9WBsgG9nbd2L+xTCU5tRL6p5BiLbs+uij9kqHJTktl8s6j3QXYw\neZUIMbMyl61lfqKPKsotwSKtYGEeog2eOyQHmD5PSYAE7rI1kZfEV58r/rwa\n7d76JTu4OexElIX/s+klf1mvt0nIRE9uMA1hMEWElIrlIHScYMIFoj3kTgXN\n6Is0V4rWs1pFAzcwopND0gS2kLjeDZxH1Be47FqNprgg3xk8tiI7YQ95qiKe\npLEs8zWwirTLLVWmnQ8vLhSTdihrQ+lEi50RcK11CaojVpH3II06emCy413d\nwJLURmrV/w9tkyCZw8EBbAldNvcz7EuFoPiIwhI9x9B4nKsRMvvuOLn9yyNP\n4UHffJZLEx+EanEnpdZwPEYUKynztB5z+aeu31HSGJD7YPpnBAgx14vufV7O\nJ6Nz\r\n=4EhA\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"90c3468e59a65aab424bb59d4e91a4d522fca3d3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"6.0.0-canary.b70bc601e.0","@material/feature-targeting":"6.0.0-canary.b70bc601e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_6.0.0-canary.b70bc601e.0_1587165673769_0.2323295363888649","host":"s3://npm-registry-packages"}},"6.0.0-canary.c4b4bba96.0":{"name":"@material/shape","version":"6.0.0-canary.c4b4bba96.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@6.0.0-canary.c4b4bba96.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5147921105f690c7d929dbb7445787fb8be480ba","tarball":"https://registry.npmjs.org/@material/shape/-/shape-6.0.0-canary.c4b4bba96.0.tgz","fileCount":13,"integrity":"sha512-X7Xm2VAUfT0yeaKfAuihx3kFj4xLiqNwkld2R8iwLPvX3FzrbnhmRosxMydPtkdN06/Gy/MR6Uz8IzcHeAXtYw==","signatures":[{"sig":"MEUCIBZ3BNWGr20h4zKC0SZKwFLqEM/aQ1tsD441c3bWsixgAiEAwcSKT+512xbChKYv4uFLidmamZdAHK+P02CbvN4/DcM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemkcXCRA9TVsSAnZWagAA3NQQAI5yPkSOiVIG2euRoFk9\ngVqz2ErU1poGR5gW8gKh0Th9GyyCu8tP/AZqol+ThCDVxsFdsxrbzO+qGg9F\nQSCSFkk9GbxAsECBOI8H45un3WY7zQLwg0zTqIaJdgbcXmeeuN2KIgK/FbiB\n0tWrWuCOv4y8UhgJyQJOJM/W9chBC8WlOng8Etw2Eu9Dst+JvUuWuN1W33w1\nZ8FUA3L6Rk6q7w6dbcbFoI4HQGmqBlOTi8LyT+m5gLuIGtgBLPv9Om3UO4t3\nBwlG+heOCJpcfzTZx+Ovc57s+em79+fire2B60Zvpncjelo2x1LVWyGomccY\nb8lObT7R9lBkTPXk/+r45NyYBJb7xaqakawKXT0P6rbpq9dpJl2N1AvhAsqf\nhG5taxopLheNFYgYhiebFmOrQ1Fy5SOSbQwd+PaNRVRljMyVdYwbYsXMWzuR\n4VXAoTCFpfdClLk5KA7L2ZaEw9oAnXBQBPmtBkPo24aB31W6bXxqHHjGotDM\njE1Jf3QW7IZbKMO45iqC6tsJA5CLDvk8tx3ljNvSKqXtEA0G0ahWIMsfBWv7\nkDrMC1Zc5KegxT7mQWhhZ8bY219ATPCmDB5l/6CzcTojr9LbDieFpdYrHPaP\nSDmCm7n6ZBE3Fs/53zlUTfT9HOpRfLes8WxODfsPDxzOq1661IP4wOxoG51L\nTokn\r\n=CtHd\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"ee02a718dbd2e86f9ea056b6199c1664c5abe70c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"6.0.0-canary.c4b4bba96.0","@material/feature-targeting":"6.0.0-canary.c4b4bba96.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_6.0.0-canary.c4b4bba96.0_1587169047517_0.2719971553416245","host":"s3://npm-registry-packages"}},"6.0.0-canary.6c1ebc721.0":{"name":"@material/shape","version":"6.0.0-canary.6c1ebc721.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@6.0.0-canary.6c1ebc721.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dff2fb9ba52d9ad170c6bdca61ca8ed94ca82292","tarball":"https://registry.npmjs.org/@material/shape/-/shape-6.0.0-canary.6c1ebc721.0.tgz","fileCount":13,"integrity":"sha512-O54ZYSvymt6rj8yE/q16cod9t2GRakZBuQNhtnRF148RedwG1ccz1XF7BHKLP1y3BeZPKP2hHRhQdNao2Rr1HA==","signatures":[{"sig":"MEYCIQC19Lkl/EDWd/UPqa3mAZApD2ZziGxE/HgeIjOdw5TUTgIhAM23b5ogAAgerGGBFW/zM4Fhe64szdHIr6B+949g+r2J","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenf7ICRA9TVsSAnZWagAAXZUP/3Xy4dd81oslCwnf6t+r\nMZJt78PVG4RhqeRbvtW2JGtqmzCXiHe9QN6wKpW63IjuQiwxykgKqcsbgpU5\nkJHv8CaCoIZZHDuQrqPYAnYED58+oW1f+e0AS0J8rVkLTdeTDeFp4fqWd6+J\nYSQamr3SWvPtLBxgmcCS3Hp5oUX8tTxry1hTB17ThHP+okfvGiV0b6lFtIaa\nUtHzocr9vuV6Zg4OFxyZXb/ZaG2MxauSHWFEXNIBsY+WG9yqf9NAZqZmlwuM\nieXenfzRmUGdh8epxs7/Uh3TKT8iVFZAuig3Di8/Oti1dqB7o5bwYZymLP1N\nUcnuFe0HFON/Lf54wJphKQ9f2XQRLBhzlsq94gZRGIZ8QvG6/zHzKaEuGz/e\nPf69nh7GU3dfu48mmiJZJJcw/5dc92HsXYvQ1llchwQ1zPwwtcDn2NdlqClw\ny3MOHxISAhSNEsPuScIiE5aTi1HRghtk9bL9GaK5zmxuMQVHHyhbh+x8pagO\nSrUpZlOzPGk7orY5qiGXTi668g0h0VIEabzwSQZ6ZbJJ/yPmjUNMynUkzPPb\nkQpTGHykc8RILzgHamPZIvj0ZTBifhjWnaBzvkU3iXQKSuMdwXBohstcd1RT\n5qE1kdgtyZ03wAmP/GNGXpoUj0CE7GeLukaIcFvV8HJ2F2pOofnhGcaPX5Py\n7MyN\r\n=cfON\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"b1a71b1e525edb460d6fa48e392b09267db9d2a5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"6.0.0-canary.6c1ebc721.0","@material/feature-targeting":"6.0.0-canary.6c1ebc721.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_6.0.0-canary.6c1ebc721.0_1587412680062_0.6434589834526006","host":"s3://npm-registry-packages"}},"6.0.0-canary.9cff4318f.0":{"name":"@material/shape","version":"6.0.0-canary.9cff4318f.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@6.0.0-canary.9cff4318f.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5e5ccca69baff333ebddda8e47388c8ea11bc7ce","tarball":"https://registry.npmjs.org/@material/shape/-/shape-6.0.0-canary.9cff4318f.0.tgz","fileCount":13,"integrity":"sha512-a0V89pAcXF+lpAexuCFpEThIVDfMSu6GA3wg7rnt+1QZhFzFM0NOyGAkht2q/lSKVMVuCtgw+U2JpPLx4dSbhg==","signatures":[{"sig":"MEUCIDIBlE+fyP6nWrMS2mKjnLm8cTYBMOOcKjpaBHSE+g9AAiEAsWFX2UqaAMUztp1eriZePgbpQYyxbKm3uokgOb/x/IU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJengxCCRA9TVsSAnZWagAAx0UP/1W33IFc4VKt0bW/NZFx\nOhzDWtUJ3OtBV0KMWlm9E63lU9EpMhmAgbVsa2y5NWivE5IWeF8e+WDGgCB2\n3TxZFW8JzxXBGW1tM69BEhDRaUQOdJCEUxGDFcmBR9Lyo/e6BZ/8RNPfVFma\neEdvxueCt4D0vSt/dj4BhQw1Nuz6X5wYQU3lRFSVBprhL3RoHrefvMWAgCF8\n9AUZGsflLEP/te9YyQN6MBcddY5umZ60ida2uwqf279q9cBHSWRq/kiHV0Kl\nzzkn81snog5p4josd4W6v72BjtGuW+uzAL4FLKH+KqbgTIhhIRmfbNW4sCbL\nPnbrTQoXMM5V610GmDjq/klWpCkzhOPqr5Xl+5bvcT3SlxoErX1vNNiyOcxK\nVYEA3semAxmQH+DrTGv7iCHRlf9iAZvV5OntEKw2PKPA6TXlGemtdV0xx54p\nFbnjIjk17o94SOSK9gTaSFWN03hjexaBjpUCc1Zs78W4XkB4lTV1eYb8dJRi\nYQGv2ieBe/wovCICDTrQCWUcrHe+fj+01SGzX6cVxXR+TGiNNnPs14Be8X/q\nrWods6Il47O50IfCiurP82dgum4vo47iV73j8PlFBpJz/xvkETHKg55WA5py\ntg/Inq2K5FaQFfFqgaqAwteWYX9sjq1qL61jEPfvLFWmiZ/JEA6rmd02vJA4\naDqZ\r\n=MhNO\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"0ff1f177754c259b5b0021494616e96f7b6e0d8d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"6.0.0-canary.9cff4318f.0","@material/feature-targeting":"6.0.0-canary.9cff4318f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_6.0.0-canary.9cff4318f.0_1587416130073_0.15019950753319145","host":"s3://npm-registry-packages"}},"6.0.0-canary.7b4482402.0":{"name":"@material/shape","version":"6.0.0-canary.7b4482402.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@6.0.0-canary.7b4482402.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c6a18bd1dbfe012808147231b2f8f0a6d698b25b","tarball":"https://registry.npmjs.org/@material/shape/-/shape-6.0.0-canary.7b4482402.0.tgz","fileCount":13,"integrity":"sha512-nO8yvMYUoyjK7xIPLpo9Ebtl5QTbI2D9rP7jUxohS/SkBnSFuxIxdiGtcLA8nr6Y50UfaRvVmZmtD/5QKUumYg==","signatures":[{"sig":"MEUCIBXjcBqVqI90llrRmhNHjU2DUMT1+eSPyVYGyjS472ipAiEA2hdnFb760LrefrhSbAYqMPEXb7Fw0uCXc0fCd/zavh4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeniALCRA9TVsSAnZWagAAiJMQAIWdiETa+lVPEWkAQV0H\nzDbHyY7OvpObIN0iLVj2+c9VGNBVjWN2t0ohyWf0R9BJgLHdkFzcqVYZX5k8\nLBjJq8f5g3ytckUaemQVkjp1TcnKTnE3Pky2L+EHN57F1vnBC6oWMC/riopq\n/w0G6oynmL3R5d37VQ8nJPzuqrJsn4jGaYoff2i/o4XQ5+A9WdGeMBfPLfvl\n9Bt/4ex19N8mpFITqUlLQBTOAY0lY5GSQUNZI/WvBd1Je6cwz1+KGvsvtVvn\nU7jnAlbRUZKNXBcHX0d0NXyyXSfNcYZwEm7n/b37Xz8UwDgXtjxixBvVPG5s\nLLwiaO3Nd+6YyXp0JtKAYBl51NMOLUnpKwFev6aJbriQkc3hJ/XCySG/6tvX\nsA/9TqcF0nClIaOndnv70ntv2RA3um37LjhNNCgY5C39BmY4xhF+ceqKoyqh\nCL8oqf3Qi5gS6tfrfWtd9nJIUyXAz4veC/GosvAgfz8b51XKYMHsfDVlf1pD\nhCRE1+7NMd4L8R5OkHd69yyNw6aVVbRAR9IzJXHwH/fFnb2CRAtdr6fvyAhD\nJWW3Ft6xv89gvmQJ0Ks307Yk9NnfGw22u83v/EjOmC+K0ykqGMmp4qJBp2+K\nsuujvc1opjHgtkJFAzsZ67uuIF7haECYGju1bcclap0BtHiPHS+hrBrKmJ5F\ngGf3\r\n=AVUB\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"c25f7586d29e2c5a6d3c289197d47b826d499cdf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"6.0.0-canary.7b4482402.0","@material/feature-targeting":"6.0.0-canary.7b4482402.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_6.0.0-canary.7b4482402.0_1587421195168_0.033638322161259726","host":"s3://npm-registry-packages"}},"6.0.0-canary.deda86d8c.0":{"name":"@material/shape","version":"6.0.0-canary.deda86d8c.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@6.0.0-canary.deda86d8c.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0178fa214e7f9e6b56d89e927a0c3a29e98ca57f","tarball":"https://registry.npmjs.org/@material/shape/-/shape-6.0.0-canary.deda86d8c.0.tgz","fileCount":13,"integrity":"sha512-uXr5SMCjCjLJhdZgCub4FUVqc5zhDuOaOhGV0pLTSkETrNeq+hl/pTSLl9zhTiavDnFp0jQ6gLpdKpGHHAbHEQ==","signatures":[{"sig":"MEUCIGErjysA/Zn40g1Go3Ojhye80bY5Sq5lhdkpMpkPFvLkAiEAhWHw+IxKts/aCzKjE47YvzFKNoaalMAPN7pDUxpCtRU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenkj2CRA9TVsSAnZWagAA1LEP/03SWw3jmzlgdGT0Inuh\nzQwBnQ/VtYlnhtRYypqVPm+bCOhvD+ukI3R6mMUsLPPvvIR+a0CKX8tI3K3G\nx/h7wtsVXii/WDD+t9JpDnozu3U6Il2rjbLv5y8b89QEEunDF1fAWWys6VJA\n7FC+njisPKz8uV8mpBtxiThkmSGvIGMdQiTiZnRGZ+NCuDinZXorm7x+odtu\nrmhcByxqd4rrfYBix9jBxf96Xxlf3Txz2yuDh6kcoCxMPSNHdmrXiTekysCc\nbBaRg3WmXluI6RlXOypPW2WpeojKrU0zO3HcvNZwWriysXdwDjW8n7L+/vpB\nMbIf3icCnDtERBmRfLL1f2I7/vpucVO1utadovhOVK4k8ZmmzoeMhh5Mjp2R\nrkV0RcFODK8/xkriP9tMpdf9tmAuD1nnGupu2BNROPnRPIleuJpAkS8pLxE1\nOBo08M6uVmX7zI6h3RTJu0d6sBTsC84ilniZfK56fachSbAV1PsajzvQmpsf\n+UYkk/RiqIBT00BSSu5hFtFbvzS+8xRVZIpx8ZYLTj8QyUlZuoNoS5HxYzBW\n5uPkrOIzjmeKBkKfqdTcgg7mgD6RXWsQ07Ev2EFVNuYlqh1ZAuk4pXE3LMmj\nxbKMK1iFHD9X9uFnuBnProA7s+Ppeya9DMcHB+po0IO9DFalwmQR7zRaW62L\neOuI\r\n=G3HR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"7bea6ac56136246274e77c281cf8c66e2ef3e6ca","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"6.0.0-canary.deda86d8c.0","@material/feature-targeting":"6.0.0-canary.deda86d8c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_6.0.0-canary.deda86d8c.0_1587431669991_0.4518102276542231","host":"s3://npm-registry-packages"}},"6.0.0-canary.d10412cb2.0":{"name":"@material/shape","version":"6.0.0-canary.d10412cb2.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@6.0.0-canary.d10412cb2.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"28b482216ad9400079eeb04cf709162f5b916373","tarball":"https://registry.npmjs.org/@material/shape/-/shape-6.0.0-canary.d10412cb2.0.tgz","fileCount":13,"integrity":"sha512-ly+7dQtD/aSXz2Tbi5qhYFjCFbFRheRfgdEKj8z/pbJgm9WAgTVZuv50qcElgTyi2lwBlIX+GMnGRaYO32N45A==","signatures":[{"sig":"MEQCIDosFVDTFvR+zDrw/th1z0SkL+xiOrR/Vf921BBpThKpAiAQl1vIZTzBONnn1ZDNEohbNccrHz4p7a59fOc5rPPmdQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenzjcCRA9TVsSAnZWagAAemkP/2nPaXsuWiIp+zmIlxCY\nCX5vqWo3WebIulNOXZ2907VrcfR7ZPjxA/ZHe7TxmuLvXWbqHdexJjnwsBPU\n72pVkntwSOkumfJufOTJ9zhDPS2rVLLDhBBf5AyMbAoRKHCbnkN2ozAPdomH\nsnEMToeu+TOEQk8KBeHTkbT9dAMf58fudd4FFXC3dFUrn7REhV3dMG9bn9HJ\nbLFeguBTyaAx8xz/aRUnI3n/zQUVbaBI6PRbftS5wbBOwCtUQPo+/x+h18RY\n4tEO4tHQh+BOHRbiXMjwfb2c0vFq/U/Maw/lk95sxJbFKUcg8QEBUU25Ay7+\nuRpttgNO6IqegmUeeZtxQm42JLiVUW4K7RZy+j36jFnWQf/x6Md/efdC9a+B\nEjcbdXiQlLlWLjRKy6zCfpxToV3V/qmDIJejQxzlNT5Vnd8P/INQxzGNDcDN\nZRzOB0vMWTdWsqyEVrb4FNNVWs6YFK6RaOv0dQBiuRKc9jBnciKcM/g//U+6\nA8qaJu7PCqwtSSSvURa4bi+pJ2mX7WAJ6lmXBxrBudzIRar3TsPpiQ1xEJnm\nW3eev9/85JO3A6pIkcGKQkI7n2yaLf0ice0mMmxwivfldaW+Y9WPqZwAW8dv\nA+iFZo4ydWjKvXCDsTN6PoGbquNF6RHKMSnd8mF2k6tXQz9vVE1uofYS6VI1\n9Qlj\r\n=FkQa\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"a2946b5762e597bce2d8e4e72f321bf4934e4543","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"6.0.0-canary.d10412cb2.0","@material/feature-targeting":"6.0.0-canary.d10412cb2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_6.0.0-canary.d10412cb2.0_1587493083467_0.9070933492273943","host":"s3://npm-registry-packages"}},"6.0.0-canary.c141801d5.0":{"name":"@material/shape","version":"6.0.0-canary.c141801d5.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@6.0.0-canary.c141801d5.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b0f2cfd63e2f6f60db489db50c36892eefbeace4","tarball":"https://registry.npmjs.org/@material/shape/-/shape-6.0.0-canary.c141801d5.0.tgz","fileCount":13,"integrity":"sha512-YtBLUxfl1FM694u58lHhcsksRkYTH3yh+fiElyTPPvA+wyrK+QR7vtL2wcVnjwakOZiFUEbUGyvbghUNdI9PKw==","signatures":[{"sig":"MEYCIQCvI4RE3PehCUuJyrFbzgSNntDsrBHe6eUFWksjyLEAXAIhAL1WyB5e3lM3tiX8A9VP2Ijn6s2McNjarWy4OCFXjR2v","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJen0xzCRA9TVsSAnZWagAAPCUQAJo37MGa2+BmnxuTkUpx\nzCF8hH/ElVx6MqHA+Lo7CkFhEzT1IBeo4exx2LnoemGh+4P7/i6HmWOt69aq\nc9fF/Q81cno4o8i+lcpWymvS8MsNyw2AFvf+c/u9lT3M9XFpzcYFs//cLygb\nbrnhYP5slWWU2SmqcBQR/V4MaBmXdtyfJ6lPY2vhzs8mHl6P1fcg2ZIj21h5\nj5Ln+Kk/rcY3pdbN/OPaJT+tHkKCxS0f1Q3Hu4Swt1GlGB5THcxNC3WhzmEm\n+bv04wYWPJ3t21EpldIoMQjnXG9PvUq7anTQZQRVgKncetsQzH8/LEJCwMjb\nbELYWzGT6cslcEvAzvqiT7+9cDUo8L4R3jHMVhcgcTxXEkJxsRWVhxdyG3so\nEephl4vKtlqJRrnfjRDEv4y//KeOiiMaE938IkV5A0D9+XqnCrMj5LlS+mTc\nMCkvWxJ8i2KHFjiKAgCyqgKIUQ2GHokNT2ztNtUxwYxDkB7MPWRK4WQBHO9W\nW+kniguB0+MVJ5AJEC0JibRhaqA6ph6+uTZIbE8O+YLMIQXLFS2Y+F6A73Fs\nlW6cVMHkHsecSH8oQ3XerDODN8UXj2lQgI79HPWZ5XOjWZGKKFulrCXpGmhP\nrN4YtlOMK4UTMP9aZBjExw8ljF9gOYWBl7eD+jD39SY784HYtC/LoHD4qxxH\nSRfr\r\n=JrNx\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"d026173e9bf7440b69f1e3e7e4c1bd60dc5ce6b5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"6.0.0-canary.c141801d5.0","@material/feature-targeting":"6.0.0-canary.c141801d5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_6.0.0-canary.c141801d5.0_1587498099135_0.8974656107655141","host":"s3://npm-registry-packages"}},"6.0.0-canary.28d10a96e.0":{"name":"@material/shape","version":"6.0.0-canary.28d10a96e.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@6.0.0-canary.28d10a96e.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a5e361d5d95a4cbdc78c876646d74f2a496900cd","tarball":"https://registry.npmjs.org/@material/shape/-/shape-6.0.0-canary.28d10a96e.0.tgz","fileCount":13,"integrity":"sha512-5kpRsrgXJwrYbkAAQnFalUNuFMFA7BpZe2fj97Phy8CfLyRnCccQcRX4SaQl+K1OKWlNyCgZrbYhyybJnJmMWQ==","signatures":[{"sig":"MEYCIQCOq+RUh5uRdMH7xf4DhQlQAjPZi1FpotCm+7RiG9n54AIhANCcZzbV6IaHnqqUdVwkFzw23qfdJx5pyOJmuZ5exufe","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeoL/7CRA9TVsSAnZWagAAx5MP/1dM9YHG36PVCX00xYfn\nfL9675eNfvIb+rj5AcaBWRAnkMVTNfGX4v67SWczoBqFNNsa2na/9h5Dmeya\njyvl7Or/M6WqxQnra4xLwjXIDu7ag6F+IOKsTjmCOwQcS1NGS29LdvxUGzLx\nGNrrAK8a7hsLhUF8s+WQmqSd+6K54kA0qpKlCm696KwgQtvXtQAiK3WJVMF/\nJadUrCGb+a+QWSnpn6u+OEWECdWh6OUa08UcSU0+sFgkVjnjK5kWVqLLuDsr\nriVGmreh7k3Z1PQcGgbcRNLeJKaSA2u1v/6Aja+h0ZNP8eQEDUQyTHkUStRp\n+BilrMbVFePq1MAcxVbP1uDvAGcC2diROZSzPUFwyV7zCwjzrbyaqqsLFOks\ntVuJwcXFkaEOVbGgYOsuiRd/nuUi1O4GFHP3KVuFpi9L0Ozv4JmxN9haV9Av\nZE1NugxFKH3OVxGhSA1GKgD8g5VTihglM/X2KV/RQ8cPj4N9g6rAIf0hUeXg\nMOOd3Iw1UNWvtWhTleR/i6mPnqMs32zX7aRYSKojExz3K6WRwcG+C57UhawR\nn63Ku/nIUEVp5EKp5mtx1QRNK0xLiTdt0lBRSEaRNgQn84sTfvG/rXttb8jX\nnQZSgbuXDM48FMAy00EZAOXo7tHeLdcIh9u0aHCHDwHSkltNyF55KKNv2Or4\nxu9t\r\n=0+kN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"20feb77e4dc8d7c73f3549e0dfea4b381106b061","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"6.0.0-canary.28d10a96e.0","@material/feature-targeting":"6.0.0-canary.28d10a96e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_6.0.0-canary.28d10a96e.0_1587593210970_0.4046346461205923","host":"s3://npm-registry-packages"}},"7.0.0-canary.8540808be.0":{"name":"@material/shape","version":"7.0.0-canary.8540808be.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.8540808be.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"257ee086a90ebb42ac75631fd6a65668dd59d4bc","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.8540808be.0.tgz","fileCount":13,"integrity":"sha512-TLxsV93IpbLDFp0P3bVS66jvZy5S7QDc4vwip6pmmzqSsdIlFC+KrEDHjZ9EXWE5pqLkOjG++K+FEmLvZHSEBA==","signatures":[{"sig":"MEUCIQDKPdyAYxOm5iB3G7DGCk0QgZzKUxEL0Ex9UgSsXq1SaQIgZec+mYEUmdHsMnGTCSoD2Io6Ohrkk5pfjdTge/p10Qc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeoc+OCRA9TVsSAnZWagAA/DsP/iw1dtaQzV6evHtA0XmJ\nsXKLVRSnF68cczKqPfLdtuifnCr/uEb/N5L5zST1RywPBo4W2pqQskYWeGgZ\nFK6yNMYj3/xDsOKHVpzOfOYz9H/PXu546MGcoW8lTND1cFJt/SNv7fHx/Two\nfDp6RwRrpfKmUxSCvru49yfHSSVTQoNZlLpvQumPuwD2nbksdDNhr+lIoyve\nV3aXd2F6AMQzBUDhPcn/vVCuuVyjGEIjsGiYzqYl6UPNOU+8FwqEmQ19VoPp\nSOuMkXjY9PXMswoDj7PI13RBtFmh2cjnkpoJ3dVpHqdRyYOqEfMv7eObQ6wM\nKHUsTn6ph/XBxJI0WSs8KU+wNSwLFRsdIxlYDEsDNVj8aw1B9K9xPpmysVz/\nXKaRfhOmarItusJcvK59eUiymc/gwAu4u6R80WoMfyB6xQTdrpFJROKUuxjR\nyLkBdryF0O21utZDGuuXfrXzjFyYne7m9hnZLMJnS6PxvmvRa2JyfWb1tCe+\nMLDTDXxx8WbuUVJnkYkb0FMjWGmUZh7k/bAwwOgh5K/8zMC/Vl9Z8TSBF5B6\nzGpLBqdFg8OdWup5vW8QlwoSMGc5qKtTaKLQ6zAFtG7BDSiBTu1pZ/j/Hi6a\nzRXpmnY6awyY75vt4Nalt6sEdwiHjDiX/aNCtGuBmhnLP1XeHAtMKntk+mg1\nTwVl\r\n=KfN0\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"a99320a8e5b4b718dbbcaeee1ec4fc8feb72b592","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.8540808be.0","@material/feature-targeting":"7.0.0-canary.8540808be.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.8540808be.0_1587662734425_0.7661762400372563","host":"s3://npm-registry-packages"}},"6.0.0":{"name":"@material/shape","version":"6.0.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@6.0.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ac81470b2fcc160cbcf2f6b2ce933c0598046f8f","tarball":"https://registry.npmjs.org/@material/shape/-/shape-6.0.0.tgz","fileCount":12,"integrity":"sha512-tZT9GGWI3QcOtyfJ07Hc3noP2b5Bvx2npx/aj+k7gEIkE06mzr08dVnVOup8z8HbHWIenxRJgdeF5+lAfBE3vw==","signatures":[{"sig":"MEYCIQDGR/ANICOnuQ0/hwvRHU2VNzwE9TctFj5x1tB3/UA2+wIhAP659QC6sQDEaESitTZXkAyV+neHj/CFWffX7Kc8hGuN","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18189,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeoc+tCRA9TVsSAnZWagAAsVsP/3uUlbIbWxqH9dcM85gw\nyv3jC0dDEKr+snMGQ8ugUWFC2SkXkLQlTvQrYuT8W8BWPim8DhYnJlSo1kMg\n+ZYDboT0DmPDYqYY3fpYqi5tQVgks5/IyJ5uvZOIRjVdhuPlutfs+rUWwRNX\nQVitXrifCDpBEIQ/rLVlj2nFLL5FmOwfQv+gF/JLxrCtqMGB5M0Wyn4I7sB2\nYwSJc42M64JvekC8bAlvXFaHMPpGPeJc3blwVQDvBwzGz+SsmL1BvFRRmD9i\ncxxKRcVX9qnwAdnanRVonr/i60JClZ/UhVw2iL/ub3sdLQv+MtZHR6eW7PSy\nwROFYpordZpW6CTHzuV6oHV5W/7hqnzHgJQ1Ud+5jYaUWrXcDA/3uJAI1rZ4\nqGgOrdmANEvNOTrdkzET+a3qbGMJmKbHMSqAkjmT4s50T9gKGsmqXz47G/B7\ngwVwIsw/BmBdDk/WFTnr9bSow+m7oNWcK9J8fkcjPi/Ex0n9823Zw/jwHTNc\nSFkp4HyEM8ZZU5gQfhJqd+XHntfZhjns8txaJh1Uz3HOg2dLShIoaB1MPMIA\ndcFKvBlQSt2W5gqtO73Tv4oA8pf3bkuwP9yyKe4jsfduN38iYJjqNjVNVc8/\nLxCba1YVqOINx/d5CIHXqFSQj2F7L4inKxAFhcoBybdSV0G3g8aHfOvQFCxb\n6oZZ\r\n=ANPI\r\n-----END PGP SIGNATURE-----\r\n"},"gitHead":"8540808be4296e60f1c1d3a637413e433ca7efaa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"^6.0.0","@material/feature-targeting":"^6.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/shape_6.0.0_1587662765035_0.016313012495373203","host":"s3://npm-registry-packages"}},"7.0.0-canary.2673adb74.0":{"name":"@material/shape","version":"7.0.0-canary.2673adb74.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.2673adb74.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4559201663fde159281178a22ed83429ac9a526a","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.2673adb74.0.tgz","fileCount":13,"integrity":"sha512-VcAG+HoVvfP2x+3wIUU3UBNde4Eez+8eF8Ydivcw3SsSjYp1mpT+jW9SwhaQ1I5mUCxpphQVbu2zKq9SXFzVAg==","signatures":[{"sig":"MEYCIQD2VzIo4+s6Np7uQpcWG6q/CiJw2cSPZsiW/mf5Q7YEPAIhAJOJEWRLT614nT6u1Jy5fmj/kpZDmGIe/LvVRo6Mp8pG","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeohp+CRA9TVsSAnZWagAAo+kP/RHt6zirA75Cp0fBEAxm\nULveDTlO1dNax++5oUVns+34XMWgC50MKFU9lN7xBQVwWR3UUVuXqyqmgsul\n5KwNy6oonkgJvPu5lcmCgUQahR/aeKra2anMVRgrOljJgVrihuuDiqh9HIss\n7GvSgAIpuAvNIAWOb13jYpHvGfUYqVV3jSKPQQadLnFSag8O1SAP+Q0jCo4S\n8xxvrU+BsJZg/YqYXeosiin7nO/Atji2FGWIR/IWR2JGPsttSGaRIJDft84j\n4wraLt6qDtmnqG15PGoqvfu0vtyPrRgMMh7s0cE/7eG6pPbXtI3urIYbgc/u\nQBEvy1zMLccCaKhIzZukrBUTXLvf9nJLyFr6yTu4zj/hDqkKHtfHzk8tUJWy\nEcH0uGCjGetbXjwOdGsT64KCDanDAW6cHt4qjik+5gT+f4jfl6KeSyv2hs0+\nav7LkWAeDryKlzB61ggHDGALurpkUspjGay2JbTsc+6pEIr3c7xypPcsNsac\nZmqi+4QH8RD1Pz0WWrktCCHdxtUgiIOolGXQhWe9qm5KEJoze/1TRzPNDIQJ\nWE1MuCxPC30+zjGGDlaIrmFMscWVh3InEJYoeGAT9qfebVZMeqecFfA8gmaL\nk7veUAYtkWdNsRHZDYCf7QJWvJVhl+jzErqFi1TTMgezSuwwKGhoqt+HYaH/\nC9AU\r\n=bfeb\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"9cedd1d83d1c7d125a3ed38281072b6e50b57e9a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.2673adb74.0","@material/feature-targeting":"7.0.0-canary.2673adb74.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.2673adb74.0_1587681918100_0.21355108175550397","host":"s3://npm-registry-packages"}},"7.0.0-canary.b10d0d7f1.0":{"name":"@material/shape","version":"7.0.0-canary.b10d0d7f1.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.b10d0d7f1.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7f8e7ead0adf78e3b4f180aa5ea001695cd63851","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.b10d0d7f1.0.tgz","fileCount":13,"integrity":"sha512-EIlUlO2V8AD79a39l79Oawc5B5x0amP4Wlw1QOT0eOVhF3sZi7ZV247Uf+0foR68Q4UTS4vLw4kQ45Ci9lZsTA==","signatures":[{"sig":"MEUCICsESS8HaaCmo0y4b1g9SzbVzF5TKuxXa1tjxWYqpHoxAiEAo4jgvr5yCR9r6HF+SvXbZHYutrUUYGLpjLXtlFQotv0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeojDiCRA9TVsSAnZWagAAU/wP/RZ1gpD1HHllD0lwQ+lH\nQ05aFxkyYDknVAWmqxLCG/8cW2nsY58QywF4nQOg1RxWHSxHHwHqq5TT310C\n5Hn4VQesikNIUuZ4JbBiRuac2l3lU+WXP7KPVUNOfDEQ5EB79khaR6h2s9l6\n4U2Gt1v1NFG5rubRJ2yY9IlvlFHXsA6OtCXrUdNgZXU6ZSWt9MR8A7N9iDC6\nxWrPXWmgee4c+a4Y50400kdMN/Gw99Ba1pV+pX2KRBlHpV5a0YesD9MDe7A/\nYWTfBEMCwyTN8sjZoVCPuiRyaQRX8isxSZ13v6NTgrhc6rO2BYe0DTQL8ZSh\nac0WFdes7kMWP3MKrWgnyoVA0zvtAWCPmZAlk3GWHrGBI4/ilyw9NeZGjDiM\neehVM5s8corJmnjVDRQU1I5eKFbG5TbS3ehbXFfgP1qGireU4iYVLtD/gm2Y\n15A3J5PnDdIvpFrtktOpC4l74vbN8Pj+a5+V4PUOTxsUnWvPXGPnKASbszTc\nXpbpO03zuXICn5/cxqQX6vWNTgM7S8z0fZ6GwhklWtDFANINwrXUvlhDF6z3\nzWZJI0KZ+Zwe9Z+XXATrgFA01dlcwfExdAByMhPPIC5fsqOCv9VHOwXYaCym\n2tc5M+q7wcX7iQ04T2vs+Pylvd+70Uptc02jW1KMCHZsCnewnrUK15WsYt+N\nwdqZ\r\n=FxlU\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"83fc566b3c065e01bf601ac65cd6d17b634b7872","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.b10d0d7f1.0","@material/feature-targeting":"7.0.0-canary.b10d0d7f1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.b10d0d7f1.0_1587687649562_0.7644074748504008","host":"s3://npm-registry-packages"}},"7.0.0-canary.3bd8c1bac.0":{"name":"@material/shape","version":"7.0.0-canary.3bd8c1bac.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.3bd8c1bac.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"af99924495368ad05ed89961277f3e55c7a2a293","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.3bd8c1bac.0.tgz","fileCount":13,"integrity":"sha512-82C7CuFZuLCU3qkj+nbbjjrNpUYNtbLbY2w0ofbAyZCK+9vWDsMemsI687ngLzYY01Vd7u1710Ob9K0nsNSI8Q==","signatures":[{"sig":"MEUCIGZhcFLADNvQHn1Fc+WcTjmlOQ1UsYW+kK081EtFq3iwAiEA7PFlr99HGROhybONC5qA6Uka8ZutfHKohxfTZdxBBrk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeo1SnCRA9TVsSAnZWagAAs70P/199SZRuT4ftpIJuqNmi\nOA2LZZOJzKjkLnc7P3Jt0rfpiUvHM1Z+lkZT6s0Wa3o80hMe292JdAY7eqS1\nT23mcJ5ZeigL68AXq8MZYqNXkx3JQBCCv0ChibTQjw5Nqdf2kJ2kOE87Dgza\n0+PxRBNMGQBZ5lLl9oyes0Y+blpu6dk/eYQVx03FkH7hd1X8F+gCAKuNyl9g\nQgWs+E91SsaNKgmw1Xc28ZIdUlXvuAw7O+aQ3m2lxxpLcesij37SEo8+6Snd\nyXg5rAR1OG1QfQK0WQM2g+bSXDJlqSXRJ8LxkHf6uiXRky1uGPaRFTpHjGDR\nptk5gV7h856Anwm3nk5+TnvkUHvYtVjhxoZSLPTdO4vfjFaScaQdE1DJTOI5\nAfQE/vryX2gm4ju+S/V3u/SmO1+56R13vIml9k4cUA5WgQpP2+3PKc4N5Vg9\nPsM0xKFKLIIDMVWh31YyzHPTtI6hI0gRnKpYixXlP7PbiwZ32hB24NyOhNyx\nqWvR+85uwULAblk8Fd0Nj20Bh5JaMQNCbLiLmQbYrv1DzLQlWSDEqcMTNTqC\nbeSXBl/oHefB9w9TOvatckRK2PiGhuy7v9134vqlpZYKiAV5XWt8MgbEPhCl\n2BaaU+f02tcVLvvoFgE6O7d95wg9GCiafr5UZi4lZC0111GVQyuDt0dGXDRT\nxfhW\r\n=rcVL\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"c6f324d1b107431694d9112a3e94b90e82718ccb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.3bd8c1bac.0","@material/feature-targeting":"7.0.0-canary.3bd8c1bac.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.3bd8c1bac.0_1587762342535_0.14573961763442855","host":"s3://npm-registry-packages"}},"7.0.0-canary.b83c8dc22.0":{"name":"@material/shape","version":"7.0.0-canary.b83c8dc22.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.b83c8dc22.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"21610bdb3ef685a48814ae2ef043133d9af8ff5d","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.b83c8dc22.0.tgz","fileCount":13,"integrity":"sha512-0fJDrGBhNV0lp6K6Xik0xJqMTxjqTFDEMsDhzMemAsIE5MlgbDNJITGi2342mEgRbVO/7Vm0KWdRiO418HLpZA==","signatures":[{"sig":"MEUCIQDApvHK1SdXYKuU6SubBlK6k+8rd2q1QgtOs7FOqGHeUwIgZJcbDuIgwj9plA0GFCvngeDpymma46IpvL4RIXVjWdI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeo1eoCRA9TVsSAnZWagAA0NAP/0yT1tVKdeFUTKM/1Ut3\nABqwiU/UhNc4rua83Y3xacTyLrneTptxiWP/zBZ5nZl+Ik+eqxDL0gAUO8WE\n8yyF9KjPgxlDl8R1pLKb+ZNdmMdRmIUV8XhhObOHZIWhuQ74umnoevOe9ndN\nEqhDLjH7FsOpTD04TTggEN95p4wHDTP+jQop/HbgXGfhlUk2BYlxfyU/uwwH\nteKOL6TRhiwzXHEZ/3iVeqz0brB/XBAAaNFEERetihPDKmh0duF30lHdRbnZ\nVJpMo+M6SQqBinYKi/NCBl9pAkY4kfb9+dbWE/4eSgykwM7aR7WQIuydfNW3\nJLRJwa9xnbm6oxLSo3Y/9Kp1s4ccSH1mFAYvXcrTyXidttPCgqJkKbIOULF7\n3bct2VZQCEL/crMPFseA8xDXAqpEQkZzOzNUv3YQ9+H/LHNCfft/z60FL6P8\nvSuBbHGhXgokX+3JMQKNXUzBVO30cQaW9MAJnGhcb7Uuf5brQbfCottdDtEr\nxwnBbP6LbWR4/N3LcWZ27AFBaoL8Hil+RalnjDnbvvbgQDoHWO4TIlec/aUC\nZSi+UWscvvJQmEpfcyuHd9VF5LaAvqLSQZMdRCbVbNpi6tntjhM3tPHXO0X2\n9DVAZSUpBWuU1zrVlV4BmEMTy7wtzppVqU5asU8Z4Kt9zbJtkXFYN46QrF5R\nJ4Vp\r\n=Oxyd\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"92cfe3e927d76c82fa2d8a864bb852b8d19f30e3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.b83c8dc22.0","@material/feature-targeting":"7.0.0-canary.b83c8dc22.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.b83c8dc22.0_1587763112071_0.048787890926174526","host":"s3://npm-registry-packages"}},"7.0.0-canary.1b3dd846d.0":{"name":"@material/shape","version":"7.0.0-canary.1b3dd846d.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.1b3dd846d.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f8cf03ed3bc970bd172e48122f18e7a08d37b3c1","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.1b3dd846d.0.tgz","fileCount":13,"integrity":"sha512-L6fXiHpNu7FeruozyAAMzcmeLkeX9VrtwAwHLRZ403rSK/jUMVxWya7Cxn2BOQIrVOoC0irjUClpLuStKe5Yow==","signatures":[{"sig":"MEUCIQCq733Bq5aKUpFppTwnYgSe6kR2B58UTbKEKkRjVN1lUQIgNN99k7IztxjJhFiWErqnf03KNkem0RTIPD0QqoMkVh0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeo4e6CRA9TVsSAnZWagAAHSYQAJk9nB+OMQChJ/tFU/yr\njQc7SxyGA+wJy2mnB9a72Z3OehbLVrCxgeBPuvK4vqWRgUxioFR6z58oIuOs\nI/D81EcrmT5C6q2NK7HI9qkB/rk4yXLYut8j4xuLa2eSV34VYEqXCTWg6p8C\nS26HtkUv81phquzE+pgLCABdKPdFO3g7sk9mb2XH7N0SWuFdKTjAOApCu0N5\nfNIZvJ1ZwpWPLSNigITjRK9Ug4RAonlTLlJ+pPmhtLRkYNdDMbYfpymDHpot\nXy8iTyd+rUWdqek7kuwmxrItEJytydrybNXOe5KpA5Lm1/C9LTVRtwbPdJap\nLK4hnwXZ5Hw74VzK3C+Pm8k6zUio9HQZ/XR5tQ9VCaJW9Pfs03psW6E0HrJp\nq50ord4iAoEJKt4lexbOxHsqLgKM1YwenX48htp4EOGV+rzea0/T7qY6fp3q\nXil+tl0OoXOaP/GdyVvMQdfC0wNVCV3jjrTlDtyWUE2rXshivp8VhQqUIhVa\nwVfijzmdwoID+zFkbcEdMFnJ6lq2lE/8o3rE28Idr604HsGCvj981z6yD3HP\nAUc6jB4MEzJgJDFKo5/QyQPrF7E36/3QFeeato1FyD6RQGLvHt6494ElPCwY\nrs5RWGeBzYOTUBOIh2XeONQA+KP1k0X95LakBnb8TealnJ9fG3XLXgLIeY/y\nkHIr\r\n=6CrZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"370fec5aeb98791d923dc357e46611e61cf6eb0e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.1b3dd846d.0","@material/feature-targeting":"7.0.0-canary.1b3dd846d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.1b3dd846d.0_1587775417695_0.4862862095457705","host":"s3://npm-registry-packages"}},"7.0.0-canary.29debfea7.0":{"name":"@material/shape","version":"7.0.0-canary.29debfea7.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.29debfea7.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9d3c1de5940075254690d116f54545269f270140","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.29debfea7.0.tgz","fileCount":13,"integrity":"sha512-3w3kzkemDd9XGgBnreZDdnQn63xqiZMGerzc5oaHtMkJA+Tq2Q1cAgQ3aAaoJAuJiPiJf8KUPJGtJgVwF3Pr1w==","signatures":[{"sig":"MEYCIQCZJ7bdMj9cY4Hsj/g1FE84fGPe3i9scWTZRVj59/oHaAIhALNi5oCIGtm2lecHioQi7WjWEx1qAnn/4yJ7ACOjetPq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeptC0CRA9TVsSAnZWagAA08kQAI+eFAZp0A0+IZa0fcsU\nJRnshnOoDufbR+76yucZmkPDTbg7hyq//AiAVlRWq/4qsW20L4fd/EHCAct4\nX9ceR1Qrh5s4YKZsuShLiKXz4VKJz/XA7BM4hYEQxtCgLW806hAfm+CraITh\nKGsXYzkScQlHUMhVaZKBiMqYx23yXBUV2xzNwK36FP138hNUeGAKP1B6JcFy\nlDyho3tdhK0hpJM0wtc6zKPJryN0XV9Miqib5VYBuYL41dzt/nQ95lM6ZbbU\nNKKIJwm7KasLqQ1to5j0uBp6V5wbZ2xW2cLyl75H8vG2iCnI4lNIoefycK8r\nzhF1p/lEPhoz7hj3MHNZSHGbXSukehNcPts8ccNSc5msVS7k3BOEjONAgumH\nQQToR/PBn2yt/T8qwMRsJPQL2XM+lBVxoOzN8lBZgzWMvtzDnuvZJ2ftOjoo\nSVB87c734DihM2B6wcPVKOhACeAD0s/45LmXvb8Vb7ihXCLBohyXfQ1c2EK3\nUJ9gcNEIfIgOTnAwjbAM1Uj1KFVQ4mKZpxG+cdB72Hsk0a60Z6ftWKy7W9UL\nfMt1vNsg5vm6PWJN29TStSxi+Cmkxq9zxA65JmJdoGc8zELjrOY6ctR1y260\n96vlr5kAXPnrDEToJe04OcFT+FNwR07wYz4mP9ZPmcXB+ZBV9myOQjzlS0lO\njz9z\r\n=C+Dx\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"f121c350e2a52fc59191d5e843358aa3e3926ca2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.29debfea7.0","@material/feature-targeting":"7.0.0-canary.29debfea7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.29debfea7.0_1587990707630_0.6300829101573533","host":"s3://npm-registry-packages"}},"7.0.0-canary.28d32f8e0.0":{"name":"@material/shape","version":"7.0.0-canary.28d32f8e0.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.28d32f8e0.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"206952fa409a48f65cd69910bdf3164fa7c8d2c9","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.28d32f8e0.0.tgz","fileCount":13,"integrity":"sha512-8fKwC5Fa5kcGyGW1T0qdZBEYxt8IKOTvN5e9WsZRZkIhorOk3stoBsmTao9MFhwzUPuX0HNObbq1J3Z83qmicg==","signatures":[{"sig":"MEYCIQCtN6PRuTlCAwzDF/nRGBmfkQBIJon8Cju4C3/3bBKR5AIhALD1ruFABZWw6OSWz2LzKUjQp0B6XNLNMGgD0/wpSbVF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJepubgCRA9TVsSAnZWagAAW88P/1w/Ihy7xLKSBu9G3SA+\n71XizhRlAjeXw+i8rwEAoRdINo/BCSK9DOljG4wYu7jFtIfmIIlBObzm++DG\nb1D4W2bVoieBN97hwycV8OXYKHHmkPo6VAW1+9US5gSB/CRkbv9lhgVMi/c9\nWonRjE9SEuXEj7d+tvdR27r4s0Wh7hLCtqieUBTd+0ZYm2ROtape3b+Y3aYa\n3qbVm+b14gXH2U7wZrjip3Cp2FntPmF8jWosoYNn6hE7XDgsfu5JNPhOpDT+\nLBIinGkvFBjBFcaU00aFaB6QDAL7ZGHkLvKReQb9Trf0AwCIZUPAoqmDv0Nn\nxdz5l+73J/J3vmhp1opogdlTiy3/VHf6Wf7i972yDfxoDuzzn/A6uxQzlGKj\nIrxYnPesDWXGoIiHtAkrzyaoK47s+O/tgGD3OJNovpO+oANa5xqaXf1V1+8q\nkHTIaz88YTdV6FZSfWybEsHJIk25yhk/CLjbNiOg99zBvyoRrsCYQorcTxLd\nR2CyOT5WGYmoHS0VD7OGlfn001SyXTQjCIZ4SvjNL9L1Q7spLcBm9LyQZcZ0\nXYcdtDoDQjlo7n+8s9I/X35BSFK4/bYoipjlzzAKa9ChtEV+1sgURAfLMV2g\n3goXahXsjfdvlGsGfVNWygoa19HMcTIOysEyN0oy1By2aab+0rZQ25jfdoAo\nQHMI\r\n=DU+t\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"5e2a5c88bb5127200d9f70d65964a419ffe2b123","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.28d32f8e0.0","@material/feature-targeting":"7.0.0-canary.28d32f8e0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.28d32f8e0.0_1587996384267_0.31609642323691745","host":"s3://npm-registry-packages"}},"7.0.0-canary.af71cfdd6.0":{"name":"@material/shape","version":"7.0.0-canary.af71cfdd6.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.af71cfdd6.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dac3844657ca04a938cf81589a36641bf2c02fd3","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.af71cfdd6.0.tgz","fileCount":13,"integrity":"sha512-omA+87J13C3LGwVLnqdf+tTtmY4Ap6c8ESd8pH9rMnMtJxQL6GXFlrTSrbZ8ISLAyhISsOFBkbCYSY+lqExADQ==","signatures":[{"sig":"MEYCIQCF2/GjNtSl2hMhDwafIZT51MAlRwGgH+puQFu6akPcdQIhAL0SI4ItSTPqYNWCYeVT9jHzTCVR+vcMp0TTAgghGwTq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqLl1CRA9TVsSAnZWagAAJz8P/jW/M+UISs7H2QMOhUs6\nyJqKIzyVD1shhrVEKJSutNnvaP9TWRSN3aenvGnp9NhAAC9bhyoYhJ7areez\ndT3noMqdd8y9MC+hTWoQwKS9lkWwmUAzBHkwE0UnPH1d/fAP22KVup1n1IZx\ngkEpjYVOH5wBSEJLShUyYdVQCw7vyuJxHatT69afqT8cqbu2O1yBtD4Nen/C\nhw7AVILPQwI3dV7UjL/5PifNUwvWaWsGh6cotromFlzMfrBmo/vj+CTgdVM2\nSr8pYJoGU0gxMb9V2BVf3IqbiezODgapHt0tpjNkNZ3yxZtxisKb1xZ6sLIw\nN/F5Phypy0wyF901oaqe4Zhh1d7yupOCpkXS0/qW0/HAIH4AmSsdAMdMzumq\nRDOmyYlBHSln/mUHo9b8vjtGB1DIg8UNG4bu3Vs5ODm0BqhsvudYRkDJtgQL\nN7h3x330mHGnd0NrNk3vFhYhxNFDbe+NodCKyL2LssrW7UFtOw6sOhbSKUT9\noeqg4JX+fUBFAZi3jvDpnvpy9DE6T3rxHXLvfnFFQSDtUKW39EfglBeWdyMm\n4T/ct7RevthU5SFvFxu+QI+ABv/opZ7xj38wJ/FI33i1ZKZgn0NLwKH+upNp\nB/BO0hwRO3ov7tomt3SL09VqHrLB73+aDyEj/cfXOnFFUpx2XcC15FsFUrc3\nKx8f\r\n=kMCu\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"8ab654dfd65440046211cfc73468f20a57d7fb4c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.af71cfdd6.0","@material/feature-targeting":"7.0.0-canary.af71cfdd6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.af71cfdd6.0_1588115828970_0.6254418010172649","host":"s3://npm-registry-packages"}},"7.0.0-canary.99d2fc961.0":{"name":"@material/shape","version":"7.0.0-canary.99d2fc961.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.99d2fc961.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7157fe8aa4466206c8733e4719d67b8d8803f998","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.99d2fc961.0.tgz","fileCount":13,"integrity":"sha512-zLRqc9vp2aE5BSNObyFFrUWutIvGcfp5e5S3wuAVP26aXh71b4NgROk+XjqC0rhMQ0mA+Ib8l4x90Y7DvnhDqw==","signatures":[{"sig":"MEUCIQD09zxpqVgDeKYi2FcfrjHAYPs3GR81YPhpB6BzRjTABAIgKpIsj9Uktf1q4Mdv78at8HrHaZ0n2hCf5VGFkL9kLkM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqVpaCRA9TVsSAnZWagAAvKoP/iq5ygXTcJ7BjdiMhOH6\nNr2roTXWDJDRgItV8DfCQB/U2fXQuck9QMGVwTxykmOq85RE89sTGFSTZwPO\nSoP+fi0G3pg01Uyx8aTkmfrjy5p/HcVE+0MBxq0FpG45SURvR/+RsCChBNCB\ncTxFKQJXmyR5yXt0C74S6CxQ2+rwuFNtwsuwY4IX9/Ap0GKmaqu7zzD1/1lQ\nDzlCDBEaCgvTJfpTi07hGtP3wN1dGHgdIAwwO4/GPTf4/TgR33RksrThmduL\nqSHuzMhR3G8hb0nv2q1zz86LRLjuMW6BtUdKTwMBoLaWuWvzyl35vG4bIZfC\nrcX31GmT863143L4jMhdERyL7zvuW7KL/qbiW9T2JVt065FKlOpgIWQBrGdk\nyYxyJ59zr9T9ECQ/HtsZdxlHbWscfsV2GAS46/U2OGR+gAoTFvRdDg89DDcM\nKt4lBOJ3AYuoZ65lL6uXR7dZJ4OMXkt0Kx521ysjc5sSKk7U7XLzIvfcV1JP\nWwaBO2Q0suDmLaRRspzFakQg+/aYCgLC0vZhHUb2qKcYC4/j2V+ChY+g4LVd\nu3Ry5qYEJb2r7v+WA496XEl3LbuXvaDJ1WXXqjf4zuBtELcf3EqXWUDue2Uu\ngJ0Q+tFc72ocauhaJPU/ultB2gbHzPqP37EYNPokIhaUyMqyeKZvkDUGpILu\nsRi1\r\n=14aB\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"9b1ef36f20c436f96aa47dc90c983832edc5985c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.99d2fc961.0","@material/feature-targeting":"7.0.0-canary.99d2fc961.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.99d2fc961.0_1588157018008_0.3473629402378813","host":"s3://npm-registry-packages"}},"7.0.0-canary.0e052b24f.0":{"name":"@material/shape","version":"7.0.0-canary.0e052b24f.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.0e052b24f.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c1b336f552870018e0a8f79bd10365f968d6d5ff","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.0e052b24f.0.tgz","fileCount":13,"integrity":"sha512-SL2ganwm/LIxCzih7U11VNfk4OOh+KxxBHUkQhZiNvDGUA/THBxGFGH25uPzyMGv/NLYjYGuYZQoj+uJ1IuRdQ==","signatures":[{"sig":"MEUCIQCSHmwrhW/P/KIfM2ECotHa52FGahJK6MtqrbwaYWO/HgIgX2zsFPqRzFpYgkgpzHa3bW0GCcXInU5hEohzMBu3j4E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqinmCRA9TVsSAnZWagAAKNoP/jXMk0iY9nJPN4ucjCWr\nwjcUxaCoqoVNDD5CGTtpAs8dFfSr58f2UI6qaDugFuWJzvH2IeMTZZcqzSaq\nyUWH/ldwhPY0t6WpqM7xpuAB3s5Yvll6fQn8Qi1RCAIusyxJgxYI6HCDkDwa\nJAKO3ueztQDFCpZcPYbykpsXn4IObQCXuxxmk+iXzfUwXDMLbPOdaclV0JFq\nbUdcdEWv9Qa2J0BSHXPxjxvUosb5lXJ7BL9tPnlezHdVOn/m9YamjHJoxBaY\nCwqDs80zhiYMO98BKebmRyMZvvrR4Hw1QC00YdtVKtejgsQFOlLzwJQehi1j\nfugSinOqgBo82iBEA6Gf9YcUhjkF/PJbqm14ghV2j//3f/YQM4QYHBQQEuRa\nvWAL7rOroc7+ym8RSrwyQ1c56z2BgXICPa918HQXBcZ0k8i33zT3vP3cbaGK\nIaU1fP2F5cLe6ErKzhzqJDcSqnM3fksyQ7UwfGFRnnZnfpEfiXBBxefbTxnm\nJO2SdlP7oOOPf9j0dLUPmzw+UT0MoKfpZOcq357f8wHEZ8NXd1osA7MYqsiR\nnkfSEVaxajfHnkF0C6Yz+5O8dnASTZy9cTu7Vh163+MUg6G3a+Zfg0XXmFp3\nYw7wkscDZeQd1YIO5/68DLUV07eTgImE+qP2vdUHTI20WHOZlBVTtA5LHVV7\n1UFs\r\n=Rj66\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"69929564b970323734d16e9588636ff8a645f2ad","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.0e052b24f.0","@material/feature-targeting":"7.0.0-canary.0e052b24f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.0e052b24f.0_1588210149507_0.7832413151143329","host":"s3://npm-registry-packages"}},"7.0.0-canary.ff4bc632a.0":{"name":"@material/shape","version":"7.0.0-canary.ff4bc632a.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.ff4bc632a.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e2cdb40f1ed19e5f863c829015be02150b0b09cc","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.ff4bc632a.0.tgz","fileCount":13,"integrity":"sha512-lBPFYjM+hV9tvSG/0sgPouRR2p7yD5nUgkuqtoQjok38mkukSkDqwfwggbgGL3tYKrbd//0rVPYiYD7yQX4h2Q==","signatures":[{"sig":"MEQCIAqWCBS9mevwfZd9YhLagpau+BWogG8CPpgimbTHiGPrAiAeaIg/3xQoWV0FV+XJ/Q9YJgWhOe4wf9IOpCuYEF02pQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqovwCRA9TVsSAnZWagAAj8UP/i/oa+fVwMIdq74UwcWf\nxnDZLQ9Wa9LKjblRmgktbsXerw4lefBvFT1T+0Cb2pBXcX9qBDtJlXtz/p8a\n8shl5TKnVeNXrKEeuck4SLrJq2F7NJp2eulKfQGZqer2zORepCfOj1qlkg+i\nrCS2de5sml0Q9egqTvY4jISy4EDHLUtOcGtZgn7Xm4ov6qYZ7S3LkguCEtwQ\nFuzVL2DzSny7+KjfVJNzA1LHPXNnAHgatViW9UQZgnSR8SxKVfQ8kidv6trp\nu3vQ5pXzwDGe4WT3eLTTJ25BqmQtBMmBTBkuFGdMVvlXzf7Y73unGXT387jh\nWc0+yo/4yFHOIBeI6sm89ik1/Io/tWpWWuUZW9VAdMmR2ssSWLoUHKqgofUt\nGecz11RS6kOLGm7uFsHU65x86eDRz4aWzWUOs5lwZtI0FoN4jZLv/Qa+yB45\nU3fKS3qKoGEkoOeDnt/eSBJLHlEbFW2TWGT7kH6hFgf6NFbOcrAGto90p+L7\n+h7y7pd6C9W0bQd1jrCJkfSIKX8303oQxYkPNsbnQpuc6iEID7AQ+ZcKOO48\npZAIXwNN0KMzwv7mJUOgYHRyGnlbGRKwL2XHOFswWYMujz1KqiWJWjnC/Bf2\n7/UL2pxAUP9Wtr0v0/idyxWQ3IiE4CkY38TP205jhy2HLBbFwmBpfurY9nen\n0sAh\r\n=LAZe\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"bf4456b9aa6b24c3dd166ee7bbf96a700054183e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.ff4bc632a.0","@material/feature-targeting":"7.0.0-canary.ff4bc632a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.ff4bc632a.0_1588235248367_0.9538682619622187","host":"s3://npm-registry-packages"}},"7.0.0-canary.b0f83d2fd.0":{"name":"@material/shape","version":"7.0.0-canary.b0f83d2fd.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.b0f83d2fd.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"472a7687d6655509fdacaa100b41aa7c8cac8877","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.b0f83d2fd.0.tgz","fileCount":13,"integrity":"sha512-XzkIkoz+AJkH93Sj0dbILq2+euZT31rxKpDcNQgU8UYZrzrIH3Tk1vhtTFQfVcdvU8cKGWCgCEgYqZ98Trraxg==","signatures":[{"sig":"MEQCICdmq2wqcilwlHyeQ8mRMwn/KjXr7JAHCk529UGh3+EHAiBF21OhO425yX7XYQUJHRwQlkouxhq+ZHptiMY8bBrL8Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJequFyCRA9TVsSAnZWagAAWosP/iLUaXIiKOVtY+79+Jk+\ngrkGiRNJIHFCu7De4wEEOY7T7HT0/OgHlglwyM0Ojge2GIknLjlcUKNgkYuY\n1SGBV8al/6o+ajovWDdI8oV3afljN39I7ZsEwjDA0QPzEZKAvAS04aG4gU+p\nlKLLYgBHObBT4ufoSw6PKvQM6+tz30by7J3BwGRrqU2r9Gh+REXxMSUwnEzJ\nqJDEVS5vWNRe3ieVVUIyAC7HGOFFMzGWZcilzm+MmEB3KON+GsX1pNdO2IJy\nvALIDzy0FaITbpCZBKHfhu0iCW1vGe5/JqODKz/Zt34lKvp5CDQbknyfKmf7\nlrpq/secWXzlvs+uOOXzugD74mo/i3RA+4Dgl+b/B125rKB1Y2Srcgn0Ltxg\nil78ktRS+gLBy5ZJiKvdufV6eccBFMPvX2vFreeOZ0eCqykiz60Jf5Tzo+j6\n0SrWgWFqgEpEaG0yywGjg0UCN+REGJ1VDN9Gt772aisxpnHpJ8qT/KDNAZSL\nFilOj6L2MAQU18rCEjtLwnO2nJPd6LI3JQ9uMC3txWYPovd+I38Lg8fkD3HQ\n99Yz3Fs4caO7OikkoPcgk0BqhjVUEJKUZt1ZDqxSejKptkg9oT40NhA2tTuu\nb0afy3zxOw/UDGJSf41VPDJo3beaKpYKTZwvjzf1hj3BEC7oDWEB2tONNSb2\nuiK9\r\n=C96z\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"a1500073e25d06ecb6fe752169f836de2cc6ba13","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.b0f83d2fd.0","@material/feature-targeting":"7.0.0-canary.b0f83d2fd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.b0f83d2fd.0_1588257137704_0.805213210937824","host":"s3://npm-registry-packages"}},"7.0.0-canary.e59906a57.0":{"name":"@material/shape","version":"7.0.0-canary.e59906a57.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.e59906a57.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e4677717ab5bac626591872c04981945bdc6a2c5","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.e59906a57.0.tgz","fileCount":13,"integrity":"sha512-m2RD+qIk0nBaZZCZwpBMd/QdnjhBDOO+x1KRc0t8PduQahfHT5cNXDV+d/YVAOYQ5iC7ZV5kArGVjLXVR3PfLA==","signatures":[{"sig":"MEUCIQDT0s5R7mpv0c+i0ZDN3HSJqLYe4QfXqe/Eu0ycWObIZgIgYP/yCjMLM3r2EzfpLW85dlgqtrIQO0hF8tBH5Q9nh8g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerENGCRA9TVsSAnZWagAAVS4QAI1uBt5siQ2shZi9EWKM\nRh0pj95aHkFzL6ez3vOqP+fwj/pCTNlOcoCxfNQueVPecWmdqTPLVxg4bH/B\nO5WWyF1JIV440MciaFdI595ZuuBNgDGKVjzXWU8LT60LKvftgxg1NEPuDWT7\nkla37qAIirt2g9xK2MoxvudzbL4FRECG9AFWN4uysOdgIekhoql6t63k+sJh\nKFIs4jIZH5fXU+xyLQ+WylL79heV7UBYd83XjUnOlZgIZJMYmP0zfcEo/ipY\nM90S4PG3jFq7yJrPT7VdeijH/PjarLUWsTocvGYZsfev10zjdRd88rzwQmLE\n8UXyK2k+tNET1J1DEsapHRJOPh+fT3gKIv/tbO6YUQevcVG9wGExevlX+kYu\n/Zeo4lymAXaiHfzNImWUpNzOB41ijsrNEuJYacQE9ZbTboDOOSlDkU4bABi+\nW1R0wRvPm6eFJzbwI9YOnUQYEgORxJgHCHBvqEYqLlOG9uljYHDI0wM1p8TF\n/I17n4uRYEdPYPAyI4PmRgzWulJfuv0VxTIuWSFh9XPhDIE8aj7LFXebPIjC\nU6DRcFXI8C+tF9yvOd+V+UvDKHEH64iZ1C2r6GrjRPmrwYAcz0TsMaJOnMN1\nM1EsVDgSR2sxucSSegEIz3BDacAi7mWthqMo8IjOVPNiAcSg1ohX6K95B2Tf\noexi\r\n=J+Qc\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"fc7a5c94d345c5fcd76d4957427c551ed759a1f2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.e59906a57.0","@material/feature-targeting":"7.0.0-canary.e59906a57.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.e59906a57.0_1588347717916_0.5691531544985506","host":"s3://npm-registry-packages"}},"7.0.0-canary.c02712b59.0":{"name":"@material/shape","version":"7.0.0-canary.c02712b59.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.c02712b59.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"294c90a909d2e661b601155eeaf564f069c39b2b","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.c02712b59.0.tgz","fileCount":13,"integrity":"sha512-9DxLWCZHz6gNIHV0sKb/aY/S/iFiGSfBxrhlERwL9k8wWq2uoi3EYOqKkk7kPcDVxqOCHqSCVkZcNmWxESDZ7Q==","signatures":[{"sig":"MEYCIQDpVSUrORcyCmk1YhjOvNm1yXqHpXA6WNwvqembs06G0QIhAMm0QqUx2eZVenlx8lPvOOFA3lEh/xUSk+UEeZvV2skt","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerGmXCRA9TVsSAnZWagAAoy8P/jX05oVKfEDQ3p6ZHQvT\nOitfqYA21k8bDZPLIbm8xTEMtN9UsUHbDlBD6FhNA0MFMiZR+o3TIPgX9RHx\n/s0xzDDNF1C+ASyulNjXl63S1Yf+1W1NGrc3nBkU5+usoMtvZc+Ovn8ufEUk\n2rMJwL9qy0riOJCQUJfAJkleLrfitJTWC7qSLQOElOBU/tfHZfQZSif1WaJi\nN9bVpPY+sFv4xx43X2ji/rsaWL8FC/6jMXzB7EahoI0cqPpNl2n7uucm9EYU\nZV7cZEMxcZ8wy6x3/uv36nQCh0/iAiOrHTNOf3kU69KAzrfrNaiEqKwgtQAf\njqNYwW5n2sDGsHDGkBqeC600k1r3uaa2YlvRqz9KSRS7gmGaRn5Awc6rgaz+\n6gJpW2BNXeUnSTp9bIfRdsZ5u5Ud/LrVGmEINbddmH5AugrSxVmb2c4Iz/AQ\n/SNHni40LUHdARLdcxZg74WbhvUUPQyCEYo+pM6HoH8NDOOoai1G7V5wnb09\nlRn+e3fI3W0jVNpSEH76GVG8IjyD7lF5rUF5TL+hwxPmlBh9ze7mfHSEzgel\nCC8XGocNECIiJ3f2a2UIUZ0KXJkFt49OCRFjEA355/HP4KYW5NnU3ui+yN8G\nEUoHHPV615Ik8u5m1vFrpE8nNUG1Z1Hve0WPa9CEmYR7eGL6EkHkwWN2DUhb\nyhQi\r\n=tUla\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"ed5da0cff8ae5197cbaf84af0bc924c207d3998f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.c02712b59.0","@material/feature-targeting":"7.0.0-canary.c02712b59.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.c02712b59.0_1588357526762_0.863738528915416","host":"s3://npm-registry-packages"}},"7.0.0-canary.15d65448e.0":{"name":"@material/shape","version":"7.0.0-canary.15d65448e.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.15d65448e.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8433136308aea91c677c24c9ced3701a386d48d7","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.15d65448e.0.tgz","fileCount":13,"integrity":"sha512-2wrgbub7cFTGln2Z2AjVcaj1PiSnEAl09KcsRaVzuQ9rirb6jcHqn0VhMJ1+m28P8BFeMEzJfxlF/Q+Ro01gbQ==","signatures":[{"sig":"MEQCIHcBPT97NHZO6bAGBowT4QOnflfJrMd4EKyFWorIaoMIAiBWAn1pGdzXMlQJqzqWCaXb8CTogFDo/4nyfplV0/qBXg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerHbkCRA9TVsSAnZWagAAwF4P/iTPwBQR3Ict+PFP/ZI6\nA7nUmYffSSrS/EM68H9QV/2nNev+AUk0RIjyfomYpcfVFlOobl/PtGOJFwYk\n9JVIOT4kzB7tGRNfZ4QJTjx3ZtesEAG5yGKFHHZ7KOgQCb6o4XNGlaFDgrgV\nlsWK5bSnyIt8sl1jPtAV+eXsW/URRhteMSdyfsLEuvUM0xAjbOAY1ivn0gVO\nz9ghfGJWZpxJj1/ksHn1zxx92D4/5XiZrqwEPDlWvlUZANeCCb2WfidE5vtV\npVboeRK0BDsbCdMOJCZHLxqRH1gVbam06xNExsA1p9dsRC8pLFGQUab3Cj6g\nUvYdusgqCjskFFfWmZdP0HpBrx3HlHc59bO2p7lFLO27aEmW1ArRHR44Mfv2\nvmkoNpWwCiOzmd9+lKnKfeZecSuP4saxn+B+L67ZiU3O+3Iz+9HyUsCQ+Qwo\n2RkfVQkuxXhMMPmy9gfxH5j872zgzPAhIAx2iSdwI/Zhqh3FvmdIzlAotekC\n9KePFzOUZQpYt1ulTNNWPG59e7XP0u5XfjE1kpFjY/I3H5geqJJui7sl/fDj\n64E0ipoQNPhtNELXl2Vo2jGWFjeiSZ3V/N0a1kx0zJlPRUKHI8PcLaN1IquV\nHTxoP1jpWqA/u0HQR1ZuGr2w1Q25iMLQKTs8zBQ1tZDfEl6G7SPMNqSHjjgS\nguZI\r\n=l0JN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"b2e16d6a45e857fdec3838c3c09ee0a1c61d1858","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.15d65448e.0","@material/feature-targeting":"7.0.0-canary.15d65448e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.15d65448e.0_1588360932129_0.9109748531161144","host":"s3://npm-registry-packages"}},"7.0.0-canary.142b1549e.0":{"name":"@material/shape","version":"7.0.0-canary.142b1549e.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.142b1549e.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b6a879fe0b1310a06483c15e30d7c294a46b3bd2","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.142b1549e.0.tgz","fileCount":13,"integrity":"sha512-xq9g6AzTEvblqIA0VlNzlSEIPRm1sS5oj0zXc6kvPNnClMEqo3T1i1GzQ6wwVfVdMx7f5VW9gGd4f9zqQTBOMQ==","signatures":[{"sig":"MEYCIQCT6yUjBozlFsQ/fiRRM8/32yMGnDhx+CuJmGIegOU7wAIhAKrbhgyYf9ZNr/Ug7ST/yJFcRVBgkSOdkjQeqri1TUaC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerKQyCRA9TVsSAnZWagAA5jIP/1zO0kLJU+WIg1IJisTl\nI5YiNJoOgdI6ZQsC5Mdvdu/UDX0DFXAmPV/xAwF7hsPJLqC0ai+709dJX637\nz9Lp5womw2Tc5GIQaij5gxT/Ek9SV+tpXdM5I7eVGOeKdPw7GeYWOZDS/ejF\nz2QCXtu+k6ecYm5vXBwR90/EHNedBZydZCkDNxVDaNTVXAOoLMOVZ5Zilzrt\n5dm5kKHc+DuDhcY4LLMLVuyyPvQMhZvVYL0fniEq36ThHRb90TBYBu0bMCgP\n/H+yucovCwsWABBwp45pYOa1PI8oGgW2ns4/ubHwQQMzFboSU28IWZlvuiJZ\n3JTWAlmZksWLddQyF/R/cZ9sDC4+srCN/lqnLERMu6SdNr7IDtkH/qBab6XG\nMdKYFy16QSzWxGKsRoMmMNu0+M+dLyXt5o6UGH5JKbdD4Fy2VPixkNgJ4AGB\niQ0m1sNo7gTpCvYE7hAy83uejC7zUHDZ8lJBo9iIOQ1cnGgA9M6VbIf4VTdG\nMIr7OFbPGfG1elAYWswaeZ+R4o9zp0Jmm4SJ3UbgRlxu8w2B80SOOU2gqipE\nigqG3xdrwnbBQlXrN3/SPbAcXGys9FpkU3rb4tw3CvVtBsaYvGMisq8IwxGY\no8Mx1M+LynT5j5JtkLI/nWA6tXrD+ODhhCagyXyPzClR4Q2em2kBm6aCmTjK\nHx4I\r\n=YS8V\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"c43c6e2e74a4352aad7225952aeb9e7154d35751","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.142b1549e.0","@material/feature-targeting":"7.0.0-canary.142b1549e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.142b1549e.0_1588372529727_0.11123967362360454","host":"s3://npm-registry-packages"}},"7.0.0-canary.524b7b812.0":{"name":"@material/shape","version":"7.0.0-canary.524b7b812.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.524b7b812.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aba91e9facd8f1ad68db8b0307b09846a3853aab","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.524b7b812.0.tgz","fileCount":13,"integrity":"sha512-VETU52QhyEmPjsXsaZeO3rmRIbppUzW69381ofu5zcsXCJa3CmBrWEV5fFt4SHBexjxPGVTrY92ZMxmiyvdO+w==","signatures":[{"sig":"MEQCIAnGdU30eaZ+c8Qy2cPIZfe91dZ+iXY0lGP0/Rp8/frEAiBCAHe5P7jQRwENwtUNG8LZO9bgin5FcQ9xN8TFU3HC/g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJery3TCRA9TVsSAnZWagAAQi8P/A0oxvgP1hUxcQVRLnuE\n678Iesbo8ZfECsh65DjKj2PqdkCvscu5Wno4NqBG86DaxAjC5Y3efvAPV4hR\nV5Jb/PdzC/ZTECdJ1MTWr5pQVq6Q8snh3y1TtoTflspr2CNGSyKvyzorFGZZ\n3zjhmhdrxeCjsJUvlcV6pUpFqM9rfYuu1ZOA2UnUMFt3nFPhah9rRMHT3kNs\nu/MG2p5xgzg6ovNpPyTAvPTWE5CjLdi+kTiZKq9r+3mS4limXdVwl9HkQJfP\nunhhLxKk78NyIsTmuss0elZyIcNJ+b0XwpQFxA6/gmAkzSCVkRdKtx9Ont8l\nbvTPs2tnedBQcAchd727P62L+o+DHepyLtTuGbYlXJWMy9BXcWF9eMO5H3+h\ntqDqqiyhbDimnu7jksMHbFs8xNkTUdT7ySacjoTbuGN7pQHEd2w5k8LdTmtS\nw9ZZQR4fKdHJs/uXyVxJwydh9F/VOX0VALW7IIAvfT0lSsXwRydSuB7grBWd\nKCxvZ4joKnY3u/2x3JzLZ+vTN2trslHyPGTbBqxzE6otFXcJv2suT2m0TmAb\nLgfsW6vyTomZI9Byi5RGYsatPsddVeJmY1V4RjuenmTzhvzk2BoxO7G+s9/i\nEyQYgSUjosUrVTHh61CvUoBpBJakHrYgVThA9wOb9cmZnyw+9IXmfpZLpAOa\nyIXr\r\n=vD6M\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"82ab8bbdd2373b285c315177e7054a727b38f4a4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.524b7b812.0","@material/feature-targeting":"7.0.0-canary.524b7b812.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.524b7b812.0_1588538834647_0.5618348074597059","host":"s3://npm-registry-packages"}},"7.0.0-canary.bd8ca9678.0":{"name":"@material/shape","version":"7.0.0-canary.bd8ca9678.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.bd8ca9678.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5be8f02e9df677602284ad24c1b9db004ff72e13","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.bd8ca9678.0.tgz","fileCount":13,"integrity":"sha512-tYPsEWh+Fa4MRtlkFpRi4oRz6ZIK7TadbF9bEG5bFmWxwiU5a55th+JhGUsiLThvDkILgd3q2+QSK0tgcqxJLQ==","signatures":[{"sig":"MEUCIGoEKTQir7ATzrKIObLM2NhUCMk+MOrcFNXIurOKWIq4AiEAoMoxQTTA6q08WJc6HfgzMnd4KQBifabbJ1PcmSmHiiU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesE5yCRA9TVsSAnZWagAA3RMP/3xRcmpPBazyI48YUh0e\nkz55iM2185DtcRVK9Ad/wZA9QEknfJBisuZgnbdYrdetXFSn+858JzZFliSD\n5R4OGJ37EUme8gkoObAZ7q4yO5HoIUlFLmbWwztPNcR/dQIHYDPXnzoeeGdj\n1XC6QjJEC6jLBCjbqQqjCngyK/6NBFEG0D4L08cy1xjMlbxjfrZZY2DS9dQD\nYgm0lDz8IH1nYJ7na6vhivORtzigrA42Qv4Sdd7sMagLGuHrGg5520gfVv6M\nMwKG/MTEodDFH6jzg/HcjZuX2pwDb333sPR+ytMxDeJBdvguacmD/F490+XX\n/ifuq02V5gGBXuavP3mi1NtsgucJKQ3XMGWC/5Qk4r0gmSDE/eq0PxVks+mn\nLLkHrgAuKJ9qVfxMMVZlp21vmv7m65mj6YxHAcdF+IDEtHpcmyqEXicBOUoN\nPnYb8VsrqbZFTleT3H/fTEFl11/9T6T4JopbtTL09psQdSO0deybz5L/HKan\nYXGv+2coGXUPSbDImKJ8VwXQnXPYvtZRo2mbxPREhCQiTfdtAj9+u38lE8dZ\nnHZgCNh59ldZKgMYpJmS3sK0YdLCmKrGNtrBmrj1cXTbsGv9Ua2oVs8r3Dcm\nurcZXUId9X7CMySfZiHYpyCfO9M3YjhyuQiibh31CKnuHUSSUsPWxEEnSceQ\nmnod\r\n=1HuT\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"d21e98ae16f9c893bf27272d187617574615c417","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.bd8ca9678.0","@material/feature-targeting":"7.0.0-canary.bd8ca9678.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.bd8ca9678.0_1588612721836_0.5870585260491292","host":"s3://npm-registry-packages"}},"7.0.0-canary.2553e86fe.0":{"name":"@material/shape","version":"7.0.0-canary.2553e86fe.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.2553e86fe.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"80e9b3bea41756d97456cb5605039131ce6604e7","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.2553e86fe.0.tgz","fileCount":13,"integrity":"sha512-TF72P+uRvAnXYtGyrLvwsfAcTLeKZNYpVam8NpRcHrz+VzuUlM4Kl7GZOYAS1dyYKyVlbg5Wl2plGM3AKQBXcQ==","signatures":[{"sig":"MEUCIQCpqNTThbmenoI2qEU/S2RpLHbA9DWppWJrfx/zD7Vv6AIgZY+/HibqZc0zIOMZ4l9xfHVLkp8MtwgVzGPOoviYlN0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesFFFCRA9TVsSAnZWagAAuvgQAJuzy/BnAnvRM60b498V\n7MrGVD873jLm6VfxydeMPj3d3uGf+2GLdOuuvO7ecMpIzEbjzEtrhoiysSdC\nMh43aKPr92s0kjMm5jn0aWw7Rx6fjn3Fl+03Mf+j/pOtnOA2cY+YMOTOyqt3\nzrV26JOFnU9e6Xkzpu5bDVZYNemJitOc+GIdW2myMTn6AA4ovNQrXILeHb6d\nQ1O064JYx1yv/cSbcHbrtiPr+gHD7e/FGL5BtDxccl0HWyMwhCR5TG6jL/nU\nL+azzGeV2qc99hKDVaLjZg0MoqOgMzfeYm0oxvk0O/EXCQ7U02VxEeyxnYyP\nQXy6JF5JM8FwoqyytjdOO1UyvneN/iIuZLqgBiBhhWfdFPHvhRpb/ofD5YI4\n2qKZkVZqiJWki9QfRwA2uGe0eo84CPRaVBv2uBEIICdARSNRTnNgvuYJptod\nHSJnW8VMN7z4cScizGOXFIVdw1J7KJ91qOEyTqWC/jnMopF3h8In1zO2vWY9\nOFnIjmePu22u+PykuZ575VZPNnnbUuMtjwInDP842cB1mRx0IENwUeoMIWP0\nTqMopJ9Nc0oDWckBPkeorFulnyoC8PviOLI/O+eccnv3zhsKsnMb5h9p6P0c\ngEX9Ma/qt4PaGGuEsrKnnZ7MwMp+Wa1KYtWPYtQRboiQHpAF912wrLVvG3AS\n/XTP\r\n=BK7f\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"9fa3a214bf3d70eb6522a1f75e622d936e7c0273","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.2553e86fe.0","@material/feature-targeting":"7.0.0-canary.2553e86fe.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.2553e86fe.0_1588613444889_0.585105557566538","host":"s3://npm-registry-packages"}},"7.0.0-canary.03dec929e.0":{"name":"@material/shape","version":"7.0.0-canary.03dec929e.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.03dec929e.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cc3986f419264d698693c6f92a4c4d5fc58e33e8","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.03dec929e.0.tgz","fileCount":13,"integrity":"sha512-3VueGu8o5bNITjxeBE0CHPflkDEdzXjd10JSME6deEvdLGx/B/Vu27MwxtbUzSmy4Hd8CL/3SygLxaXs2TWVBg==","signatures":[{"sig":"MEUCIQDT65aA20qvYiSJEdJfychuD7MNsk8NehzKXLYkK02o2wIgUtNanek9rmJwfwEuliV7Pb8H9OxesNx7YhSHnEIZHCg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesKZDCRA9TVsSAnZWagAA1qgP/jut2tHRnTEePEk/nhX0\nTHfzYJ3pkY9jZl5C1o69uYdQw4ZMeJDa8/MkVZAnyGA4CdhDtSvfjAOgXE3+\nPUE3ejksw3ZoipwUJfbDiACYQb8JUQek82Elbu4HEZ31EmSE4T/7SzskJC2W\nom29Pb6LAt+weCwAeOALWAIGxiRdYdycFh/Mq7SVcgdltAdM0N1DKu1GJ8PU\nA+vGRMOfe31Xy2Ci6Ss8zX8H3hemxc8nUB+29EiAdwsQwVfmT3k72V0X1BRT\nguk9l7zL/0ckaW5LfPat+OB5882q4iwNOd1xFPqhXdZNPCA4Sm8c6wgjrOtF\nvDaVSN4ZFPbHby5vdXr7Y/7jVvRW2YU6Le85CPHyevs0LmU6fPxd/Qp9qTDv\nwZvIhyM9ojj2apRfEKRJAweFu2GFOwFUKAMx7W8XQ7EHeLu32YVVU0OMcMmi\nHL/PNXdALSq2Erzv9lBI6/B7YZT2seAgxk13kaRqZxmJqWHAfKC5dAL7HSUq\nWt++kQ3TZ3G3JYjiWtbvyHktlBbZZx3CheWEklji+sZcUxhbTfuhXQxVfhjM\n+NJxqEYur/1hzX1kJL+b2bK7+2KGsZnBrmyG9K1+BZejnkwoa6eSTkL6MJ6K\n+Xqm91JT5RGHwcNhZwxWJPy2r09HwiJeMrw+mKRfTYBqxrzEH0vIztM0sFO+\n3SQk\r\n=TLT7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"976244ee82fa3e080e074d9aa9a254e6428c90f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.03dec929e.0","@material/feature-targeting":"7.0.0-canary.03dec929e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.03dec929e.0_1588635203436_0.4742522069957569","host":"s3://npm-registry-packages"}},"7.0.0-canary.d92d8c93e.0":{"name":"@material/shape","version":"7.0.0-canary.d92d8c93e.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.d92d8c93e.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"85f3b60118dec525260dca048ec351520bb14b0f","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.d92d8c93e.0.tgz","fileCount":13,"integrity":"sha512-ymVfwUsitJWLpUtsn4bjJo0+cvfkAWvjQbwFj7mDViF3FvLwZEp1pHeuuciso+YDYo4l3NAz/fG/xAy+FBMTfw==","signatures":[{"sig":"MEQCICy81rc4mugIIV3bnhq46VjvFeB+OLOx5tY+WgmdX0TvAiAIiFKITBX6PB7lwPVd5lLCrCiraGxNweEXW5Gi2nQiCg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesZs+CRA9TVsSAnZWagAA9MMP/jqiUU82wPZr38AczZxk\n9DQH5BLUQDRR+mOoYrfSeBaMsh+E6DJrC/fyBC95zRGXV1MU++n8olQqMuw/\njwBSve5fbQ+5X6HErQ2J5X3AFxuQzg973nZYykfXpw1boZwEOnU1goBGsv+r\nX1T3OI6aZARiArxtggVKjSE4ZArNtSwYTGdkmrsWO/4OQsOl91+8n6eUno5P\nerezD83nZtpzXm9KRtPN4C0llW1JUolgPb+gd5LQJaT0fDiyD4kRUaxXR+uV\nCuEd00qWLKqMftCn/ZFmzevk/An0fiKJDC9INOUlZ8q4G6VEOD+omI+WlqRk\nkCH0iWCVrG/KuNxUadO4aizDn9IYmw6rOrCz4ENS3oC0JnBO32znp5VCdMdN\noJUAxUXWh+qfgwpGwJ4qkoPdOOu36GZUeDNCYSiwRyrai+yGeRiGI8hRZsrU\n4z46K4OI8sZFPeCM6aeEzfpiLZ3OYWshvG6ivBZdiN5rjmoPMEf6LxIZnbQy\n9rWIJV+jP2c8Ousac6azFhrGj5ZOeTZ266veQd90UYbRafyExUS/LUhxWbW7\nEO/RACugyHMHk5Y2HBJACMcCV/+o7y3Y5x2aVAHIzrv+8W3huTS4DxSNDSBo\nM5IU5e77mY0ejay0KBgAVPq3y1NFzSMRMzU/YqctUFcuN/BgnDAV3ep1WcYz\n/Zxq\r\n=8Uxf\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"0781b5a0f14ce17201271abfff044630d170700d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.d92d8c93e.0","@material/feature-targeting":"7.0.0-canary.d92d8c93e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.d92d8c93e.0_1588697918170_0.48635591628241714","host":"s3://npm-registry-packages"}},"7.0.0-canary.09f591967.0":{"name":"@material/shape","version":"7.0.0-canary.09f591967.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.09f591967.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"46a9962e3f7f6e12f3afc6221ba643df5283b005","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.09f591967.0.tgz","fileCount":13,"integrity":"sha512-CIsy1gjxa3bgTc++qL9AEXc/+W3u1M3ngBSpJzsk4MtwXFkqw3ZFqGlMmVN1J6Zr7ZlRPtZBDSnZbAUsEvt9eA==","signatures":[{"sig":"MEYCIQDIwTrBPsAO0XMa+iSROyW7J8QhmfIecH+WmK4w93lnJQIhANWW8d7LORFIRYKdeBGGMhrcsB9rWvMywKfypa8gX4V2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesdS6CRA9TVsSAnZWagAAqxUP/3Y9Ctvol/HmeZ0sFGzc\nOzMLJBYytSZKaInOohTHZoWl+k6zPGy9PmlPMNI2s6HAFFHIf9mPPHNTWNDl\nQ576AMoBsXijw/aDk7hMRgr+gfPa8MvwjZhCGUqddT+KqgGaVyVSI1EQEm2Y\nOCVX11Y8+6Wy1hAzUk1k/SIBHBFoIKs+qSYjtCgGR8VTKzv3FEfbnNHtyXaj\nhGUkKwePLMQ38eOx776AfWxiBefe1ncclEgtgEJgBUxkkXmjmxObDTLrHnm8\nDuWt/yfOGCg6IhfuxgWhVLqEFs8b5NvH7gMVup70xLLEn5BWyUEqF3IhLKqE\nA27KECt7XRSuPfVrAoPudPwRcIeOhCf27rz7qxJPwzMVvD/1PaIwjG2U16hu\nEvfm7TzzCqnyuJSepGijMZ0CO8FmGdps1B4EmCQdnKVB8bRWGocaHEyesQnE\nAn1/NCC2l5fm5yjNyd24/h+V55YeU/qALnlqCsRCgnyRgDL8je55VP3vJlQF\nkoVkB7rwC1fmsoLKMUqj0TTFg0JAnlCU2QiR73ZZ4vdJCTxBftdFR7mHdGfF\n8kfMzEhUGVLPcwDSGFh9ZjC+G9AycfEDDu5BYzQXU9o2H7jYz06PpE8+asAI\naG8PUzhxj77BJu/0C5Tx/LbM4c+0H2ZDVNJA8VX5aRRAqD7gnF/SMlnPofjD\nQgP+\r\n=g4DZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"b1c5f494b8c0fe5f6f9710e50d51e2736a01b227","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.09f591967.0","@material/feature-targeting":"7.0.0-canary.09f591967.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.09f591967.0_1588712633514_0.3525461423331755","host":"s3://npm-registry-packages"}},"7.0.0-canary.3846ce311.0":{"name":"@material/shape","version":"7.0.0-canary.3846ce311.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.3846ce311.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fc997fe11f9dc89739d2dfb03ef7785af4788eb2","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.3846ce311.0.tgz","fileCount":13,"integrity":"sha512-ArnM9IvXXJMar74i/0Zg759rr0f5anp+kigemGtzctrpnC6C9nuZv3IKl65aaJkE5yYAgfMvvf0Qw8lqAgIlLw==","signatures":[{"sig":"MEYCIQDU7ai1jxtlLqiOV2QPecTjnUK2bunVCv+UNVL7LubI6wIhAL/HibVE80J4SHqW2iSQLpRNwoTz3klfSxXUBqhc5I2G","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJessUDCRA9TVsSAnZWagAAZ8kP/05/idIr1F6AzXMhmhBk\njLXG06huz48Uo1nyADSHDyQztGaYwbsLcO/P5FGulqxeLm0MBfzuNXa1QfFw\nzJ1y2b7wtQAR2GcUXkLUmIj98ZnquglMLiAszXfd7FhV4UrBPhIVwPSl7EcB\np5nxYColPo40gJmrWQ09vXzWsHXEfO1Qi8GsVBNleVP9F8owTP0wTRwzfaKH\niqe3J423GquQvXmcmcwApeVdtKgsIf+U5jqGFpd+2jRG66G31OGcJ6+8j9xs\no15CEUPAc0+1+oG8EPBZ7m7d8xiET6dVPyzB+vUyWTQhNA3VYevNzOiDDRwy\nxXGTE6Jdjofpy02GPUdXa2RZmHEszKc25LVnQJqVp21AcYdnyMnoraPWcSJi\nrZeIWocj0sKt2qMpOQZ2MwUdwCsgbogWv0Hrv5daLnKeqk2S+BlMrM9RIsdm\nOx+mJZJceiE+u9KuPgzthAQqajHP7GyNDiYLrqv6NCFfQLb0jRz/hfqQeXF8\nDSD0RmC1YZDjZu0FHRU7EHsMdioXQI4mf6tCbNF2GXeDVxp2waoI23hkhgPB\neU5az1mxAolPZLSKGe4Z/SCaP3MibD1mNxvih3D0GwgGoaiRzCIvlq46W8i0\nlldUQSFQHZ84rk2XQpU5E8xfTxMLt+0Xo7cWphIOkwQXYpdPzEfNzkqJSlpb\nyCEI\r\n=3RGG\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"80b3806d13f75bd5b77443c9e504fd6468a5820b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.3846ce311.0","@material/feature-targeting":"7.0.0-canary.3846ce311.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.3846ce311.0_1588774146117_0.9192845295046241","host":"s3://npm-registry-packages"}},"7.0.0-canary.ed7f32463.0":{"name":"@material/shape","version":"7.0.0-canary.ed7f32463.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.ed7f32463.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3b02e969af90d711385240dd8f5c8f2be0c44c92","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.ed7f32463.0.tgz","fileCount":13,"integrity":"sha512-wvZqCaaT7+J7yr2CBsH21ibBfZ0pOki0Eeq+tRv/koP1qQHaLjqfqdkzlnX/7nZOXrG/HGVrH2Ow/uCo9cXl1A==","signatures":[{"sig":"MEYCIQDfNgZqZV5NXjHtmSVeFK/ZuAoGWLA7YTPGC00pgiVLywIhAOijbIa5UmzzJ2jRZQbQ2JbFBPvlIRPyUXJF2bum+x03","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesuChCRA9TVsSAnZWagAAb0kQAJjHwgQ+bAIAJmqYPHVF\n1W+51F0h/6iuIXUcU/aekMaNkKVe+5SIN6V9wGoB95gXpBj8bAucM3qW3/aM\nAn4py/SYEMhVhx+prpBCgQxMYS/ldy8/tceY2vHBSNUuqT7J3nCIg4JRNtp7\nEF/bmIPs5pNe6m7qmdcA4CROeqXCb6DIKBfriQX+Yfpy+aIIa7oVfSrl9LmX\n2bN+WmvM5H0P9GDOrYC43KwcwNziGzeQ5idEroIraLIKMsRUrEHM2feXPw9U\nNf3D2Klyr+VAkbNwPh/w/y1Jjt2nQYzpm8F/mQpRltnxgbPTdvgsyAP1GEKH\nZaCLEsl7PMOZpuYBd0NkzMb+77fNVZbIM2c9h1kc+fyiVh7C7pQS8ApAAdc4\nWSewKKKAnxs6/v9/i2WbIhCQ087wCKSKIVEBqg/sI/42STAJqpS1IXrCsqta\n5b+pzzIq+81OYeVWABG4srvbmktkq+KlCMwe+tSHYZf/x4uQGiwlKzVl6BF9\nfHy8O/cZoTzBquhyteCbnmV2xDQ8Weiti1CllpQAnYKBlQdGDb8xiEVucQN/\n5E5xnwMvzWGBLRc9BuU6W+4qdkC84WkeULbkCWymvy0SNt4WtkCWk+hGV0gF\n5PtGb90sUu7oZ1w3rBsMLJ0JB2Gv/NA/hTsyyra23E6n975zFDkN3KbyCI+4\nI9Bq\r\n=Sp1g\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"84dc461d7b4d6f61ef286fa2ade4f3d05018af62","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.ed7f32463.0","@material/feature-targeting":"7.0.0-canary.ed7f32463.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.ed7f32463.0_1588781216891_0.9721634526119074","host":"s3://npm-registry-packages"}},"7.0.0-canary.8135cc085.0":{"name":"@material/shape","version":"7.0.0-canary.8135cc085.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.8135cc085.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"afa9d792815a9d545a14ab4ea8209c3c6f06018e","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.8135cc085.0.tgz","fileCount":13,"integrity":"sha512-WTXORKPAxltZIUQkDOzhl8zyIYJdeE7CIU5QjHrI7nVAJxFwH+35+NUPtr0U27bsgGbCqNmUOXAjPdDZIy4BJQ==","signatures":[{"sig":"MEUCIC8lpCRU1SE+llekOGaXc7Vp3o7DJ8d8DWbaBFQ9FgkGAiEA68C++PvkA+34sxlC3y9YD5LnVz+RBo2zFGYO3Q/Y1L0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesxYECRA9TVsSAnZWagAA7lgP/RAGesOmuVOlqpakJKCH\nxAWOoxiDRx42H7tEghlI0Bq47icqkGbVGRga9rJM3MXHdQnhjd6fI9fOT0uu\n0WE4I7VEPgxsC0ezBpd+bUBsxep9S/YKfaHzeWZJaQ2STaf+n5Za9zyROojZ\npy75NUkGOWV3p91zG/kUpIX3x1aDxohTVixzrvhFs1j+qLybIjXQHG6TZz/r\nAc40V5/eJHUBPbEum5VCUdUE95i6fVSpl4QWI8TlWLgyn64JDDXTRZOpYfPW\nVQZWWsISIsHrW2cv3qH/pC8Gvnz2GWGvFzNGjCbfXNtXxRtpdcoPIVXxSNhX\n0fwomxUWtgpNgWyCarRPQOxBhFJGzW0HU+Hc4bYXiQWpWg/7uMdOqO5+7anv\nIcUAU3an4peidM5+8l0hem95Y0ArRTTCS+29lf9BsfyZfdH8WRmYosAsOgVn\nTlgNUgSqS5gIR256a3c4vZUx55p1ixixkQuDLEijM+X4vvabGEmNfmglGhtx\nbxEQ59e/1XQKhrz4nRk2OfNHw1iZO+s/YeGqIa/RL/YwH2Xbfl2FpdMXiBjK\nnuGW9d7M96Z7c7IfewKe9L3BGdrhnrHhqWEuopoxZ+a60IWpgAfvh9QZ6cNd\nURazBeIECdQ1xlyfWdLksVG65PF1eFZ5kRLDCIqhMC6qa6lAX/W1uCV2BKFY\n6e4T\r\n=SAz6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"56422959574aba25d1461d4e7ebd168437ebf9a5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.8135cc085.0","@material/feature-targeting":"7.0.0-canary.8135cc085.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.8135cc085.0_1588794884462_0.4763602187815199","host":"s3://npm-registry-packages"}},"7.0.0-canary.deb212de4.0":{"name":"@material/shape","version":"7.0.0-canary.deb212de4.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.deb212de4.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"415eb7149dd3caa335f017c50de2d70796228bea","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.deb212de4.0.tgz","fileCount":13,"integrity":"sha512-yhEPPb9ebz9CDaxrgkXM4PAHlEBKhMgN4gq/MtbQArpbF7fTNr35xkpk+2ka4ED12i6Jh1Qz2qxEhz0RbmIQpQ==","signatures":[{"sig":"MEYCIQC0MmL3Vvo7+M0Wzux2vtouQ1ntKITaloHgCma9IvzxEwIhAInudrREruMzlL5sRpUSapHQS3Q30xlf/KcRagakvn4P","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeszeuCRA9TVsSAnZWagAAT7wP/29w3kDj92hqzXqVzze4\ngX7v/Ql80bWRydRZlBUiS6idyMqIhpUTvqgZi2UW/YjLFUJtoCoBPU6bdoLg\n3Qpcz4A+2WwHsyxzD5m0z4Bzi3GaYFZjrRQY3MWgLiVKkfZ/eQQav2CL12rh\nTO50PTCZdArXyKwqGWcDwWnYLW7SC55rPPxmmcKdSWkeLUEzkDqcqItiiuft\nL1dHh12XC23849lrFIG9NuOb08YJT1hhEE/ZlFl8ebSnGvXL1EIVHoT8v/k2\nn1/LvNDtTzoeW3+EnjXXrjLSXI3cb90HKmHaDxY5wBBrDU1KMsmhdysFD/Rt\naSlIRAKhmUjlxobocesuziZBU/OsYcAbb3MJVD8nY+8vbFpQvQRhqhh3rEyu\nMgy1Ovly7I3qTC/vLyq8iA4WOVwk+3xpeK1BsYP7LU7QIbw61jkX82+RKLd+\nl3bdnhB3TCoEbolp4CYG6C+5X826YUNCtnj6SOyq1vIUMRckPyUzPfh9l8kD\nQxywZDI0yF7eYf+RyZdP4Zb2jvCPHbln1MDOxYzvVpYXASuIn2qfc+3wHkjG\nfWSd9OiXLhoNs1TFaLbjcCFWlF6n9NbvcH29CCukr3hkXXXY86BgudmKAZ31\nA0obgJdVm8UxyN7r4n9HVzIC9k37a2e8X2yoJcF41zVMtMQ4oETyq68BOqah\nk0kU\r\n=qwQ5\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"fe9c146f82589e5f1c471dbb4986ed6b3a7caf54","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.deb212de4.0","@material/feature-targeting":"7.0.0-canary.deb212de4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.deb212de4.0_1588803502291_0.6203629507127189","host":"s3://npm-registry-packages"}},"7.0.0-canary.f83e00898.0":{"name":"@material/shape","version":"7.0.0-canary.f83e00898.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.f83e00898.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0707e53115cbd8ba655c51d71238a05ff5031d16","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.f83e00898.0.tgz","fileCount":13,"integrity":"sha512-XafRZTAZ7c1M6DgryAsLjGujhD9KLaF8iX46+6D01v9XlTBf+0SywSkqTCJoArGWo8Jx3rHrn4Jjvfw5F6Jl1w==","signatures":[{"sig":"MEUCIFwQWDh25jOtwqSTEcYxvm75OElnYyE15QTbKAu0uokIAiEA9yoXjqvpQPS+XbUdA92Ds/cZINhG9S1F9yUUmicZvGw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetDwDCRA9TVsSAnZWagAAGXEP/0Q0evOOdRgLCyxsudw1\nkCvFdBW1PqXE7a9D/c6yKKQnPNwDMU0e+YSOsF0u7PtCIQRsts1nA6JRkbyb\noQllAS0H3KHBArjOyN60ALR18oUwqZvJEr9liN6uVE7WgbJ75BCJ9nQUkTLY\nd5VtsOxvtA6YLgKq9wGv0tFig/fx5EA+BIjcDVagBKXOJYsThPgPlX6sZM46\nKYxTH9Ev8eNNbWZLtNChwFioDd3J4WrccOE+xyDd6js3XF1xWdFo0PWNR9JL\n0VLHDiT4Mpdbag5GhDZ4G8aiNwjN0kF2wl7rSAq7xs67PlgSQeqX2+Y1qdC7\n6lWUvibHamT6yxsFvhqy52pkkXpYadauOzi7MZdx24IYDvauMBLFq/dxRlzT\nNRZgF5ff84fjz/NyU1OzEV/2/FdJ/WIhXPDRd6k+LQ/OMCJPVoI8gToxp80s\n1sR+GsELZqGFbyHeDZEm7vsY96qMhiT13TIkJAl4LC34emcD1nRaRvtQwLX7\nih3e5MvUQARkVNNRLI4DPfjWb5QIc4SeywXWBpZbc5+ww6zYUcs0HbDDQ91p\ngdDLpvI7nYzvusScN4xSZCJdt1hJsVj8JLLrxwLpnsnA5QT/B7Gt6gcmM/bH\nlSQgJ9BT3lgrBqriHmAAHXkNmkOawYVpwOM/J4ynF+wsSrTLzvT58zV5aEJ3\n37sZ\r\n=vskn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"02060afc2f5dcb762e9083970f865f1c714a38f3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.f83e00898.0","@material/feature-targeting":"7.0.0-canary.f83e00898.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.f83e00898.0_1588870147069_0.599795441906017","host":"s3://npm-registry-packages"}},"7.0.0-canary.047e6b337.0":{"name":"@material/shape","version":"7.0.0-canary.047e6b337.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.047e6b337.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ef5e412cdf83a3de8c4cf856f6449b6a82bdc57a","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.047e6b337.0.tgz","fileCount":13,"integrity":"sha512-297R5o7zi53H1W4h73CzZAHWvuvx+vOulPK0zO1/Y6/ckcND0pUhktJsqZmigeDOSW4y5jKF0P/1D6neUlVCAA==","signatures":[{"sig":"MEUCIFjCwxM442oRG/nA/ja1LnOYrQZU6pdhesB7ceZiW4d/AiEA6EDO6UkQOqBTRPPGH7CBj7YbZ1sbRigXdnSKUNafS30=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetacLCRA9TVsSAnZWagAAbCsP/i8Qn379jjQcmZraB5DM\n8F/mAxvakV4ui+p23cz1TR7AHi9sgHg6gzUJPGlyCaLppLbMRR8UGWNLkVVb\nze2xL6lA+J+UKgbPmPw6fxixNKYrknaBqbC3z361RCivmMm/wcs7ysYAj4uM\n8GA9ACA6/epm4waweYEDtpwzfj3LTiZhgLpN2O3wb93c2M93K86sGLQmf+Fv\nIybCJ77hOKktMbU+s5yAa3DPEjkIa4CAcBBLvDYUiW7N44Iz7jfUR4/Tk/0f\nRK8kzAfKpqIvUb1x5bc4j/2/v2CXwWmwSbECICdALBBFjkRIJ3QdVg5hZjYj\n3IOkZrzFkDJR1TyKMACCoWaPmKyYKPbFOMpvUJgQWQn6+l+x6BTU46+YPr9+\n/LnjcSjOKj8T4V0N90fstjeXAv6EfQKIkBF3P089v2tRW/3Q7JRJmq0/VSQI\n4iuGKK4hf3kKUoOl0q4W8XWgZrVHfIRmBVFQMt5v0Arxd0Lj/jy1Gq8biYvk\n2xVBoBOsnycHsN/9TdB2/HpRvJS2u4kkqklw4dxt2519tUtk/9mVHz8Ftc3O\ndpdBkyH7uhQDIU9RuOTfC6OdgUo1hRGCEIz/YJxCc0kO2qxJoGjT3vGe9Im0\nKlhiMn9Ma5uxKvzMjapIUR43z2H+nueHmOTdNYdatBlNW5h8Gc0TTCdC4260\nWWq7\r\n=0JWA\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"2be3b5993e14d0bddf55fdb157837e5593ca217a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.047e6b337.0","@material/feature-targeting":"7.0.0-canary.047e6b337.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.047e6b337.0_1588963082557_0.3691697365048965","host":"s3://npm-registry-packages"}},"7.0.0-canary.119e21426.0":{"name":"@material/shape","version":"7.0.0-canary.119e21426.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.119e21426.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e61de8f84361cbf8977ada70f3222657d11175cd","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.119e21426.0.tgz","fileCount":13,"integrity":"sha512-O+phDT8TgYLmJmHDlgzmKAh1EynwSHYxm6Z4YSgM/WYO8Lf3N5erg9DcrqXkuNxhOtDSUsRWzadmt4+1swv+Qw==","signatures":[{"sig":"MEUCIQDStYEsljDQIFqug/2Nh01xS/TqmPPdBGdafz+1qNJQlAIgB3w4ucl2d8ASqg8t3QCcgvbETMI/2LY/MuR3W7UfRoA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetb9pCRA9TVsSAnZWagAAqKkQAI1nGYlAKKzQnE+K96Hg\n2EU5VA7WhlAaWMTp68L9X6bZ72SioFZVU7j/+x1jVoGnriPkn4v3BCgSDizC\nwi8cSc7boy0ltKmUJx1P3ewknoiEd6YyP713X9XbCAfTHIb3OCryESvgVg4a\nhRg3JR2wRDI9y4kmD128NpAVIEn9J6ZDuJGnCkknhUGDqqyWXAWlZRqNoxAV\n4u5k9YcBOAlAV+waPpb58cqqyeWlSJyRa6I1rDsYl6S31zKtv3ZldLcnLI93\n8Wh83Uw0CPYJo98IzRdSfd0XFSt/+pLGd2sDD0lTHMaiFLXXSRBymZ6yNAPt\nlAot6atwaCcWE5A0sM4CRvu9z2jI3unkvw0k3ybzlTUxaxmL/f0gMDZpmufz\nmLlB5tz8M1rFPy0gMoXLGLfmMGKux0BELPO0Hkpfex/HYe4BSS5ziI5iHNRA\nwlyjyOkjsTCuJNEoPTMq0AlvLdyf0dHfb2Tx+eiu+uus2IGh5c8UN2gE/9RM\n7GnYgnEq664viWlQ53WCMoFmbD6eR5c8ea4LorFGNbXs0LS07+iPMTsNM97O\n1qiXIDsojc9MmInD8XRCwjy1spdISq7c9Rq4Iby+ZDo12xZhL9x1YDt05Mn7\nMKZHsgozEAp8WhbKsOUK2OBY/x2rqgH59vIzSlEGE8lCuxBuGCtwsf7nPHH+\n6nd+\r\n=SZQQ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"693ba4159b1a25af6955ffb1ce0555d7a989aba9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.119e21426.0","@material/feature-targeting":"7.0.0-canary.119e21426.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.119e21426.0_1588969321229_0.5580991991795785","host":"s3://npm-registry-packages"}},"7.0.0-canary.2f052d824.0":{"name":"@material/shape","version":"7.0.0-canary.2f052d824.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.2f052d824.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2ed35b150a6f9d430c71b1494b287e2767591f62","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.2f052d824.0.tgz","fileCount":13,"integrity":"sha512-nI1wx+IbhL+M22Wc2p8jfzdpofoG+y0kcfzQc+XiHPEEAuyhPF4P+8S10MGza6d2DxXAoz9o9n+pklMUd0EO8g==","signatures":[{"sig":"MEUCIQCj+AwbAh6s7ti6S4aLgF/yuny9Dmd89X09Azn6ty3/sgIgcsQSOWnfeBoVZrelf3sK0jsNHTlZWsEWGiewBpmiTrU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetcnsCRA9TVsSAnZWagAAlBEQAKHG0no5xJXoV550BM1o\n4OG4s7GWvcbo+eExkXphjZrLFUXrnd8fw/o/dOh0kD1c3HvnosnusQziZs1S\nOWJ/qfa7hTOoQClYBNu8jvOGGd2hEtmLkJzbOZ8a06IWXeKtHPFoKk9oGnIU\njhgxYKiA8HmBpxnrl7bCmp/EfRl0s+HDgvLFQ5Bb1XBBJxMYgTHjxYHW5/uX\nshfOgxTuJ7aO7SCetUpOd8kFygfISv4/x+XbJ8zUB9Zs4J2/bCbsEp6+zJDG\nUG+UsY60VRPgYT2h0DF9XWIRWEUnGvvzrvm6fNBjkz1NkqBped0sbqbnpKtt\n7pZjPiaL6PPVMm1LLCTLBs40CstFoGaI+v/q8XWP6BaD0BE4wU0s/nPdLdfI\nbC24HBx78/8cQWw9tgZ9AmPkAv8Ym7q35ep3uo5gtMPl6bylkIqvUqU7uHE6\n8n/Klj/IORvJJF//m4vWhIUZEAyCOZfeKXoIOndocFaPY3vyiWHPDsw0AT/r\nJAl1s8AjSg2NmdIF9TDvKSVKn1X+rcIInjCI6Vi5TV+5g9V6I8tfpatN3YDk\n0enoAw0kkNaIWn1a2tp+cY4t/dcgNsr/vlXRd9kndOVU8kDwCLgxlhdxpo+l\nhtBIhJ/5RVrA6sZkpbDQ7kqtzKk3b/I1JC96daZ8v+yE9FfYCOBVljsSqF6I\nAFJX\r\n=sAYZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"e3bfb78e98db35607ba75f333490d9693f14e844","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.2f052d824.0","@material/feature-targeting":"7.0.0-canary.2f052d824.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.2f052d824.0_1588972012189_0.23130304958491132","host":"s3://npm-registry-packages"}},"7.0.0-canary.e84444387.0":{"name":"@material/shape","version":"7.0.0-canary.e84444387.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.e84444387.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b64b1c699b750f0b4531df08f98476741e130231","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.e84444387.0.tgz","fileCount":13,"integrity":"sha512-tYDWyx0GfJj9GfADulM+YnR8ciT0cQ1C0uyA4J/7vbw6jJSPYcBrj8yNMvbF1onoQx8EQDzKBjRXIrj2YPQh7g==","signatures":[{"sig":"MEUCIGdVS2FhpN8FzG04LuSbhJGjgsHmJL9JbUOtOG1y7THYAiEA4CjV9N91tWkxSTsY1tCQcPiDQtUrwQoDsIUwarJM5Bs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetc+fCRA9TVsSAnZWagAAynkQAJsJfHZcxDMMXzezxNr1\nnfzztxlTQgoMokATepPsdM/ztgliY2v+4J6QNe2Ym9IrU5Yc1opIdR5YDlMt\n2FcUGooWZdkMZbsUyCV/kMKj2qWO99nzfKOndxDNsofBKMOAgJ7K36DXa71Q\nT9AzGG7Ze94WIyhj14J2akKxcvhbfurSuCzZMtIr7jXptHsNFOycQuqGmb97\naqoMfTBN4SZpJ1I02egJsNuB5K64NNrCZ32t0X1JUs2KZp3UZVZj6axtDTL7\nwQqjvXdLB0ie/jevI9NKBC8yaVEQ7Bn7Cc0w14g0OrTqTgGlIr603tLzcg/M\nmEqz7x08FYrz4iEvRY1bozuIK40E5xT0btuns6QfzRKpKRxaaulKIPUplh4i\ng+80k7vONGygeBO93trTht9gMLaSP0GajNTKAedEKsGLYMF0Rf9TW+us+gLK\nZvgG+boZwYcBy1lMTFSfX576kF9tk9f1vKqs8+ZlOyeDc2qikb9DzxO83awf\nyfsgrTkvRNmU/QLQIAHyOu1OcoecWI8taYXHKO/XaYa3f06gzNILjYu1CrlN\njrfXVxVlRErwuTdH1eVCj7DJKZ1HMzvFQ/NEQJvikEM49y2cyufIOn+0K/Bf\nFxOjeLlXE2mHOLfmNU02QUmoahsCODCQtIk6yasRtx9F9XfywvLs/qQ4qp2H\nTHS8\r\n=KAeZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"35f59683bcff8d7b2e79ea4f582488d0d86b0b97","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.e84444387.0","@material/feature-targeting":"7.0.0-canary.e84444387.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.e84444387.0_1588973471499_0.3446604668454354","host":"s3://npm-registry-packages"}},"7.0.0-canary.893eb1876.0":{"name":"@material/shape","version":"7.0.0-canary.893eb1876.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.893eb1876.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2d0e4f4b642f1e720ad7d3d32db3ea4cdd1f41b5","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.893eb1876.0.tgz","fileCount":13,"integrity":"sha512-1qN/SzM2FCxgsjksLCjG2dwR8/n2eqAEEa2/OCM+HlmXwWRGXAoDdwrY/EDp4BCP4HiStXB78C7mvKaPqy5mIw==","signatures":[{"sig":"MEYCIQCRbU8cStdWLfY8uRBRxv9irNweXnXh13lAdaUtmP2ZFAIhAIgO1fWgmcBfPv2okI9pmse291D0x3oOy9wzmoPk9msO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuV1YCRA9TVsSAnZWagAAW4YP/jlC/WBDZ0FjJusb6Jgn\n8pRw5QwftRv0jtsVTige62ZUr11N3yvudWw/yormmXD1TeN9en+lpFaTn6j7\nlDXOqToSDNGQC8ChilPDZ6NLlkbv56bsL0DcJpQq+83JiJ5845KLg69NAOQ4\n4HpzA+3RDRJAo8QGUsLKAg0SQokQZ+v98lTq/vzrPQThD37qtrmJkF3DFaN1\nO+a3yurg20gYd8GW2bicaEswjlnRCtRmwCWoAOi6Uefo37M+3QG78auy+WCQ\nVXhRAG3ZdjJ9HLi+uKxgPcQ2KS55pgh/TalFkFGZKJXESLUtVmYaqaDi8t34\nAozTWpe+NojGvtljjqhgq9ax3Xpm0AMw4cATi0E1bkiT6qE9kb6V38wDhp4U\njn6qf+Pi/WM7uKx9u/zu7AktJjTaJzDxgbQI249YIy6qUU+5A3G5cuz9bT4K\n2Ziezs47THK3TihNDvRNDcFKDCbGxvXsl2z7LM4G2g9tCIihFRAKZ30A8TuJ\nPbYroAuP6/kxdmWQsc7kIHxHWHzN56kus6t6G6QEa3E7Fy+qSQkM2YzWMef6\nZSBO5BLdLidwwUHAsb0RozKfgjDvwyIdDp7cMqXoOA2U2172BR52DTnE40OB\nx6sUuvoWKnmJDQ8z6DBrVbHh9oaD5Nywyxa35met0TdJ5YZkkEgByy8/JMjt\nT5Ux\r\n=Q5uV\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"4bf9fb733753ef4cba5683a95a2f2a71a743a68e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.893eb1876.0","@material/feature-targeting":"7.0.0-canary.893eb1876.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.893eb1876.0_1589206359934_0.47310111522947373","host":"s3://npm-registry-packages"}},"7.0.0-canary.a5aeb3001.0":{"name":"@material/shape","version":"7.0.0-canary.a5aeb3001.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.a5aeb3001.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"860ef3fc4899cfc63c339dcd11ba0cd4b87c51b9","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.a5aeb3001.0.tgz","fileCount":13,"integrity":"sha512-Ymrv7UeHdxb8sOHyKgut6Bg084UDxTOw7PRrbIXNEclbVOWXShIaURhzzcSJ8sbXZxprfZYqWLZR4F4wPDvcBw==","signatures":[{"sig":"MEUCIQCx2g+7Fqp7EEFPur9t99ojU7Xgd/fMPBGs51XRTfSfbAIgTRAk03aHSHlMQ+snzcRoL6u7tkrc7E07kUDmdwPZSZM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuWEOCRA9TVsSAnZWagAAZPIQAIyTH+jXVVckCqwOFHKX\n53AS5kbp732ueaaXWYF2Hbj61i+ZZbuQ3edpPAY/ZHYBPU0Fa/ET/bokECEx\nRYvbhnG0ijwwD8LhHMTZZN3jHMMMqOJ16ZFVadYZqmDsuauYa/x9lmm0uVZn\n2K3CIYyqvRboQPaKfkwUdcvRGdtgc0GDKME2oXXDiNWQLNGM3ZILSdlbJOiG\n0vu11xlAJFOxoGDU21ZQ9K5jGYlBNCcKlBDjblnh8SXCg279iAvjhF4N8+iY\nhwHqZ3yF4AtGF1gM1kYB3OcDc0e/8EAv9e63it9DDrZXen5Qz6Bi+RfnBlCG\nkpRTxd9UD3SWjBiu8LHoFjOW/st0fd7eG8u8YPEb1S52X8QOmOf3yg2JlcfC\npUsinY3jsvgMGN9oaPwzt+gIHFEZofGk3gyX4mJGeYfihcwdj42zRTQJz/5R\n1k8S+nyRr8tUgn0jopEu+dNiSTcMnTCYIyCkHTHF+V0LqptDnd8ll1PQk9cP\nUQb0sUTV8D3621FN53RmvJKcmhKpbd86nYNUgEKrGVQIVdfuVg+Xqf7yDExn\nvbpHG6E50c7licg6uNe4klD7uWmSxFICao8sL9CQcicQgRJESwwIJGi8WCAt\npBtg8a+FJux6XCgsaUJOupiiKS+kwsHDZ5+V/OINtt7D4wT9PulKfzYblzDo\nEIrt\r\n=aY4s\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"01ce640dffe32b7838dec108ffb4d0c40d3e7bc1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.a5aeb3001.0","@material/feature-targeting":"7.0.0-canary.a5aeb3001.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.a5aeb3001.0_1589207310300_0.745609752133372","host":"s3://npm-registry-packages"}},"7.0.0-canary.610c68d97.0":{"name":"@material/shape","version":"7.0.0-canary.610c68d97.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.610c68d97.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f0b84309fad082fe1acf433c22ebd256364d210a","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.610c68d97.0.tgz","fileCount":13,"integrity":"sha512-B3jjOHRBe3UaU3i3FwqFonKrVCq7g2b1qryKwpQo6glbOPit0LB4ctDVbK6CaktciQj9SLXkjPN8vzQPm6By/A==","signatures":[{"sig":"MEYCIQCFp0oUjAp2pxLNijy+lOsRVh1f9T8l+EA27j8292b1NgIhAIp3U1AxO7hrmYfMnHVtCWYwkZ1VNyzio21JHbTgMbF9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuagwCRA9TVsSAnZWagAAT98P/3rsChFxJjYnfVwg5iw7\nBcwu7Q+EAYQrHGNyPSSaQI/C3Vcp5Mwyf6yauH/T7kZtM/v3H5VwyKKR7yXr\nhlyxhEEyZ9ChF1LczNEyfGb81mgwbPPb0inANrdqTr+uDqw6gqv9iCNewwp/\nfonMiyoyLRmmLfEuvLxSlpLIWDWw1RTHH1cG4SwvTHnExp3bTKpKa4jwnaOs\n1Uxa+g24Mpj/eNlGNe/7c6GPZpNixQN4eyzN5MvZRlahapn9YwMYoG+Xexbi\ne4i/af/vVXO8jsHKJd+a0bRiHJv5e9sTcFxYRDfrK39TZAcUa8QXT6I4EjPI\nSW0ugbMzpnszwxGGH1Y9Ku3722GV/jGRlLFLYBq3F1GZax/ECUMMvRcDimKd\nwK512DQPrQa894CLJ/O6K6XBb/w1H49kG1RWpNILpk43NfUsXGgKZ6jPVJ76\njGtlZ9xVFiiVEqVeMTG5Zhj9ml4ohpnYAh7fCrOCjdgvy+3HnEbw3IQ+DQnZ\nlj5XPtz1YJkSZGvBCJK4bSU1hqSXWb1HfgZWu7VcYb89dXZqWwZT8N9IdMrU\n5jom0fkYw83Hg58uk9NLl0IdQk9oGGhG/aYoqjD5Zn7AM64Ho7GKBh0S6n6j\nzNFJRJ4rkxdOcy9MnYrPJjlL78AEZ6uoia/xCYBAqb+BFuJ8zctpx8hFmWm4\ngyrs\r\n=H68x\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"ac4b0339093446110cc551732ef34ba30b4f4a49","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.610c68d97.0","@material/feature-targeting":"7.0.0-canary.610c68d97.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.610c68d97.0_1589225520010_0.5614693303078193","host":"s3://npm-registry-packages"}},"7.0.0-canary.ed52af767.0":{"name":"@material/shape","version":"7.0.0-canary.ed52af767.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.ed52af767.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ae1b61fdf5177f02531f10616fd466554436f014","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.ed52af767.0.tgz","fileCount":13,"integrity":"sha512-Crg/45P/HXhfQ+XRBALEj8WJY4NUQO5voba/SQPJwWUvMrw1hxOmGd17/+KgTO4Ucy7a7+rhFMs3/gRYqQ1Svw==","signatures":[{"sig":"MEQCIFwTUdkNvkxektEO+Xn1L70hKdRxe81EEOFYvCz+LbLpAiAhDVcD+5e6aqq5ahVTsA+PsePZmv9aZrDginLvfXvJNg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeubUMCRA9TVsSAnZWagAA78YP/iEvd3SCq/jTycolmLEf\nrmXV7TB2rMcCrpkqQbRKUZOoAtIjyCVE3meq6kcaF4xNkLRz8q6xmDAFQoPz\nRrsQ3z1mqRQqfgEodP24XphXk2GOas7A2FqktkqTZJnNELkpUkCRh24L8e2V\nV3gIN2PFkUwdY8T/CwSm8CvYQjPGaPhVoXr0me+iCLVpL4Wp5SS5iiSRRGi2\ns7hsJegQBxo68Q+7tF2tbqQUAQJYJ8QFrbRoOXvaWlhqUs7YQQQN9/GJNAVJ\nbQRTSqxmRaT7gW+p4Gk9r4LSvJ7kyb4u8EZIMfjArbQAxfsEIqR+iO5JoZQD\nGFiKXPxCjhJDMzeFPeMuXhjaXhGdduoLrICJRQ1Itp0WSrRpQDE/sr/oRAOm\nBBFxxfxUISUONIpr/3wOJ+j6CExqipguC6wBxWkjcT2yYYzq5MzUpQ8R6P4M\nDt79B2szv7FKtMKoO0iRLDaD12B9gf3b+yk/vfXJj9sjHi141oZPGNDiQTV5\nj2rlqARncrz+0R/2In394TWpVXWrjvsnsdAa4mNlAzoLvEtK0l+AO2nyG+XG\niOiKu8VQV/cTqk+5Fnxa8gAFl1syFw2undPD0KdQdmQGcynvwFXwwnmyGbtL\nzwq++fGm2pGGmMgJHGeTfne9h+J4J7Fk/plr5+3RHtN6n3RaEJa+WcFGGIg6\nQcVK\r\n=Fl9K\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"06b24ff740d1a29e8764ec98f735b6fef77dc5dc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.ed52af767.0","@material/feature-targeting":"7.0.0-canary.ed52af767.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.ed52af767.0_1589228810963_0.09880779075078805","host":"s3://npm-registry-packages"}},"7.0.0-canary.058cfd23c.0":{"name":"@material/shape","version":"7.0.0-canary.058cfd23c.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.058cfd23c.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c9023fc5cc8f2471c636c1934fca1595a6470fb0","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.058cfd23c.0.tgz","fileCount":13,"integrity":"sha512-nRYr92VHiHEYVxurI/OdlK8QSW7kVCHWF/WjmeDAE4ypTJ+wUUgQfKp8tcQd+ZH+a+UpZc+x4RNre6GI3zWK7w==","signatures":[{"sig":"MEYCIQCZ2M+NtazUoMMnK01peIYriox/oBa7Zvq6UY7jlH31iQIhAM5ARSXe3yZHXwc4zvTPEWSvKNnpsOXSsbhxn/5mrQc5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeucKbCRA9TVsSAnZWagAA16EQAJuDaTsYyW/cJepk/dcp\n3tvbf47YhS28rTsmVDGvFBSCAfldclOv321cb4cdfuz6CWnsb+7eYnQrWrin\nKDBUwGN+814m8MTVxGZsUWVOQWMfeZLU8W3ggoD1T4sJZKqKCg8xI5ccVgrC\n4xwvMHdizg41JYd2bDTcSAuD5Veu2nvzOXLiI4E68/m57/EI9LS+kGJuv+DL\nzZU4IBzx/xxuWcYQw7o1KGIRDkr/+d1aKfCOv24L20M070M4pwCcRVO77pTs\n/AyOvIU5A5GgV6Q+Z3n6d5AINaS7nbKOxXbb5g+WUl2YgLv6QZAIC9Pni3vx\n+aIu+mbTvGOAU8PK2SRH4luVB1Vubn6zJgX6pA0W0Ow+4wzAhZXLSKA8TfDs\noRct65E2xR7avLUz9koxBmXRg/+v/CpVFUEIlVDo0cMXUG1TBF+wQJKi7iVZ\nHxSLI9t3jRNHPomRw3h0YVpNzxqkDPvKEt704QlQ6V3kDNdtg0f+6nvm7KxQ\nHasQAH5NQgNWt+sByYb41/BmvqtmbbWaFXbtZCZu+GLbC/kmYtYYOWjsJFNm\nI17mmC3fpedcrFCG12OJPNShS6VzxsuqzRlSb78XgJvg+FygCe5eGZQ0KVjR\n09/OVRpHAS4WLA+WxgHrT+oswXdadyxyUepQq2wnpbnXsw4xlHoyZwxEWWf8\nfTmq\r\n=yw81\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"e012af26b00c720a751210639bef8379d1085234","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.058cfd23c.0","@material/feature-targeting":"7.0.0-canary.058cfd23c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.058cfd23c.0_1589232282746_0.181529135827194","host":"s3://npm-registry-packages"}},"7.0.0-canary.0a371b4fe.0":{"name":"@material/shape","version":"7.0.0-canary.0a371b4fe.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.0a371b4fe.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"331399e4e2e5451e98e341a2889f8174aba960b4","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.0a371b4fe.0.tgz","fileCount":13,"integrity":"sha512-Wc41ZqfjYa3kTLChOusNNEMXtpV9UJ1bLusuKVxIBUbs0Rki3PRrrFaeCFZ/BBC5cgv5mt1GcLxUw41sJOrY+g==","signatures":[{"sig":"MEUCICGgSu0fXqlvTLxlnrt7PnKJrezE0kFosd1py3DsWI9VAiEA2nlIbTklw4xyXACLofAa8CMZRUW4Mhzw1WNoLD7XWSs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuy6WCRA9TVsSAnZWagAAWncP/3CGhV7YtFwypn/j6W/f\nsdtpD3FwnTIDFfZ/8VxbG0Nn5wCw3+wHzuD47f7mCfYGVuF9o4JPV+pH037m\n9FvI6Y3zuGmNpvm6P93FdJH1wqCNFJkqt19bg9jIuDYBSENx/5JjylnJLGjS\nHXyGhwnsZOtUyhBU47YaPC6dlMxCgJFV7jXYu8sD3U66Kp47tESSN/9TjteI\nXxbVVpu5Okn6CycxyrTsEhAOdcz62+is4zGKjofOr4SJjaIYni4GDTy1V086\nSXSHxMIUnbK+6JE0T6mnR4XS7Q1Tf5HW2x4o58vkvX473w48n6kP73w6umQB\niLZtOIlHwBm1rDla+WRFkkM+JoQkEYI4x4wNcNyvnwEoq5DEk8M9dDbG6szX\nNfdyodKA+wcKo1vmDOHYVhFGK+xZPKL8bo/M45vhMd4wa+6ruNS0QuYz8mpe\nVx5kz69EpBEuh0YmywxWVNDyBirUuWzT5rIXDIMfrHLz+YUQx084f1pS6Isg\nbrsnzXh3ZclJDz2O+JbCgqFgCl0DcRhudxmhLRu0GRP97lYqP2WR6qQ6VPqG\n7DBw/J09dYoZcP86MXwIz+dVl6lrmYp0IjQgVKKSzlPvHPYF3LPgWWnHOzS5\ns+PIph2ozj4GuG3Ih0iu4FyF4Mbzjat2VYvDHclRGmQEe+rXgL5W4dpPBxoC\nQmDi\r\n=nwBP\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"c3c5efa159a3a5dd1da72a8e4e94015fb7984f7b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.0a371b4fe.0","@material/feature-targeting":"7.0.0-canary.0a371b4fe.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.0a371b4fe.0_1589325462094_0.08186477200841913","host":"s3://npm-registry-packages"}},"7.0.0-canary.2139200b3.0":{"name":"@material/shape","version":"7.0.0-canary.2139200b3.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.2139200b3.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b57862485cff1737e3de405524ac4c2d42fba200","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.2139200b3.0.tgz","fileCount":13,"integrity":"sha512-ICteyO/HqKI8nlNteNp7Vtc819iJMqQc9pok4m9rjUgs6n+GFZR3WcoUfhkKBcSfGNV0iJiIeO7Ee6pLwPCDEw==","signatures":[{"sig":"MEYCIQCtmB0Wr/ujjz7Gu+1CdMhG6VSxlBZTMrqInLIjMQPkPAIhAOaJfnZZCeNE4hRRXb+NTg2VlYF0Ifgp/UrEuMKJtz/f","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevAheCRA9TVsSAnZWagAAtigP/imFBvXSlshBCyyIOksR\nFRObE383UgDLpNdzuACV5a8fJvozNcCaLtXy7qRrTf8wXaG2tPhCYl8pWrY8\ncs9usn0gctee34eckSVPZqDnomlDlp4R39OR/tZORll8m29Eu3e6od5DGqJ2\nnuRhLAAEgFTwHBQ8QZmNzfMJeQdmuwizdsXusepip7b9pi6att82/cUkrGaE\nt6Jz3oV3UFihHfwZ0Xm6E7adDpce2aSKTZdPtzQ3wXr0F/olXzqJ7Q9jQgCP\nYZ4wyY/IxzkJq14j9Imcn6rptxq13SDpQ6wepYWVHXiT/MNk0uCFhdSgOynK\nGX7KM3QbgDsL2iBpzFW3abrPbgvxuLmaZYf4tMbmeYtb/qZIe8Oqc4tvrazm\n8CIEpqmdRit2PKSf3Rx0gosL5tBcyEMT6EqYyDwFExLUUZBoMvNnrhr8Mgy3\n4BX0qL3lcB+nbG3j1AMVxDwKZx+yjSex0Y6sUGYlXtUu73YbcylrKGVLY0TR\nKnhRgjs7nJzGmLD8zYho34KQBr+CvbutwDzIMjvEGdj/ssdgZKgHVYkPn57O\nZ7qgTkLTjB8LCs0WKR7Exx4I/zz30+gAVrtUP8aiL1+ix73PHoXKRNVWNEnG\nePI3CwkTMn3OMLlm1/5ToIJeqd3qAOZ7nimNxaQMRf7V17SPMs68R+wdjc4q\nasvv\r\n=cwQw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"42c214d2b2b544f76002d71be276eb747a69d9d6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.2139200b3.0","@material/feature-targeting":"7.0.0-canary.2139200b3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.2139200b3.0_1589381213931_0.5937989930854761","host":"s3://npm-registry-packages"}},"7.0.0-canary.744d751a0.0":{"name":"@material/shape","version":"7.0.0-canary.744d751a0.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.744d751a0.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e740240100e41b2780ebb740e0b483fc337cb2fb","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.744d751a0.0.tgz","fileCount":13,"integrity":"sha512-LdDwAPtuBl3fD+Ud/B5zWA2AlJTScihPP+99p/vYYav0ZmCDf7/ugZOGcTKayULXrL9ldemySiZNSGPfHjveyA==","signatures":[{"sig":"MEUCIGF0W1e2x8OBnVE6f1t60FOXBypjfyZ9YD3Rrl8kNEnvAiEAjYLX/WlKEY1ufzbcGcdIQU1xeaHoImR2hNfSlbU425g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevMwxCRA9TVsSAnZWagAAzTYP/jXqW4vOSuB1Nv+RFFlO\n+SyuN/0LvbAP2FG9eTqwGBDbTrVKcelxervu0Vnpdwh+VkIyFpPbu5K/JWx8\nSB70XX1aYJsGp1NkkQmGyx1bbGvog85PMFhKZwMFVQwFUb8iZRrQprCr1/AG\nTM/5Gv+eKGY1FRkPm6mTg8woQ9fXYlRsfnFb36vlMGv/jS2n+4SXDU7BemYx\nUI3RDSmXMa+4anDFTNudYsFriLSpRKn1fMT2Aer3NWE3TG9sqc2Hgegbz5Fb\nCJztZY3i3EmOSoSiCQM/kgRr3VXQKL1QrnNTipzreYhyZp7AhYQ0bbd74FhH\ndnvnzmk+fOHcpjWOkomosZv/wL81kMzTSyTmpGj3aJC0owAQZ8yXM3jg742n\n159QAmKds7jT8IFA3dEmWjlr07VNubLV/U2r8Vm+aFB30wh5vLMMbnklHM1V\nmU8JWfV6EIppK9Ciy+ssFlXU4KgCkdDkD6VwwnATj1PvROJyUAosp6bbleeZ\njIT/OBvNpogzL+I2xXefqflUvoY9lvsbA8k+TLQwdarU2ovmWR7Jm41ZFy4P\nXB8L2e5QL7uwb9vZbu8twjxAoNmHOOzyu0SPU+1f2/R8llt57vYXjVeGnmt+\ni1xTAP0RAy77gF/aZakG5ZJIpfhKVVL1S9BPjStalIbPOPnXrhVDuOXbCj+D\nhNFE\r\n=VjaG\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"afc5bacf5330bcdbe874e652a8d6df5e4a35e7c8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.744d751a0.0","@material/feature-targeting":"7.0.0-canary.744d751a0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.744d751a0.0_1589431345220_0.818858254713005","host":"s3://npm-registry-packages"}},"7.0.0-canary.ad0c0c103.0":{"name":"@material/shape","version":"7.0.0-canary.ad0c0c103.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.ad0c0c103.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"308801a7ff5be9bca5e1640e374b619f352ebc23","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.ad0c0c103.0.tgz","fileCount":13,"integrity":"sha512-6gK/DNxF4pQGfHv7RCmzzjK5zyXBuaACikRzDB4NXWAh7oYurI7FYWi35PnUWIVieTmd5YAEAOF6l6KtC3of5A==","signatures":[{"sig":"MEQCICa7RtydmA3MqrF6M+2YlXT0z/Gv77VOgUh/6EYJyA6/AiA4zW110AP9ZLDFE8u1Ea4hyzSxXBX+7t7hNrs7+j/waw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevVraCRA9TVsSAnZWagAAVeAP/0DmNSHyFsTKDRzaoGt/\nTN9mYMgfyD/F3ShUpEfTozwGnv1l1LN9uV1uMnOlFE+ojQ1LCUVVXg5B0IFl\n9A/USAXEU6rPIS8TkepUQp6vg0ClrzRFmQo6ia11svY2zNa4tALi4Cp1jst5\npvvxI5IIA1B4st4fF/rIbqjzuKri7WWpaMSZEejJYhFDfHgUE3Of77BsVzFM\na24R0YcX6rEnI4OtxSdBnHVRwHJFpwOongp1TwRQrkCNI6NIEfS30MEASLLg\ndcxLl7Kdc6vBMivAQkLo6i7sCdisibA9klxAbYzaV5ubcZKqrqr7/KzJlY4r\nAzREm+pJoa2geyyDsgCIkINaLk/yE0EA9QJNWKk8xPxscGUmyDya16rPntnN\n96e+Vq6Cp95AAsHFBNc6u8m+sujvwXStysJHrHs9RPWtTmbOR4QgAnWbTdmb\n1mpeTTQUGOCGYQdw8db0IUgsDrA4pH5+9rOuJ0GJLwzEBgCMca7zuBq2dbGA\nQOmQQHCMZpYn5D9wq7XlguJ73a2l2HFoCNVJQ4t/dkzCHW5xXpjWd+MDyOPY\naccB+udF7AI+nMKjYguDl4p5AfB+n6/2qnigUcCs4diN/0wRz5zKhtP7TQY9\ngjKwreM64ZKbWqRqnFlTAAKt+dsCoPnrD5B9tMbWBQW9DuLYVWqa/e7+LiBy\nAoHN\r\n=uTfQ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"76a0fe161f579d30f0d739918fe09f5f4eef04c0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.ad0c0c103.0","@material/feature-targeting":"7.0.0-canary.ad0c0c103.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.ad0c0c103.0_1589467865345_0.5661500946477838","host":"s3://npm-registry-packages"}},"7.0.0-canary.fd8f8f2b7.0":{"name":"@material/shape","version":"7.0.0-canary.fd8f8f2b7.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.fd8f8f2b7.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c65acc242b295a8985980db079a7a91bf3f8451e","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.fd8f8f2b7.0.tgz","fileCount":13,"integrity":"sha512-DZi2bT7eB5EUG+Q6ZpBtEx81anxkorgzNIoDY8xmuHHWdD313dz8z2NV76U/3LA19m2gmp8aWpDgjczumdpVog==","signatures":[{"sig":"MEUCIQCRZEk9JdDTJNwxiB2Dn7s57UeozBzQXi7Z4cMqJe9FnAIgfWEIef24bcUdBTzvdQEHXUgBOqCIQGne36gXiD+BhlI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJewsuLCRA9TVsSAnZWagAA9o0P/j48XmMQcHxSndEAj3UI\npKJ1fDBT8QjrNFuSu7li3KsfASwHNCutJwMqYBNuzzm6YDFyhxk3gVtKYpSo\nz9bxYkWe0gs6pN25+66XAfy/WqjNxn4qvhPZUWT50qmn27FIcDB+KZFiMXQg\nObTixzlX5WWLCi9Z6rNlxelHwS3VMMhU7XqvvcZ2glBoF0AZ0Kzy4H6+amL3\n+jVg/ihl0Gg4H+QPgXiDQwQ4S14wlbLVn4IlOgawcbdK8CsMy8RG6KtrNTFD\nRYFd9uAoO80v+85aeZBibfzOfxJKG/cO/7jVGHrQtgF5uv3QfeVl0Si6w1Ds\nfus6tj3tJSx5YXV84dJlJd7867T7zE1ZNu/5+uLE/ZlkiAu6NvfVbZSCSpDg\nf7R3WH9bs31xXdv4ZHOn2H3s+AarDGUAuwZ/ZojMIauuN4eXMiltkcJ7t4lk\nvK9PESLrt7bxOy+oxU6TvNVlrrViwXdDA7Mjp7agNjv88I8FXAZaoHZSO9mR\nsbJhXrhRy4UmQC8K7P0hFkdWgcQnSt5rOcPtpJEyfKAAhZQqiQvVHKJCmhBs\nJx5c3EiKXBVNQ9z+m+7EvO1Zt4H052sUNCMN+uiAdPnKr63WXrNoIQo5kz33\ne3WH3fiItK4ro6CbAhHIzJ9TJRoohZWI5f22lfDEKFI67zpRtxWsC9AwzC4c\n+n5C\r\n=Ba+H\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"30fbf3d1582cc530b978714ab043f92bea7c4b83","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.fd8f8f2b7.0","@material/feature-targeting":"7.0.0-canary.fd8f8f2b7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.fd8f8f2b7.0_1589824395467_0.33507328588909435","host":"s3://npm-registry-packages"}},"7.0.0-canary.730920fbb.0":{"name":"@material/shape","version":"7.0.0-canary.730920fbb.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.730920fbb.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d099662c41f8745698b1c76e2f712de7177a2577","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.730920fbb.0.tgz","fileCount":13,"integrity":"sha512-lc6/jHdUJFcpcA68ZxWlQ/PYcarfsWl+3Z5DCNk2PUvjc1gmIFgT/1t4gCMxC0fZOx12SlCCQzoYh2rIMeJ4GQ==","signatures":[{"sig":"MEUCICXGVSsBAMYwd8An1tGN8xvwrAYSyqBdI8MD+WnWtCG4AiEA8wGQ/QxWs0KSlLIVuu8j6R8z9jQfOHXawdxi1fDU+ug=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJewuVqCRA9TVsSAnZWagAArBYP/j/eBMaJejRwOj1Mk58d\npAlcVHYaZFV7CABlr5bYy6uLK4nOWPofKTep3+SG6A/ZmHtZGsJLfAyELF0c\nUoIeyPzu1syReYPuCXvotXyM0WL+LOgCx08zmCzCvqtTVX74Qc9oZBZuR/MD\nlvPKVLfz+6ugBJh3pDdIbqd1niHAH5LgxwH1nbaUH8R5f65w47dFtb+Wz6dj\nXVM7+c526qnMzhhQQPH/TOxO9QUKohbkx0QkCTkFaDrSCasHzTy2+LYc630p\nNes1q1AD4+67uFTaj1gpF6XtCO84eNtSzz5ORFiyaBjcT4umzhFwXOwpYYr2\nia/gDCjBAAuMoVN15W3oc+oXc0oWxXYHZclgXa7wRquCbsPYDDMY3OF+1LwW\nHxaS+FrWMeK6msMDOWNHAqx4/uALws+PWtgPIgWdK8TAZS7/l1muFv2f+DUB\neQe3wIU2GdiZAMlVi7mkJD0uK0m4ZwKEzHU2j5NRno4NA87wQv457U+mt1py\nr1UaXmmL3sqMp+3eSqslErg6w9QcSWk3IRD779g4TSikJRsNQVafDVhoW5Ux\nahnacc3Wi4CMwsK5E9NHzvDK3D1VDNlpnvRezeSD/MZ7jIVpQIfqADIS8Hhr\nxS1Kdw8arEbtDEdN/ZrMiG27E26TIPngAjg7nfd2hL7khb3oemo67xqgejA/\nzH5l\r\n=1Ht9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"1acee01a3bcc1944050bcc6a38a1846c507db43b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.730920fbb.0","@material/feature-targeting":"7.0.0-canary.730920fbb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.730920fbb.0_1589831018007_0.5878155413348569","host":"s3://npm-registry-packages"}},"7.0.0-canary.bcdad99bb.0":{"name":"@material/shape","version":"7.0.0-canary.bcdad99bb.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.bcdad99bb.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"944e9dd537ecccdea0712b5f93232301b3954a9f","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.bcdad99bb.0.tgz","fileCount":13,"integrity":"sha512-x40Nuhg1F8IQVi8HN4c5wdHLFDeBX+jfl21akyEc/jcXQonJC7X12ZU+RUH+GG5nXujx8vt2vKgHDq66BkkAGA==","signatures":[{"sig":"MEUCIQCDEeTTdP9IgUb+Jspzu2ih4m0DmcgfP8GvMpeM4bfZTwIgT6Yw5hZsER4NfXE2U2VB1mP3tvCuJT7YyG7/8MfbSlo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJew0/SCRA9TVsSAnZWagAAQZwP/0jhtjaPgF4+Dw1eSLPi\nAm2MbpXO1SSJjRwZWK0SqKzmpEqiFXx2fEIDy2klTEWPb58cFHOd9EQyayOb\npKBrQLk1ozx7QRZ7YSfcitCWuvkKO/NF0iDUOBoj/datN2u6qkYPVMngWSI8\nij+dGYbL+CivP0Qo2c6ktkOk4gLnc5UQsT6ti5895atws9z6ovkmQDaLhSm+\nM3rjKA6YYGqesDOs0WQhh4iWmxC8t0k+eFuT/X67ys9nr+XY3EKAtlk+BuET\nb8rFyEuulJX9D/NqccsC5kQDqbU8rvXVPYytmgYvwWFM8NrL89i6HmHqybE2\niCpObXbTIvaf29d1IxCKK740la4LSN7IjxgpYexD+sJGmK5714ftWFcJ5wjQ\njJxmNfi6gj9euLvEZEWib22YheknOnU+x6v7FH1cp9r2w7G8INSIoSoxYCwX\nakmvUL/5cjwg49p9D6L4yQXOQ1yO288ZFe8oFkOeAbVXdfI2i2p7VN8TvqGO\n39YgERoxagIi11JFxTjqBmDIXuCO1EWFYa+YgU4PDdMa7x1aEWYj3TFIo1Wd\n4XdP6nvB179cGaheMpv4XgPrGWk46fn7HgXJS8xl/9TS02ksWQ7vDb1Q/jlE\nlGEus3w8m3F2/QH/aG8NulzXxNdo2fu5sXWGrL5FufCI3Fz+MhcbVaW2cBxf\noKvw\r\n=1OMI\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"33c3545075b4fec07083bb484fdd7245d0b243a2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.bcdad99bb.0","@material/feature-targeting":"7.0.0-canary.bcdad99bb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.bcdad99bb.0_1589858258383_0.11109753563984648","host":"s3://npm-registry-packages"}},"7.0.0-canary.4497b86ed.0":{"name":"@material/shape","version":"7.0.0-canary.4497b86ed.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.4497b86ed.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"66b6c794a64dc863285d45c1c4482863fd8437d0","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.4497b86ed.0.tgz","fileCount":13,"integrity":"sha512-fcI8K1Z7dp+AQqe2D2cCHVOataHL9kaudhA+JHOXPdFwEaMv3FhNWYXvU/EPeivP5lQYoYKh6Qg+ypHcv0YBow==","signatures":[{"sig":"MEUCIFgI/wCrFwqcE0ic2nTNDu8mix//eiAMunX0h4nFTHlDAiEAu/IGvh3owbf/qDw5EltSfJ7pZhHltZfdWle2VcYMVBo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJew1eBCRA9TVsSAnZWagAASwQP/jTOF3QVgs/BPI4g9pPJ\neNsny32edwyOjT5+0KRUkSPdse+Nkcke1OLkBMsIb0iHjiikEUKRvoinHnMP\nHVBNghqpNOPHSYtOMM8iVCu5afy1ctOCWRmTxALUrD3rwFDgwqsB0fdgX9cL\n6m4l0s/Ct1yvozxuTwXDChs6EdkXNH95LmGeb20qBL3F6adUNGRHwf5Taku+\nR9T53Gr6FJN+J7VNpd9Z8pWiuvIjOomo6UPU4/5yA1Ne/Tz/tVp5KzsdnGJ1\naZrElpgAA0qgZvwF2H6q0CTBjF9xK+MwLhuNJBplzkg6DyNcW2ojxjR4lCki\nIcmOkPfAShMuJRmnG7NakC5hVE8iUyk4eHWGNjqPuXN2Dc8DQH4RNZqGGScN\nv17naD0s8qLLDymcqS1hDOhd5e0XGevz9I8RmlvzjqB1DEfl8rbWxvvRgTDm\nT3pmVgnHf+0GHHwJQbVJaPXVuhdc0NitCTdtHU+1WsAyEqogcUfTalKA2BBE\nsqKW02PlkaNh3Hav9cqcKZhDJ3YFBp34aHbmzNb/GztFBt8ww2qzDiYBrvWw\nrPfl4ikP0gjD3VA6kTe4RWTpqFcoHFL8SD2eYRJed6cIi0PHcVkTwy1WpezF\nGWT41dwu/U3ITfmrdxkEpMCKbbCFL2p8fhXgL67NYNGOnxvd3gtOya3RJZqt\njW8K\r\n=epT1\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"7ffe8b9fd24f52b80e2fa6a7007881da7c29f885","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.4497b86ed.0","@material/feature-targeting":"7.0.0-canary.4497b86ed.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.4497b86ed.0_1589860224785_0.028371060436701567","host":"s3://npm-registry-packages"}},"7.0.0-canary.2e60575da.0":{"name":"@material/shape","version":"7.0.0-canary.2e60575da.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.2e60575da.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5ab1172c18fe9d78fa2c54d6b5e351f23e810e2f","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.2e60575da.0.tgz","fileCount":13,"integrity":"sha512-wghKMOD60gbFnTn0uwwmIG7ntqTlbcaQuuJqd7LDAAziCaZpb1AKKB/wTl6M1PTkL+qHRjyKCqvTEMAoSfCO4w==","signatures":[{"sig":"MEUCID2Z2rw+Wpf1WPzjtRvk4nyiZjO7fwonRGVhJ2dg5IBDAiEAonVs+wFCrw2zXvbHaWyvjhvQMxSS6eKm1tLCiGxRD7E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexASVCRA9TVsSAnZWagAADQIP/joktEaBCk0lfxdez7o4\nPme8mKzw5EUEDtEwbANcp/OBgjIwvgCLESHmObzTQYQcrl7MEfe39z1n5Pgb\nns60cTsVjSxiEN9qsbGzOp4WqqP8Ek6VzfeKlCIWfw70ekwPIrNWDKP+Zd1o\n92Ik0QxX850fWVvrx819zr0PhXiNGBAoKyLBEhgUeg9mYucDlopwBoU3U7xl\neYv+9bHl6FAafP21wloZk/XhQ2J0MyR/p/PSAfDyluUG6hFarKqYAGpQoev4\ns5PMYiWgiqJYJzcw2llLbc9eVQBOfOXaUdlFndQhurEvDMOmvtGZ9dSuKgcd\ngsB/h/AQBTC1RZhyunsm2kqCzn7zVGlxegtkZUEeYLS/VSHeBKZjQcfexa7l\ncGMRPcStvovrowCsdD04QbQUspohG7VC/wfTf4rS834G/ofQ7doVNpxIeTA6\nG9rQKbJkJ8NnbSprcUGc4hxa16ayktqNLEByHBQDzdgIQnUM6sBRaQ15J0g5\njKTxReZXqpeOKk3gocOZPhdU6v1n6mcrPL/PjlHXbmR0AvuKWh7EgMr6A8bW\nWCkGHhZIenc4M7YLaLfZ75xbEKyhzz2yNnh+p1MvZ6G+6JC3v4VPdmU/cDHp\nsgB29HGVvbq47LkzxDhFoOOidZVabZu2SlW1zpEZZkZqf0DAKcdSU5LfB8Cd\nwHin\r\n=mA2N\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"a4b6f1d5a01445ae9c14845614630907beaad190","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.2e60575da.0","@material/feature-targeting":"7.0.0-canary.2e60575da.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.2e60575da.0_1589904532913_0.9765824137316346","host":"s3://npm-registry-packages"}},"7.0.0-canary.e3eacefcc.0":{"name":"@material/shape","version":"7.0.0-canary.e3eacefcc.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.e3eacefcc.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cab383631795cedff11c8c866e656ec6659cc2db","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.e3eacefcc.0.tgz","fileCount":13,"integrity":"sha512-tFxD1m1UUovC8ypM/GD+ww/uCKyHEXXqBmZJTpP5AfWlFAVuwlHMrgGT9uwUmoSefRgE991FGs8eFN7cSllp8g==","signatures":[{"sig":"MEYCIQCidi5kHLDhct0wzjY1j3FEjZPyLdh4nHAgt4CGF0sg/wIhAPnWG9/eC56qeQvZuBV0/Oonkor4J5pdy5dQSz0rZ5+F","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexBloCRA9TVsSAnZWagAAYp0QAJIbfmlmVIMsiVueX4My\nscwTiFs6HMirljqiii3W7vghyZ15JAj7ReA/pHi9SBkekIO/ppPxMQQbXMQA\nzMBoelsO6biW1I66EZkUmXYkjyJ1mtYZ29kUgMtsyAQeIPDba7z65rMSiWiO\n+oZWEAR3UpZISiyn2Z58B7QF8EqwRaW9pKo8gv2LBanFbTj9Zj9zancvW9dj\n7HE+GAd3wUJCjQqkexByUgDxkA61scPwpnMsn0JNwauaTE0AB9jHj43NJB+X\nPd9meUrNsyKjGpPt2XMh/X777MDezSWuXyAByAgbjrxtYGfNQMqkMq7JsZqH\nnvvHHPUtWbN4LEKlAC7Tv7YZ5xVF41CRQPz8D+3F7nC9QwDfxbIl45t1kANV\n/rT0uBahcLJ4IV4kPqDcIg8e5jwHVAWlj1AjqpB54TSDSgw0t1boreU3yUNJ\n3GdwR4bReYTgDYZKyDUePzyBdUX+lTyGxbjmzkBXxBKlGp1QW4wbNtZP5cGH\n7R6KNukIBIuDo5m7+CMvhC5ZsNOP3nxZqGlZk4DEpOcaw8Hf91H4oXzcYw9O\nl6Rf844+E/5SUGgkmyvG08ya7u50ks0L3MoG8vEvIv2PvMwSWOb2dNipAdbB\nrDGnOLY90v7mm2WFPcELdZqxeDBBvxIoU+aGZM+oTQ35tvrCCGbF265yGCIg\nyWGP\r\n=qC2R\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"a80846c07f1b98212ba692bf027c2003093d0180","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.e3eacefcc.0","@material/feature-targeting":"7.0.0-canary.e3eacefcc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.e3eacefcc.0_1589909864001_0.2778868698197594","host":"s3://npm-registry-packages"}},"7.0.0-canary.b065a4d2b.0":{"name":"@material/shape","version":"7.0.0-canary.b065a4d2b.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.b065a4d2b.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"44762a5e59fc8d0933819be473c56c57b25ad2c8","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.b065a4d2b.0.tgz","fileCount":13,"integrity":"sha512-6Oeq2x+Fkc9wjEWdzqZIZDYLvexl84gqwK4auJKjkiA9ZybvlfTCnTdtNWm8ptSINLH3FBOmfZS0lrJLm4YRcA==","signatures":[{"sig":"MEUCIERGtzHBDG5S43aFRMYm5HvbE4Wlg6hVhWyI/Gu/uHHfAiEAjDdl39uDHZ1YnwegoFmC44Zg8vN+67Z6cUWnxf3Wrgo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexUBVCRA9TVsSAnZWagAA0K0QAJK1EYzJUA0IEvGMaegK\nJxdK2NLzkCcW/rS/BicY2kTDHSW3ALFwQyXGYKIkphy9e7Z5UnN508xwmeAD\ns7tnigfgMMksJ+UKZzEAIPx4mvbib0z2Och5aCKP3z9r5arnxTo0zewj9ErN\n309f2jrzD/ytMqV8D67yST3yrBzo/L49qeTRvTG/eV5pSvwmVb2XupXi69EW\nAvHYJLadNJTjrcth51KtkXznWUet4fgLfQ9uSckY5eYL9tE5h2npkAkOIq27\nwCFcySBMnKNIiufcxXaLmZKSuEyhqqP1J0U3YGpJsoKCAzh5RVQQnisMVe8f\nklVM0C5ASDRK+WTTA5gcRlNKObOyewd4WniPp0LxXZNlWMhWDZWZTZAOfih6\nTPLcFKVJN4YCVK/5/Pmn9Jxu+eSnviVlCLHjQz0ZAeYfpP7znVhfpFgCNlIL\nP2U9JHYf04c9Qo24/MNGiijBejE28JxaJutOGL8Z0N9cYXoJuP5CRC/Z+YTo\nkyiV8dbHyIlxQhK9Gjq8sVMsnxBECISBi/zuZ2GF5DzTNeXvy5iuIu6VmKpf\nY99/dL1DotVa8VpPcgTv0Nqa12UNhjodGmz2+sx7m5+XhFEHbEo+dGLfRzwk\n8tzw38KoL3W87uGurlktTYE7Re9kPpEwzlWj1FwYXN7coQ8FIOGCx1aR0e6F\nxjXL\r\n=T9/V\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"7de80cb2ccfd67196d7be3fd614cebb9cd73499f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.b065a4d2b.0","@material/feature-targeting":"7.0.0-canary.b065a4d2b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.b065a4d2b.0_1589985365368_0.4133150487621242","host":"s3://npm-registry-packages"}},"7.0.0-canary.4ebce8d78.0":{"name":"@material/shape","version":"7.0.0-canary.4ebce8d78.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.4ebce8d78.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"91c804389c775a64185ad17df4e750e8c74712c1","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.4ebce8d78.0.tgz","fileCount":13,"integrity":"sha512-fjGL+msJxklHrpl37eCNMnV+IEcySw0vUg3cTwtHvHUGwkeZDIa6fJGWGY8v2+akAPHSLGIWicMg0K5tI/4eCA==","signatures":[{"sig":"MEUCICzKxXW7+8jNwvkQwaEEWjAsWZBFS7vF0mW/uvZPfnAsAiEAymMkZxwgwEEWjw5wuiPyxxSX76A3VcACDhKJZ8bbE4s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexZf8CRA9TVsSAnZWagAAEpcP/RvA0nrBaDS5uaG0sg90\n09SuIMAygVHzPoXlfkGJj22NbS4D9mVEzok+nT3FNO7vK6To6iI5gudmgEOa\nl0xJMlAlk8JX2s2F07QQyEJv7d77On2XEgHyubxKeHhhHqSzVxdCXdP3wZiz\nwO3droYgpQRR2T6Fh/ykf8IIjL3LRJ5Jd7c4mHyKGSOdb7XPxg4Wm/AbnmvK\nbYw9kTKdDYfksbTlNjcMztIrHdZ4crD5EuR2E8dcFTbzCqo4eRvvluTKmlXK\nTx8Z6tg2YUjarrrtnrod8dj1df/ykAf5Q/DbYoVRX/BXULvGxu4AV7lK5MIJ\n6XyP2lrHZwtzVpOpo82XqGDGKCpsBhXfPM2Xy6PhbYlDsNXnE3AQ9BcFxHrk\n/faAQIkMi0cdWLpOGekw/Lg81wlR7C0vE16O3R9QMmb2Lwlk6Tx1MtRvarve\nG05f5dohcTrNUsx+KWTxEcrxtVS/j2uswnOzrL+8KkTxOFIoCRSHJ3LWt4/Q\nMXfcmdOk8JetKLjDCQYHzCtUobXDZcTnve0BgjqYtiW9y3lNpR7rKBd0/lpp\nS38YSZvcebk/Q+ib6PGmrHYrd4tuV4w84kSwDXhEcksSDG5biLVHv9+s5bHh\n/vUx5howqzoU/eMP8JObtwiNjgWGjvoQY+AmyXd7rdiruXIBUJx1aSSu6ECh\n3a29\r\n=WiMv\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"d7cc6c4aec24377070d4417765fa102dcd7c7e0b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.4ebce8d78.0","@material/feature-targeting":"7.0.0-canary.4ebce8d78.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.4ebce8d78.0_1590007804400_0.84119044006257","host":"s3://npm-registry-packages"}},"7.0.0-canary.b0fdca492.0":{"name":"@material/shape","version":"7.0.0-canary.b0fdca492.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.b0fdca492.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"54ae57f739a2f79408f37f1726839b2d5c12076c","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.b0fdca492.0.tgz","fileCount":13,"integrity":"sha512-slN4Ku9pSq4rWR6Panzs8mR0B4fIOFw/6Th35ChLNFBLE4gpsYlScUZezNPbOa6nGk18z09fBcRhVMhqTGh6ig==","signatures":[{"sig":"MEUCIEzhoH7vnO87HjGtL4+Om45jcMmz8Jcqbo654df6feoPAiEAnB+om3Pz7vUVXfv3kah46UzBBEmyJCD8c2oWw/9xpPw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexbcDCRA9TVsSAnZWagAA44AQAKGG3Lq2r6nklgF4drZK\nKNn6ZDN5x2apExZuPMFKTW7eANtXbbVC8zSwWDpSb7Px6cNkqRMfdGqlgTQH\na1Rovp/SPrLLQwXZ/I7tmqJmMlOgTNGDg0hd5EJbCAVZbFWOYvuitTXXO1K/\nYfrSa4axa2GjFqxwzLntnnmkVrM2e3h9+rsIp3aJrX9YtrsSP+KT0UsOtgQ/\n2LxTblUugkofAFCf1sAjgrQPr2++YlZ97qeo/cyDGZBfpYFWp/kxZYlkGeym\n5TXBkNPiRl7G7wjCCY2UxKe6GUiR42ldQaafLC9qXbUPV95Y6n02n5tfiMOi\n2/+7J0VwsdEorwVTXmWeheQjW1NbCRoKSTdE8u8RXTNyHXjROYvAQAv9kGbk\nL4LidigU22ehDHgiO0+kY7tzYMfqK79h6cwjTo4HLOo6ctFhYA2EMDcOZDdE\n51Ede+libWGT1zGUvO2FGPDLzWnIItRfUXOgd+oHlZWYA8pXXR9FUfZ3ANmt\nF8IpfEW58BPx9Ls9UYfBX1xW+ETpmdpPrN1SdYlIKyC+F2mIOlAQlyxOj8j6\nKg9k9tRXiBMiaqST79nAfGJ8GVz07nKb67Pzes4e3TerZK4qdh53No3QBA3O\n1ZuLBf4evj5ufNfymqQerwQVcgXmEqKhhjnus0iqr4TU3wY7SHoXwZ0Cp+uy\nTWZ/\r\n=oFzF\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"590e5f052548986555dab713a1bcd253b6dcd01a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.b0fdca492.0","@material/feature-targeting":"7.0.0-canary.b0fdca492.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.b0fdca492.0_1590015747273_0.6140101760422696","host":"s3://npm-registry-packages"}},"7.0.0-canary.c67667e8e.0":{"name":"@material/shape","version":"7.0.0-canary.c67667e8e.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.c67667e8e.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ab5bb9c7aee62a9979715e22fe6805248e4e343d","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.c67667e8e.0.tgz","fileCount":13,"integrity":"sha512-UIR0YRlLE0jsOzfUwrx8F9MguAeBseijJ1rYJE7fBt6MheChqiOiSYTVBYJkUVczWSKp4f3edMr5bZVBazVXHQ==","signatures":[{"sig":"MEYCIQCEME7elVlFg6gAzAZwjYM0TSuBmHeg6wJUmpMFZDJoUwIhAPCvqPle723gkaW0rIW0kniKkTxadPECl4TX2/NmHAgQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexow2CRA9TVsSAnZWagAAvnUP/jq/hGCczGwwd/g8Ne0q\nikH49IhTbg4ej4St9ADuYgMxAW1ms/VApPnHwnke9t99I4yhoP2aazpsz5ub\nNOJ4ddDJKRblhPBD8BWVc4L3Ao+c8SiKZAOUEFbcOGoDIuSbei0tqQLy5BHc\nhHxHD6mBUPYTYhrH6Rxs418dHEDumchqXvIg4WkgdZkAdMJklCk1tYyyzNDQ\nGNBW9i4fEeHhCQKFOxHBgeX669zUbH6YPo3/A3PLxOKWo0nE2rz8mTWyh2Qq\nOqtEcYw1geH3rAsMuGsXKdLYhZzFYR7Gq8Ebl5aBcRYaYetw0ihOSf4kkbbl\n6TRv5SzSQRSXb/HvDfYQijKhU7NoBCAz25A+F1aRx3gfFfNmZyiYxgO3zPZC\nt1Bvk549t3s12moTnMdFOfZ4bwMWDrFj08liPGfXZcqt5/QG2240xQQn6H7w\nq3/Q1r+d+MFuT5hSZYpHX5RlFlaf0oXGQTX1c3pM6Jh0s5MhyMlU/tL6xpHO\nAZLmLHy0uo4GC3NtdIC4Ujq8Lam9bxEC/WW2nEcCRJXD1oN8v80R/Br5EVSY\nl6/M6wgq9BxR5HGXBXhWJ8g5MtFwMAl7QxL7E4UOGEc8LsxHYSYezMpN4H7g\n3Uu7N8zpmPOjTHBi3ndxSJ5eT80jzQhmiQh0XP4HG7vX2Ff54D1a9Q4ugW4t\nmySE\r\n=0f4Z\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"405f1e85ef85a7cfb12bdcba9816d716433463d5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.c67667e8e.0","@material/feature-targeting":"7.0.0-canary.c67667e8e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.c67667e8e.0_1590070326195_0.10530707157881691","host":"s3://npm-registry-packages"}},"7.0.0-canary.62b5f37db.0":{"name":"@material/shape","version":"7.0.0-canary.62b5f37db.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.62b5f37db.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"655530b86db8506078afb4de1cd3d1f7e58db59c","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.62b5f37db.0.tgz","fileCount":13,"integrity":"sha512-mLQXnEtPXKPUQahqseUUS2QQNbTRt5OWEphPR4N/vjs3MrR7/HO6spxj6zyUgx7tGKEMDRrYFZ3K6lX19Ac+/A==","signatures":[{"sig":"MEYCIQDEZtzSIpbVVL1zISK+irRKGubdvieHX2L2iIYrmUS1MgIhAJ4KZDi+aW/H/3F1I3VNTts+KuD0RHezWcQAKULZueRB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexq8SCRA9TVsSAnZWagAAaxsP/iauOdcuccyOasfOwBKf\nu+E0oVX/gkQ84vMg3egD7kcAMx4hK9Os+rdf7GMjsJBpU/m7EhKfFr9WLcrC\nDMlLVJLM+aTFHM+nPmcc300znp63ffYtWgGq5B9BYVdGFrzdqNwJ9b5hhzps\nNJjQFrwq3s+diPlXPOAJltJzT1dR7ShP5+n9ZXYX8aTOmrVU8802LMfav+0D\ngLHKUNO3+kbGVKfA+q7CC5zJxPb/dT5amsyOxs6hgOLbO77KfjVOq+Lzt/ZR\nRyPlvrjXn3X+BPMzFfiz/ZTd7YdzArHuWcS/WV075hpDCviwEEAwt2xyMKyX\n51Oa5Mu0+55G+kZnW/xO+BrAIOrd8QCpnjXWs/O4ukcYznIKvvveRfnNMUFd\ngehRCpmKeOu54CcB2nKULr416epPpzpPaLlwr3LTw1R8idLTbwhpEc+g6Su6\nBbsYqH+RcHJkAxlUDGtBfUED86IInzUWdOQQNnJmx3JuyCx6IsBFoC7AZ385\nmaeysQ/rNXj2FLogAf4AMYTObSWpF6qH4FURyLL4VVSpvZIdfgWlu8ijqbKp\n88onUAsN3iMp6VYWuWNRvBHWo1JG3ToBJPhy51F81WDa9YyhoJ9Ck8fPNt91\nhtXoVHoDKmr0Exus7HGWaE8fhjJ693jJmBnFuwt4jBo66jmZAv5PlpiSYKol\naHs7\r\n=uFUm\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"62c869c9d490fcd3f25cd87f251a83b273e32736","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.62b5f37db.0","@material/feature-targeting":"7.0.0-canary.62b5f37db.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.62b5f37db.0_1590079250327_0.7170198929691913","host":"s3://npm-registry-packages"}},"7.0.0-canary.2e218dbf8.0":{"name":"@material/shape","version":"7.0.0-canary.2e218dbf8.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.2e218dbf8.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0fa51f70861da4c2a6e37435e0de144d091ea82b","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.2e218dbf8.0.tgz","fileCount":13,"integrity":"sha512-ot4NLpzr8N3hq1G2hV+d/lFnF/hTun8/vfRI6A/0sZlnsMwUndCL3FCKnzVjBWE3BecK7KdOZ4Ly/vf3qIRAog==","signatures":[{"sig":"MEUCIHpbfk8HWBD9xckqfse2GxASRStOEK1zQiYBT3ulC78vAiEAvQawRuKxCetI4SAoQLg+bt5heSQ8/A9YKyDQY0VYPsk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrP2CRA9TVsSAnZWagAAMggQAKBW41Xc/GH7u9uLy3ua\nuAVQowFPsHc4moAN1X5dBHHW+u9Iee8aWlhvqGOPyLrD2uO8si8fiVRQmY0U\nVu+Ib30fbHqRQcAymuB8lLaAWM1rXHLAx9LaVO4CFGoeIDcR5bcHg7VhdzAW\nIlqs51OUYy9gS6ZWRfs9S8ItTVIkBx7f3FDt81WVSxgY7cjopBKQKU9st055\ndkapMaIl98/IT/iQUp1jOFWBgaXkhkhRVzFMngSqhYKjQ82iF2NbIVYUVabv\nkw0GA9waHnSs2DMElKbukBop+5OBbq8jTv0ph94IvWHjAmDCE2Es6rOPPtXm\nTX5n8JYPSc18kQmmTTsNlT/vUYgxB0JwvkWmwT8wjPosXYLz3iaByGQ1aMPW\n69YDtV+H920KjXbTcqqyD8yf1s3Dbe3nKYBPLlY4J6KcpIEYngmAS4+AfbVp\ntm68WbL9NWcsEUU82MygoUyKJwwvvTGg1BLfFfs+XFpT10bABivIcQ/7qezB\n+206rAN0iyM82idHweWa9iedbwurwtcWfkLeMrYojRSO4+iMgcnaVMsGPniA\nt7tsotzeShu1Ul0g1wX6yFfzamyPHgj370Wk+dHb0EHKpCLnsAZdKuHPao9N\nl2nKyUYOPIFmBaQST8hcB3Sp28/xedbmYYFHQjTUlVpCl4DIr0pwst8QE38K\n92T4\r\n=xqza\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"f9b76f9144a233e7569877ab8f0dbbb1be555055","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.2e218dbf8.0","@material/feature-targeting":"7.0.0-canary.2e218dbf8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.2e218dbf8.0_1590080501590_0.32548380096309426","host":"s3://npm-registry-packages"}},"7.0.0-canary.7fd792bb9.0":{"name":"@material/shape","version":"7.0.0-canary.7fd792bb9.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.7fd792bb9.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9e650002609eddc3f1cc67c585a92fc09c05bab1","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.7fd792bb9.0.tgz","fileCount":13,"integrity":"sha512-62Lpis3QLRa06OuuI4uoB5OwOvze29UZpmTfDv5mu88ZSzqHTqj3XYJCZo7TLp4AGBAnAqmA4zmEU3DnmycnXQ==","signatures":[{"sig":"MEQCIB5jicN62piViuFs37O7u3PoRmAyZklVFy9NAyBs91SbAiACeHSEf0HJhZwwIwHuzSpeVhuIp91AZwWYirCKNbB/kw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrblCRA9TVsSAnZWagAA+hMP/i4pmLql5W/4EuYXsNN1\n0CpkhZo71zRmjxc/THOltcYA1ZGa5tPwKuTEJtla+Yo8SzfSbzcCWTCUPeyX\n5HbQ9uWxL/z1KHjd7yHhsXXkt9bB8tDzkrcSoNgDMYaqk39ofTqcd7wgN9Z1\nRUQPf67uCY1cqyoCeJqAj5w6I33dhKujz/evYs3Sdfm9G7o0h7dyrRtPEhg1\nN8dhTivEmdGGSD4oSD8PZ0Pv1u0k3tc0diiqbsKu72R4ag/RiJaTLfK91TBI\nUSoy6EXgQRpl5LLAcVE2BewPgqEyLx3gaFd1NCez4XJJEU+lKcwHGe0fLx+Y\nKs/VkKirhe3Tl82sS8SSFARhUMKaY+yX8Rq4HhpwvyAEaJancXilK6P+choe\n9BMGgRtVvK5CJ+dckD12zNomJeWoYZ+v4Jhr4RvVCR0upkx2Uvz4VdtUhs2N\njvPUqlH+vZwdmMfRHbJVPX3b+6LCspcY3xkjiU15wiOuXaOZ4FlCOMMl2Des\nw0fNTVGIRBWuS+pRw2h0o/iuTqRJCfLDFXc1RHI2sxvMa94ANu4vsuZf/IHR\nuCwiRmaRXXXbstXFPEryvhVYJ0ewq1uw2PgS6C7lKHROOjbtVbvSjNuCj8xv\nqp9Mmd2F8JeM3sdoxpOMIUgpJwqNP/tI0s8P41jPLBUNExulTK5i58yGmdVg\nCC59\r\n=YD3e\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"d5ce4b5e7914675090d101b10f10374783326ede","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.7fd792bb9.0","@material/feature-targeting":"7.0.0-canary.7fd792bb9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.7fd792bb9.0_1590081253343_0.5967892576012463","host":"s3://npm-registry-packages"}},"7.0.0-canary.a66493cd8.0":{"name":"@material/shape","version":"7.0.0-canary.a66493cd8.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.a66493cd8.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c65b00f40975447e8caf2ec19e106eb85cc81f77","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.a66493cd8.0.tgz","fileCount":13,"integrity":"sha512-XVIOF0aWI+u0HVZS+z/+bgM7RO02TTFuWvcS0+EqkIbYCAwU61ysD/73Ao0KsYcATiJGCmzbtw3U50Q2zT0mIA==","signatures":[{"sig":"MEUCIQDi+cKAw3mqfOFnL2wwdU9WRRh3GbA8dwo0O1Yvw25lywIgIU5ZvGycxW5kG1N//1O62i95EuyFDvHSAuVRvz0wCXw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexre4CRA9TVsSAnZWagAAA3sP/1OZ0gw9QZ/HSqiYr10A\nxQz8l3+OneRK06BrUOrCQRZj0r8kx5/+pd90SUqu/1JJCZhMHjKuTuu+l9zh\nZ/dCdhIn8FixX+JdgZsUnfE0F8qBeYdigEdwiPPLO7muXqeCFUnycQrZPzO5\nZ/d08MG9X0jkVyDIuB7ODVYzfHtgEYZXr1Jo/H8AMpojWQQ1+rrJKasaREhE\n/AqGCThoTzsDtD+UyKLU4Ix/NfxeKmdISFwCpTMTnVwl+6HJ4Su93F+ZTeFg\nALRujvk/zIishkP439pDSAZZ4Pt3+SNZOWCetIATuEuTY83345lKISpsvoUd\njPqPlVmYHeGwxWvzAKBQk7/LaJtHMvryrW2R+MKbb6ky5vhzLWHOxppkT1NK\nw3CvaIE9qKvgfZiiSrWKSEXTb5ZwMbPcTm1VZeofl6Uhgp879V8LSrPEHfZf\n/4sZfladac1+WXtU6oWQc/Oe2XS8Wi0BvubacC+OyyPv+tnVxgkAq5/jVY9R\ncNm8Fiqm7aM4v6W1KdO4nnZ+l6Q0R669ttd5usG/wOuc00jrPZ6myWsK8VBO\ngzKKNXM5Ct9mjw+s+e8FyHaxuGHCuaATqXOoFK2FBkJC0WQzocbBFIb7HWW3\nCBiVknLU0C084pGsuQ43mA6LfKulSmmvn/XHaqzCGaQxoxNXig1UUlTHq27C\nt79W\r\n=gW0Z\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"a14e3cae1fdb42680777a9a6b5706060924d68b5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.a66493cd8.0","@material/feature-targeting":"7.0.0-canary.a66493cd8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.a66493cd8.0_1590081463700_0.30083387579184073","host":"s3://npm-registry-packages"}},"7.0.0-canary.da05f66e1.0":{"name":"@material/shape","version":"7.0.0-canary.da05f66e1.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.da05f66e1.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"366fe96217b2777f8fa6ebfd606b38fe39b50332","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.da05f66e1.0.tgz","fileCount":13,"integrity":"sha512-o199mXfFzrx+wVuoJjtuXRZY6cKSDUYxBpRrum+1liyn+OMALhBkTnPsp/j9iKLjW5PwLmHyYMoUquny/+qtcQ==","signatures":[{"sig":"MEYCIQDAuGHhFdsjPo+er/FX8q/MO2YfrFjZTxvcAimB/dc1vAIhALXHH9r53fgj4UnJiPDBAVPt4pFCZSHrJSwuODDxY1n0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrgkCRA9TVsSAnZWagAAOjMP/2emtNVaPGm+LA5TN4p4\ngfbxeeIS3/QglA3FhoG3B2/O/V1dnqHZKR1TdZ9+uAaSxooZZrtoxXuXM1ow\n0gIW01o6lj7ysZ3C+X9lJi5Ab4q4VtGkDXXXkQdsIeRoNF47j00jl1b0xhj3\nV1aUt3pxKNXuIBrcy+t3EE3hDST/iwnIpAygIrDzHDmumL+2wKaCVfR/vC7e\nyjm7ZjHCaERx5mRogWmDkCo3BK5hjQrMShf5R/dQIyEwnfR6ybHRUl5l61h/\ng2v/wvvmZpHxuyRWWvyBe3VIWXOcl8DdtMe7GdaUo1a8q+IVV8ldobbDXh8C\nUOhEUst/WqUMQgWT29+MDe53F+aSYEEfU6LmeGhxJIm0ayPWq3KXUMpcWld0\nVh5gL8K2RDDBa5tYYxtR5nCivLP23QFRbFaQX20WsRP8ss1Id8K8yBsOtlnI\n2ER95DTEvXjkuU505TAkdGwHQKgjuuBBqN1wp7on+SajVo1qvVzI1MOQJ/2a\ncUMm8eYinBmq6T7qwW3g/NjXNrla/xQF5YiN9YdZg12aE5ZrzZXOmz3P9WLU\nz5dB6RC0Oina62b24C3HSUctuF/yc00GLQS+p0NnZvXK32A73OXMqfiC++Ab\nz+u7TUi0H8DmhpOD2nNVEWL1Pq2gJaj3nOI0wX8rHwpiVfB7BzLwo5ASq0Sx\nZzu5\r\n=CeNG\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"97f495e74f33645d8f066a4be88eaba95700a4e3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.da05f66e1.0","@material/feature-targeting":"7.0.0-canary.da05f66e1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.da05f66e1.0_1590081572328_0.6437359618592482","host":"s3://npm-registry-packages"}},"7.0.0-canary.740860e78.0":{"name":"@material/shape","version":"7.0.0-canary.740860e78.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.740860e78.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"83aba18f9851cf907ea090133f7b4f071f079666","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.740860e78.0.tgz","fileCount":13,"integrity":"sha512-7HxgIK89jSn4p7jB9HRDP+CyqDq8HwLrqxsetucDiL9OQAK/ogm+dsAEUkmVmF2/GTQIz6+tptH0/XKl76O2/g==","signatures":[{"sig":"MEYCIQDEdR1VmVM1HGJDHmBDwsH0MvqnwAmMluV+01rWm3nz2wIhAK5q/NaMagXuE2oRtnNgAUNw5du7NV2oS7pAkc5m9FOc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrm4CRA9TVsSAnZWagAAfrsP/2c+KULuIZzi5ZPbtCXR\nXGc30QrUot9mZMRiwP14VfsqcqQB8tEZiobryyF6ZMEnB3gZpe6iO0vnIloG\nanHaIQ2r5Yeg8Ga/iMqNXweP3TPb9Hu2p4MtjUgL7l64M3KckmXw/iSQ/UDy\n6apJVHGWx45LdQYCK2VYKRMVNKUeIcNST1Ml/KH5+ihA2hfF566hyP9BHCye\nSf78Yx8QPNtydsW8YUlAt/Z7rMUkMbbThhgCSH1Y4Ev7myUWSpJ9lIbMPF5e\nuwMj1W5gCG8+y9SLkdRZ9aQpiuk2H41Seb71jcwVgxhPt1beMV2op7mCELNp\n687rAZNMeXsAgiaiAbsECpq2akg9sXL8AdZmR3kz30bOnqZGAMFMYrf+1iQD\nVaOKvDPEfAxR6WMNYJEzw9zOR+OoyZ0NWORZruRcF0rnOBqvQOA2v6Qrqx9c\nQtw9aIIMbeHgSRvrrmB2NwrWZi5AzUJT4sQ73sQ1VKP30hwnzbgy33iOKE44\nKkUGxrV8YHgemrdM4NK/eU/N3Yqkw1WRtBMnY0eJ69wiwL5QVq8fq29gLwGT\n051W8peeKNru8PE2xKXRXfa/byuM2Y23Uzi4dlTNojpDFti6j76ZT5QBy3oF\n4pun6SusMFchAdjjIYJh27JLkxUVMji50f5kXB9KK1yL+13gWTHkHUB3korL\n8WOD\r\n=5dU0\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"2319c23e86ed8e7ed27865b711bb6ea6970b98dc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.740860e78.0","@material/feature-targeting":"7.0.0-canary.740860e78.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.740860e78.0_1590081975902_0.31435438826128204","host":"s3://npm-registry-packages"}},"7.0.0-canary.5cea2610f.0":{"name":"@material/shape","version":"7.0.0-canary.5cea2610f.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.5cea2610f.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d60ee2cab8f1afcda0839ef111b6e28849b7141e","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.5cea2610f.0.tgz","fileCount":13,"integrity":"sha512-du7tE4dflqkA5MneWf9efR6NbB1ETk8fxN4EZGMiABWW+E/HEd1eRsas7666vf9y48h/Mlyr/W+Tsvj+M+ixZA==","signatures":[{"sig":"MEYCIQCo8YFbFjd5YPA+SqX95/gk4YAQOeOcYai2lnEgHrU6LwIhAO7ZUotY6qhTcwCtQ+uPVxAWV0aJ3CKEkrcmRBCrowz8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexro0CRA9TVsSAnZWagAAhu4P/055FLG8jHqA8018UdLZ\n9vhMKZnL7mG5M4RpciKMGe2btFoFq1Y/M2e1H4nOE5BM6USfygXOqWZoZzyh\nWPj6hlzgXdClmQSamjqdlH5WGNKMenqBRBEFbjvt3XNMuY5a/xL4S8NPsjLs\nvzRdoQisYXTmiTs/J3antL4Q1G7fsusqbKdc8qnwV4VJFu8i23gqELedYX5I\nfHpclbgcPJEAjkHFtIxYgPwNV1Ad/YMjuS2M59MsQ5h5K9AbHf93ZDz5dbOw\nkNiD9cCTBVXO9XTBu9IwHivvzYQWGenkPgV8EzZJ7E8+CbOyAly/B6ZVqm3K\nLiXleXCmT4PBLB+KLY9D0cbcscJKyNO32gZYf82bejr+VnvmeyWWpQWBya5+\nrar8BBwrMzOGzQw88qwWhk2mFaW305Hh1ScFk2EfKchJ30LxwN1ZBHcQVShJ\nAXNpNSE7uAWV+jxYdkKyVF1vmB2PWD72/ygfG50Ch+z3NAJOazygTRaXPO7K\noBiULWqSOQVEsZ+gK+sb/QRW7Hb8RJ1vU98YIpPg0zDaqVZdNLsfmNOHb63x\nB5juJrP/vtFfy1zUabePDEtocaJSVJdJlCFMBLx+C0ZFOWvl6LblT0EeMbjB\n1ehD6avTEGghmTbZJbMdfQXeNX7qEKMwDG1+Iow0TBBavM5SK1bw15F3xRVD\n4/ok\r\n=UWxn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"647d4356b68bdae8879ed7384b0ed1ba4e1954dd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.5cea2610f.0","@material/feature-targeting":"7.0.0-canary.5cea2610f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.5cea2610f.0_1590082100240_0.9966923617674968","host":"s3://npm-registry-packages"}},"7.0.0-canary.cf7747ef7.0":{"name":"@material/shape","version":"7.0.0-canary.cf7747ef7.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.cf7747ef7.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4ff1c9780169eb384adb3121c61619bce2c854db","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.cf7747ef7.0.tgz","fileCount":13,"integrity":"sha512-UXvDCvX4pjsUNHsEToc/U06T+QcUELcFb6vA+W4dEspKUfIc9riuxZBIfRtgfAEBPCfcGNd8Uuf/e1ZDxW/uIA==","signatures":[{"sig":"MEUCIGfAnmqTWEQie1HnjqtF516AYeKlQl1TtcUeEOKdmL35AiEA2PT9yTEjhsmZpA8PbX/EbVHVxTx/TUVQgL9zlXwYVfE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrpGCRA9TVsSAnZWagAAhbQP/jQO4ftQeyScpSHeaXB4\ndJmWPQlTh2ZdRl0025YZlPwNxqX/UD+5IghZiofwEcPRegVBp6CA12735k0I\neU460BS6f8ZZaoRYcWAu+jQFiPbxQdjBFsdaX6/dnI4W2bcezr8v6jImGfm0\nMN5lYVj5qlYiEdwG5/uD8Q3TtAk1mcb0PRExKEwJ/7KxRHoM+2LKYRLrdgdH\nndV2rzLz8wXMdWGZkLUU9EBqQR4Rq/FeUTQnXXCOtmjs2n8kimXWR1HErRIF\nEWTasgVG2cTbRbrMtu3juXC/zvXz4DM4ni41DE5NBhgYyN4MddvsXWqJTr4a\n2pRbt2J9/CqHtjFXJ71dVy6MIdwqq4APeL39J4MjqeWTWMRD8z9HuNBq8tt9\nYutBl/+tiU0n5PgV3OW+tiWy5zV0hmS9wVLzOL4gIcZBCFWb7T4QvoqwJJ/R\n3Q2Uw4MM09rkJEKcDoou1GSD+CTNaZKg5gd9yns9YdTq1M2m8rYF5XSnKlvY\nvlJf4paj5n8K8em7fEfaGxdvQ4mAtE2CwEWiC7h+amQ7Rb6Q/6yWY21BmV9J\nTSHqcF7YT1zzdMkcJJgnnpG6f0G4Zrt+7nGt460GGh11r8I9TASdkmBMXrWQ\nEuws4poYPioXWmrSP8+sciMttw7R85LHgzVwYc19JPl7OmeExC9G1cksm7BE\nMPQb\r\n=QQlH\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"12d3ae46d64646ae020ede8b9ce88abc7efd384f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.cf7747ef7.0","@material/feature-targeting":"7.0.0-canary.cf7747ef7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.cf7747ef7.0_1590082117785_0.05098046259903466","host":"s3://npm-registry-packages"}},"7.0.0-canary.862d0d7bc.0":{"name":"@material/shape","version":"7.0.0-canary.862d0d7bc.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.862d0d7bc.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e28fc395839e68aef0832f15462c9033d9c30920","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.862d0d7bc.0.tgz","fileCount":13,"integrity":"sha512-yEl4k/1FucPQzkeTFex6F2VpqS5ZZsKEb3kFICfcuvWzCanr08eHRAlK30zrb4ifVMReMXOVD9rGsj0Zv3d+jQ==","signatures":[{"sig":"MEQCIF27xIFq5U9KzIQdbPthXjtxuHnS5/gaRdY45dmrIYJ+AiAfXSt+R9I4Yz7++HNhs3VS9gV6pAfChTWdh850TmNSCQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrroCRA9TVsSAnZWagAAUx8P/iZMrgvQCuq3ZkTR/eJF\nZDI1HmSOoc71ngt9qdjF6gMTxPcmnFcZjRPXdchjCnC58nJzGhgVme9I5syR\nHgyKHsLUYJDKQK3LPSDa4WMnT/xgAD6sXou8o8LquPVgrdN8PP5RO0jfFrtl\n7FifZqBn5dX5Le1fbfbnmAv32IAUcekgLwQOVpVm9FF0i4k+WWiPMP9O9g6d\n5xi2Iv7Y6INL9GBSLB53gPBNfqwoz61Jq0yN+yJ86spHF+KqyT4aJhQoy4ej\nMI68BsmqKLJyp6AjwBoTtLw01vrhxYfjgFv3IGE8SNE10o7pObeW+ivDpD0H\n+zt0j7r8PZr6CtzuTJrm3pruVPoG+FWipliOUOMjPevSzbkr/sUTl4Mmy1Pz\noTED99+880IFb+FuFNMmz4jC2pZcvWGcPNQMEi/CC9Aeqqb+1c+I35RK5Fky\n9vbcXrjFem2ykBy+n+ixNXzh8tuuV8Qn+d2ko7ITbxUwNHNmNvPF068opuV2\nBKox5X5PjZcUB2Vr6Nv6hXmQ3ikO3azgELdYgRCj/lyncVxSGPeBrr1mW2Nl\nmYpiZdghuGfsu9WkSl+TmbSDFEjQJnp1K26SvWTxCG3/zsfimP5hDE/clTEB\n0CLFZwv8/wY5LTGSry14piTKKAtQlCRp0JYV7tBvXmZbhtFm3uLmiMYXwE1r\n/p+A\r\n=vXxq\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"534ebaefbbb3a8abf3be3e2e13c05f86a5461127","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.862d0d7bc.0","@material/feature-targeting":"7.0.0-canary.862d0d7bc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.862d0d7bc.0_1590082279706_0.23622702658540007","host":"s3://npm-registry-packages"}},"7.0.0-canary.0008c8a91.0":{"name":"@material/shape","version":"7.0.0-canary.0008c8a91.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.0008c8a91.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a7a08249bdb9f95cfd97981ddb28de5296501080","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.0008c8a91.0.tgz","fileCount":13,"integrity":"sha512-Gtjzadxbmxn4MpHfxIULV9iKE0JwbYGvsgqjUA79jgYAHQZue86OoMy4f2bghBJ19f4tgzmPWjTwQHVGYDtPow==","signatures":[{"sig":"MEYCIQDZJq5XzbQnW70lmNPmIXrv6VVY1AblvBcMKvLLXkyz1AIhALHgwYr1ibCoIZPhkkJlIkknFKbhvl6JOQWZnkplLgp/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJextdcCRA9TVsSAnZWagAA7aIQAKQEmJ+pqkHfej4yjcjN\nytk8xMgmkZQjz1hpvLbvELDgbiny2MhNAjtU9v4fn6GRwTW62F6xEd8BTrw4\nOXWB9OF6sRrOO8Lpv+0tACIP3zwTL5jVm8ak4M7yGYRXQMdSTY2nGNVdH86u\nwyQEemszqIq1Qb6VLqLhlWpu5P2M0ZDTdXTaUql+0wZwqvow2VZnmp20nMcP\nUw6f9j4d7LFdLO5EMyqD6Dn2W5f2II2vXmTLT2E2i0fiZz5+d+Y8fTttFzKN\njZmGbMBhVuIERJ1yeR9Ob5pyCfXP7bTBOWbWEr43grQKxxpYXIbhvnMIZd21\n6JGSVcMdg0EuwJl3NHo9nI+wxSRowjxGf0RLjchwzHthnaUHZR+kYFYjlLR3\niKq7ytj17wTxs3X/ID+Jbs2j1XkgTCmMJDS+BozS+JyOk03/6YIiM5ny0IOr\n4SGSoVYJ8CVm4Z70A7ViI/gKES3dOku67ly9u2zf2NgTSWAaUustdVqTFNSS\nnfx0Qcoe23l1lwWmC5o4NCsAN6sIXtuqWaaFy13tMuGTM+J/rYZzTwcLC//u\nRtfTSbUsuAKewzsu4GJZ2foXqbt/iMqMHMVoi33gVJJKqulIL+TDEP0ZDSOS\n2Zdu1toyd7wd/Xsx2PGaWr0SjzcfdZvhN9EgB7g5td9Hvtol8h6iXfXaGmuN\nrtoN\r\n=pnCJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"5bafcd3cd9f6f60ca813af30e2b0a8974de09ec8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.0008c8a91.0","@material/feature-targeting":"7.0.0-canary.0008c8a91.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.0008c8a91.0_1590089563909_0.8197596262147431","host":"s3://npm-registry-packages"}},"7.0.0-canary.541638fa2.0":{"name":"@material/shape","version":"7.0.0-canary.541638fa2.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.541638fa2.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a295dc394b03488570f0ec131fdbdf2b55840abe","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.541638fa2.0.tgz","fileCount":13,"integrity":"sha512-wLSSDyutz0x2qGcBPWlf6o3bmpxqyyBGAUG82Bkqawi509rGYtdPCSsvFajW4phUQFV8EjKCmt34OYd9GkoSPw==","signatures":[{"sig":"MEQCIF+G9oNwq9CAajrSrNZVXK3qiKie/zbNOGHjMfUlIA6+AiAPtVIgohQX/n9NTN3iR5m8Toemos020W1v+97fNOlSMQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJextrdCRA9TVsSAnZWagAAEF0P/RtRWq+MRJ93oCZt7p03\nVtQIoPX/XRFAxkIy3m5/IQDi1VOE6vXoZ17O50PTrgk7yjXByqkT+agpd0LS\nSfFiHXdINM98APThGocNAKilkU5wLij4D2aI1bOPMYwMmixfKStty5/vFe+5\na6KHDKB6FmPVhqHOokQoW9Vi+ijZz22WyhMqRTGpMK5Wmok4wH95YoOyF6Kr\ncEJISDrVIGEa+MNJWx+M6c3PvHwb+ycUjGKtwWrR00wrN7YOJwEssSr41NxY\n3qQ464LkadXJTorqCGNKd6D2D7mNLjG66SBLbQiyfYHzw/OUkagesiFABk9f\npCMGvjDj+p4Y4S0hAMK+MnRkgLTEuMIhqZyoqJH1jkkW/R6gPCwEKhww7Fx0\nqHmtHhoJ2mTW8CEc9ER2vXL1MH6qgFHtMo4+b8nOQmo+OOR+4/cYlovPZEtg\n2N95LhtbiItPTPNE6sqdxhyrsGHZnpokJojShikvOIfjUA/fnquuNkmMlC6X\n2d9nu5FCY9/y2hP3tfddB/T4/m5C/+ruyi79UfhKvnE635EltJT//n6FvMVC\nAVLLl++DxfbV5FLLol+hNBvijevoBoTTIte/ZZQThkyq/Lg2z7WMABgkpcUZ\nR+bkOUTVt7aDgz2dga3E4K2cSIbMAla3ytC5abmYO8r+3Rq0pJaO8q5eu2yr\nvHcz\r\n=gJ5O\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"e9634a8258477402629947671e06d007833e14f2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.541638fa2.0","@material/feature-targeting":"7.0.0-canary.541638fa2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.541638fa2.0_1590090460838_0.8447526003189414","host":"s3://npm-registry-packages"}},"7.0.0-canary.6167cd075.0":{"name":"@material/shape","version":"7.0.0-canary.6167cd075.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.6167cd075.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e858c09c5df6d2426f0336a921c8f9773f43b840","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.6167cd075.0.tgz","fileCount":13,"integrity":"sha512-dlOfHmssStWcXRvHFDhwTm5s2EwD8HjsoZU1TH2qpWK8jSk+v5QdF7M3utDdNzK935EfZXj6pDxURgwR9JIvKQ==","signatures":[{"sig":"MEYCIQDyTnEjywkWm8nSopUa6qM+QpAdQq8pq3qy3aRLREDEkgIhAL4zxL72KjMQpkYfmmP/PbgPPyAJz2SvlfqhuP80YSGO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexuKXCRA9TVsSAnZWagAA1vIP/2yolFLFG+vU1+YQNJ73\nAjyjO849A3UQMqlSxUk9PG/rH17PqbbzpGilknR8VbSZs8YttO5de6FHlffO\nQ8MteY++qZ9eMPZJGbBwF0+U0DrHdNHZPzTStYyYIaPx7rB7BkzcTQtjwFHh\n+8H8Re+JZb7J1Oe2rcmnLxAcYNsOwcvOUQSxZhsRheqSsNcjcXL77aExs2/M\nzIAmMddpyQorIZQemOchMZFjOFnz7P1618xdTN/y5k7QtLC5At0tIts1+yIZ\nXcbEmDon/25EyqqAOuRhkfgwGTdm9cz2JLoZBt2PfjLMvjK1Dvi0apb+8Qv2\n1HAUaJ0hdG6nA7zDN3PI9aZx2knQ7ifSp1ZoerWp7jF0YQgFzfx6ExcAJ4VG\n8Wq80zrVMg6pye1Xag/yZutheA5egenUWG0iLNZnkmsrczpE3g4vdcGO9DzQ\n7Hy7pO5vHkkY7jeQQcYA6g3i1WV511ihIsIIPjIslg4qKKsVAdNNa5tj6HSp\nygdfX9T0/Y8Ego40eQFe4r2aRGQaysDKyxlK407SGYXkxchrgkjRNIlOD8Cf\nBwiPYEFYmOtTDkY8MARwH653iD4dBnpRdE48iSPRE7Vx3qnac3m8KhoBKirg\nVHTXCCgb9pvrhkJbBYf1WAi0IsfEBOGw9P1ci5ggEZoGFQXbaRf3rZ7nk+4Y\n6cDf\r\n=FPGQ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"c86a924ab304fc32e4e6840c7c8962330b6b0fcd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.6167cd075.0","@material/feature-targeting":"7.0.0-canary.6167cd075.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.6167cd075.0_1590092438626_0.4772822357884332","host":"s3://npm-registry-packages"}},"7.0.0-canary.863ac1b0f.0":{"name":"@material/shape","version":"7.0.0-canary.863ac1b0f.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.863ac1b0f.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"936ee389313ad1d0d27d423af1742eba948643d5","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.863ac1b0f.0.tgz","fileCount":13,"integrity":"sha512-dfjnpqgRbOpj6IG+ss/TxDqj9b5MR58PHkBJvLIsnRNEoVVuQb5d8SFebFpPW0TxKaGGe3f7TN9oy2Z1yPR6Jg==","signatures":[{"sig":"MEYCIQCKfhgm142UkxqqSNnjpkNKY/+AvdVH8O3AE0CWG6USWAIhALmx+Brod8vGkxBimbiGR+N3rRXDFsyWg0Sr2/EwuN9p","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexuulCRA9TVsSAnZWagAAZI8QAIQzW2Je9i+faa88uc6j\nfPTWhpemCVzgDyKypBnnNxdiQZPTSyM1ebJUMgMe7A7qgXJiQ/Y3jPFT+Nsu\nDvTE3nk7ybtNnMaw8/W6YebLpNdOoJ8WrfzxeRm2x6xdrIwTNT+C9q+nmbZv\nNrrwKQysi+J590vF2F/0EsQovgwRa6g4S5SDrBEXPjsLmnJcn41a9jEFrq2r\nL9WqvAHKZ7QcrsOdxSvxmxkQ5ZzgkOi60tAdkqJXlYVq6nVJZZ+cx1jnZT8Y\nGFsnuhH9RnPi9TWlKj4WfrlX5xV52wQS01gEk1k40/t0OWp8B7D3fkvdtzJf\nJ6QaULXV8YorQyCAqEwcHFY+ZArqzAEnZw+LnIQHtJtUkQABPtTzTWRIvc7J\nFTPfQ2b6IGShDcQF9J2OmpXIfz+t8GqutipgdO0UazJcYh0V6CjmLGtE33Ny\nKmbkNdfXnNYawH8HSk649sVWrvracexqV2mhUDvCUVlpHmgBM15vLse6mRNZ\nwG17iRQV55isuMe4oE/Oo6AdgKaYAZ71ZpswkSEv5GU1MsZeVE94+D/5TiFc\nwMiuFms2oaE3NK1lVCLp2etgcmrgCtsuOMbuDEQwtLHzS0ZNp0DiOV0Wdjju\nFQql0ybhmmYETCWM6F6/qmtLd+IevzT0FhEdmcdsAv5z5Cd0X7kSVxpnUqjJ\n7NN8\r\n=F0gC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"c1e7026720dc12f1bd465dc892c8718b429563b6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.863ac1b0f.0","@material/feature-targeting":"7.0.0-canary.863ac1b0f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.863ac1b0f.0_1590094757271_0.10939722491142634","host":"s3://npm-registry-packages"}},"7.0.0-canary.d30a214ac.0":{"name":"@material/shape","version":"7.0.0-canary.d30a214ac.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.d30a214ac.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"918ec90b769fae30f9b71826d5349635823ad0d6","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.d30a214ac.0.tgz","fileCount":13,"integrity":"sha512-jIFdHO0wikla9xd4k1+q4y127uUH7Hn5SNE07VZN8EANbvKTmJG33j6OPWtIlmOlQkZ3Miik3YX8sia4d9Hgtg==","signatures":[{"sig":"MEUCIQCmMOCu1OKPfJKCOuQgipR9hvzBt5SnFX0WoQP3LDfwpgIgBYRtZ9/XCVPP0Pye09S6FHzWh/DlRLcVDI38wNjeyag=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexuygCRA9TVsSAnZWagAAKnoP/RWp9RV6vXjui8luqRDI\nOshgd+FMnpxPbcYki4naCCj9W11m1qKAYXHW7YC+J9oxWuHEzFoZSdrfNBvu\nRpGs0qHUC9tRAN0gygcjSWYO/oW9znEP73Lv11XQFLglfd6y5iyxyW77iCNC\n7we45nNrsL8n/qx6BSYp4emk38gBUGc4Z/QWcvZ3aaUy9QYun6ua/JWWRsWp\nbIVE3CUpTBqzIWdRFLhm+XoF8jILyxXDoXN/jWrpCLrBdn0EiZDOipBVu5sz\nj9tJBME5qiPMmlpsughExkfn7EpXTGBdeu/fOL9q0ordOVXcfyYyQskulDe2\nqgNOA5XoNHfN14+QP+xKO2WiHgYKKzBQh0DSwcd6b2XG+3z4kJlvkwzMpslC\nBmaj9IH2R4cmTl0WDLmsHkunycsdgnAuKcNUGbnn3yJvGZkUhsbLQYkKMlp9\n2t1kBV3tnMMDFc3nBe5o9sWITty3keG/78hkyKz2Kuw6j85KUtA5wgRu3Usu\n+RD3AM8d9nPf6MqmDH5oAgPtEx0X8xZ6BoVwGSC2gEiyS0OXoXiw8h9Mvhax\nEX7eNaIH6WqXy1OCxmuDPuVzmt95Wzmf3+RQ/d7BX77p+xleTuaSaTQ1D4ft\nOGXFppkuRI/HD0AmEvLrdvn9uScK1Cj30sgxWPhF3s1JSKn+feFfbf6hzeUB\nufeF\r\n=fn9D\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"635c0e7c484f851d2ecb4be825abc36357ffc685","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.d30a214ac.0","@material/feature-targeting":"7.0.0-canary.d30a214ac.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.d30a214ac.0_1590095008027_0.7662240860102072","host":"s3://npm-registry-packages"}},"7.0.0-canary.62abbc8d7.0":{"name":"@material/shape","version":"7.0.0-canary.62abbc8d7.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.62abbc8d7.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6fa6f7044d2c59cc5a7e5fb03c72772637c57e3e","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.62abbc8d7.0.tgz","fileCount":13,"integrity":"sha512-eAoeVvWieSDQc5czXkcVs6jj2o6jh87GWQ/IYyj+fqHIsZOVeIjDEagfTp40h2t6KPZu4VX5yT9cEx+OVGU3XA==","signatures":[{"sig":"MEYCIQCN1SJspGH6cvMN4m7ysmE6Puoa8JMbJS4lDCcS9Hw9pAIhANY+PxmGtLi7ra9bOJHY6a8yJSdqiPahBx9g3VUycavw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexvJxCRA9TVsSAnZWagAAPSYP/jhEwGI8sri+YzW/3hOu\nyiI2mDRmcDoM/DotTlJ4nFLsQ8nreT/ceBgk9rgKIWO2Mckn6z0HTuyIVmAT\nyPS/HAl2HkPt0zg32BjXQtAMLFWK3B+24xtCvUJGu1F34NycgVRAIeAAZ4kL\nIRY36c66fLxON9m/9gUEcRvgmtgGWkmroa8/IZufIGZ1UksmKXTzsnRo1KTS\nM2HO/if956t9mllyd/b55YipTMoSS7MpuRzFcxZqQSXONyRfXD3HTWDSDdaV\nSuAOQyKslf1MXGTTxlZOdf7B3DyVc5w6AMs3bXGIhxHkbBBN7bmWUeMByH9G\nvCFUnM6KSa3S1qqT3iqYYa1XN8BM+wykDMMMUsJo1GniOb7wBhwI+800piwP\nlvbNDLHVAp3VcWqcVHIBq2h31mucRs1uMXBfy9XUymO80cdwnwIYbBY5+IGF\nT4t4utQW14+CcXAGRlxB3WSnwxZgnaMfoWLeRDUNng7Q5gki8i4SEhcIjwux\nAwOh+QyW5IWkeV9ivuzLyNVSVfuJAHHLbEsVvyEvkInUt3/TXwEinUwQbdvX\nZWUvU0m3eKCQvUbKcekjEDh/nUO8xS+yPd0I3vkWRppkwQVv9uYk8czcT2gl\nsKAZS8+tCsbpB0RJ5I75BeIzENYi7BEEd5G0N6DxnRmD4DYGCNabtUdDPeHA\nGpIZ\r\n=Fr0b\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"6758c29e4b065e2aa9cf633b0838c4ebefb9f54c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.62abbc8d7.0","@material/feature-targeting":"7.0.0-canary.62abbc8d7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.62abbc8d7.0_1590096496844_0.7969307180231007","host":"s3://npm-registry-packages"}},"7.0.0-canary.49bf31d5c.0":{"name":"@material/shape","version":"7.0.0-canary.49bf31d5c.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.49bf31d5c.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5b1ee038309db53574bd374ffac2ad8485ff1dd1","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.49bf31d5c.0.tgz","fileCount":13,"integrity":"sha512-JdaFtqeKuvh9HLdmG18hKF7CbnBvQOptEyUhlTLkQE84EX2R4SxaT3IHOUayGZ7sNZPjNHEsDm5M/HybK4b9Ug==","signatures":[{"sig":"MEUCIDe7bsqGmn5qQgg19wjP93YBhgV47gmeS4H52n3q7f3jAiEAkTf90k0OsdMmIHvuOhQ7u6k8xr/e2gG6jFayjtfBXOE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexvM4CRA9TVsSAnZWagAApBAQAIbTVHTdqYGovSAbA1z4\ntb4Ec6N9/IzDooglB5fr01ZhID4hMUCGzygehGxjrNoT5+Bpptu2UcQG6rx0\ny6npm/nV894Oq9okAZaxlX7y5DopjITxYAb/is5yQk7eMA0PkkNiIWnXeyF2\nRXJCnvrF3trwAH4EuJZ5wCh0hihWzozhWIUbpA0/WA4hWiDLYK2fwe0Vjqox\nvk1zJe0v6fsg1R3AjJyyhGi3OuVvJmiM7c64hnrmdEv+hLsTjDNB3Gu/yQeO\njRgh8ugII/a5bWfIRycmCasnTqtMLhsenjsKl9FhLWzHpFdgw4y4A8PgneVd\nq4LZn8h/S4knrA2fdf/dHN2g3SFBKiZA+rW0jxsp3fRsK4aY7xspqix1TSuE\nWQqy4wWT55KBMsejWKicWS+5C15asu2x3bzC3VtdhE9W2KRTTOp0YSnJK8Ev\nlQqwpLo7V3Eya6H/BuA7HP/humGyn58nM7nbEsvqhR2+JTJc4roON6n7falZ\n/oG1duu4kRbb7922DXlHwwTPJcE2R181dQ0lEPl2Uy/98rep1OWwrlUFD33E\nYG5ZsNOiHySLhVyyw76M5uT2jzQYewOMQf8/vQOAyHPC+L+thMn00RSLaT9b\nmU6/0da2S8c8ybY/MqemDU5l0/dEya5M8dvgkCwQxtMgwhabRyDyegwkAhPT\n3c6P\r\n=Oqor\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"01cd7b0082a754dfb042df35ec48efcd4aa4c52c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.49bf31d5c.0","@material/feature-targeting":"7.0.0-canary.49bf31d5c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.49bf31d5c.0_1590096695811_0.9332215603226639","host":"s3://npm-registry-packages"}},"7.0.0-canary.8e17857d0.0":{"name":"@material/shape","version":"7.0.0-canary.8e17857d0.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.8e17857d0.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"634cbb711dbfccdc423caef6f2651656886375f0","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.8e17857d0.0.tgz","fileCount":13,"integrity":"sha512-gNeagfnVoWp2dJRFZaAD4RtBJSBVCyUcqDEFF9J3GVXVqiR1tDwn1Zuwsz0Fcm3b0PKkSmdK9cv4+3R84GZ/fA==","signatures":[{"sig":"MEYCIQChKRjphaRnlskeFdTMkbXRoitR7GyULEDh5U42+GLe0AIhAKWY6X1w8zagI+RRSUoPFwqNfY92CPJBqwJ0oT2jLrEO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexvNvCRA9TVsSAnZWagAAee8QAJXYxGQvoPOytXANNGLf\ndxGf+TBkVskFxb10Acr85PtfeTNke5kEp8GQ/n8rZYxXc1GpMzJuaz5N/HS7\nQSzlRWIQiNe63uXbfKPrrMjGaJcCp4XQ/XZPsSuj6yZbhIJIZTlYjN0WRK8Q\niBTvr6IsDsfwEQUok1bDyFhPh9HwrH55ja5tzUZf4y3UKsh7MzRm/TKGJdGP\n10c+0m2QLKuYY+7+bNfjUxjP5TfFk2pv8Fd5qUSWauFDDoAbNOPFO/iFvYBK\nXQXivSck7lRuQ7iLXLk+UP/m/04ScDm/Tlvdzmr5qGu6941vPVGxu4NTiO/S\nOJsE1ViINEjt6zt2ynWPFDxvc8XE0zDBuGUkFAp8PhrEKHfRXQePOFjMFbWw\n/xIBUEy/8Lg0RqWKCIK4ofxr+bhJNveAGPPy2MtXkz0zKju8OucSzn6e9kFM\nwdQT2YKAbs0YJYERzoXKy9mEqIbLEPNjefwMclKf6/QziQQhNUidhdZ010Wl\n9RJWZ2rMsLNoVLC8nDP+oVPBu8Jv4O6svEOoZmR3Wxaw3OYOkI/VASAE4NUZ\ncHagLUFS1hPIoiZB7sR+tr7cdjFaB4+wcTw20+vlaAunRrh5s3DS+G40sZyF\nMpmgAThN5MhVnEVqHHiOVet5w5tEE1UaG/ki285WhOm9bEIfWIneVP16Ghq/\n3tP9\r\n=pcas\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"9b03d700366fd287f2ec053c5ef4ccf802ac600f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.8e17857d0.0","@material/feature-targeting":"7.0.0-canary.8e17857d0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.8e17857d0.0_1590096751227_0.13063892473187888","host":"s3://npm-registry-packages"}},"7.0.0-canary.c113fc942.0":{"name":"@material/shape","version":"7.0.0-canary.c113fc942.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.c113fc942.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"345666789c38089774618cbc6000ffd664bf7118","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.c113fc942.0.tgz","fileCount":13,"integrity":"sha512-r5gk2d/Osu21ih7roVu8jFlyDM/lXzgdpL8bEBmbQmhl17nkCC2mwKknIxR9i4KUW7UfNeEX9XkkGCN4dVg2rA==","signatures":[{"sig":"MEUCIG5pRxd20GkGrSqO62Cp6JGWyk1o3ThDfPcmLaahR6prAiEAt9yJ2bB+mIzU5TNioQWzsdmWqy7v+y79xk/1RvxfVbc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexwSpCRA9TVsSAnZWagAAcAgQAJD9/vet54wsPj2tC8bM\nOhT2VrHMqdxlawXsPwpFGyZAqzqIf0PhMLLewsmErYI2lLKj/H8Ot6kEVcw0\nP8Pyr3UzUAb5CstPifR07G/kfuojCQgoWI1/iXL8zZkqsF/TDAhHQTBv59el\nN7Wa+lBejE3lq5gvmZh+qE58nWerQBg7Kr30dlenGi7hpKcVlzFT2OR3sI/L\n4HGELWEpOwNbNewiO+7aHUGrm/3l0LG8LNylq8SMbIBeWpzKDT6fbTb2cEJQ\n27kRJYZS7XVBmRH7YWW9wBboep/DdMNNYSKyByhac/h+LEHNKUBP7De+fQ1m\n4ydzYpwazd0la5M9YhO7YS5VcoTGCH2CY3pj/TRJED2CBwYanznnyMNYT+fW\nb+5pO28C6q/u9j3/lb5jwc59SemJl0C5IeGKZcuFwmZ0XT9SL42qY9HO+Mbi\nrBqDaeAfWmnU4axCaRsRqGKgHbqro5Zj5IFLE1HNCb+sMbAcU8KQr7E8WKVX\nzni3Emx6OWRGxnBOUrjO5jAx8EmzqHcf6M5tB4fLBhA+VMYl/FU4+nOhMsbd\nOe2Ra1ctrMh4LrystmdHcXE/lQTg70aWiY9TiGenoc4Rvdjy4hw08tO3LVjj\na9RFz36PvdeSG7hUCTf+gBGoUpRQjSml9KgaVYDgjLvHq3vleDcMHbjmX+Wi\nx0aV\r\n=eVrL\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"49605d78c19f78dc1b28a35457efd8dd808621e4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.c113fc942.0","@material/feature-targeting":"7.0.0-canary.c113fc942.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.c113fc942.0_1590101160656_0.7177461828437803","host":"s3://npm-registry-packages"}},"7.0.0-canary.912d9021d.0":{"name":"@material/shape","version":"7.0.0-canary.912d9021d.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.912d9021d.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"52578cfd478dcb364ca8cf8e1d868e1f8e209d14","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.912d9021d.0.tgz","fileCount":13,"integrity":"sha512-wlIEORfT2ZttcPUbBc5qdGGOM6mlgcRndEu1omyeS4fdXPitMpTqzqQShSoKfovmWQ6o8j58BHRw8rkh3XDCbQ==","signatures":[{"sig":"MEUCIQD+qOzts1oGx5Rk7zdmDS0DyF+fDQrLx2n9zZM2ujB9iAIgHqIOilBGvh88MrgCHEGRg3tY9WLg1MRsXe8BZlmBnwo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezWOnCRA9TVsSAnZWagAAxuYP/1tyyz/5pmQ3Rf9C1b+p\nunKWbrwpCd8hXVCuGCzVcum7g3skwHX2Za0leDO6yYmLvZ0FWcNrYlGJwzTm\nFMdyr54kUMg2W58pMk13m6T9lkDFTyg0XBQkDwVUU/M+bfAmCEc+X7vriOwb\n5ps+c6FylIc1MJLOPKnPsuAw4lgyNbkRYDZiBlZsKMD9vudnCaIa4qqJp+1W\nCkGgkp4hWmY343aWek07AvjQolvG0C0kC0VAKJ0Ed052MEPDOSxLwWEIemqh\nfN7Hbqn57o2mfof1vZ0v31oZJwTnbIqZs/O17B8gvovClBn1etHCE3i7AqY2\nbsUVkUz6vqsrcRyU7+82iervvXKPBZ26a0oQUFUe2chmTP02SC1JJ7d+80Wu\nwUgkpnunJ4G97kGuhCNyjd/Yc/F9GPQLplElIvOU/nS9xOScJGoVwr/H3VxK\nnSw74HuilyLFGwn4KjuxLV10ZyWy9AG45br57sVK6CY2It5eQ5zjpDXHPUGz\n81D41MsoHHhs8aVOGDBMh6u+K6wPwltJxHQjDyYLabg2mYhYJz0V/8hsuiHc\npurmV82otrHCW1FiwMZDj9/hZhCuY3KBz3h2V31mBO2FnQuTBoS5XRYSBMjk\nUbbW9y6L/udN5NjFv+4axPDgMDfZqZVphcmGVLQSHavXqnx9xwuJRcgCCGma\nsTAm\r\n=bZIU\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"b7080ce5675d8ab69b7f361d040e079511499175","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.912d9021d.0","@material/feature-targeting":"7.0.0-canary.912d9021d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.912d9021d.0_1590518694842_0.46223945070670514","host":"s3://npm-registry-packages"}},"7.0.0-canary.68a2af131.0":{"name":"@material/shape","version":"7.0.0-canary.68a2af131.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.68a2af131.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e5d7f3cae26cfa44d10d14e98101d1bef1db44c9","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.68a2af131.0.tgz","fileCount":13,"integrity":"sha512-ZcNCAYMNTN9WR/lQBhkZp5GUC8FuJ+Lrf9rvvhNbBL8PGLQPPmGI+BxjR9jhd0/iR2/3gnwVdT299+45ZUixuA==","signatures":[{"sig":"MEYCIQCABfRdmiP80rxL7MdvCfI+b0J2IHeGouM0yZ165pSv9wIhAIpsjaKgew1ZHZ7EFqRxH6GIO8jaB37P8r6yGe3EBWyl","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezWjYCRA9TVsSAnZWagAA0BgP/2RYnpG9JyfWvqep6b+k\nO6CSyrc0rFGE7Rb9gp/MkKuIWeJ7YXIQKCVnzEtsLM27E26n8VS2M4AKpCGA\ns9uem6LHq/OwX/DZ8iHS0o0eMJu0rz4VMFMRSEU8Niwc0XorBWqS+wlEaBfW\npU9gH3DfOBzBHp5T/hiyDJkSXh0Y+Tg3Fc0DKYLqmOdzbztkAa71K/L9Fey1\n1BLHG0h3GNm61PiZx1q8PCTFoGDtw6Hnmd3uBboesH5enaLn7uUZ+yJvGmod\nR0SbHy9XEk6fFQvSjM5dDvJMDrZB8e6PQR1hdIk3vQDWd7xjURY2RWPKX9ss\np9rF85SBimCGM565n15/gaUr63wvCpuztJMAd1j86JV7JGYXHecVQW7SzxTs\nieqTlYeatUVWwnaZ35g8IqGbyIC9DVMwenb+K8Jc+AS38Spuuy/ZtvpZjzZH\nrktpk7QNxobVQGxvS2ZCWAcOva9GLoDNKXdPfy23RXhSkiXe9GZswy/qvEcD\nzSb1aHHvC+80Jdj6VGjCsH7Cv7NqmSZGR98HYQWIj2OSIzt52i5laWiWah6C\nAYn6HCpPNTaxhq80mGfCB1vWe9SlYmRMObS0fiVfWzTXgY8xgQNm4Lv8E+AV\nyUhuNhGBfvodMEv76ZREPBHd/ifBa30XRTqmD7Zl3IYw9JNmEuYetGq+aG5K\nCoGx\r\n=SlEE\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"9fa697d39bb8f18500434764b1fd608819d2e194","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.68a2af131.0","@material/feature-targeting":"7.0.0-canary.68a2af131.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.68a2af131.0_1590520023739_0.512027910231444","host":"s3://npm-registry-packages"}},"7.0.0-canary.01de07011.0":{"name":"@material/shape","version":"7.0.0-canary.01de07011.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.01de07011.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fee0015bf8ebcaece4eb97d0f5a33ee2818d48bf","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.01de07011.0.tgz","fileCount":13,"integrity":"sha512-xRQtR8gFd+rDe/05e3y78Xga3HWuZ009r91KOPy3YRWuzEZ0PW+7fA/1dKMJRfgfKbqP735pC3IkOCXkJvfgow==","signatures":[{"sig":"MEUCIQC8jEbvoDA1UjZhAkk9v7pvAdN9wLvhlBM6+ohpBBt96gIgT1dkD5aH3oFKrF3dJ/XMEZwGZ90Bg3Wq96oPPYWZF8w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezXNwCRA9TVsSAnZWagAAyzUP/iPJSioNpKVY5LOCivLH\n0f2/I3XsdX31BW6DAudwk4sA0mLONoAIsFHePYxuLTq2x+pHutyk5RWgcHJd\nkidEVWXAQoZaLc3QBcnQ2bWNlxVWB/lPKDwjmujZLIOOzP7xf+mJm+nnrvnW\njrP7Taneb9KWi0y2gDpKPiQDq4TgrGRg8Kyh7Xmer7JzVuYKZVyNbOeuN1QM\nCr8LCb9uImwDtxgKaNIw/RgWWYghPSYPMHEGF1PMDR3lwdfZHpW5eV+CFepT\nF3ZXdLWTml4y8csosWvetOf4onWSr8pgAPHA9i0Yack+2jo+iXYJOozlyUvI\nulE9/dXoGV9iSYthiqdEUWvV/zKWzNyDbkIaeUC2gWwQQqxb+h+UTEALWSXP\nv0AtwPvSO5adOoM/WJo9r32OEuWyw6dchEJJrjdLMtiArE8MXtpxo0cbqxpv\n65xoxzJx9FivNYfr7XfVgZU8YN9pKP2SMcZNvUPXw8EtecwEh4cXdTQMJQsN\nQ9pa5Q75QMyEwcHf11ZzIn0lMusj5+eTTjHU6f/1PvEe+ljKDuZF7gRu2U2n\nSwwQEwb1heb+48Y7HfjQi33kmLyJ3BDJcuy5SJWG0GVo4RYjwqL9nuIFJiNj\newIU/YpKHwLlKyvBisF3ziqB6XmtQi+vWurhODHoTOlzfl+BuG5tdepYkxsn\nP9x7\r\n=Bwsi\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"58ff4055affa7a1d66e79813fbb147990e5360e1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.01de07011.0","@material/feature-targeting":"7.0.0-canary.01de07011.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.01de07011.0_1590522735738_0.731598044069862","host":"s3://npm-registry-packages"}},"7.0.0-canary.51d4535fe.0":{"name":"@material/shape","version":"7.0.0-canary.51d4535fe.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.51d4535fe.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"81facd9f520e4ee246f8667891924f28d3288602","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.51d4535fe.0.tgz","fileCount":13,"integrity":"sha512-4C+T/8JDPUmq6YeqTjQbib5KYRNHm7I5pcqILsF2cljC+7aTn1REzqqA9TJSfpNy3AqXsQxW9AakBDA2Xv2+GQ==","signatures":[{"sig":"MEQCIEc+eTpevFWaP0OjnComkLguWCLow+RuG/TtU9VGcMXLAiBfj9fkr4zPYuiQxe1tc0veCIRKYcqzumzZU7rsyhiYTg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezYtgCRA9TVsSAnZWagAAcQcP/2L/Y2v1h5eNeVtKgtrb\ndEK/JLFVLSTrY0ENt3cB1cjCK0HIAATn/VJEfdyjnJolzI/O/aMk0Rm+TVnq\njMivNPFqITuyoNtHQfGpNC+OYn4iMYE6WhQkzJfs9+1sXSrJKoVFu+FmsvMl\nN5A8qJnl6clbb4DwhJbhOpEIXumyTZIj/tR58MshVPZD92HBFVLEOhEKTWrC\n74kHed33xCtxHO0YUyWVvK3Ixy2IUYvehy9GRrgH6F0/3uTTYAHcrrMuzSLC\nIgR38kE6s4s/fiGYIO2XKkfzA2I0IQO/wi31EldRhfnWDSexSWXblZSoeBPs\nnhomsw4rcr53Z3zMW+egtZ0HagPt5UupFl8yccUjpv2lACXnSMxzrc1ILHnn\nZ/arVcxNhez3Gz7Nrvn3RJmmpmG2107XZfIEZ9htZBX8Av7I8iBy07ieZD8Y\n7Cpj/c7n/XGV5tRRqkftVEku6cI2Iye7JNHieza93sTQcDYnMOZ7hLcSaA57\nZCiPzOjuXjzZ907u2Mbo2invF4mRzMxSxiWbNVIqan0fpdr6Cx8FbZQt1teA\neAIha8L1zhFSWYbo2aEGr8ViR5kGCPf586HHJlgQZVpZgEiFhRxC8XL6IVbC\nP8KiO8hpPQpvlVRjRczSzPsfYOhAeHYLpurDhgU8jic9hF/xujPKk+cu0Wvd\n3Zng\r\n=CI6U\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"2ea346ccbcf8fe2cc90f893a510a194ad4f67356","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.51d4535fe.0","@material/feature-targeting":"7.0.0-canary.51d4535fe.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.51d4535fe.0_1590528864364_0.8785013416717908","host":"s3://npm-registry-packages"}},"7.0.0-canary.b86d826b7.0":{"name":"@material/shape","version":"7.0.0-canary.b86d826b7.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.b86d826b7.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"54f7349e2c3a0dce7244195c97561e6cdff61113","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.b86d826b7.0.tgz","fileCount":13,"integrity":"sha512-kFK5C/yB0Zme2+JVbBoZ4RMFOe9kg/igvd+kZNN7U+vzW7WznlOU+32cYm9vg3tF4FqIgu002AMUEpOcBLYHWQ==","signatures":[{"sig":"MEQCIBwdiTWfEONmuVmpPgvGlXSgHwU3czxXq6ZhoDO1PBhHAiAR9QW4n5H0U6iS+vQ23ltEjI2rFOKn5I26/jidTYjlLQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezZR8CRA9TVsSAnZWagAAq4sP/2Tsf9I97guPILyJ9Atj\nN3gC3ONRBm+MktYP6f2oBGi2Lo17r4vANLnfKjFDd5EIWHLXqtGSlK7FdEaO\nj/4jjqycQKMEeP6S6zM5Lc0CDI45a+6qpydUtfSvAKYIV5F2s9aWy76zrBm6\ns2cJaIziClC9XPD4z52l7HgNKPswKD5xS9UMC4eNYxQVWAGO4nl1BZRyVE7L\nAqSuswmDWBeh5qVKf9ad22vFNcC2E+Wv7u6/dLJgmlZmSYTmh9ZfzNxXIOEW\nzYMP2By2VUXAJGvBvMkXApsGYPY1t5d3HbLoXNgcHFYLNuDTbKjJRIjcsB5Y\naGT9qljew7BgTCzv1jtqb0yd38NgWpiwsFob0VaIKpphupayecVr2fQLls/2\nmwHienZbyY2q1KTk1+WcYE0siLVrYtwrtKvxtRE48pRcMYo7RyEBsBgw4vvH\no2FdfxPTzQY5VbGP7i2Sx9RuFMSyvb6uxTvgh4Hl038ozVP/ehLFI7hE7ulZ\nEMuEbc2OKzRAIv7p0Si8lkKAd7iZxvYxPonoZZfKi4uaZMt6cWSL+J3oO0tW\n7ndyM8bx6oIPVzz3Gpj5WK66v4kWz+Os05hOA6mAi1uMr1EvfVm2yLUgKAdV\nBRVP4s5KkES19ZznTs9dEM+XuSaFyuUi0N4Qw3B6ugZ2S+VthXYT3bIw+DfM\n3JgL\r\n=w45y\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"2b22865938bbce871e6d1ce8ce0129227142073c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.b86d826b7.0","@material/feature-targeting":"7.0.0-canary.b86d826b7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.b86d826b7.0_1590531196272_0.046956304512302705","host":"s3://npm-registry-packages"}},"7.0.0-canary.d91794c7e.0":{"name":"@material/shape","version":"7.0.0-canary.d91794c7e.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.d91794c7e.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cecd199e99355a48a34e4313ca4498378a8e8408","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.d91794c7e.0.tgz","fileCount":13,"integrity":"sha512-tEYorTdZQcGVK0kSACc7qSG9T8hdozjR5Kd5eBPOdbm83DjiqhXHLIm7JT2SR9oFWJjxPUKKZeeanPPJaJ+C+w==","signatures":[{"sig":"MEUCIQDzcRDaEyQ+KCasWyVAAn+FwghmYjeyQIgUzR/xTQ+eowIgJqwdPZyy0LI4qwA04Kpwc2AqxR/0+XjEY3pk9nsMCI0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezaw6CRA9TVsSAnZWagAAsugP/RggQFf2f+HDzxZVXWfP\nP82r92Hu9BnxRqEysX4Wbbao1cRlMpikM5GWr7uz1kkMmAli0tdOKEWPkC0t\nmBR2IGtr+KJLaCgd2uGqnvOvzvy1IoYY/nr5MlqMxjD1iWSRi33l4jsv+r3Z\n+XIofGJXfoEecCs8sCtuh7saCEe/iKVpCRCtHjaq5E6SyQtWu/OkqR6cm7fD\n8dYYzKhr9R2qnGeGK+pyoV/0nsbX7WlzP98E+04WVqpl8wBWLyKKdrWQInFV\ncZHdRbiFMAwEfaVcrSBqHDNLGCi6vC7f5BNThNFTz2MDg/lPzPpl1pznPf2+\nnq5BzB7BDCKvFsdC/r9w7MdIXEgXKMKbjjFSW1bMRD8q0VPp7Tg3zObMZQez\n3h2hR6sksaP00pXb6KKDB/ZIBOACIc9ZA8+fLOx98knlosROq7owh5Fi4GRm\nfJPG8j6vVrdhqwBHKGD+jJopecZPLczQYbpPopQ8KRQPhA0xsAXbth+AIG2M\n5+x26C/q5JnPMShv3S3eVk7+G3fhki78aDJ/4FRtlXXjVfQZ2UwkQowh3JpF\nvUkSj5swyPV2Y5q9rPyYxNHL3UZwSK7UA+0CL8KftOE6eiDz+EO+TorpYi/5\nV4StBUD/4uHGBFIU1QACmi6nnnqC3s/snL0OuLgPjl+helhvEfemSySHO2AA\n0prn\r\n=wGdT\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"f931cc9789364ca07cac4a17cef0a225bf43c168","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.d91794c7e.0","@material/feature-targeting":"7.0.0-canary.d91794c7e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.d91794c7e.0_1590537273935_0.761528106804805","host":"s3://npm-registry-packages"}},"7.0.0-canary.8c6d7e076.0":{"name":"@material/shape","version":"7.0.0-canary.8c6d7e076.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.8c6d7e076.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ded4e003ce1b0eb721cacf29b11904a86e9b811f","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.8c6d7e076.0.tgz","fileCount":13,"integrity":"sha512-jkm1uJoCei6+ItjWSbPmlTDJzl7iBMDOCWCWocjfdKuSpXa7ZaCzldpNzhNvI+506o+4d7BL0fmEYKDh/pDjuw==","signatures":[{"sig":"MEYCIQDn9Y3zvNabHWm993xeWU5sUfE66R+5+FujrQaEAkUBlAIhAPKaqwpsqa3LxQahNHuwa5YgKnQxXY++XagUJaY4Bilm","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezrhxCRA9TVsSAnZWagAAA94P+wQSHrjgIDCAPNGJ+z8/\n9nY/86tgs0nAJ3uZuQh35MZHg1W4RG0oosEv3DtXLZvYVJD/thb254agEBuw\nRAAmjEki1iqgjTDjyRiGvNolzHKNjMMFfF8I3bMWuE6OmtxrIYQUo8Xk6E+N\n4KrP+dmCUX+aWAnxDUI3Z6t4UR/suVgtwv8Obqs/WtCRENYGxFyugQjkW+Az\n+92hL5kEaxre3CSq5eHv2dd7GQ+yThxreUuEOxC2ed3RNg72sDwqBGdgUgeM\nsYwHRoEFbfW2UxmTlB2F/LhKxBMW0vD9Q7djM+/1iBVWlm/XWy9TB6y/mpnT\nsx+pSGgFla1yCSYfOlV1o8tTnwXEvDbzKwI64Mk6DLPTa1buTkM0DoWE1h0i\naVNua7lUTMTllb8J7Io6/GVSjKzDNY9FDHSZZ/Fvsuw7MTeQ84jIjmonhC07\nfuFRNV2DUus5ZfBngKZzWJxbbvXxA98SQNLOawpRg5o5KhpdZnrvysSGyJJj\nS5JlFcKzxfTxKSZEevO31sNTyDuf84eAMYy6eaxDSCUY2SS/Ov5byjBiHbak\nZmKR3CKq7t4GAFF6Bp3hbHucT0BJXyQs1Rw29E4xK6ZWM4kG/RKiH6PIDDY2\nedsOzcGObMHlKUGv/7lofg1gXUaBdLQSwzmkoZ29laBLdVPNQWwBReJpQ7bc\nb+VT\r\n=gyp+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"ca2efa9bf20bd3fd24c7f6ff263721fea798614d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.8c6d7e076.0","@material/feature-targeting":"7.0.0-canary.8c6d7e076.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.8c6d7e076.0_1590605936670_0.6254378134210217","host":"s3://npm-registry-packages"}},"7.0.0-canary.5b5f62f93.0":{"name":"@material/shape","version":"7.0.0-canary.5b5f62f93.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.5b5f62f93.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a3d9aac55a3ef644a153920ae16fd8de9a5a354f","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.5b5f62f93.0.tgz","fileCount":13,"integrity":"sha512-kUhNntbRbL3gHoguc2wvRPNPhn9iYH7r0oe3w83ociZI/4TG9X0b0v9N4AQ+3nikfXdL/meyUqv7BYmhIiN9FA==","signatures":[{"sig":"MEYCIQCZa5fzhgWK2QSowREYlZbxfyf+mLWdUk1MYr1FfihYJwIhAN29HUr6Ybmfr7uxqgp6qVxk9WxN+kN0Hn029TXwa3h7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezrxuCRA9TVsSAnZWagAA1qIP/3BVP6YubHvfasS1wGJW\nX964yJjGL4E4C1vhzPpuPql92HEHSZ7mu+TYgAAQ8rszG3vjqib5gEzcTEMx\nRugHhV3gOY5vfsyTu3q9/sS59X2+H25x8CTNxosSvZCVSaqu75HfgFAXPyJL\ne8G8OM0Zosq2TUbr+raA++ecLQEP/Vvmz53ID8XPifgpV1rHVnxHX8nOs25H\nz4haDQcVEqmxOu2tibJ3jRdeDPzcUNkqKFUd+RzpFN8o4DM/VAxnJEpHlP8k\n5WfaEGFJRGE0ggCN7GQBc3yQymGZzIZKLIVmA09YCy9hzj+5udBSaEvhEO+/\n+BIWQ0sXYdmeRiDgvoUZfttJ3Ubx+oyMVNVZO4LWy5m5AO6Rahp3fp7KVjhc\nLvvsjLbw6br3u53vceXQP/AL1jlCcyrpzkXoNn+7RbpOfAke8E7ZIH5HlbGw\npUFT/3PekeYg5TsrupDUBxnd68KwYOkl18FnmAy/bDvzzaZMS5lyTsfMusyl\nQ7YMcyyHPJgaA+aYTSBBT+7azEwAhS4A8XAsxsxRwdhkJ8ZH6TJmdJeXIwO2\nBcxZXvWLBul/V0jVUuujzJiYgo1CZfAS51HXtWxxp86U/TaRY520Bu4oT6Jc\nMcTUVjC9Xj7Kg0Sr6iR7nl50RcgqylEJ1fx+LtmaQtkUGo8Wx1Ti0gzNkEMT\nnfra\r\n=0cGS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"bdb576423b0f8020c453a5473bae420ee287c240","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.5b5f62f93.0","@material/feature-targeting":"7.0.0-canary.5b5f62f93.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.5b5f62f93.0_1590606958038_0.965922724380817","host":"s3://npm-registry-packages"}},"7.0.0-canary.d9972abb1.0":{"name":"@material/shape","version":"7.0.0-canary.d9972abb1.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.d9972abb1.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dd9d4e05ec4f35ac69666e79c7346ea81517b53c","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.d9972abb1.0.tgz","fileCount":13,"integrity":"sha512-KVftzyRIZ/RN3KCltVjLWC4EAlCZ5KT3F+urYy6SKuF8yvidowMPooDkg3wmJm/1JF5IQ+UhN52suXyQUZmHLg==","signatures":[{"sig":"MEYCIQClmSZhTRAmQn8yFy0rvUBrUZF2MWB+tWLQX3QX0Sz6ewIhAPh4Qqhnc2uRepSd6luglZjz1mqeGv/uegPur6OJDelv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezsuICRA9TVsSAnZWagAAIXAQAKIKzz2mAAZ+wqypoaiU\n8vS4M1fdnhagw6VE2jyvrzy00mKp1D6vGC4JczAuTCmq8H1Fiu+tNsqFcvhF\ngQveCpjUbPuZ42ZUwR0qGCQjpK5477NG71rWOyP7CEa4Wk9omR6J7B6LfxwZ\nVySmC8ENE8Z/uT82uNRyigx7mYVKAwvXMSTXDl8FSKd5eHvpYLuIbkazJAEz\nXXGsminITTnHZZAAcRZ5EyRkO5wesP6Zh/hK69h9FH45fz0k9AAUDNhdCzoE\njeBwU7FaseUGDZ9X4gBjxz39KyMVZuUxE8G7+GSfuRSAc1Iv716M2cCETElr\nLH1v9BZ7pqWw1MES7lyrH09xW+IefXRcgH/daEsUTVx73jqSXlfIu0YPh210\nYzHnT3cl1vPf3B2s2VuMMGabotFWILdW1WvIca4SjjncapYf5ejJ5Xmaejm7\nBu7QdxlT7tGE1rM5zUyadbx37dm4fEnKun48KMox290WyzknTUC5B+V+ki/1\nt+198frXW78hsLVTvP3bCsfUesiLRpdskdxV/BdD7kNhRtoLKwDayAdxQYdL\n/ACIThf+eowVGPmhtrDQIxQlTPS3dBMmXP+pOExQTj8PK4ILmWlmX9vR/HBz\nv01CexlPaccpYw6bJlhhHcQb7etvcDQs3LqEzEFi+VeWmKjm4qxbk2dWJDRM\n97zd\r\n=NYIz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"3db449915645c45b366327c8152342a34f1e10e2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.d9972abb1.0","@material/feature-targeting":"7.0.0-canary.d9972abb1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.d9972abb1.0_1590610824497_0.4494906686529603","host":"s3://npm-registry-packages"}},"7.0.0-canary.6556eda2b.0":{"name":"@material/shape","version":"7.0.0-canary.6556eda2b.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.6556eda2b.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"94cd323164e41f4619fb93c0168be218dbd81a56","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.6556eda2b.0.tgz","fileCount":13,"integrity":"sha512-ud77BjOresx7Xi7pPxFeq0L/1BJFmottr4k6CwliKJkStJeF5y206u+mDBs/5oLuDjYzDUtW7AuCtz2XW4hWUA==","signatures":[{"sig":"MEUCIQCIoTB0Z20NxwT0wwdUrYZTbBp0GAouTMMEEVklWTP8zwIgN6O5s9PBikdmXn9B5Vj0DJwOef7UmTlHnUND+r0BndU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezs2wCRA9TVsSAnZWagAA/W0QAJNNoZGTV7dgjmeesnwg\nDCRmkOEbsWhRmNxAk/ArcVu+Up+fICVxCQIYjkVjNnxIC+n7Z67EAlmRrN4N\nammlHfj6riWW1V5yv4B+IarPxYoCcfm1flw3TUGPqkazrb/62H3qo95zDrr4\n2QN7vPjWmL6b9IQdm2IyYGJZ8v2VhxoiisLaJRS26hxtP79kfCmeNx/XApH5\nXOTqVTNyl9oH7RljsKXmxXNSo/6QyOZtaEJEcWfmfwHNZEI+NK9od8U6unZB\nwDBVbx/vFETakPdwLge5Jh2VlYSEefJs5FFrCgxjTIPQZz1zFcZXVyROMJoW\nl6ftBNfcTgCd3Vz8NpS93+omzjlnfDlzydXxxCNvuWXGTOv4sNF+Bn62uen2\nfXexKJndVDF6bkQbFj62OEHcOpho8Q1foDNen2vaLMkZ4I/r9NamSXlLCbdO\nKVIVrtbZysroLgxbbDymfQzgkjCgAJ5LqM7JLBtkIVuNibNjTIyX8PoIesnu\nJkKVyid/m6XuQaR8+9w7F7QHsMST/8ePxQNVu/zRbkYdyumgd/0OD9aalcjV\nM8kHdXteEO1l8A09G8WH2wI58I76Vij/iMzdXrNljRHTRPGXV8TbpnHxeynh\nKKAtwiek9CgHDDDclIRKhqf/aYTeA84EmzqRFIahiYjJUTPua9Nv6/iEh6pB\no2cL\r\n=o6mm\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"504ec59b4b401d057e70ba4bd1bbef2f87218204","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.6556eda2b.0","@material/feature-targeting":"7.0.0-canary.6556eda2b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.6556eda2b.0_1590611376028_0.9329896778217397","host":"s3://npm-registry-packages"}},"7.0.0-canary.32aa23641.0":{"name":"@material/shape","version":"7.0.0-canary.32aa23641.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.32aa23641.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e9c21e088fb12a991e0a0b51bae13e4373a79cff","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.32aa23641.0.tgz","fileCount":13,"integrity":"sha512-Dq4Vc+D1PuD5AuN33NccHLy2+OggDbMnDj4vdn5HVU+pTpRht1i7X6zTQk+rnTc7RI5KVjDDJFb9lJ6Jr0izKg==","signatures":[{"sig":"MEYCIQDOB0Nyu5Lsf2EzXPQsckhKSV2tVeaWNVLInOq0kDiPGwIhAJJRYUqQ4OsrfTk4OWW1udu194p/MT/unvG02SoFBZuh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezt2vCRA9TVsSAnZWagAAe+sP/0fuF9sNhzcPxmB1xmOx\nMJd/Dtl3+fzVUT/0nsBC6/pbEfl1WpMf73hcv8KDypRQ0pzRKAjgbkfIrLEa\nQz7sc/rAMK1+AVnN+oLahMlg9NUt7rYQ1NBd1v4Lyku5HIkQa+4IVkiI9RjR\nDMNO4jJplLe3c+QMe/4xL3GE+5J54Y0zBb7ezH7cr+LusPHz2CaFaF4eNayz\nbIYWdIpn+s37Uo56VePspmN9NzU3Ufpttkf4EAC1ubsly1sdx39ktBFEcvtW\n2k6OnoqsefgLHpPeNVDXJYCZLSJb+zHm5aE88727PAY1wuMWqt62bsAx8fUT\n1YPnVv2VTs5lalSA4vqksnZvmzw0Fg7iQsa0BmOXJ/tEjWRbr85YuQTB0j/H\n5SsNYkYmYMGl31hBriR2w5Aqf+oTd442/H8poNmWLZgYK9ZlV3y2EaGkIWQK\nIrotoV9UdJtM7F8+AF2+QULdqI5lGsnm07PM1GTXeVaHz/UkTOufnY8TMr5u\nq1FBqz8j5GAWjrt4SJRVr0o6b+r5M4I8vo6fCR70V1udEb3KSuqUofQSVogH\nvow8a74mVo2zygKXHL+jcJZmCtlZ5GWSwKGiF9jryl0j9RuXnazkNDUb26CK\nruJrfcka2Lz153lV6k7CO+0gP/IxhYFHhgJA8aiaeyiYe/d0f3OYrgDwaMlo\nlFe1\r\n=N0u6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"4cc39075dabda7fb76257a3403f0bde13084b87b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.32aa23641.0","@material/feature-targeting":"7.0.0-canary.32aa23641.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.32aa23641.0_1590615470992_0.8592714584516492","host":"s3://npm-registry-packages"}},"7.0.0-canary.654934dfa.0":{"name":"@material/shape","version":"7.0.0-canary.654934dfa.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.654934dfa.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cb3fadd4b1fb95bac1ae10e5dbfd8fb1a2996d93","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.654934dfa.0.tgz","fileCount":13,"integrity":"sha512-wtAA8eMnhFr7hG8Ub7W0IArUkGjumqBGgIQEzjF1fi2UXSNonOWLGRBgaRPrl/g5IHQ9Trr4cOMVfoY2RDTe5w==","signatures":[{"sig":"MEYCIQDSXKg9rdg2N6CHYCQIqg39DMTYKCoKwLybNJaPfaS2wAIhANeXlRL+Kk90LQ0+ZRwhoPlVVyH3DXHPiQo9A38fi15s","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezweMCRA9TVsSAnZWagAAOWYP/10WfTFfyxHl7ER1vwXZ\ncq6Qi9EiCKByCt8xC7akNjN5qaow5pp+bTc5Jqz4BWBj7Erfr2IYE5+EUcto\n6Htdjx95rO9Ts8aYwaeKGhbRVo5D5msnQ3SBiJO5RSQu5S7TiWrEUvu0bwL5\nBxcgLGY7rwlwoGLP57xMOT9Ic0/kGgDkUqH/iVuIbprJxkKvCnD0T7s7QcZG\ngskdE0+FXn2nWx4rIv1uTGKBCv7LIpa2QTd038ZNEPM0xi5V4rrHxrYweN+B\nL2hK7np7ySHdKtX+k1IJtlEwCV1MKCX1/66PbS4P0EuQnCasOIFj5ij3QiWT\ncAi+gVCfOAvKSwiu/QfE84MEH2wE7D3u/1Mhbm9Z2xDs5h/AcotS8xKK9+xk\niZ5Ia5nfScXOkqoII2KbsNW5+vIt2rvPBSw26GYtHLwB/hXsBH1//Fbd//f3\nHivVIILwf1yMOs+fgjNYGaZkpFOlMPea9/vWCuBBYbEQ7GbsQUK5RjsC+flO\n2hA0Ry8KmQxBZN9zzKdlTav1MOQuiboB9mQ9f4PqU5MPbOcRE+0lmWU6Ys1Z\nbPPmihhnEplH752I7QpKeEchc1MFaLKm/F9iPb50UeXBAUwdr6pX/BSx1ijG\n6qqhzfh2v+0XOmtT9vjS+VuNZYN5JkQ2hCRafiCWlxxqpP5ct5Q5QgoFjjdR\nw/Gt\r\n=VwvM\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"99e56121d157a5a30949b826c0d521a365a1ae59","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.654934dfa.0","@material/feature-targeting":"7.0.0-canary.654934dfa.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.654934dfa.0_1590626188373_0.061879898697755564","host":"s3://npm-registry-packages"}},"7.0.0-canary.41910b8b8.0":{"name":"@material/shape","version":"7.0.0-canary.41910b8b8.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.41910b8b8.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b56a22fe44a3679d9ab6d63e2e33d8c4c94e9b54","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.41910b8b8.0.tgz","fileCount":13,"integrity":"sha512-WGsMIvttK7YPK7sDtMsKhwXO7wkULK/I5dZDGuRM5zpQfshPrp2xf2DOlewXUPYe8lssttLW+P/0fcq5jbIdvw==","signatures":[{"sig":"MEUCIBGPu+xEzjZhVAYepcwm143NMAk8nON27VSosVrOJDAwAiEAt+CPuspwQVptNfjpE9jTBXbSJSYpY31x4XIqpowJjdw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezwrxCRA9TVsSAnZWagAAkYwP/ic5THWK/SJfvJZ00CF6\nOgnk2crBVh83kWdqZeBF3mEL7086bJ3CrBhEI1hOwddW3UwOyc/7rTSBQsFx\n5xFhjGRHKRf8+IV1UFGXfCJxY0G6zijsE607SYyh/GtLfxXKu7TKJyQdyzKE\nUjb5gRYEIfToAylwvZeQYVu8AAdQKADOkHR+9hTwlvLgI+kKAGy7/PQRcFsQ\nY05hBi1cpsGzPCBNEIbNAHzrKSmFUr02xJObb4V8pDKNcLC12g+Pq8Yrmlg4\nPuZRM8H3lvcwwAhBoAtnHEta8PcE9UnBbDMCF9WDJ5yhnl5eNbr7+whlayiJ\nuR1b/aTcWtA+TPzbn2HehmXbL0EUCheLu22uIZAGuHGVGR8aLUZB0xmZcF9M\nZE6NbL5jzXhuBrdN3suSEkPTrcIMTzuiCv5R6MQ8Urb/jOZM5vN6dBbsjExo\n7N20D1y2bXSnzceL/qjMVqHo/dQW4MeLw5x9yLbdJtIGh5XAkD0xqYU22L/a\n0H8OG2VcJ97ydqSCqHHNT3k5cfEaPYR83BjIf95Hb9kqf8dci5Q/HKMfd3w/\nGS2WuTdZqTP3c95AMJFRNcWmzmlmDykHwOO+QeYL3TM/6sgLOGmTP7GYG8hp\naS/6hiezOVnmFDmpzv8zBdYxid8mGcu1D70qKcJ2mjWcXWwWpzS1n2xfd3DU\nhFkh\r\n=NUiZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"14656d5f31e9a410c15eaf9b47530d57a5901add","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.41910b8b8.0","@material/feature-targeting":"7.0.0-canary.41910b8b8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.41910b8b8.0_1590627056763_0.49507241338497354","host":"s3://npm-registry-packages"}},"7.0.0-canary.d66d22bf9.0":{"name":"@material/shape","version":"7.0.0-canary.d66d22bf9.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.d66d22bf9.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0b12ce4712f02a119fbcab4eb8f3f9693462b321","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.d66d22bf9.0.tgz","fileCount":13,"integrity":"sha512-EBUtcfCCpX78Ml28wdkZNzjMxejrZxotdTm8ivchTQQy+cJ23jQFtLvvISzFusagn/tCtX0lhS49HFFynAxXpw==","signatures":[{"sig":"MEYCIQD1aTXUSN6j1ZTf0E2lzL/pG9naejU+A8Ok/VgkT1yeWgIhANjlC1FHFCdGm6oLSDj7q04u+KYlMYOlVhajN9x1UlyJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0BcLCRA9TVsSAnZWagAA9aAP/1+P11WTLabd/n4AWla3\ngyRhWZHE23/cBlAZUs5yxHprwHkLBcNTRU/tb/NxqEXKQPSvUByxQyA/HK9D\nuLt4JfukEutIjH93xEQSTyCXe9UPOhk5+/fdrKHAab2lvJOzD7KiqTxoKYQ1\nDUzu/j6Z+czVokGP5wQSRdnlPJR+LrH+WRcC2lIKNXC/b7KQbft5+uIDyIk8\n1Gs8voZOxrV+PZIuehOqL+DeIN9vEiezm+m79dr5OhMUvfsT0OhhzR42ZJwE\nH6lOVvaDNj3XlruwVF2NOOA8EI64i54/ZcpYtidY8q1NoR8y9U42VRAmXQ5/\nBmMrsW2dULaP822zMI/MbC/9rptNsxtxV+s65iRQK3icIIl+Xcqp4ABIvV/S\nXVN/srBQ7s54NtMw5NtMuN0yqzinxluQ9KodbPU6cyImOJiklzeLv1upr2Tq\n7dpws3khVeKVJHSYqy8D+s6RkifJinG0Y/DQZpxOQivlKTMQyx71nLreSrg2\n5dfDO8ctXcn3l3yioqoijXCPq828+7TI8gi08EOHE2ZhnnjDHuzDyc6n8b9Q\niL5c54AdoCClQ7PbcRxcyqrzHiKTRX+necAe5s8iRxyW4ilEJGpkq09ErDa6\nggbwnUt8Vd2j6OL1OZSe3aBMv+d67Zm2EUAi8TYlbYG9WZpJy/HXuQZAAFcn\nBjBe\r\n=5Vrl\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"cc182def4daea4d871df41985e6d893429174b3f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.d66d22bf9.0","@material/feature-targeting":"7.0.0-canary.d66d22bf9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.d66d22bf9.0_1590695691007_0.9244608441842426","host":"s3://npm-registry-packages"}},"7.0.0-canary.8904f3cbe.0":{"name":"@material/shape","version":"7.0.0-canary.8904f3cbe.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.8904f3cbe.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aeb9c6aeef61eea3de5e416f663694c4caf41579","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.8904f3cbe.0.tgz","fileCount":13,"integrity":"sha512-SpVy0GQmQwFoVdoP1cNgfPEdGtkGCx6AnLDeVjRiZiXzHQFahqcI6Jy9WQamkW164cTV4+ZbEoFKO2zEtVmGXg==","signatures":[{"sig":"MEUCIEUZv63VRil0kRKOj8m7uWyBdjXm33HwFGsMgeFU8/HNAiEAy/72xLzr6mLsOVYau5zjhTJsW9LpDDT0FxwtelmI/BQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0T0zCRA9TVsSAnZWagAAVMsP/1fw1sJQL4O2rJpOCB/o\ndqDZ01HpNpl7651yuZnuvi5PAZfY+0puOrD81ooAfc9/uDtw7QqBLf8OpcQ8\nUl/AESRzd7b8WF1iy7G3pdnLcQxpezFah8zE4EGZvnpPFM5d8fo/3xvRdNcG\n3EoQZwW/OZwxBfGGaWhkIrabYDMaZYzvnQLdtKKke4rtv+cgIiZF/SsFf0vv\noFyjWrwItay5rn3CBp9pvnQzsp310P5WPFIiDnI6jWpL14JZdGiG/Bsm1FO+\nfBxaHAz0Ef9Bi5vg27FfPrJTRZG0IgPc8P3VjAxWQaPV2AirbDDQ7pfJRnx9\n+jhIPD7zLAkd9vR0VOdmzvFptrorrhqoEdDbrI8hjRRQWcRMqop5EqcnP8CS\nbhGA7gUj9z8Z0plFlm+/BCxX3QfHks7n71fRb4cg5aE7cd8Uldr3Lijgw3Hl\nY1NtH79Y1E36FK2laCQ+lqNOhj5jz6rHbTBCYWvGCE2Pi6D07IyOwcr9yTY8\n09fhgHzjivlbnbrd8qIjgXzNcrwlxAjzqpd82B6nJezbV4zrSXIqLzS/rREN\nSrsvREdwWtrYVRphqt+U0yn5D0U+52631WZgo7BTpzyyGOC8lPSze+mWdD65\nLSciFonSjyD3vWaROk91CJmcoE3M99n/6ehbqBFenQJ4uBHSgFJ0uerCksVJ\niUkH\r\n=ROEJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"f78dc612af1ed0ba397842886fe5bc41e32f181e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.8904f3cbe.0","@material/feature-targeting":"7.0.0-canary.8904f3cbe.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.8904f3cbe.0_1590770995404_0.45349381773968234","host":"s3://npm-registry-packages"}},"7.0.0-canary.51512a4ac.0":{"name":"@material/shape","version":"7.0.0-canary.51512a4ac.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.51512a4ac.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4460eef62f884b10200797db98a29f56abfad933","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.51512a4ac.0.tgz","fileCount":13,"integrity":"sha512-Ji5QE4EB+VI3SfS7OI9AaK7FnBxs4NZus1Hj/q7jX/NXSVjRlm8AWhYQY9ePTCSAIpdzGpFSGzCGdxuXJoahoQ==","signatures":[{"sig":"MEUCIQDuPkFSmZ2/xNllWCHVzTgP1RX9dX4sssBJb0dcv8frFgIgF2f6WUBw52FljIh1Z5mNn7hCjzSy3bKCoWliuPxJty0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0V8jCRA9TVsSAnZWagAADB4QAJaaaV6Bl7Eb4V5q1DDX\nrPj1xRD+jzmWY6MoV36EjJ8yz92jSZ3F3TCJyxILD1CNtrfT3x6izZGIltJV\nNKgiI4CjxEL5lc7OSVJ8BazE08Y0E2dDwNuIgJaooDmCbnan7qpAiwtrVFB8\n6+mii0z8fJmIvU3ZYIxlQe35zf2eII67FuGcWGL9i1YwZyNuFzwrCdUREOsy\nNIomNgqQ0hDbqcYdT1VigUGB9kdQ6um8CJoIFAqgTp7INMnsz6+yd4YvkyT3\n/DlzCXKr56rzRBTvedjHR6RoKuGv077Wv9MF8/gbdakZthy+XjzCsHV+QX8s\neO6QO3FxmZNReEDrVsHdRtzegRw++ZGfTMp0IPG+nN+bOsCcFf/CllZdWCZK\nmkl7LPWhaHc4a7ITmQj9MjhE1zn9Wi0SO2AYqCNvlHa7ws/qwM5InoSJuq23\ni7fKdKU4W1Pgju8qP4ksMFxIMPXlETTESwsbYaaMHdN9ww3FI2ZEeocISTgk\nnPEWw6sO0D5RyCL/Hl/OPUCmQ2VP2e9t6UxJC0Xj6UNtM/7dRsUAyw/Ra82o\nDXzuEOx86OBq7hW4tI1zh3RgbDGA5y7YUJNaklSLhF9p8KCQgEj3tcG5A70d\nNoirr3rba70V3fYHQ32axiI/+IKSXXjRm0IRiZmRc9dqJ7wWz86qII9zFYfs\naoWC\r\n=aX9h\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"d5115fe8118e1e2bc71fc7a491f672b079f281ab","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.51512a4ac.0","@material/feature-targeting":"7.0.0-canary.51512a4ac.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.51512a4ac.0_1590779682981_0.7886551756934062","host":"s3://npm-registry-packages"}},"7.0.0-canary.0743288fb.0":{"name":"@material/shape","version":"7.0.0-canary.0743288fb.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.0743288fb.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c5e62aeccf089c47f5a7064702a618e07f6dfc2b","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.0743288fb.0.tgz","fileCount":13,"integrity":"sha512-a5xAc2olukT5gdhBKwM4nY12mbB0wdYEqbF614epqitt6KN/aMSh+r8mMo+fplH4Vw9EVFU6/Yka+ooglwP+Qw==","signatures":[{"sig":"MEQCIHa/HcpNRdaeRTJ7cx5mgwT0mIqVxeX203nSps4JriiOAiAkcgX84+Imw5agDWvidi7bvCvVakmX9LAD69vuzzc73A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24097,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0WrjCRA9TVsSAnZWagAAMjwP/igWVFkT1EIH0m+6MSLO\nam6PzWZa6LLokNNqzAe5ZqfccmFUnGgV8fWTJtVUWJdQFpDiovyccsITmwON\nSmil2KqVVgeSaeV3Rqrl76+UppC9zuZDnM+kaFnNaJqZ//7C2o6bJDQOmW7B\nS3m9FOxw7JIWEUtOGLpxThq5qg2CeFN5UgudFxPUw6Fg2z/T1rlFA3zhCBc0\nR9jLdRa/wyRE2vN1G5TORvoH3Hzx23ZmY1srh+DhuHwQTKwkX7D6xGsRMZqZ\nRxS5xyTWOvJNDg0mdTtMX2VeP9jZ/yde7OiTOpsx9QEFGYgoFoapqtGXw0yH\n6vTpoAYjSsEGKftQ6tVXSPcHGBWG4bV4YOhjGYMN1uSrDkRjaxATRIhwzmHP\nJRGSdB+5E2l5LB6h4lJoTIy0dPez2eZfGgOnsZpJYjwLHfKHoMR5vv7Ya8eF\nGa54DvrmPKeJl0/mSj6zypVRithhUeNwkA+VjlaejEcHADfRFFBDIVB0yBNe\nEE5BBPfFXdPDDN8JgsIVG7r7/mQQFmDhf7nQiBrBFodfgA1nOs7cySa1/aZZ\nQi8cStmkSFUeaF0VD+VPCnAyj+3eaGttQk+HHYJSfDrWoAxqEPJyMdNUgO2z\nrB5Khikha2avmGL3v7eMbE9c1o7Deb4hOGICRvIrvyBeJNKByzIVC7ii2QnB\nHZe4\r\n=AlQS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"e0c92eea0cf28bf0f2367fb0666eb8592ef2f8c8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.0743288fb.0","@material/theme":"7.0.0-canary.0743288fb.0","@material/feature-targeting":"7.0.0-canary.0743288fb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.0743288fb.0_1590782690601_0.49738559438104857","host":"s3://npm-registry-packages"}},"7.0.0-canary.06ef147b5.0":{"name":"@material/shape","version":"7.0.0-canary.06ef147b5.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.06ef147b5.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fd447dd7f1e87a643dc8bdbc49ad573157d553df","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.06ef147b5.0.tgz","fileCount":13,"integrity":"sha512-iGgCGwF8pQyaVykcd9490Azt8T4RiODzFRQKQW4Fk01PzkP4hnsAwBXZf72r4kSV4oguwbYgtqNJzl6iu6AclA==","signatures":[{"sig":"MEQCIDBalUAA7Ud6cgWdoeWulIm3JOpCLFgTujWOEbLkSQDvAiBTMPxfzHUK2CMKdvDMV223NK8f4SAqdm18C4ph/59XbQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24097,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0XM+CRA9TVsSAnZWagAAbWEP/2lumv+m8gZAS1my1erj\noGKKLXLmERzIkzQd4o/QiKdBCnFUjtMaiyTFFKNgH7lSM0K9etG3CdOpoIZA\nv0XdaFtGhe1ExouhD4w2+H+XEJYEhvcdehb107M2NW+f3aw7cjuty8ag3SqH\n9Jg0I4L0BSVzUDkRwdRLxrrDwuv9PZhCvOUJWlKmGOxNteZR4c3tbqo6C/6r\nNDINDttSjKzgJ4q4XMCbzfmT/8fa2ygf+14y2ycU7eqyRFCTXRhtqCsY2zZ3\nXuDJJBdkR1XirwxVU1gCjFh4zjrBTyObv2lDBGD9a3LviY/sYzyvEyqBDjnn\nL5K5JkAp6+p0Kaiw3fgqpLBqpiGZ6DGVsFXsS31zJDLFF1qxqReOEXHbVYVx\nceh1FjO41qOqKwLUivWJrAYNM6UCmzpjrsHy7PmggTY3zcskkwXdhJlA+thM\nL0gZkQVMy0xVvzs205ztOAe62bVw07f2ywC0Yi2MP4OXhhfPOER59aVSYo7a\nm1ZmL9+8di6H0g+KgSVOMtIfGgDbCHsXoEpUDW21Lm380FLQ90X3MSPtL22C\nVVF1nzMXsm3oyzAIt43WLejYM4YiH81Axx0jKzRRFqHTrAQcQFOZ6VLofEen\nYs3AKYEuQwhIFfYKWy+tiMhN8kpaODdQTIyl9dHcMXBQg9XMH1atmoOZAfEg\nsQ9D\r\n=a9rd\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"43f043010a4682138cfe1d453ea0460f912fc2ea","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.06ef147b5.0","@material/theme":"7.0.0-canary.06ef147b5.0","@material/feature-targeting":"7.0.0-canary.06ef147b5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.06ef147b5.0_1590784830257_0.5173035910637258","host":"s3://npm-registry-packages"}},"7.0.0-canary.8073a20a9.0":{"name":"@material/shape","version":"7.0.0-canary.8073a20a9.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.8073a20a9.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"330bd06256f2a63ba63fa796fb10c8deee22e98d","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.8073a20a9.0.tgz","fileCount":13,"integrity":"sha512-rl1pBo2dNhznR7Nd9p3jVe0129aVdp56HvR1joUdcbjyXjQv6czuUqzdGP7DybpPHZHRWGIlmnJZMtlKv1soRg==","signatures":[{"sig":"MEUCIQDBo+0VaFZxuWIY5hLonPl1wAt+k/8lDdxA0pyHbvWZ6gIgUSs0kX9LU3I67w92r2wIjrzeNsPBZ66q42S8wJN7W44=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24096,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0ZniCRA9TVsSAnZWagAA8WwQAJrNhtDBAjU+sf13OPHA\nOVwefMQnzmfeSnXVeMXgMomD7zxf1+ODnyAqbZCnhBe9fEuQoOYzzmfs/dFv\n4c5euqBtRX6qsYiF5eWQQ8mtTkgpNIgjfuqB6ElnitgxigwSwaVjdt+xFVRQ\nvmgou5SPtbGcoU7izELLj73GIOBCF86NJ5MFYz/PaKT/pmbdlZrRDEn4CMUN\nOvgDdp+VsqkZr/Nu936CCQO3D4t1+WwSm09LdUiLPzun7JF+GC2Scn9+a5z6\nBFpEzljn4/jKBPYwBPd2UQBkBM02OD+qxBiam77kd+vDNJo/K0GFwqYA1o2j\nFODN+DdgXDmcHaja3lw+uXz2zXnTrDwAh8pbtk1Xulkb4mMT3G4mTYfaEL0r\nQ93B1qAdYAdXY1pozR/9vhLn8u0fk0Wh+2M66J5fi6ZxN7g32m0VVFiut92b\nqezGjlPuO70gDixrE5+QIbmcSlwYBzYHt5/ZnqPftEZExQieolhb/eC6ZGp8\nohIcKOzepR9ViI2UfKWt5kZD5TqYfvZHmkpu9p6Nyw+o5nxiJH7lMRTnpayk\nTda2eIUT9x9c/72WvpM87iZpi/e3qKVHQdgOhHYtSLnUttM/Kdf19XIRqNkf\naRCIdVAW9/Yu1MydpCpq3cOyum1sjBu+rNCD2uYr/iQPAbvFMzxVAyrVzr9J\nVRQn\r\n=1+dH\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"576fa22ec00234b59b1dc4215b8dd1ae982c7c8b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.8073a20a9.0","@material/theme":"7.0.0-canary.8073a20a9.0","@material/feature-targeting":"7.0.0-canary.8073a20a9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.8073a20a9.0_1590794721124_0.031278740489968815","host":"s3://npm-registry-packages"}},"7.0.0-canary.72ff42330.0":{"name":"@material/shape","version":"7.0.0-canary.72ff42330.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.72ff42330.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d7c7ac546e3c1758aa16077875ba618bb043be21","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.72ff42330.0.tgz","fileCount":13,"integrity":"sha512-vQMmZSo9DTXaz/VudG4p/mhgJw3sS7a5kRRhg59NQCbgWD9mzAdn0h2ta7vLIZecpwM5hc+O9zjiQ7vtQKggjw==","signatures":[{"sig":"MEYCIQDFOlG3DJdH50U/Op6/E4qUbs7c5brplZxXAAakeZzuCQIhAJmNt3QQk4NGKZX9VCTHseTFVbeRpRPyc9RFTNUXMEVW","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24096,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1TBTCRA9TVsSAnZWagAAHYcP+wRBjlI4cKtnYKbBHpKx\nWil2NOxebhBfPNVN1aDAboNYd0+BLCgtr+H4UXup64hpHrmWBVWim1+8h48I\n945w4Seh9XJ9GsLVgT2EW8h2oQG0d/NEE1FgVO5WWUglv8xrlYYON1+x5jKY\ngUytbIxTfBjXXP7fLAUZWiOlJ+S5OgxOsoNDXxsYgNsLXJ/un/7SUzErkSgo\nq45khP6C73KTj2EePE9pJzMqCX3l6jhvYrMpCH9f8e/iwXkuLlbOv+hLR7Go\nmF8ra01A2pGmrRvzkiWYPnE3PyFs/ca+4brdpj0IkgOO8bExK2YBNJmHVOkk\nxX+YGUL1zO2gSHHIGwo9xp3N2SSiaLUaSQ115BrCOL0JE6vk9UU6Z/yM+rNT\nCaP4+XeXSIeTZe9L3sTf4VbdyalQ2w5C0JsOl6+iq9dvfzorfhpcwHpOQ0SZ\nQIMfKpP3CDMjRyMw6LaZjTp/yfKDqgzume820f1G/IHbNbzWJrVsXkE6KH5h\njWFb4/NFY3gjlE13ycig6/lxaqCDkwL+pW5z32Q3+vW6mxkoGaOxbZlFUjZ/\nM3X3FBzX7KDPM3dLcf0o7x/pRCte/6K/sdNxhIri1Ka3/fUY6p725/PJrTZX\nmsFBl8CTdeAl6RxHSacDqEkSBm4Ek4tLqpn2MLkDI0dO8QsYZLCd+ZN/SQn+\ndYvz\r\n=2jYf\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"4c820e9d38fc1bae9a502ae78e336f0e8381f432","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.72ff42330.0","@material/theme":"7.0.0-canary.72ff42330.0","@material/feature-targeting":"7.0.0-canary.72ff42330.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.72ff42330.0_1591029842931_0.9132318113341065","host":"s3://npm-registry-packages"}},"7.0.0-canary.9ea52070f.0":{"name":"@material/shape","version":"7.0.0-canary.9ea52070f.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.9ea52070f.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0b8d3e0636f45322e33b6e3c6e6a4f032104fe51","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.9ea52070f.0.tgz","fileCount":13,"integrity":"sha512-ssgnLddRQ9wXDkEqK35TxMAnOQXJjT4FLyEfe+Im0X8aKWL/VWE5c24/atV7brq2Lp92HWv/mqw+lMejmiPhAQ==","signatures":[{"sig":"MEYCIQDRbOptprfD/oP2jPjzzRFUiNfxhVHt/PZJADzQPlu9GQIhAMJ6sChzlj7A/S26KOdJ+uEwX+vgtF2sN3pyUPiG+FvU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24096,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1TF0CRA9TVsSAnZWagAARikP+weTw3qHrPHQUvjIYw4W\ntXozm92eTSJA/OawAQyDUmK09ACM3DbNGJKMpihfRlSMnAPl4EG5vy0bdLlb\nBf20dgcc1CSn3QoQcZ5xMJArJYorNdyg8DcUclULozMAuOtEffkuIh7iKd3c\nFBcvA8CUBSpDS/aat8+FmfI0y09Eizo9QD7RBzKad+fJtbQdtvhgN/3x4hMo\nr0fetT07frVthuIvgmuIU3YZRuo0a0CV+MqBe6MNzO/bAlnpO7Uvy4bOaIXf\nxjIB0JcHIzT+pcyEduBWhKxTnANALk7etDpEidSTQ/bkw9qMxPyBgPAt07i/\nBOQPjtjYpkuVqR0ImXpX33iKi85IcpAasjvoEdGxgyZzyRY2rwyijOH9MGEs\nXbj9E8J8zYdsjs254JfoJBLzNbMyj1SWxxm1lmp1YqGm+GOx5yoSDv566B9c\ns693tOvU7mxG6HtAl8q3l/OhvxxMqmcQVccw/UFfdIACrqOJLSvgQ7LjnZJB\nzs/SJufYKoUwq/C52RnmD6vhuCVPGo1mm1caZEVCYsEOpAiryGbxhznPAU+C\nz6nsEBqJsmglz8IHPT0M+f2O/pqocyD2rK/P3AKFkZjKNatHV4zu++tBNIur\ndrHMhplJN/0T7D3hMeWk9diPA8d+AqhjPMAe6g6AuOt/30oUDFipxJohpGFN\nRTrL\r\n=cpRw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"1c7aa3231ba2d87e7abffc33fbc156ee0889131a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.9ea52070f.0","@material/theme":"7.0.0-canary.9ea52070f.0","@material/feature-targeting":"7.0.0-canary.9ea52070f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.9ea52070f.0_1591030132311_0.9695271190373658","host":"s3://npm-registry-packages"}},"7.0.0-canary.d86ad3b60.0":{"name":"@material/shape","version":"7.0.0-canary.d86ad3b60.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.d86ad3b60.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dc68855a2754d01d0c286bb9a30fb5da57eede6d","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.d86ad3b60.0.tgz","fileCount":13,"integrity":"sha512-OIWuwYLDRzRjstrFkyXKpRbEMHHN5w4ErUVzXecYYkqobEVmOvuGETAZMNiSOOzr0fhL+B3J9bSEw6/wZDzBZw==","signatures":[{"sig":"MEUCIHVY6544rc61/ZgpylAbL7K8GOWPoXdbZkADdJ/kzxlkAiEA++jRtGJmJvuXRoePW/b/CVO8+wkJ83QLOSbO8KUBEKk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24096,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1T94CRA9TVsSAnZWagAA1ssP/jdV47TE1Ep8XdbJ6Z4h\nj6IPHzOkaP4Q8fxnHzk/yZHqGZlhEglZsmplMaVM85zZfHZPZQ3um0wqWNjc\nI3JcI1lzuHH8MAyXfxPdPY+YiB4HQWkwg+aITNwL0pLBoWP8gZyFUNGNm5ZC\nWlqAcO9yQ2hLajcbm2baC8e6OWzdq4Ya9MnNSt/wkIoUCFHeN5XD9SFPu+P/\nSShQJVDe1JINkPVq31ZXblNseG6xcL8F5Zo5V/sH+visdDlo/ulFhmqN4Szr\nEiJZTJMjqOUt43POpfA9CK5uVYyZYmLSLrVNpaPJSzG95EVX+v4AlnsMjuZz\n/Nc84siK4A68p/cy3itzumQV1Ec7ukO0KIbymlAH+KvZlZYUXlEKKrj8qNAN\n3+pWv9d1eEsFTblx1O1UOiRQ6ySRzpA1xLjcwYfIv3qIkpEeLlqrltEo2aSI\nbaeI4zCBhpVHaQoT0KcpBBo6ikXeAX3naHwSu+YRtrTr7T+ihfgeoItj98B9\nIbtrnNCQfIkV/fT4uRrUKs6ufPE5Vnv3EzTJ3EKlbvP8KKjvWQcH/QG95gTN\nxMhMIHv/4Y9P0VU52oJu5hAJFxM2KkXHK2j6N/XWYjSZ1DIfJMzuB4QR8vyz\nljou0VNXFrs8NQ5DyIEjhdWze7mEJKIglc1nyKZS12xYp6qGllhqyBDeNTKH\nL4XH\r\n=CQp/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"ff64ee77c98ab8a932f9397689714c078eb9fd02","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.d86ad3b60.0","@material/theme":"7.0.0-canary.d86ad3b60.0","@material/feature-targeting":"7.0.0-canary.d86ad3b60.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.d86ad3b60.0_1591033719702_0.32060517246983755","host":"s3://npm-registry-packages"}},"7.0.0-canary.b9776b1d0.0":{"name":"@material/shape","version":"7.0.0-canary.b9776b1d0.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.b9776b1d0.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"125877b97772f82debe54f50a84c8c5a0d1581bc","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.b9776b1d0.0.tgz","fileCount":13,"integrity":"sha512-eQPsNQke/x4/9fr3oliQdrGsqcA7YutU+OaTaHsCHPtGaLI0WHuZNOsJREfJ3nVV1WTHzBtcdPKGkacDJnrzrA==","signatures":[{"sig":"MEUCIDyCtPA8Z64V/TNAaK3CrwAeMfV3TUHxF0ALJ5bfpx1pAiEA/9CGZnNhZzRMEbIoZS4dZ0UhwPK5acG81H1QHJuX/0s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24096,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1UgtCRA9TVsSAnZWagAA9CwP/it/2J+W9sCXtKSSCNHq\n6yO9vbSB+4YKjfWEGTSinnT7cO6xyWUS60c7TWT3OFFfjL9KybPxRHJmje4E\nCu3gHivYswizlkyGNEKsytcQROoz01GOf655OgvWZL0vXbQ8YcFpoGJSbxgF\nPcmE7pdC0Ob1ogy+D5waTU0DFzLuH6G+kwc1WP8XTJUjFW2ZpKIo9GQUfT09\nrnyFsvyxSIrvjU5XtW8ZzKQn5xXTTQW5eT5cHVBs3SWRqEXXONl3qD+Y6pIF\nk3dWPrpdkhTt/gxDTzlD51NBeZraxLER8s+i0eaB6Gg5izM+Wj6coicZDtiB\nLt1D+rJmC5Psqk+VHvxCSzHX5g75lNoTeLUoNfnDlKu+hRkSlPQUNVlf7MSn\nqv6RMqxfNwtC8tY3mig01bodKA5amgERf8iPP8p0zje7rBP8O2AzmLPUJ1YX\ncEUHreke9zaiGGL83apeKFiPOloU6kRcRRSBnrxm+QHtwDWlwcWavXwCsPi7\n8IRPVwA56+PiiuM4nhxCsQss9TPv4MZMyX78ZJfBlpEsK6EjTc3owL62+oPJ\nSkqlSUQJmQlYE3o1Y9vlCfY6Sy5msXsFN+c+H6lvkaOVBGAk2OEsTQwGELDu\n+/uTNhmSY85IQ921T3adoGo1+yk15PdIP5PrvSMJy0GmWUyU9ceM5rIiuMzS\nYO9p\r\n=G2Jr\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"d43f6785558859ab233dac12d042ada9fb8c1b84","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.b9776b1d0.0","@material/theme":"7.0.0-canary.b9776b1d0.0","@material/feature-targeting":"7.0.0-canary.b9776b1d0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.b9776b1d0.0_1591035949399_0.3778919769478921","host":"s3://npm-registry-packages"}},"7.0.0-canary.ba6f7c294.0":{"name":"@material/shape","version":"7.0.0-canary.ba6f7c294.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.ba6f7c294.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"50704c925d5b9d772d265388d2ffe5708e36e93b","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.ba6f7c294.0.tgz","fileCount":13,"integrity":"sha512-+xr2TmSV5TFKaIUk4bAcp49rUc9Dl41vgzzZILAyppvx9CLNxRC70+PVguwx+vNql/VqwySLVv4ie8BJf3/Gew==","signatures":[{"sig":"MEUCIHqJ8UQBrPFQL4uplCAQbhFnsuFLtizTX3pK4P9imUJEAiEAx2lmyxT+QwT2pQ0fc84txONNMPM5hSkWm6SNs34jP2A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24096,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1oYpCRA9TVsSAnZWagAAUTYP/3lmxT/SXwGsxuKanxGm\nBfcGa9Q/LlVrEfjCl2R7Iryj1UsMX+vJvQSR0PE59U66HD++eAhqCdyzJaaE\nFwMr6Rsl+u1Tt+WbOQkgvoyJ+A8ArP6B+eqsXZ4ChTxgyLAwj9IhDxTNm5x/\nK044aZziuQ2URycS0t1gou/19nSR2VbQOhmCgbe6saqHwKx5xlgVCM6uICs8\nQ4EVC9W8BLhgMvAoClCVrKtvLiuOU6abtRcdnsBTDQ2NEGr5ZxtyAT+DfRfE\nCrsl6IJhV4YSX3lrJ4zv0FhGRl7ZfsBDsds0NeoeRf+NUOljm9Zd9tiin+EY\nEKZFzUXVkdWfgMhoNNO3FCKuiQuQBBol595ibnjL7tXY7LxLuuH5pantI2P7\nPdO0/1yQ36bVULb0b2law+lud2NCejSHW+SQtnR31vnp55KUmQrWZWkde2+P\n5HktcqYa3g5kpY083/BqglpgRNl4IYewhfcegVWZJWv2r+8uf+6bZ09rHCWB\nrYOqi1nPCOc9gdDf567GSbFMlsQIfE4DCpXeNPn5rlnS6y6QFSVx+C/JXOBq\nj/L+RPuhLwmzuJ1NM5Rz9mGErly2W8yR90O/ZxeIpgKPuh89LvcYF6DKf+ia\nUYjP1IT6WuGFn/pABZyp/oq7HPF1cem7noTAGk7fXv6wT5lWZQBCgC+kkokQ\n55V0\r\n=dZ+l\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"f181fece0cab022dd478b7c2f4b768aa14f7ebf7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.ba6f7c294.0","@material/theme":"7.0.0-canary.ba6f7c294.0","@material/feature-targeting":"7.0.0-canary.ba6f7c294.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.ba6f7c294.0_1591117352500_0.8026821813304066","host":"s3://npm-registry-packages"}},"7.0.0-canary.cf3b664ab.0":{"name":"@material/shape","version":"7.0.0-canary.cf3b664ab.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.cf3b664ab.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0a6ba479f131cb5a9cf2ab77267d479a9ddadb6b","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.cf3b664ab.0.tgz","fileCount":13,"integrity":"sha512-dPCtPLX8mV40HHKEDd341+xoVi4UNDEQ2ledRVUejCU0FJyubvcA5QO/NeUL0bNcDOboYG/WE2FgZh9Jb6O38w==","signatures":[{"sig":"MEUCIQChjbduaC9YcVx5CiInaK0RKyF0KV0bVUy74bDSYmDTnQIgN2FT7vDiL4zUnRcI9K4tKASstp8h6WDf5R2en2E7bwg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24096,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1pkaCRA9TVsSAnZWagAA60IP/jRjdDLBcuVolMhVN1n3\nRrz/Ga+yN+CYV0/jAmXnsTrUl+XREcGqv6mw79LHs99Q0n7Pq0qO8FXSv7bp\nVuTumi/2k5DkkTn8gIkyEWNRoNqBiKjbr1OHWIOL3G+01Re4IwVJ66VG5qdj\nnepb3/PqPbs0qgmg4f79LSZHr2RM2ZMAe2MdqpuFTL/8uJsfbt4Sd2zVk1V1\ngf3IcobY7ag1we2afxeszFkv8fCMx+OuuRfJYIyydQ7GD/3Di1fECpNwlujl\nMk+x8YjP/nlf/v/LW5HOQquypa/jXJU6Io6XDfN5ir0WBpBDPTYWT9Mf/NIx\noKs+oDO4eBs2htyq12PVYIM11Zl4dsd14zsy0vplhg39kBXxkI6uhKQUGYsn\ntbMY7fVI4KUtYYvMOTbcz5u8LbIKlaUlVkv+fWxBCblEYaD3gAnLPhT+sCKC\nYSHPDg7ziEHhAXvlndTXlf7hM5w4ajcsa2QCtohvT4WzKLTxWdLHxnOQT3yT\nQeTBePkGG9jzhpCWoncMAU7+9p1Wn3R+m3ZKsq2UCZJ7Nzs2ODOfpkyyFqMn\n8aA9p9vhtiKGvPNl2cpyM0osx/1Zzy7FhwhumXvPBzGXhNUoHY9dpGZZ5PAd\nq4lIP3vd6XS3gs3P/dR7TGBet9ZkPgMxIC0bE4/LCb1JvHPOqwtWUga8gicL\n/YKt\r\n=UB3W\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"708ed8576095ca5e673311fcd970680f855a7b59","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.cf3b664ab.0","@material/theme":"7.0.0-canary.cf3b664ab.0","@material/feature-targeting":"7.0.0-canary.cf3b664ab.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.cf3b664ab.0_1591122202320_0.7398629263443661","host":"s3://npm-registry-packages"}},"7.0.0-canary.4ba3c9a31.0":{"name":"@material/shape","version":"7.0.0-canary.4ba3c9a31.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.4ba3c9a31.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"02be082b222b81372546b32eb059abee8d4d3d80","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.4ba3c9a31.0.tgz","fileCount":13,"integrity":"sha512-OUTbFXailVYpIjjZJBHk7oGwWxIvW8L7ju8yFUjp9io4jmnUA2nGuOPn9aGg6FOJXoNfzU2g881fmxi95FzmRw==","signatures":[{"sig":"MEUCIHK5x4EMf+q/HJliVvRv8dggt4+iP2wHcMoahFHAPT1hAiEA4UMDaUTCqsTCZc9aLIoYR63FSqa2HEyd+rQ8AJlRDQw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24096,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1uYiCRA9TVsSAnZWagAAWBsP/1KngNn2Ouo1Iir+rX85\nH0VqEJNTYOWiJDzlEpYt2eQdPnyqSAqVX4AZQ4TCwxfhuxrYxB7VXhzXL62g\nDWPGFgpKDcptGPycHpPI7u2IGwySZmeWKouKvahjXKMRWQ5slGChgHF0iMgP\nDy5+f5v18Y/QOKvnp+Rpsj/OqfqTQwiLrdSi4/PQPMKMdEHl1wyuneBRGJwr\ntnN/ZNTd2NDySKZe5wwuQvJ1vuESjeVXOaCo8s5JJDaYajnfDwphr/oQTrea\nB7M+KV5EX2VjcPirl0qMufmrO+BI6NG+33wr9o5791ZcU4KDiSmrHRaw8wr3\nOB4HYQpCHbvqhwqx7LlF9T965fBJ0V98TOy9EY16osNHRysDsbuMOFsz9/XR\n16MSY7TWjHr+joQEVwIYXAHX4+JE8qoMAjPf+3RYFK8h0E60X9rGOBuYPmWc\nFn+82wWg2eD2y/oEPK3a9AJuAgZ3F/HcBKXURzSHoBqhw8C7aBt8HklPwfei\nU+iGSFlGUfatCFafMserNgA74khkwra7xinjQt9H9MN3OgnDxsKcy/D5u3Dh\nhrBBAAiwN+GWVJoGZWFCt8Z9f1eqVBZZiRlBMA9JAA6hX0Bw0aVxMtD5cM9N\nj+YCtH4jthqU+3pLV0a6IgYcViSnkzexRSyVsxA6C1gaWx29tz4mh55iEbWs\naSil\r\n=wA8D\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"cf7f823aac5f803db06863c865c07f432ec4fd09","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.4ba3c9a31.0","@material/theme":"7.0.0-canary.4ba3c9a31.0","@material/feature-targeting":"7.0.0-canary.4ba3c9a31.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.4ba3c9a31.0_1591141922181_0.027413335228451352","host":"s3://npm-registry-packages"}},"7.0.0-canary.388b042c7.0":{"name":"@material/shape","version":"7.0.0-canary.388b042c7.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.388b042c7.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3e3744686bc428e76bb801a66571d20c4f3df51a","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.388b042c7.0.tgz","fileCount":13,"integrity":"sha512-iGJdiCKzVVAOm5X/Ec6qBYbr7SRZP4TZ672aV+cqnhBgCs8TneRh0xZP3NG5K/bymJgg+HaAHVmxhlvkQcvhPQ==","signatures":[{"sig":"MEUCIQDAXWB5Q4jn9/iYofn+Qq6m1/drcqIEymUXGjPtR5ZLhAIgLFeu1sr1VwY+UyRIdcvE4IfG9YNx7JL45N9W3l3w57k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24096,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe16muCRA9TVsSAnZWagAAOr4P/i/O0iTn2o6gji/lmU+X\n60LkyI9oJeiR52Ur5vL5m+xCCklk0X2V52XXE5WFCTIfehIZb5GWuCZARvPL\n4HlydRabb0199svnDYcIuzakY8tyW4d/CJMURNOB/CjcM4qKQq93DBJ+DJ0o\nDkmjHi2fSitHkrbvPc5DKeB2kTVW4cKudy4G/+9ZCmsStpa4x5XTSQ82iiQg\nJ6gBq+9Hu/+aZPS/Vg2aSZm1KCh46ldkK6jB7Nx07dYirzBG33fSH64/yZmq\nPGKRoiLjAVD3Qn5tGR500boM03RaE6N1rUSjfbbLVtyZD8S9CpB/v/j+d54R\n+BCaVOoEdBpwl9OIfEHhV7tmvlok9MqszXIebO9KSlBGblrmhY6y4ZIeJ9rQ\n6ptnJjoKj35cU/a4tWKNbv5ILzgPTuhpwu6KKvqM1Uw2jOd0ecv02AkjH4Yr\nMvppeuN5SlzAPP07A0Uye4xHGD9/bI4HqIDpxEbwgkDdbAKKcJnLIpTGtHzX\n47MlYdtbLmAtE2Z4scocIMCdgCt83iJ8YFiCF9zlm1IojCPKHHy7l9YMd+25\nijtyThqE/dpf6RhztuZjsvcrPO1sYhYzWODzL4H5NNMN4VRddtxO8YdpFcsy\nds26gN6Bh+FuhST5br96B+Vp28vYC+Ri8PtzfM+RHUtgqVlb7eYcvd8q4aRV\nt9Va\r\n=wvj5\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"7c9ddf94f1ba2ee332d7acea141e5022b58f79ff","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.388b042c7.0","@material/theme":"7.0.0-canary.388b042c7.0","@material/feature-targeting":"7.0.0-canary.388b042c7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.388b042c7.0_1591191981678_0.40695635678821374","host":"s3://npm-registry-packages"}},"7.0.0-canary.cca1ca84d.0":{"name":"@material/shape","version":"7.0.0-canary.cca1ca84d.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.cca1ca84d.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c11c6b77a5480d7049d580aa45c7874ec151f810","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.cca1ca84d.0.tgz","fileCount":13,"integrity":"sha512-HReFJ0XaEx2FaiBZ83IEyOOCP84AYclyBirT94KV4dkXwtle0VwBYDMtdFko61jx9ucqq7Kp8Z4Tle+dZNso8Q==","signatures":[{"sig":"MEYCIQD0zqtc9l/HflTEaVSKGyenXrFozJN0nTC2Em0vsuiQGwIhAKBTaJTC7A+A7jkEPL7ULGPKhkc7x/g7xSjjOvNOoms5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24096,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe18m4CRA9TVsSAnZWagAAiLsP/A2benZxJormd4PuZhjD\nwzjOCRMso6p6X9CXOFvBaXgv/PKBijC8wYRnsbdgEXDJ7yw25uTTy0cSPPGk\n1uZ2uHwz9rwXhADpiXIqPFXqfmdC5ezxvsFNgjTZXNQvOrUqPczzsUSz2pJT\nIIuWxcLhsaQ4js4PKmHVaeU3OB2uE7BnEkNT9Wf2ajN7Qq4e71XouJtGxe3z\nVosdCAZGPxz2Vb4CsQiEhGteVPhSarbMfnt7yRz2B8HRYZnH1uCYW8InFUGk\nGWtUzFvqhZa9HUxj7PXXXgMC9seDsm7NNSXhN1ZWrKF2oGeMFTt9vwBX5Dh2\nhU5C2wOdB6VEXUphIU97I/aYzEeT0Snn9DL7IX5ybOB7wqNwczsltp/GKjsH\nVJrDD4ihx9lXoL7LBuQKlMwsSu1kBe4XzqdjT5zBa4DplNK1MVIWRQ/Rs8BZ\nmykZT/NawYq/RZcweG3sIAulIyAItPaw6ynko2a1Yx/bU2cN7h4bjPgHL2Uo\n82+S/pLg0fmL0ch6lUQGKqKBFjl1Gely8KxeiOhRfqs8TaRQwYv+Wy7CL91X\nzW0QrFSQkf1bF5euvXilr6Eaht0AXZuhFTbA5r5s/n7TgvzSeFwq4hCmcFpm\nuuAAKQtTnmtch7Wr8dFn0t6TfUBchGq2Pq8UX/ipQKb/sW4VtsVsUtv7bGwn\no3mD\r\n=ZjEg\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"f154bcb37f9df5f07d3c6dd0c397a436794ed609","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.cca1ca84d.0","@material/theme":"7.0.0-canary.cca1ca84d.0","@material/feature-targeting":"7.0.0-canary.cca1ca84d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.cca1ca84d.0_1591200184339_0.7880175829077785","host":"s3://npm-registry-packages"}},"7.0.0-canary.9b0b5f2e0.0":{"name":"@material/shape","version":"7.0.0-canary.9b0b5f2e0.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.9b0b5f2e0.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c473afdd60971ed8bbb75ecacff2004ff2e5e8dc","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.9b0b5f2e0.0.tgz","fileCount":13,"integrity":"sha512-d7LpMPMdX70KHnqPgp4vv72ZAQXth4AHAhg/KNA1FJiVpi4y+rElJj7U8Ik9+WryPqp/Q0P5VFeDNqb9gD3QOQ==","signatures":[{"sig":"MEUCIQDm9f855Ou/xLaZXyq775f3yzk2/5cjKFUVOLacaXdBxgIgLIbMP9mFJG7f69L6zD79NjaOq+S0n2mr9TnbYNBMO7w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24096,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1/KUCRA9TVsSAnZWagAA0aQQAJj14v0HEiCTQkIesch3\nezXqEgZlrmRFfRS8+nPZuxv9lMv0pb9ogTxzyp0rfqA2Bhkf5eExL4xJWLqG\n8uZt5H/2VKMbadwC5iCWIje4jj5iMIRib/cJHRsxUM7vFHCidxIntLT+v/te\nWylZMppEYH9pZdP3QG0girBSG661bPCimb/9T+XSTjcmETprgkwjdYACzqsI\nd+H5h6NEdc+F2JxAqgrKHqw6Nm6NB6PESve7LZBhYvtXxGrSWrni911EPevo\n3h8DtlLGTUfebe0ym433g7cKn2nnuwGZ5lWoVbo1GHiAYe7UFeoKHBpxzF2x\ndP1/hEGa05GqResItkFOK8+5Kbmf8i1kuXCVMD87l+UxeS3cMm9Wrk9L4cFZ\nI59a8oV9m0nFCp/CaXt8jK2o2rHtL/XQ0oCVDrSxBABZnpZ6q2Nk38k/UskO\nP7eWSsIIh2KiL4QsOgIA8NNwNFU2LFYoG6oK9JiVsp/JTAABNQy6GZw7ShXJ\nK68GKiSm1tkoplRxHYeF/E3wripumRwgpX/clFr9tQZ+2QaJi6BQH43pFd+X\n/+bwsTMZElYV+/5TxOcc9SIlfdudND/n7+DK1fI5GMA+tUXHZLQX6LtySHsI\nn21u5n+pn17Qj/uUlmP7Ygt3vDzNZ0mgrmo6BJx/g4xESgL/ADrmg4sKt6+c\n2lQn\r\n=q1Zh\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"35348e60387f88e73ce8e1376b7f352877821cb5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.9b0b5f2e0.0","@material/theme":"7.0.0-canary.9b0b5f2e0.0","@material/feature-targeting":"7.0.0-canary.9b0b5f2e0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.9b0b5f2e0.0_1591210644061_0.0013096643587429124","host":"s3://npm-registry-packages"}},"7.0.0-canary.0a7895f4d.0":{"name":"@material/shape","version":"7.0.0-canary.0a7895f4d.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.0a7895f4d.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b706abcf5b3dbcec1565706e56b93c3cd6c5c031","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.0a7895f4d.0.tgz","fileCount":13,"integrity":"sha512-FcH9l6a8kCIqEyDVDHu9CfntxaKmIungPl+fLbwyHnwmtNjlO36YtFzsd+xx8TqDrGRjn3GP4nyHIYc8EmCW2g==","signatures":[{"sig":"MEUCIBmVQsRs4SPnO78CYC/Shnoh2uR+xEJWZzeGCelneveMAiEAupzbu14i76x82TtP5pmNBxXYciViO/uQDW6Rg5fU87Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24096,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2BFlCRA9TVsSAnZWagAAZ7EP/0raBVNTrU8CzQartiCD\nzbuRFSm7Z8LSEIPH8CMnUZR3jC67plrSRE1rf8o05NDwUUAyEukpOKkEq1sQ\n//etn5EGqD2o9JijHSH+JRe39L1jzJLm6S0vE3wBGrooKRIoRipfyACRobHp\nQ9wQv3F/tEQ+EL+df+rBeuxwpwmKitM0uPZwLwHyZij0Hy/FC3GtRV6jGx/L\n/VzWx5H8RyVzvTcK8nzc3UrsbQxlI4RvQY2H8J8IWkEXgSE+S46QMs2ikkhF\nBD7pbRAxbNZ8hbNSta4LQfJER+3c7EoVMXU14NeYFoaN8dCnKNPMg9mkvk8g\n4o8EPeWyMnMVJ98xGBUURhwZ3hKCenn7GDKlrN+T27QBsiQnt9F9VsD5R2aU\n+9lZQ2s1I0f9o8pFWH1UVnlekNdh2qnPAWctsEbn6oL0uqn5mSs1QEVY1J27\nFqL/k1I54wNdZvIViP7EJDlXDlCWTIZ4wOz6JjJEMM7TXkTd6C6usBAuJgB4\nA+o66ARZy3hp+y3MQMQBadjHxEdC/NXGPLabY44Y0v+dslUok1OHdhT63hYH\nvru6zfMexuEdZeXX+L1h2NlR0RKD1Vv6ujxPsZO0HYf6PJ7yLjh2HqR4EY5I\nDfvs0NGmCQ8D5w5YEYiXZmkUqZQNdU1RKlu3MSBrJHiM90ArqDdfIj0UDdHi\nC2LW\r\n=IyBF\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"929c9bffd0636490958fcf34e0b40578b44a9cd1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.0a7895f4d.0","@material/theme":"7.0.0-canary.0a7895f4d.0","@material/feature-targeting":"7.0.0-canary.0a7895f4d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.0a7895f4d.0_1591218533115_0.32501104599100894","host":"s3://npm-registry-packages"}},"7.0.0-canary.7461aad68.0":{"name":"@material/shape","version":"7.0.0-canary.7461aad68.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.7461aad68.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3eb350894ac520174597cd2c74e8c6dc08a2ea8a","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.7461aad68.0.tgz","fileCount":13,"integrity":"sha512-3B9KEijhG9a8wEq5CpA9R0IYMo8gWJJbDIAPKoHq01FSG30Q9Rs9TGQ9RoRFV65S6cnIek4+kEKYayEi9ohokQ==","signatures":[{"sig":"MEUCIE0J8JFXGsyjlHi96jvHC2pW63fTjl3Tb7CjSWrPO5JZAiEA90s2kQ65mF8e2LoJ3FjLDcb/e03iOBKcpPi6Cq45hQU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24096,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2CA6CRA9TVsSAnZWagAAFYMP/RfPePdnyKkX5FsUepzB\nAwDo76wiwnxfXNHwOH+afQIjkcVGqW2qMqcHDxW2HHtajymcImtHdM9QY9eP\nepJoTJ+j3+G5YATDZkNJ0Tk681tj/Zs7LbD0XMWPtfS/tUcarauJFicoCtKY\nWLuV2HkDs/M+IsBlq2Vfdyvk72pgwpZLpaTia5gYORMsOCCQREgL4g5OLkTY\nX80OBYkLoCU2KoPqin6LHHpPPHgbEfj/OnEmsIGvAyqVUZODExpvCEsUYoZN\n33oYAoDqcPr3mnqjkRVFrbAPL8hwFUPazlQI+CiK1OMHeopaYTtXcZ4dNF7S\nCiqJBtpp/UBTmL/ywFcqYAzY+qau72KlcnXfxPb8eG4Or0nDGqdm5WZZ2Ek6\n3d4aJJDljFUnORZR8gzadFubIjwek3OCBRdS3goBJVnwXvUSvt4h13lbyjb7\nkJK+6dqSH2SNGRvijIlY31if+MLQJPRmoDviQiBvidGaHe+DRPm+k/0+1nk3\nlTTcXv8DjZNs3z9xvAdr4eYK+e/71NUnHD9c7axF8rQ+q+BAFXjJ+E79LSpJ\nxe3r6VZO0tcRk/MXEFHBnXZ+UkT49B6IUpVzvFo2Ag5JDqT4RP7o/l/D/mCE\n15xB00vcxRUHeUAKSbAEFy9EVHgI2wqoZcTLwIF/eYbkSboWa3jjbUupg06Z\nOyhI\r\n=uz9t\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"f9166e39b20f57c6b5cdad1ce684529ca891bd81","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.7461aad68.0","@material/theme":"7.0.0-canary.7461aad68.0","@material/feature-targeting":"7.0.0-canary.7461aad68.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.7461aad68.0_1591222330483_0.3906512219521161","host":"s3://npm-registry-packages"}},"7.0.0-canary.a0dc2b5c4.0":{"name":"@material/shape","version":"7.0.0-canary.a0dc2b5c4.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.a0dc2b5c4.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9b2380636068abae89c7a90694851bd3067bfbb5","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.a0dc2b5c4.0.tgz","fileCount":13,"integrity":"sha512-dpNOQHTX8DKtOXI4rCUFZ1rT5M2kK2rlqu05/DSPHsFHhDqFccwxB2s98Flg4fX2mjRpS8PsBupTcjz7KMyQEw==","signatures":[{"sig":"MEQCICLe9jz40jTbljgJX4YtKaqkrgoBZxQSr5Spnv4jVm+3AiAwoM9G3LYAlp4dm2JutlmFPDmpHcgj0vNsOrB++IxXbQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24096,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2WQQCRA9TVsSAnZWagAACsMQAIlw2UCHM/PQz1Rgain7\n6DEYYgAXp2EPWKqWzDgnruBnekoOJaxryDbRgZv519fHqf0Tp+Y9KL6y/2Bx\n4a9kjhn1Lg0peqLbXSkFiY7+SoGBsLIIBQVX7BUyOapCo4rnaTeTt7WP2AF1\nkN4ma3uN/0ONXFjTysVfRQLADXHsiyGj2BwyWjY4weeVniwJhYehgbuCBkr4\neQsQQTvNMGSAiyLRcfveskxR8N0ZdG5h/KjS/YFLcCdpij2UpYmczAlyjjuZ\n1eCTryvpvtlqy3nSrrR2NxqZRqdmEQkOKc76wJDm98OLEzUVdo6b/FGUSd/W\nGy877WG3VrgIecOTYD6v/8ovQ+U+t96ptMXYN/r9EvBb+tdDSCE0f4JKe0En\nqpUnKlg9AIAK4LJLVdGIM+ad5HRYOaG+TZHr9kGCupnXvQ7daB6s4ThE8k91\nUjmIpQsH6jdPTw9whgPFMiJHrqaUO4I5snaFgthSoYO8E7QUWTxrO4weEKQR\nWSV149k2C2/dzp1rbE6dD4qaIxLV8zY0w+/be9poRofqhYQCaGF0URs7BzYh\nO6dtSTq3d2LObljMBRTQrRgPQPpvvdkP233WX+DR37IsyIdGorgRsZcNWtN3\noM2ckOpq/gFFa6KpXreFP5WHrC+K6V6mV5VGa4DK4OhG43ptSSsIlOBjEtLQ\nVebU\r\n=ftX/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"5970f3857673cb8c032d0d4532a6cf1209f94c47","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.a0dc2b5c4.0","@material/theme":"7.0.0-canary.a0dc2b5c4.0","@material/feature-targeting":"7.0.0-canary.a0dc2b5c4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.a0dc2b5c4.0_1591305229601_0.11883877866374526","host":"s3://npm-registry-packages"}},"7.0.0-canary.2b420c5b3.0":{"name":"@material/shape","version":"7.0.0-canary.2b420c5b3.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.2b420c5b3.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1c444907470f9dbd600243f2349b2e73a2e3c4ca","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.2b420c5b3.0.tgz","fileCount":13,"integrity":"sha512-RCU7XCDuIKdmWXMVyeDJb0XjSAnwE10y5GOPGymlCjUbZoZjUMKz7qc8iaKZz3HLlzOF8QWkqv1KY0lHOvSUnQ==","signatures":[{"sig":"MEUCIQCX/qQpbe7NzfRwcmgzBGBx97pypt/oaObo+3BZ5OBE7QIgIz1EuRoIgyX1dxvoHyDKaTxmyl7ACIPfnNZfzgmI2V8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24096,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3mPUCRA9TVsSAnZWagAA7mMP/0MyeYvZcXaGS0c4aRVG\nPGc1YqccqIsmnSAHNbSqIT/t85AE2EfDWxqnUN5aPLYmSu3rrlTmAcrYCzkJ\nHjW3vu6cjCBSso4rOpSGydfaHHB5IMCe8b5NC/6/wAl1jolJBO4uf6ZMLd1/\nUelSBioKviVxJRKN5PeV6Zt0qBfqlG27rm7NdewTKQwteXVTbcPQ5ge1iBWd\nY/9j4RCs9IBCQGyemM7w9hiALO91+PBWrztmdviPVin/V2eQ/x3gr23T4Cxl\n9vUlg2IA4QNfe5a5vdVQ91kXc2m9MDC9kmOa6hoAvb0LCtmd/WrqvMG3EV6D\nG4rUkvEUIVCaoE9wZs4kb5e/YpBOT5TmXfRViSke9Jtkp111uNNpALWe08XE\nRx1ONicTCQE5mn4FqmyEC5HyYvFViEyLEBHEamgVzuo4uVPZseJdydozMHj2\no/0paTjJ5cmKU+PB8P4w0Xcfu4+1YB3prkac1ZQWsnGT/NAgXjfHO5OXC1s7\nnscuQznbVMe9P9WF69HRso/kPYGL290YnArQFZlKxQvpk5gT0GC8fav25tya\nOQEMGyrcBamyl1gt2kj41C6XFb9SlgDlKKZZxlFIJH1JwRI1WB/AavNdFleU\nRgGbHJ4XI0rdm4X2ZXOjadRTrvK3NahGIIP3DdPskrV0j8DcdNb1klVoztJA\nN2fF\r\n=IEvE\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"80cc16a27982fc781b2a68accf38760a98fdbe2c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.2b420c5b3.0","@material/theme":"7.0.0-canary.2b420c5b3.0","@material/feature-targeting":"7.0.0-canary.2b420c5b3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.2b420c5b3.0_1591632851335_0.5773953450937883","host":"s3://npm-registry-packages"}},"7.0.0-canary.8fa22aacc.0":{"name":"@material/shape","version":"7.0.0-canary.8fa22aacc.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.8fa22aacc.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"36fee2d5d5df2e83e0d64d933406fbf877941b99","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.8fa22aacc.0.tgz","fileCount":13,"integrity":"sha512-JVEvcJ39WsBrQfWvYzUzvoD7ruDIY+rLlAtIdySPR3cipo9Q4KbA0/uY8DX+NKfTyA7nFP6cknNpiAPxQKxP3A==","signatures":[{"sig":"MEUCIQCd1YHagluvGJhi8bul3CKqHUYz3/Jnp867jhfW+w9/vAIgPx2PUS8fkB1vdn15qT1+Vx5Xo6teM66BHLhNNUwwRdw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24096,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3n2oCRA9TVsSAnZWagAAHcoP/R86r0eT0EQ9rsmhV1iL\n4L8nBCNbd7J3ReqLoyABDaqphHafqobmHnFPEJ7zNzSASZDkL7XNUh22vFqL\neoFodzxDGIMxiKS/s3yzpuZqRrrPvl4xPoLWQg/BBx3ASxmH86JDtin4nkxV\nA0MNPZtNakC01k1YC1LTNFHL/tdyCX1CkP8CMKbmJOXrOSdU1c3to0JUvpSb\ncCGnqdBrn2DsY7cL7W0afNi+EN6qoqWVmxHdSEp+vPleBy/ihYs02zFlm8m/\n5keEa2KYFFSD8quY8Gr/EkCuC9adV7g2xtajal7RyvYvKX/P+wmqiMOhe+AU\nKrLbgd2Sg7XxYozGZTSEtvDj9P1oA7kLX+XXvv4GbapICoaYvtt+R53DFync\nkyKiEhtWRoifKkGvRFrStSbkwZ6hZniz+iZ8EV1Q/CcSDh5kw2iar8dqtpds\n3Ph/W6q2Hr4zuZ8o6cDtQghrJGQMYT3s4/tTwkmQQ8XMkKxMYUCFocoux30F\nOaks8owWcD3gYGyxHVd7fYi2ZwfxFxc4Rrk1ow6SRgEuvAE066gxfmwtyWKg\nOUzh5F5zqR97Fe5cvr4qmiTWsdA4ia0clT4eVZpwHeJUiBy3Vg4i5MKyHmO+\nbZC0I4nVerwRTttb6C+3OjUxSPkwdQN3g4Ff1norcCO77mVNWHAjYuZRrRyC\np9IN\r\n=Biq4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"7c66b081ba582f4d58dde82c8b83ab1dfbed6063","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.8fa22aacc.0","@material/theme":"7.0.0-canary.8fa22aacc.0","@material/feature-targeting":"7.0.0-canary.8fa22aacc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.8fa22aacc.0_1591639463471_0.34560638054872417","host":"s3://npm-registry-packages"}},"7.0.0-canary.21c4e4ed8.0":{"name":"@material/shape","version":"7.0.0-canary.21c4e4ed8.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.21c4e4ed8.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"288d492f927816ed0884039578f5bf711a2f82ed","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.21c4e4ed8.0.tgz","fileCount":13,"integrity":"sha512-botFVXk8Da4yGUvddPuQQSRkTPtwFwoya4s6DuMzNePElTEJ5PMSO5q3pD2rgrU400tI+wgNRwJ/kVeK39N3SQ==","signatures":[{"sig":"MEUCIDeHVEZUDnr81Pnp5dvARhJhlIXnsUSJR9fumQMuacSqAiEAxx5RGV/zHZ5mjwGpySZ3RLhVi8NB1jHSCI3sBtujYBs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24096,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3ob3CRA9TVsSAnZWagAAfw4P/i1fdceoyrOhVNk/3wdV\n8qpES+tXGBNzScW45kyz4ivCb0bRoPHjfB3TZK151UPOmfaKqnpwXM7WfITq\nQSoAX5QZMXGR27zvQhvWR+HZGIaecqCnNUXKKGpkjeVReUmhDE3iiTYM59X6\npocbh95OpdEoP9WQ0rg2upJry15VLZYNMX71amYK9h9CDm8+lz0WOet4OrX8\no9WW5OMAXi8+ggD8UX390TC15+c20x0uqrmu8n+dRc4UfexxHwPsZRNqUSoL\nqlu5A/fTbZnQ8aAh3Jn0ERVsuB8r7tWZdjUcHqaqlo1hxu0n1IKQTdn6JwLu\nPv3RV4JL8BkLmpU8JqcfI4LByOHpmIGj9hXI+2uN8NM+ysjvbA+mB30r2ZcP\n0oFYPdHBnIvN+MJnfT9SRfRvYDGmAl7XyHCLyKh3ww5HCgeUvmGuw6kqkRns\n6vc1nUFx/5cpeISBZGxGA6P5xTLh+hlsuFq1fR8IFlXRzEmGy97Zt8S4bh1y\nK2//l2WJJ6Oa6m/00lgtqVlLqhvBnGOFMpvjzuQ+CweMLy2TdBtCMdqjJhCa\nQalI2N7Cz+0Frz523QB+fXboaT4vmKzZJyMzl2Jbs8xzVpSZS3QIp1Lfq1KI\ndfEsKw08wMJL7an3MtGSXlBLmEm8pYM8N3b1syGxXRVEyqnTrqGyE6xMLTNz\nTm+0\r\n=ZqmD\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"4028e059428ff6b13f79ad3f9076ddd853ec1904","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.21c4e4ed8.0","@material/theme":"7.0.0-canary.21c4e4ed8.0","@material/feature-targeting":"7.0.0-canary.21c4e4ed8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.21c4e4ed8.0_1591641846666_0.8861737826705067","host":"s3://npm-registry-packages"}},"7.0.0-canary.dfde46516.0":{"name":"@material/shape","version":"7.0.0-canary.dfde46516.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.dfde46516.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d98910c6fd6ef823c4e486a9fb4482526add0f08","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.dfde46516.0.tgz","fileCount":13,"integrity":"sha512-Vcr3crtS663kvmEN8xrMBgPPTlhIYak/6K9EKFLHEjAbXcotoA1mtKRjYrthw6WhisoHuwfQ+TVsGml3aeq77A==","signatures":[{"sig":"MEQCIFgQ0RUKerBY2zya5KSvBhm1Px1zgUXYarB2oOY+ApbVAiB0RmQu4Q7UuH+IvM1FSqZC3Mt9NNNK/T6yVaMoBtHUVA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24096,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3pRyCRA9TVsSAnZWagAAqkEP/2FPWi2OZkgP1wMYzV+s\nrlm67MAa95N5NvdTD3KYXQRlhjwpOKvhZFdxTgHmVEdhLYkiePb75ONX0rHZ\nZlTFAVLoEjaWL5fbHJTGZ8S040zgPmS63vJqQDi+RlqAZmpcmj7y+G1iT0LT\nmVaP/t6wQU6U04LE+W7Um4IdGfxebw6jiER+7DptEzQ13D1kRGZzvjgz8TEP\nfJacZFys5T1i+MK+KjLMJA34lHLSFb4gINmSoqRA0YePyrNnHmYPoDAzZVJf\nFvYDBhVaKhNTzgrBD17FgvT+ttwxiKDWKfJazNXw2vd0R2ystBPFsjsNH0aD\nOMtAlhbZttwq5FPJ/x6kYDnmmOMkGrC2j7yvOUEcCEKQV9TGnAVOZnRgXm4B\nwBk+SDyE7xf969rUgTdu3NJYnTDAjj93TDCei4dC0x8+bzOvIW9MRxzZRnMc\nsWn8b5AGPEnzY++5yVVavWFsc8jOOh/A8K9c671YTb8qmbGuLEiqK/xApqpN\nVrKrDfc1RxvT6G84jUea8qYKXh/zD1sDhh9JCGq9wSzsokFT9Jee6LRKf1XQ\nrbY+RCL7If+8Exg8pnJSRwDOM5LWgrHUEycO3ppESS1r7UCrXGbmEJpEDCsV\nWDdWawxh8yKDZ+WVFGrSMEwLLd1wafomrRwBNSBJrEYUE6CykBWlfSeiLYli\n6YB/\r\n=XSLr\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"c25d474d22b404bd6774ea12567f0916bd7fd165","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.dfde46516.0","@material/theme":"7.0.0-canary.dfde46516.0","@material/feature-targeting":"7.0.0-canary.dfde46516.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.dfde46516.0_1591645298292_0.7192308762246218","host":"s3://npm-registry-packages"}},"7.0.0-canary.05cc5c206.0":{"name":"@material/shape","version":"7.0.0-canary.05cc5c206.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.05cc5c206.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e30fa82efc4143b8fa8d618ad988d361f08de083","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.05cc5c206.0.tgz","fileCount":13,"integrity":"sha512-SUyK+p5qmhe6xMu/qz33vzax0gS7WpZJRsrg9nZ4E6OQ/SX7+o7Zexr1rSk2a22a5yHNAapUriU+D6LYMTZfyQ==","signatures":[{"sig":"MEUCIQCc7jURfNotp/uw0wmFe43tfhLqR38hamIXLbXFGJWVTQIgV1WQ5mVat1fJT4Z5z3en3+LtOVreM8UF8gk05XlyAxQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24096,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3qYNCRA9TVsSAnZWagAAvS4P/3DpMH51t4iz4j0Q34J4\nHwPZIhU3vjJEpyEY0hrDbZGE56s/dLpJu2S9lgl2PskG69KcwtDw4Tu92RI5\n5fotqpD7zDuPSTwUKo0U5pBfi1f4U5LCa1/8zYivAR5Iy8rBcFpYanTpuR+q\nQqp9FFyFgp76yd8WgZfBLF6chHMTQYEmnSJ4hapeTPANr5AILDDYLd2Gf41y\n/6Oqc+AIDWcSRU98VNQBjGmASvcVxv41JOmkOqsQQVDyt0o114i84aFwjYcq\nL91XU8f4+IcE5du6WVM9B3MZ8bpkXFNqJ1u+XxMTycp5bKdamGH7aJbjVTRG\n3/nV/2Kc19YL7T4C7OQ2x2irj3uQH9ZWmTrMwz8rExAsRgQdB3q9Nh3i3tUT\nKUhlqPC3e38gD2H8HruXE/649emjrGdKz6XFPxvm1sOyVvUmRBWbryTHu3ZB\nbabp/RTn1F9bZsQ+CFCNSJ0xqFKz505VHSquembq9qeJCXUiwhQGP/SgkjMz\ntWRJrnQEbnYw+7MaAEvsdBFvSf5v1yOiJABF1UGq/McphHyQFWrY48Z9ysih\nJQFCBvX84cXtJ1kSu+m0UtG84p5wbhKuB52CZsL9i9BMHn7EU2NCkhszrafR\n1I2Z90XaSyRBjAFTrWO6z1tWorsDeD42to1NIax1NVcG0RR7tQcCjqcBwlXu\ngEfF\r\n=1ZHH\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"933ae32b3f02920ab3f6f1660cefdd6302297532","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.05cc5c206.0","@material/theme":"7.0.0-canary.05cc5c206.0","@material/feature-targeting":"7.0.0-canary.05cc5c206.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.05cc5c206.0_1591649805071_0.6319296562430397","host":"s3://npm-registry-packages"}},"7.0.0-canary.3ee488f1c.0":{"name":"@material/shape","version":"7.0.0-canary.3ee488f1c.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.3ee488f1c.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eef53a793204c61a059612472b899d9ad1c133a5","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.3ee488f1c.0.tgz","fileCount":13,"integrity":"sha512-NnZeb4e8TwOkaEGN5G+/jdBkpRiWCEo4nlnV9+hWfVSSdHzdomGN6W/4Xrvw9y0yaWZpJyOpBwW3wvK9yWhj8g==","signatures":[{"sig":"MEQCIDfmWn/Ht2eK+BcPRNyeakCYt6uthFsvj+VAFaHPJwFEAiA9JS1/GWbodcFFwLl+Y5SwbCSU3DdxhTxwA/le9+6btg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24096,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe36J5CRA9TVsSAnZWagAAcnUP/0BysxtHgBAonF61XoTs\ny53AhKtRj41U+sA17Pjk5MH85l+uVVdKPMwQTT25bgdYz+3Q8DJh+iheGT3M\nf/AZJmrVwLO0XtLqn7KMO7H+2CBwWCLs0vvcdaV1JWRrBqKBESp9pq3vor7R\n6/Q2aaVD7wDfsgaJy5My9gLf0Z1LseYasvG9qZvfCCKgahi9soJMey6ZWJwc\nzFZvQYblQ56n5O99Cfi7YsSAdNPyLjG1Wk5dWiM7PEaGa61Pqwg91Mtxjmbh\niEJeCAVGodsFMZf+mEbuQE7tfk9tsJjzCyLCtYDdKd8skbqtBrxgVVEFx41n\n4xs2kDRFDCn0tRhV4OflnDa7sBY+OExFZLtl9IEaJLcmErqEJgRLMlU0uNxB\nGMVsGEL3MjXk0AZXdUyvayYrS2nbefxQfmanTM4uZfjoKb8KBY20wqBknSw4\n8V/GzSjvXfHOQP/RNY3X8PJqEDMuJ35Ld0QixPO5pfR1uLhiVFw+VpLZPMp3\n23Xy3H7yyMrerovQRFy1TF1kdgJyTaejJfjtubsNiEb5/6nQrgfCcjIeV7QJ\nN+SYpgIgfw/KMiCfXrLnsnza+6UdGM8uNBw+TMcg4FoyPeIpmyz/4YxhmHO9\nka6JwOI/LZC+cX5pfG3zmTm5nP5TH5Syi7AxSRNjuIo1WqX7yfhlt//R+LTY\nck3v\r\n=8JGK\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"ceaac97d295d5d50e71137ff6d4b390630570b8c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.3ee488f1c.0","@material/theme":"7.0.0-canary.3ee488f1c.0","@material/feature-targeting":"7.0.0-canary.3ee488f1c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.3ee488f1c.0_1591714425148_0.4589455863771892","host":"s3://npm-registry-packages"}},"7.0.0-canary.b83d720ee.0":{"name":"@material/shape","version":"7.0.0-canary.b83d720ee.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.b83d720ee.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3dfcd52d1ee911dc1f5b1036ab1447d1241e258b","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.b83d720ee.0.tgz","fileCount":13,"integrity":"sha512-LoVl5Pj+ajsXidHgDORBVxDuxGHEDgGeUf8j1U9pVafahxbcJVLCVxSfhL5Lx0aG51F7pDcX1Fzpvqz9w8t4sw==","signatures":[{"sig":"MEQCIEJR4oI2g6Kb9XTH8gP3cPUofOSdAlEf6QNltaL+ojGXAiBMJVDQRbIyJaF9t1Vxm9U9+wrXRcgE9vWK98FeK5i5aA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24096,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe38YuCRA9TVsSAnZWagAA4U4P/0jWXMc5DGNBmf3OBIS5\nv+E3RPM+71Vvq12oiewuZD152lUeLxHfTtIZ08kiDWR8fOj/WvRsiUdOXSvL\neU50WVuUYYrBJf0njLORak05lk5x0rw5u8lwAQuzkjErPyNwrzdbIFvUcXrj\nr7zH3BSAkwnF6GKli7lo8ye5XYPZrbYP6WmCFGayPw7cm1CbhXsYA5+QXwkA\nRpfSYhHUJPy3BJRe+yKYhKrIOORm9HDxEJ0Oa/geeuD8TfgaG3FyM1NkQ8BE\nYBtyNILjJfzWPY54HSnN8iL1cyoV62/538yvWmofEPYVIxtDx8nhRf36kOzc\nr1F7yjlfbPhAqkaTIf5doad0W0ZMgOxnFvsqJQ6YpMSpLfen11cYgT0iZ1s0\nM0QLlzbIrbq8w0eW71yHO0B8Tzitet+MuzHCQHxSsS32xQH3dlkmLlrRdDja\ncJIp6SUJMRyz8tq1+HU/XntGN+WacETSYyunx8ZN+pXHoy868QTqJCZed9bo\nnBVqL56N3xSzZKldZexomEliIWO7SJyOLGrTwpp8U/F9ccWPzXjs/QyktXeu\nxR0FwYntjMQplJtAKfI2Wnl3jzMhPTfDtEMF2s9HLtqaVXT3hJasnq22Awdv\n7/dal0VBZ2DR73PwtOsDk6yQPtKRbG51pPwWhfunaDBj+6tj5BS43Kjl2H63\n3G35\r\n=PTyQ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"3e998e476c86bc89c3bb626240ddd068529062aa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.b83d720ee.0","@material/theme":"7.0.0-canary.b83d720ee.0","@material/feature-targeting":"7.0.0-canary.b83d720ee.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.b83d720ee.0_1591723565626_0.07803981831880602","host":"s3://npm-registry-packages"}},"7.0.0-canary.afb1c11a9.0":{"name":"@material/shape","version":"7.0.0-canary.afb1c11a9.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.afb1c11a9.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c4e3f2e10e74edeabf6402f2385674c3645bf730","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.afb1c11a9.0.tgz","fileCount":13,"integrity":"sha512-/IKhaZRBSZ3/ZXHrgpkhDOH+NPE2irzqVMRTuj5CmSAKAPjLuKy46tZBLIdil0BxZ0Kwi6CnpIfNB3Ew6fkBhQ==","signatures":[{"sig":"MEYCIQCvy1vJQoigeWRhV/1LtAb6+mSfn+x1fFeB+ikVz65YOQIhANhZ64n5SEx2JCVSWhh8NltYP3Dw4NDJM4U/aXQj4Exw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24096,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3+4ZCRA9TVsSAnZWagAAHD8QAIZPC+lFwwkYXQmAk4Bv\nMnSzquj/IADAO7TnCxbi+r9v5d/IfbGBpz6M7ki7qvEpA7yDn8eIObBxZYAO\nMaqCKQS5mTZPF0mYPD3j2zwAKNeRJ6QH56xKpF1OlaURh9hvIFoX25N3OnVh\n7q+VWk8iJipuWn8ojiI/BTERtpPQBFyMMoMDWrMWlx3zbi2gE7cZTdU2UP9S\n/QM2DjNjHQw/YIBgLSFfhWLxJyUNUdYLtAcevqVsEXzaVh5DEgdwHSsKIjRP\n1ituiMr0sypI4u5VU23kz9+g+0XxleXXJ8ztHXOhUd4lU3Pq8Tzj62BNuNm5\nJHzIBc8BpP6oeuAqgXUnt1uyc1kw+osgjafTtH2pJiMYL2Ym1foOcgYZuYP3\noptU4O2rCEBYAfVOouaBg+BJyGsyxh8VDvoSf07JaRWCIebtGDrovrwBQReQ\nwYVUOMvwtjW/vKMSlhNOcilOkkA29yZD7QbVl213ReRBTImOOJ7tZ+LiVpJh\nZTGt2WIbp+vtZtPgwmXElnfz0GzKH7bm+HC72L1ttZ+Bo4FOQaUiq84yk9Iz\nKccqasQgGGXkA9+vn5YlNlOkkrpnXul85UTHoKazCpgTNjmQfd7QNTnwXIx7\ndjJh/s7xL+uvPyT/XKFZGJ2JLOjPiplQYMKqGW4WkIIoqCBXSouc0kkcdgz3\ndctm\r\n=Yqrx\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"893f09ebba8aeae1b012971b66ce3c77c410b823","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.afb1c11a9.0","@material/theme":"7.0.0-canary.afb1c11a9.0","@material/feature-targeting":"7.0.0-canary.afb1c11a9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.afb1c11a9.0_1591733784951_0.30215068468991535","host":"s3://npm-registry-packages"}},"7.0.0-canary.39e6f71e2.0":{"name":"@material/shape","version":"7.0.0-canary.39e6f71e2.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.39e6f71e2.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"14e5b02d2be209048989895e9c033d1cb8ea46b9","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.39e6f71e2.0.tgz","fileCount":13,"integrity":"sha512-kPiQI0jPW/iTPngdfcdebQTZSnZu67aAZlRf4kkAq6XDiy/RUukrnbk1A1Gro0w8o8ldbMD3kIvGNwxo6D53eg==","signatures":[{"sig":"MEUCIGF8zRHj+umbgCJvOrPvB6/4tNUzHC1AnTymKjtlhmuRAiEAlbkS2EZqWOhKI1J8vX4TBhb3rE+h3PcqdVXf3Q1F2xE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24096,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4B29CRA9TVsSAnZWagAAhIMQAI99KQj8B/4a5oblTTEw\nkkyMMAax9VuR/TxRMbi2MH2OU28GOOtgHaZn9gFbW+erPG9zpP09FSZQhXe9\neS73c1EqAOasB/ULGHTQt4OQaAzDYQCCZiS4i5K4AvZZgGJ7/AWQ5Z/j6S5j\nT+txLJKbT18oxuteUk75JV8IiPXywIdKJkoPTSUiXpH5D/UeNwg5Dsi5UTbo\nMLDeDk3pmAUgFtDKLoX8yTe76+OfHbwBWjY0SXG+zql8NBoL6GgTOi5HBSZI\nB5UitrtPms4+lSsA+IlbDYiKl2Aipj5txqssVn2bd4CJCkaXCmV1IZYWSwX9\nc9CEEnYy66/ZFPZDD9uGxE9ZrJdEvxo26LfpFAjSJdH0plqu0QcLZayb3SFI\n8Ot81JUGLQZRfkRKyr2TOB5TWUG5538ox44Zq60BbM8chRAASjCxS0w3i407\nxRow8knc1W3px4th/AJGTT0PL3tG1DIJHFwd1+iKdDMmQHOn7QBufWHo/hMX\n3rotYmwNBzph/athle90xPgP7qnzX1a8xMMYcxIaJWfhkPjZ+7OIiTXBVFGA\n5JMfiCIk3DZn2+qNRugsoeeMYK7Ek0shf8GyyatIUppsLhL0DMk6xwb9RcnK\nfldzJGPfRFJ0qW6gyY4Qm1ori7mFyZncdhrDBxSYeeKvBgt62ZzDbVk5FoK/\nvKFL\r\n=ipC9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"2f7273891cbcb7da6646bdca0ac4c5dc2ceed9b6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.39e6f71e2.0","@material/theme":"7.0.0-canary.39e6f71e2.0","@material/feature-targeting":"7.0.0-canary.39e6f71e2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.39e6f71e2.0_1591745980908_0.5545018386513842","host":"s3://npm-registry-packages"}},"7.0.0-canary.d4c66dc7d.0":{"name":"@material/shape","version":"7.0.0-canary.d4c66dc7d.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.d4c66dc7d.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cc3c74518531b4127f0faa9b0c68c49cb2ced624","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.d4c66dc7d.0.tgz","fileCount":13,"integrity":"sha512-Xss07apffSIIR9HmDcPqPpDA6K3YPaeinT+DCqdRU3KIXuyIyjJPSSgjEKqMhOlSDByPDwEkb6BT437zEm8mkA==","signatures":[{"sig":"MEQCIBatti5OBuNIvUY6Yfohp6KOaZar63vW4OFt4Kc8YYwIAiAe6Bw0HhiigntkeK9KAw8GofT84E7pc6k3BHNGR4u4oQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24096,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4m36CRA9TVsSAnZWagAAHsUP/A51+hWSdbWivZORkjgd\nDMBbLUz9EASQnF4vprVOentqyIRHfwDEU+V0eAMQEIp3+ABFZYzimIdb9oBa\nDE5Hxw56X6uFd6EIheH8xJHdP61w0uFKwfrF+SQsx5muq9BXL28cUtDFFhAr\nPGS2Jv6nflOyLjctGu+5jL2r46MlA+dtZho3ggJBakuWCmsfTQytXCAGDEVO\nI/5yl3xvNeVvGT4RyHjzysWdLw6efLxZsIJJF1VSPP7dGzGr1SZhJ/TH0dlv\nfm9Oy5LBejNHZugLHEynklVFjO75f3lPKI14Kfh0QRmLpgiP+f8uzeShui9F\nOtqtPuInWFXwf5WEO/H2X6ctUSbSYwlduwM0X2VMTsFt3AtXJbBOTJps04Dy\nkr3LWqKsAMUC6EHuwHA3ArM4/4PQgqEPAERICP9O2DcNu42KJAwkxtTv4lOb\n6Cm6nTXLYpnq8Lt0jskX3i/TfyPJAfL1i4yatnT3QrhlzX5WPwOtch1XY2Ud\neoFtRMUcTyKPQqZQswc0IdlHwFl9g8RkQKZ9xImlVdvwCkPnnVFkgoh+Fw1I\nWmbo32ygN4ih2yGTM28rxkyl8IWwPWc++C16i7ys3TqTLSWzodPfQsDSari/\n0c4eNt2KQF76tc7nGYBxqcChQdeIocR9a8G6Db7Bf7aZz9HCOVBCsyDeDXbw\ngSA2\r\n=xLkq\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"5964d9e6836962528334c54ef81ac4cf4898392a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"7.0.0-canary.d4c66dc7d.0","@material/theme":"7.0.0-canary.d4c66dc7d.0","@material/feature-targeting":"7.0.0-canary.d4c66dc7d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.d4c66dc7d.0_1591897592467_0.18701138916885962","host":"s3://npm-registry-packages"}},"7.0.0-canary.be4a19f9f.0":{"name":"@material/shape","version":"7.0.0-canary.be4a19f9f.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.be4a19f9f.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5565cb75164cb14bfcdf09bced44d22b5377e640","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.be4a19f9f.0.tgz","fileCount":13,"integrity":"sha512-Liza3GV2v2sUwhCopsGtaOOTZAxPOoCIzKcArrEUQIc1wZpU7kErPL9hKurd9Y2XZ+KvRxQ1w5+XjzGmKa3/+g==","signatures":[{"sig":"MEQCIG/oW3KiseTD+WDuBqxrtLiAF6zvmSM82S7sGDMqOzv0AiAeKO5BHy6MGxlY2j4/LS6PGfTi8CyQndZq2wgPZtZJNA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24096,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4xvUCRA9TVsSAnZWagAAM1MQAJmiiehMpMCMUOm7e52x\n0NQcVyCYI2/VSVS2CtyMD5rRwNQO86NNzhO1iwdwzkxz0lk02eS/c4/8Pb+z\nnPHC31B3d7o9ZHLkyotkq98vItEerfDyNgQD8bEBxaKoqUsMswBfm7nwz81h\nuio+erpx8xIsqfdkOCTCWys1O/SglW34bO4MbdOP2I2k/W8UMJRU5W+qkpT9\nNENV7RG5Y1zWKjDaoj3MmYG2vbYmOuoX3NlsSXFhEUmBRjucOPmGNPd69vZ5\nzM4+Wdxjm3S78cBKrsJjojyQTeCihSemt/VnSZICn81YWDW4mXFiYqPIh3/z\nVitf3crqHPjo7q3k912DT6stV5xKRhYM5ptzXpavcY/oInBA3Ps5S92bwr5P\nGFB8iuW1lzITdnCeLZ/vUvxNx2+/KTbckdFlWeiM+pt8MBWq9KFhKJdSGio6\ndxkGw2Nans081fEqWQH+6rRUE1UZZyEhz7rfBJvsC4C2bR7EVdOmMpPiRrTa\nweaPBuYC2yw75JpMC3RkGmV5PJVkrWpu2XAhCRhCVSZUTXa3Tawflra1zlFj\nsDNYu8zX4/L9UZGLR89Gsp0WwK7AyCzE1nnVCENYKlXJdAo2OuHbuXsnMRH8\nEoXXOg8gUEBCIA4+yvyAYZoAAkIQQdeYunep9u/6latrGtvoXvuV4rsi+x90\nA+SX\r\n=EjTR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"d7a0b89cd18efc7fec60e96de627e59883e3657c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"7.0.0-canary.be4a19f9f.0","@material/theme":"7.0.0-canary.be4a19f9f.0","@material/feature-targeting":"7.0.0-canary.be4a19f9f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.be4a19f9f.0_1591942099853_0.5592614075289795","host":"s3://npm-registry-packages"}},"7.0.0-canary.a6ac8f629.0":{"name":"@material/shape","version":"7.0.0-canary.a6ac8f629.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.a6ac8f629.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3d468a69676019e6b6d5902b5d67ac41d778d214","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.a6ac8f629.0.tgz","fileCount":13,"integrity":"sha512-mKOdmWDnLa47Dkz8qxWePSG8KzvPhRRkMehdit1+Dx7GkifmNwUnPSotLdPWRQaKY5AKhYJoEGYCkKM5/KS/3w==","signatures":[{"sig":"MEQCICSg+VJmllIXw8ffLqsfnQ6BEbW5TaQs+0+GvGcM6gpZAiA6KQFPkuDO8LeqdImB5A3zg9dqQytTLqBtQ1YrJFyZLQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24096,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe5+iACRA9TVsSAnZWagAA4kYP/A/5LsqQhm0Q9dJUhVUV\nd2U7vhcQGIu21ChxjcO5xbZxCkE9rV/ePUMj87Vjog3hkGBPaUVMqQ3/p/O6\nqCbIRmqL7kCa33Lp/PSlJwdLEK//x5S7S2zY707B6OfHJBJ5NAMDb3R1IPTQ\nGUwK6bPlxED5LbSScHX65wFaGCccoZyulj0qSuyVuzPgukQ2vUwnVuga3saX\nwasHYkv4+ZcBmfdT+K4rooW0dQ0c6K/s3qALqFLBSHRM+JCG6JTJecpQoImc\ninXp+9uRNBfgwnAFMOs7oZ1YDlFkEPLx759+t8HD0/T/vrHfYF0mSXfM9hgJ\nJsQsHSfrVsVBAbhbZSWEcAB9NsWq7LDKe6AcJh6dmoHXpS20dhVcAxrJY3+p\nyYcl/t6RdNtkn5/y0rWp4yiyQ8+DPL9JKXjUVkkZ+RLMkMzgN2dD5Oy1cjPO\nlaIKU25i67agwOZ7voiLLGMEku6s4/Bm265hLOYWFF0Ojayr/kSuXZLbFji8\ngWGeYcqrNpli5pg+6k6ly95OQW+NlaJORVCfVCS5nVuZ88jJgX6/6Ux+qJO1\nGdjsNghGvCKeiViJ+75ji1AFNamAR3JjWoHgSEzvXf3ImV44ISJxDm7cFnHd\nIx0uc/Cjl3BP0jvyyKCF/iPgS/cwCk+d7RLl0RQJVCwhyngDzmZ8/eAbUmzN\nP6p8\r\n=D4GS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"30d2dc59ec3530f0f21233e5b8e93c990a4a2776","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"7.0.0-canary.a6ac8f629.0","@material/theme":"7.0.0-canary.a6ac8f629.0","@material/feature-targeting":"7.0.0-canary.a6ac8f629.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.a6ac8f629.0_1592256639809_0.6949997524558835","host":"s3://npm-registry-packages"}},"7.0.0-canary.9833dc287.0":{"name":"@material/shape","version":"7.0.0-canary.9833dc287.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.9833dc287.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cf0c138807439d89f19ecdded38b58c776323af0","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.9833dc287.0.tgz","fileCount":13,"integrity":"sha512-0mdEUHoR2p+yzdgQDQFiIE3kYjzt7cTWm56qSuguqc++T0JLw1mgbuGXgWDOHSrOclAYqRVTwEKi6UOvslbBlQ==","signatures":[{"sig":"MEQCIFEgJ/Psj/0fIb3/X0og3lAeTe0Ke6+7xyoV7IccyrzCAiAwEKxXwhIoV6Z6cqyZ4sqM1Pqmls9L4Foif7jeX5EsMw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24096,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6SJACRA9TVsSAnZWagAAglcP/3bDX8c1IYq5VeRbnXfm\nse3dyUX/gJ4x+ysGX+1hjXCWp5idCFY9SIFN2JQXQ5+zLbPj6j9APJXCqjcl\nC2Tg1ugURnMnr/cFfaQN3LPgaS1A5JWHod0L76PEVSs11TyxM4LyBq9WsYmd\nE2KYDTxW9b1F95w3rNCBOz5j6OD7h3S2ePCtBGe9XJn4Ay1Mtj/k2CpLNQxP\n4mkIjn0QCud7zQaZD+UcnayxpdxLuhKWuUOrcTU3h4ES+K3Kx4PPsYORaPb2\nluAocfzFFWdiGMnz4zVlAYnVW9hYpl2PlltBlZAOIQpjM5z0KXcgUY90/URy\ncQAzxv6eTuRKyV0ZRDkBbD2X97wvWi/+7D1DGlntvexSE1hPg+7Qn3C2NGzV\n7Z3H6fTIXcyxNe6iVsHj88G+r+326PSmk6lbLccdeLkd6+JOEsI8VEGqKREU\nPgYBTocekx4qV5LWq5hoNlm7bz/tEFH3up1Uyr9eIZ/IiT9Rlva6M4BDFmzI\nqnXfsxhO8zsJhR22ZtM/3hueRC+felSWbq1FD4k6r+WZjAAk9wfPYrqDpROW\nVKhW5FhKzJX3o+/yxu3HKFKS0OcPL/GDxg3zjQoJlZvxL0bL9NtOSRiZp0oS\nrG29gheBqd+VHecdMAiZu7t1SK0HSZDZwaeNzr7pdehkJJL5qf+OP395HA0p\nYBzW\r\n=ISMW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"6852334e45da838c4140c1aadc974a39d80a83b3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"7.0.0-canary.9833dc287.0","@material/theme":"7.0.0-canary.9833dc287.0","@material/feature-targeting":"7.0.0-canary.9833dc287.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.9833dc287.0_1592336960042_0.46746175795025957","host":"s3://npm-registry-packages"}},"7.0.0-canary.3aa33998e.0":{"name":"@material/shape","version":"7.0.0-canary.3aa33998e.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.3aa33998e.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a56d9185ba9b0f1e5f63bfad881e27bfbbb22b49","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.3aa33998e.0.tgz","fileCount":13,"integrity":"sha512-de0h25cFFQMCXF2Mux9Pvwqe6YqmNtUSupgdzL3Sczv8yVwqMKrKzAQTI+eY9X7cGeGG+0JRktH3IaGFnEc6zg==","signatures":[{"sig":"MEUCIE5VOpJvVsrpk+M5BJWI25V6uxSKwfx6pqyX2X3akU/kAiEAsD7X+YedE1u7ypRpdksc4hxGpbP5q4k7ZKCT+rv6mIc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24096,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6Sm6CRA9TVsSAnZWagAAdk8P/0MpK8WdCs/t1tpgtRAJ\n65M6bGXXf+OFTHZbXWD8g8QVzqnW6LGLI2lsM4drFTzNJhmHmIyWcR73MLNl\nDn0tFbKqZdEoOp+7F6p7hjTfNKL8pxJ7bXXzGD7duYqCxU91PeWdLuiFxXpX\nx4L+ugsTt1R5K+GXLL9A4Y6VWtu7lv6XQ3rpAApuEiSLLBusmyjY2gaDARIh\ns32yns8RUmclpqS4FVmgbpJFIaSaMjObbY7QGn36s5eRfAgjHBm4wX401+0u\nMqBhFDXZdz2+ECnoASG8sx5NfTSyzxox3KG3DzVSbTqi9TGEHQ0Syd/XO99l\n9rRHs4Qf+os/JtcoQRw72+tobqJq5Ekeh4M712oZVNFKZLRDPYxHO9G42AoM\n+PVB4EgKZ+byfib83SDFfKEpcdSHyE/+0C8+hOdF0De+l7VKEwCcyZVoS1cb\nMuHH/bBRQMiaJkMp4qmoB+NR2v0VZxePFobZdn/6dhoKKQoqqWSMkqoNvTIc\nOotK1l7UiWkZXBFGIE/I23LGyhEKkAkeTIZf/WFRSgCrvjawozbdXw6NhzFw\ny4Ya+CVtmFaqfc6xN5TUibaQoVoOGVH/zPlzGXmwD+nE+LeSxJkA/zQGsM1n\nDgv/VzqzPrHsFQzVXGBPxLJdNXv1Uv7j0RzMLFFSj4L+TXqfKjQHpqh0yrDS\nxWb/\r\n=v9WO\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"20873613db8172781d25b42fda84ee1fecd88558","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"7.0.0-canary.3aa33998e.0","@material/theme":"7.0.0-canary.3aa33998e.0","@material/feature-targeting":"7.0.0-canary.3aa33998e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.3aa33998e.0_1592338874372_0.7351649335182942","host":"s3://npm-registry-packages"}},"7.0.0-canary.d2b54d183.0":{"name":"@material/shape","version":"7.0.0-canary.d2b54d183.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.d2b54d183.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"816416e43c8bc66144501441b65aa53175d2f66b","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.d2b54d183.0.tgz","fileCount":13,"integrity":"sha512-KasD1n018L6PesKISRc3+EdHBUohd7xZD0voGg3LeX+w5p28c8XeBHzmrhB1IhO65G7jaVKxufQQr4CJPWDQgA==","signatures":[{"sig":"MEYCIQCBHDVDEZHSTZutmLWXdx0rT4f4nRYxKbNIAnGuELnDbgIhAPAWa5CmVQGSbZbn94NxRuizE/oZZT5yqSyWDPa1luf5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24096,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6sA9CRA9TVsSAnZWagAArrcP/3nSkajap4Mua+JzNLan\nbz1uGoNE4dfOLjZIfVwzexIzvK2cj0X13fMFGtz8W2hbvyn/RtrPaXSAdoW8\nUkBfpsFdRe2NWx3K5CiDCjy9P1s/h5R8YT1bX6lii327P/f8xXf/DxTJK6j6\nRbZFp3Ul7fmXKvFUEhOPTkAvvfJae+5oG1CP8FC9o/yW/JqrIPx+bEBtGNmV\nA6G2X5ZWUESSf4JhqdDkUFyLjhagx5gJ7kdTTThWmklKlzbPVGkCAYBULAzz\nTqg96385BhtUOBqIxfrcgcKFEwWSqaoIy5zR/8eKB5uAP6MBZHkLmXz+4D/G\njg4bQiPj3vpeOVqzp2AW90xkusrUwIP0hBJy04asr7H09gos+u4r9MM7C+0s\nxcdPQUkxXnUG+0IIJKcZAIphrWG+a+KGUB+Lfk3NlPBEwOsFRCdZm0fo+8o3\nIrnceN4y+Rq7wvZ0NSRqCJn58gNMxZXZkSblNYJ+UO40wWvWKdJzvifCa7F7\nUSQMsX9BAYzh/9XZYoKmxMP4ctHK1WgwrRVfxVdgbBqbogVqL0tHnPB4jzDF\nIG8QE4c6UkWEUW+l0OJJeH1ZAN7UJoaD5vrNLi2o6DSCIZ1UT+yVuYUY3jKP\n8ZJggBSSaU/kjChM5MivVlZLHT7BNDkT4m2Z7sHJLOxzmllxVVoZnoWQ/fzj\ndqFq\r\n=reWS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"2941697c8abef0c194a923cf548ee231dc67a2c9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"7.0.0-canary.d2b54d183.0","@material/theme":"7.0.0-canary.d2b54d183.0","@material/feature-targeting":"7.0.0-canary.d2b54d183.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.d2b54d183.0_1592442941034_0.7207350040547673","host":"s3://npm-registry-packages"}},"7.0.0-canary.f2a488e95.0":{"name":"@material/shape","version":"7.0.0-canary.f2a488e95.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.f2a488e95.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"29d711c8da2668700a35f8e9c88ed71e64a7de50","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.f2a488e95.0.tgz","fileCount":13,"integrity":"sha512-mnLwZtBtN36jK7aEqf5DL/qrYd/kfDPhxkc4Tx1W3buiA8guc+GqfUyClDnp/ZjXKWLQBYAN5IqzOgi/onZWXQ==","signatures":[{"sig":"MEYCIQC7qkXKt+W/752/Bky1NWtBK4hpI+HXIFCTn2CZNn6NTwIhAM001GQ9UIJ+LItzftev/Bd57kmCxeuHNR/ftj7sqYVq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24301,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe64JuCRA9TVsSAnZWagAAp/IP/2ewHL7ftg5oJX99317Z\nJHNntXKnR1hsKsz42FJtKuzRPbvRPOzND5UYC+c/WWM1lSHNAIGdbRPy+31Y\nbE/ZMJBZzg5yEEb+05i1oY5O3nRzaUflpf6ES9NMJWgKK0GfxlOLPdXinaat\njnCr82+ukERY/5fNAJCdbTnxwUI6ZEqg90GCpejHF0nulky0+nAe9bsgBk8H\nW8yvfjdgv/wM5zWVP+5cWu+KoYe+G2A/UHB6tXo1q0nMpUgGFM0ze5TzaCWw\nvBOIb5unXjUXv7Uv81jCxD54mp7mFr/DDds0ZH11egbWxqrjGZVSpvle8z/T\ngkuoAfvCGposwpNVBLhCG1vB7V8FOwIpVFX4Z2QKzAW7srWV87C14Scjbvih\nvgb6AHQA4mliHOL+3HQV7fZOCnat+UCaM0hmAc1gHckr6XKrgFPXQKPd94Ge\nEL5476KoWD4FS4UCtXcGalCvLEOIDqPYP1DqW1+af99ATIrXIWJG6G5NLB0V\n1IyIUSH0vVspo71ZZvtEuklWWJbMdQFcgdmqnFJCzw/yZn5IrNLkCySrzI2z\n3wMmSgn4cTJEWgKJANzw3KWKGeshgjK4YDkkyXigAloHkEwA/vnRhqa6XWlb\n1x5ZHODbvo4gXZFnE6Y8kxDfSpka4h/OiyVMZpWDLWkK4qnIJJykfhEGaVEq\nj3pg\r\n=QP/T\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"bd7f6aafa23ab94aa2f862ece45e1775f1895b88","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"7.0.0-canary.f2a488e95.0","@material/theme":"7.0.0-canary.f2a488e95.0","@material/feature-targeting":"7.0.0-canary.f2a488e95.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.f2a488e95.0_1592492653602_0.8259264803685098","host":"s3://npm-registry-packages"}},"7.0.0-canary.bd8d1aafa.0":{"name":"@material/shape","version":"7.0.0-canary.bd8d1aafa.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.bd8d1aafa.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"af387f474e783eee873a17643ecb858ad6250eda","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.bd8d1aafa.0.tgz","fileCount":13,"integrity":"sha512-5bRzpRB12c7Wv1aUupSGX/6Jfqv9JvWN9jDJoJ0nmE1wIhh2cj9czx5J1eAOd0yOBt1WqtvqlhstleGybHcyoA==","signatures":[{"sig":"MEUCIQCv4MT0SJD831qrU4MZjIpwa7CHm0VAQGOPo4VzDXD4TwIgd8MgyywEYnXa4sFXlzf7Z8zly0GnRttwKtDDetUpmy0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24301,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe64VHCRA9TVsSAnZWagAA/N4P+gI8jWK8fMBQbDIJOLXH\nfIxzId7wQN7ZEiAP2tbGl837JhcKciDgChUGpYwGMqQWQ1AkS+OhOzY0t6dY\naGd8zgbtbZKgSm+M+ilT9x6vdefhzsfvtZoc9KYmo0syy/1SVHShclRsi6ff\njW+FycWK3UEKnjYafWRssfSpvYvoQYaAhtpUwQoewzN3m/9x6DU91UdyNe+x\nMSVlQnUKN+ZpZH96294rZWQGEBta9h/L8fuR4ZlQU7XsTxZ8B5PK2ymco6qW\no0kjOET+iZH4bFtGiQXotWK8Auc+doLJmkiXFH3sJaSX5jXNUMvH0RjI5Aqb\n2EBORiARSbZV5pe+NWstK/SKPr4vMaZkb7M5zsf2xRk6LfvtzO8dUrEsHFhB\nBznIybth56lJGD72XrsBoEt4iJJSae4DDlFXbJfqvY2bYmsO2ZsgOORKp6VE\nyDGM9O+K4YTiNZFvhPDrslD2rRJlYW4OU3IAuajG8pSRh1X0byx5/yB/4Vfp\nsir0IxBbhxjQzIcph5OAtWi89+V2xBr0mzOTeLIPX/otTRdE8XGsfzi0n4e2\nDCpEfdBhXNOiVDFsilifMy7LUl7Vfe0oEljjtkq3viQAv7obckrc+1r7pENv\nk9FXOqPXuAQq8C/tMUPArTAbtWvaIqrTuVaIckSZm236FXG7dCJEdsj+sLWw\nYFAV\r\n=EFHL\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"05dd265c139c96ecaacbac16c7128e4a851b00f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"7.0.0-canary.bd8d1aafa.0","@material/theme":"7.0.0-canary.bd8d1aafa.0","@material/feature-targeting":"7.0.0-canary.bd8d1aafa.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.bd8d1aafa.0_1592493382913_0.5944340318726331","host":"s3://npm-registry-packages"}},"7.0.0-canary.1321eb968.0":{"name":"@material/shape","version":"7.0.0-canary.1321eb968.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.1321eb968.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3480de76aecfea69359049cb646b539f9b34709f","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.1321eb968.0.tgz","fileCount":13,"integrity":"sha512-zLohcuwxOLHfJDUz48fRIdA0dgFglhz4TpZGxqzsBU7Q8G772C02HFkVKjztGRdTxsKVumBJVw2ajpI5xPzmzg==","signatures":[{"sig":"MEQCIEtpKYS7qqX+O/OMSwuhYcYWWQa0sLrVmq3yAGimaSJnAiBmh73MT48pLqfET5uGevJ4viG5TaEfiHvFKHqS43mfaw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24301,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7RA2CRA9TVsSAnZWagAAHW8QAIHOcKIQq60QgzbGiqlP\nnlhIGrDt7iOkFTj1WQptsdxx+0LhKDRMUhVZ5RthXrc6mU15qjYbtZBYO5Yn\nmOSp8//+ar3PSpUS16i7vRsUDOcjr8Kt75Fuy4GV11TYNfLXSdOGG8dTXQRX\nnn3/ycPeHnj0JORSoXiwsy129mebhkkz2KaYal+5gBXb7dQx0PdB6mYNwD0H\njNfRRULmS/okG0DiapCmS6si1ZT8rHFbnnHL23PydbjPUVqpRimScQeV8CSq\ni8iDiyER11+k0cjgxBtMPVJe1dj0qP5ubwlDQwTVjgC+EHMj+b6O31saumQ+\nae+BnpOkIn402hCbBCBeeuPYnFuHh26kIiQlATMIN3pZ/sX/kx9DvFaWGO8z\njGAYck6WvkoKM6cYHUA1KhqGcYwHmbeRJBF6LhxcZCV//S5KtshA6rzk7M8F\nFMrN3nvE+eGHqEF20Jo4t3sGhy92kAdbhbl/8tw8DbNNLruB5ysGekDez6xi\nqMDQf7SREViOTSLmC8AVRATTodDtOfFJDtE3jzqnZF20tcFZNVB+plM97ddy\n/xB++U6Vj0hlwpyy4mut0DlqLMOFPwE4z01EP1mu2pUvuaRY58Jhub6v/lJQ\n0/PAycbc6jKMJUFaiXCEt9WZsHsbPC+KRNF0BX9Q0riAkjBn66OfdlHAZ/eV\nZ/eR\r\n=zbpA\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"41c074a3370c2ff9b4dd6af27f2403d15cbf2832","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"7.0.0-canary.1321eb968.0","@material/theme":"7.0.0-canary.1321eb968.0","@material/feature-targeting":"7.0.0-canary.1321eb968.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.1321eb968.0_1592594485762_0.8243683106810609","host":"s3://npm-registry-packages"}},"7.0.0-canary.db5cc0382.0":{"name":"@material/shape","version":"7.0.0-canary.db5cc0382.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.db5cc0382.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"78b86d44a03ef6890409e0d62cc21d02c0d4d652","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.db5cc0382.0.tgz","fileCount":13,"integrity":"sha512-hf3T2BGYxw0UDUZQCgowoXKKuBl3Ds0+L1epauDh+I3ETRD1gEx1UMXFII2zyhcy0tZEWDz4xcu3uCtKvgHO+g==","signatures":[{"sig":"MEUCICLhUeze+2ZAo9kmrbscGs8My63FvyZK1FAn5vL2m1MPAiEApgk7EwkFBhJpSymSNQU1UxiGYFu8pKnuIDqtj0xg9kk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24301,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7RGtCRA9TVsSAnZWagAAPu4P/0w15dRwhrZTpPM50TTc\nw5de6ertRJChU1enYBzzdVjVDKt5PSdIsU9XTth0LqNMpT93+7F14GK/IZqR\nBTVDHl54+YUlJ9kjJ1UsVuqNZTNQGkRiIjsbeZk7wVWjmv7epeS0zsc6/utW\ncY7388OUKmf2glsFyM7emFgLRu/P1UFRR4uimxQAPC5leFJHB+f5Qi2BTFim\n8W7F3xwEAb0HzwgbfO3UsCvjA0v37wVxTIry80vSkoEf+3l2mQP03XtmiBh1\n1YOBPeEMHqWt56e693w4CN8RcTg8Avp2M0eeFRjo5Hql9HdFyNw3utrlVgEw\n57GmGrEpB4PtInNhjVkEKQBIyK+Il0kLX9TYkQk58xneMCkO8uF4HgHUfcg6\nFLkB9cu879otjAIxxmgpYztrfhNbm3teEr9kftg2uOPZJ9MPGg73oUm6+Tpv\nmMsyOqN15H/cERegAwT5g1bnk3YzXo+3TXcWc91FLgO4GcaBqrgyWZXykUBH\nEHhZHAGkssIxsilqkIZO87HHFVnZ8SSOLqwJoH9HWqHLM9KaZxwlMH27snlR\nJW65Bk7CS9FNOmDDfKJz97ttbO/zwRpYKePVKXTyIedTdwgF7FQIPwNNkaJe\npErCbY/LrVzxPcMMXCIwZdqzYzfFroR1nUMmd7qGQlL1st0eW/k/cPtzLDkn\ncnVM\r\n=g5Or\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"698cb6184d0d6e6823147f7d050c39efe9b8e3b2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"7.0.0-canary.db5cc0382.0","@material/theme":"7.0.0-canary.db5cc0382.0","@material/feature-targeting":"7.0.0-canary.db5cc0382.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.db5cc0382.0_1592594861054_0.5421743966874712","host":"s3://npm-registry-packages"}},"7.0.0-canary.6ac9bf031.0":{"name":"@material/shape","version":"7.0.0-canary.6ac9bf031.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.6ac9bf031.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4d019671147c1f75e5282805661ea9f9f5674b17","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.6ac9bf031.0.tgz","fileCount":13,"integrity":"sha512-VjUySv+gZpIq0sqrwZV4AKBY4pUokOUPUKLhv2GpF/pK7re9esmVKvneikmpdVherCGXj6acCxZHUYVBk/d/jA==","signatures":[{"sig":"MEQCIGWyJN/Z6xpNnT7HVqsDnH90ak2L9D/plB6K8dttVMeeAiBwTfZdiKWqze1rgOThcAZP/fX/ZQq7p6Kvo9BF1kcZiQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24301,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7RaFCRA9TVsSAnZWagAAM3oP/08SvM7+BaiYgjrg0iF5\n1oXEVjc7g/6bZcr56ioSTcrdLg6Yh/x5PA+sn34fedU7pcX6nHe/N/zGWwJ/\nKBu4II2laamuSES2e8eGw6dtYbqIpq0VPQFrDq09mkO47IABXzquONf4qUGk\nAW5ZqFdmVJv8WidN9v1C41ITHeS3t+/AmMFuxIl0GQXFdHRkXwtqPoN/cgvD\nkuk7oU0l3quy4RQ9xuFoMFp4xAw7fKPgXZrkqf6dL99iH66m7tHRy5mknDqC\nKRtCN0MgLMACyldeEJB3RAFxLDRU2aNUX8eiQtscZxEkyPrkYV/SL2BvuVfa\n5eKR1C+hNj36X+L/ZSKgx14jkqJFdWmJY0gum1dpH45rujyjxGRr82bAJjJN\n6V9U+YZU2lQYBy1gHSR3EqF+Z626iqpZbvrNrbVW1F7V+1kGBYQtYmEXD2Z0\ni/6iiwKMXT3mIW4sMnz4ngAa5CurOEsfVMLXzOX+4jGv2n7stbXJjEvr67Tb\nkX+PIH7XwhiVtyIEK+8g2X2GKVNi9k/E5W6Y9R2lOt14YQM8k8vF37Q1Ha/L\nj5DCLSamqGhlUJANCgxjZXcQTexJs00zySwJSmwTd9MTiB/Yb9bPJPb89Dud\nLXdy4MQ2IR5OF+QmHOcBrq+DEbuI02WJEhj6cP9Xz6B+VoXK5dIPjcH750K6\n/Z07\r\n=f6OV\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"e80b52100d3a9ae7653579d78250cf18752ea92f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"7.0.0-canary.6ac9bf031.0","@material/theme":"7.0.0-canary.6ac9bf031.0","@material/feature-targeting":"7.0.0-canary.6ac9bf031.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.6ac9bf031.0_1592596099268_0.863132318894337","host":"s3://npm-registry-packages"}},"7.0.0-canary.c21b5c367.0":{"name":"@material/shape","version":"7.0.0-canary.c21b5c367.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.c21b5c367.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b45f71ebc2ab249d9ac585b0c535c4313f6c0831","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.c21b5c367.0.tgz","fileCount":13,"integrity":"sha512-Lo4zBsm90xSlya3Y6+t28kqjpeDulEarDQKDXX/vtjkVQhtNnQgkOSb+SHRnguYMIprIWQO5NBj0SWLOf6WMow==","signatures":[{"sig":"MEQCID9/ZqNiH7XwoUJTbQlXFxvWCMuzbsmULAmJTbsB5pZxAiAV8zhEQ4+3wUFDorszzJ3LRtqywCWv6QBxM1s5BxyGEQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24301,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7Ru4CRA9TVsSAnZWagAAyokP/1FFddW9dhG+0NCxfHKy\nTOneeZNViODHLGLqHXJlPo/wOqGYimXWfVILiKBUpIVLM0GGGBIQcRLtyR0q\nFXdKEACoa6I8iCDUCl3WmEBPjRaASujIR0vgCLxiWcGmrQikOGAgCGEIImyp\n3klupwfabNewNiAuNrifu5hpcpYu7N1/S22mNhmqh+zRy4zJiuxsnRrxjnxS\nszIqdvBAAUNBXkDdsxK6Tc+EzvTrrB+hq69NhBBKmSrk6Hw74JGT4Ltm1k2q\npYSzXGthqKXF4stwLavtwKSSh6N3SoJlNTQwzbXsGIulsDRKuvyGP/M6U1r7\nB7ArkAuWNrEA5wdbzz98z9L3x/8d2nq+WFJ0KDj+6GgejHjPxY+sz6AzlpEl\ncxQBRkc3S42Km9yg6ZCP9nI6YWCnmOyk5mwmcFYwSYEUQmzcA2QeZJbHJFiO\nSCrEq1KigbUpw58vGB7oOFy0Adq8fF9/UVhPfest1qfmpZY6IvJDnPkrF3QX\nM+zi6y4nOZLTurgKZsaDQ66aQGviCW/UiCUMgPVfJx7JlaVL13MwHCWAqxch\ndp6BOzD/Qw86EwhLu8fcQUadwuU47Nl6KzEAU9WgS2SwRxQXxWqpUYRTRODw\ny/3DOZYQguJ5AbOZsW7a3IzLqr1ALEfpH1y9hvuJ1J9bTwqgEL81EWzI+emL\nVLPF\r\n=jW0z\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"08c734c10ebecdcec22cb27e38dd9d3941fbe847","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"7.0.0-canary.c21b5c367.0","@material/theme":"7.0.0-canary.c21b5c367.0","@material/feature-targeting":"7.0.0-canary.c21b5c367.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.c21b5c367.0_1592597432019_0.2692932732559339","host":"s3://npm-registry-packages"}},"7.0.0-canary.bfdd7fd39.0":{"name":"@material/shape","version":"7.0.0-canary.bfdd7fd39.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.bfdd7fd39.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fb44d89af7406418555d17a6cf16dc741570a1f3","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.bfdd7fd39.0.tgz","fileCount":13,"integrity":"sha512-3H+2QJVrw02YdQ7qPkrMDes2ADsLFxkyev7s3Pp7imsM4WCOFrllGwnUHGSq9U//U8qdb59Lg1cQw8104SMhXQ==","signatures":[{"sig":"MEQCICLqePjrD7fhk0bDxWOrLYmvtDzt9Do1s9NTASvKeItdAiBuLtfltUARQCccyuqZ/pp2O0hz3yIGUXraQib69P2W3A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24301,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7R3pCRA9TVsSAnZWagAA/yYQAJlRh3M60UYbjSLcHakP\nAF4ijKrPNR3cxyca3B/cm2iwwulvW1aFqtpfrihZM7BEUiyFeuPlfxsnkZOx\nq8NzIs4MFFLMyXR3gRRETKme+4JWU6XN8MNO5y2hvMQXMhN5YkapgS/v4idH\nVGHpMZFOAYN3lrE9YDQzuQ9B7SvFnb5vMHqpZmWM5ocfwmQ+umLMKUDfQ+0V\nAAZ40ZOIRqryvfhEJCXAvW7KfiYGADUvS3o6CB0E8q2KwCIVSn224zmpRLfN\nk26cKQgcQOfL32KXexhHOZYl/WjXhEj5TvnRvg36M1JZX3TLashOMbX9eTnx\n3YAth7RGwGeY6gotTQIj3gWMmO0jR46snyWJ4S9DdoFLs4l1tSMBNZpSzMHY\nDlBCZuhb8T89V4TB1tIdOyT1ZsaLCcnb6wX29t7ashxaMNRFuRANLyVL6XEE\nzRfs1ziiMyQdOtxlvjzivlBBu2630qnfoEKl3trg0pQy1yzmatOeSNbY0jns\nyc5wY2h7snFVW4Szpuh0yhZaL1LLMj++m9cAKbqZxlcu5fIKWhAXlPPK/3Lk\nFXJbkdhHviuiFa9h0JEaad4BTVhNxKsZvjBwY1ottLcDo2RpbfnMK15zhYZR\nhZiQSOdJqtQf2KW+idEvWEbNjca5D+gcplK+bfL+KT/Fieddn3I6BFeVqFbD\n/QKd\r\n=bNJ2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"b9b865bcb7a8ad91c21f4b1cc433f6a49dc627a2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"7.0.0-canary.bfdd7fd39.0","@material/theme":"7.0.0-canary.bfdd7fd39.0","@material/feature-targeting":"7.0.0-canary.bfdd7fd39.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.bfdd7fd39.0_1592597993013_0.09073525019804651","host":"s3://npm-registry-packages"}},"7.0.0-canary.10b505785.0":{"name":"@material/shape","version":"7.0.0-canary.10b505785.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.10b505785.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d97c2e3f6776b7891144e4a65f5819c7828321c3","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.10b505785.0.tgz","fileCount":13,"integrity":"sha512-oZykEYczio7Ylcd6Wwr/3BjUH6A+XONlOaMBtBuKScgMKUZhLTnaOF3CMITyn2lG/Cu/cDkSyOztD9jHPxyGaw==","signatures":[{"sig":"MEYCIQCWtdq6PyHEJF2vP1lKDVvmSIUumEIdz4Ja67QHf3iKCgIhAKixDPx2H9LpLf08RyI6PZcowlsWb5vyCDIfCouIQRt8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24301,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7R5BCRA9TVsSAnZWagAALhIP/AjGJY2QWkCsaTOA0Yl/\n4GZ+lt5hNAEV1gmCR/2T+k75sg1LXiZC8h5bdl6ulN9CSJRWlFYSqss05cae\nQszsn5FQwQNoe3mXOslJ36NkziMQqhvoIVqWrVsfTsNRMp7s8ru55KDfqPLZ\no79R9gcyOlLnvoovRC/cma4Iw4EzLVN1bMSOnCQ0RLs+NTIqTJUotr9bpnxo\nytMer0rH0vjUF1wBJF7BOJ4KFL4/Lxi2WeVy4bI81HmO/JOVpeYXoon9Ldth\nx93HCAa5mt11fLjyl1jqCSJYnnHWvv2Xcr+tyYwPFZawaiOrio5toQzlgVGi\nrEr7+od4ojBQ72XdqIE+bx/kN28uZMjTysSVKsUZQ6sirmw4a/4RXSgrdva4\nYiWO338Wnj2+uzbEuJdL6qqIOvLidNdkB+YwKIOXXc5IiiGMTJ6da8paPn2f\nfSCUJQ7r6CNVhgpgAUkPeVXuDFJyXdUVlF61thPYsFhjho19iiECzzWjE3g4\nuZ2f+Wi2ek6zqyqeLm6XRX9UiqufEs1BMA2n8qM45CNVw09X6Sv5hjf2O+uH\nMZfcF0hrP0GnKiD03rJdaKZsESqZq0Dj5LrcgkIfgKT3UkiwmHZQXtA33wJ4\n5nm50Kdw5+Pg1cmSDI0j6hlKEH7jxaO7QiYWIDmQ/0ValQCN+c0M1ttbAbSW\nRACi\r\n=d3tk\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"ed5923edcb43bfccd9d40cf56cd605eeaab00d1c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"7.0.0-canary.10b505785.0","@material/theme":"7.0.0-canary.10b505785.0","@material/feature-targeting":"7.0.0-canary.10b505785.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.10b505785.0_1592598080801_0.8325737163175762","host":"s3://npm-registry-packages"}},"7.0.0-canary.6483d3f44.0":{"name":"@material/shape","version":"7.0.0-canary.6483d3f44.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.6483d3f44.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0f63be68188a45b0945b23a98bedbde22a33e830","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.6483d3f44.0.tgz","fileCount":13,"integrity":"sha512-WlICC61bAgEBSMjdue5f0KaWZK+/+IFWqWv6SvU30Gu7fQKl5/6oyldpFVNG2TkMpq556yYiLaUdpMrPvtb0/Q==","signatures":[{"sig":"MEYCIQCDCWxwwen67VEVtlFgecDzzIBnHU1gvaxc0FYd/ZQIGgIhAL738vTIw5T369FFmhsV2x2S/HPwkQ19DIQf31kFADiQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24301,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7SIMCRA9TVsSAnZWagAABCsQAJ9NdC2y0xiq48ZKYHNR\n165+qWl/9LC+jWiumvGU73K2nlZiWBzZT4AynNweUbeVaQaHpXnPMSewGVL7\nlZcLxWr5omditazGTX1pqfFk/tjCGbw/FBQmJNHcFFWJ4ekwLXNVqGQs1Bz5\nEquou0FmDgFJpVHBwbNkn67T5CGWKFFd69amCFAs6NAUhIXHIa6CbAn9ubCe\nKlH/TEqa+CkdKq/Qk2QhgViFAMXggPxKGJFnrjpMZkBhIY3UV+1+B2I3spvN\nQMnV9JxW4urPTwcNbkTg4v69FRCvx/mtv66Y+YcDAY9o16PCHSsoNSizsDiT\n8TA0yj4lEODCzBSRHGt58hnSy2WkOqqyXY2KIytkUEzztIXhe/W+3EQZHN5c\nzEThp6h0oT6q/YKzpfk9NXirIjngCV4s1bvsOn/ph48WlDFFiHNqdDd+0cdi\nM5yRmMs3pJNYN++lYEFASHBfEIHJgw96Z5e1zHSV0y3A7UboqonkYrmRlKSR\nIhxRLigLsERUN21WlatZ73mJiofMBWqjCTBaimUSVDRwHEI/JdUftS97BFG2\nU/3lsejAQRtTt9+2FPHU3UcSmVxGebWpoIYGghbGnNsvHXtth4ctGYC1lUB6\nUJbeo7q+qpegmrmFvMg4+r4y5kJbDb0Wat/mlefY3U/ncFFF8kanQAxuJcuM\n6SD4\r\n=FhAW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"5c831da018408423d31c9c4813c507ca591a010f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"7.0.0-canary.6483d3f44.0","@material/theme":"7.0.0-canary.6483d3f44.0","@material/feature-targeting":"7.0.0-canary.6483d3f44.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.6483d3f44.0_1592599052160_0.7276431511198993","host":"s3://npm-registry-packages"}},"7.0.0-canary.30a74e921.0":{"name":"@material/shape","version":"7.0.0-canary.30a74e921.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.30a74e921.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"71d35335e085f7e34d25dccbda05c8f0e5a6d5e9","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.30a74e921.0.tgz","fileCount":13,"integrity":"sha512-gYjHkRH0/wcuumyv9kixRfWBZ5VVwuQk2YmW0Yn2L14bSxCitAGW/1H9vixYcp/MAmuw/N4VhNaz0Q8MoWYeZg==","signatures":[{"sig":"MEUCIQC9Sy5ljIwt8RTDACCEaVOuFgOlo+yLybMmYVXzDI3SkAIgW7LM/cwPh0ZK9K6H58bKKqfPYVqO08P58pMUrAJhoCQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24301,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7SKWCRA9TVsSAnZWagAAZjsP/iHoTNIn63in/0ZsZ6Ru\n3ao8TDMV+Osox5cqsLD9npLgOXMzo+3GUgvt8BcNv+BM4EtHUou6+ApGPLhw\n+/6rf7kOvBR3LmJdP2aH7dLNdrCmjz3eaP0ZswyeCKu5ATtVKRW1N7JpjgSL\nkno5OendhnUTSc2UL9Ti4iKOBboD+CWCwErD9WqpKzd/3H+Zt8e98KePWtg/\nmA73Npr50Ptu1SSPZsPKHKvjh6AUzHM89pKTKyokiDQJTISnfHphQoDYCdQ0\neVdgjZ9QPOe2MgzWlSQaXJN9Geuw7LHuNXyUaQxdXJxJct2l+Uwzu0SkRzsX\nghc/ntAVBen6nlQlH2TXLI2/24xAEwjbWs2uv8WGMyZOK/8IdHyVAgj3rqyx\nQwBybDyiqIbq46sJXIf3btpdQx8wynI2aP8p+OqYbLRFpzruAW3AvQHMvrad\n5EC9VcMD03S+VortAAyo9EoaCgpPa++9SUNeuI1e7qL6J3Eh8PMRR3xRfYs0\nxIIKGpnD9b7NS2hq8AOy2ikTwUHc/uDqB3WkRjTRjBfsAGCSkvpNKz+nVQUy\nN0LqR9EchkcGtBUUzpZCSDxbpR1QD6OucV30yg50LzRm/41JcpUhpbZCXuIT\naqpmBbVZxhRWTsxTzRVOrMPTjjCDaYgmz0bUYCEAvifKj3AdYuprhOPctehe\nr0d7\r\n=+MAV\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"5f983e004147b05efcae5aac51dc16aea4a18a8b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"7.0.0-canary.30a74e921.0","@material/theme":"7.0.0-canary.30a74e921.0","@material/feature-targeting":"7.0.0-canary.30a74e921.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.30a74e921.0_1592599190207_0.3957983582821323","host":"s3://npm-registry-packages"}},"7.0.0-canary.c20727498.0":{"name":"@material/shape","version":"7.0.0-canary.c20727498.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.c20727498.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bf01b1a8ee14425e107969805fc5544d7ff27663","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.c20727498.0.tgz","fileCount":13,"integrity":"sha512-oFZA9UIgPwlM1qjhn6ZJlUZb+utqsx8Tu439JOvKyy2YpPhqZWPsA4dyzFqGy53EFou5tZkIJsSOY+ibE1gTJg==","signatures":[{"sig":"MEUCIQCxIMZlPk4CXuEPfsZTtOMKFuSM9oBapRp241mb7bb1wAIgHKUCgcyGCNhG3CjfldxTDVTAMK5GxTinkhPO8XttJ54=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24301,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7SNBCRA9TVsSAnZWagAAVjwP/1hk6U+GWePNuwxqlQBu\n5vK2FVAYctkzMa4s0KOV+QgmLPDo65B+HN5oXDjATMTTvfLpQ0AjUIbEssLy\n2pPxHBA28jWPvjwJm9xZ2yZ3+QNQGd7tf5+eBdhfstKz6ZehoX2SzaPNsXZe\n4Kb9iBSZiHB/AZnW7/MX1kz2eR+M0jalgJHFjo8ffjwLMXw7umDS4UbM0nwp\nu3243dGgvoPWPCgtMyUpyIw6hMUvzJPZ3uBm/dMZ2tQ1oQ/Q/4g6BYf+Ucbj\n0NrN/3N2mT8bPPFAw0VB+tDRyHs+Y/Qj+w0K7IkwQGWL058uRkzgIxrv6Erl\nlbYVbYikK838vJSmIUR8xM9/duWLV+l8CT1KappUn0XbDifzdqgBFTeaRh3t\n0FF33X4qAmtqMPjPj67GR64gVmO+dH7KVBN19H3zEQQwXC6NmWLtXnzXuM3R\ndF/Yrqta2PJP+cJNPUYrzLfgZ7RNwKcoupXVtKmn6WveRrIgKMo0v+iuwsNM\nZEMZ3TKJMbCjNKZXrZLMnaOT30bpKmJtVOxV7THYRAJ5Kk52zh6obgBtoGmy\nI9Xdjs3Y3pocZPis2d3TopasmpFH9wRm2WYaBN3X5GVHUw/noPSchlcAHskl\neZGkQWQ5gcAk/apzeQXcV5Ko0pF628OSMPsfah5UWEDXY3NDOLDfhw38tHyW\nrJnc\r\n=O0GB\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"f9ac75746f7899d34903c19ff758bcadb9ce2d30","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"7.0.0-canary.c20727498.0","@material/theme":"7.0.0-canary.c20727498.0","@material/feature-targeting":"7.0.0-canary.c20727498.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.c20727498.0_1592599361505_0.1721796468255299","host":"s3://npm-registry-packages"}},"7.0.0-canary.4e360ae94.0":{"name":"@material/shape","version":"7.0.0-canary.4e360ae94.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.4e360ae94.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6a10aa22578a91975531ea727c8e50ae986ed6a4","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.4e360ae94.0.tgz","fileCount":13,"integrity":"sha512-GYvsng/cn2kfZoCibmrpOIqyANkAOxsE++/88Y0UceyhUtPkYLZl/V4ZPf4XRJdh/9tlLCg7hIjEM62RIhc8qQ==","signatures":[{"sig":"MEYCIQCRm1Y0rFKdaOYdo3484rjDFe+t5njWQHQDEvF5QryUMAIhAJjZmeKqhRn3m7fTYqUytuIqQMucmZ8vbssuRT7wxuGx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24301,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7SctCRA9TVsSAnZWagAAGf0P+QFMz4/hlXwT69r3x9qW\nG8NuWs+VNRIPDGT8ZkCaCMIF7L0zAL9yiUfx2mTibFkqLmbb0tYBLmnZWivq\nW13++kPCjKXAX85QvukKSBJ5arGENgHsahSDBv6K8VfUET5wYSULWlU+ER67\nYQqliH3HWRyHoMsRaWFD2HOfWadC09F1bglbTctfhDWpv/x73dkmRh+mDVf1\nZwLSXuvcfzvCWu13zvOTtl3fhoSOXMVXzBhL/OLOd54IST17E8E+zYP3cPIf\nzSV2DAv7p2hltYKgFA2CfavJ9bBKZQ3loY3CA+Fg/KvQdudi/5Zor2rm/es4\nx/RbQe6W5HzoAxmmPOtby4qOiRv9fZnooA0lqhbce35zOJ3jWcvWtHg9worR\n79pfwkUmJstQXP6c6s1a7jRMULKDmeIgIyDnS+yrISBVc1PnlAJ0vaSL5S8A\ncXsd/bjDQ/a9Y1uXy4OZaoBkaUbFa56zYA13zAIPJuIDMIcn8epsTa5gXBGl\nacrcEOMdYrS3TZai3yBoo6SGWaN0pIR7OzZ8LSLfDUTUBkM6wh1/3dkcsFQ1\nyvS7uz7tWG1v6Vyz3ksBPu7apyu7F+Y088lk6sH2hNcrIZQS2IBNP4yVhNNO\njapNK20vjVon4gxeLfwuZNTVlNjd7+tNQTZ898piytB23/IEWD4iHBK9v12K\nL1bL\r\n=CqVs\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"7bbb3adc3aa84c4095304613145fa53862e147a7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"7.0.0-canary.4e360ae94.0","@material/theme":"7.0.0-canary.4e360ae94.0","@material/feature-targeting":"7.0.0-canary.4e360ae94.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.4e360ae94.0_1592600364524_0.6509217925956674","host":"s3://npm-registry-packages"}},"7.0.0-canary.8550fa53b.0":{"name":"@material/shape","version":"7.0.0-canary.8550fa53b.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.8550fa53b.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a6f12b428e3cb28601828e6c46080b4bdbad52b2","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.8550fa53b.0.tgz","fileCount":13,"integrity":"sha512-ptPSu+w/6wLjCKk7qaltNYxs8OQ73zbnkcYynwpmhAEmzAi4m2sEbA/1SEcgkO8po4PcnvGYAchzunPuzabVUQ==","signatures":[{"sig":"MEUCIAjLmE9FtD8fdGfMGg4/QiE5bFSkHLKpKSkgwyYHeaKuAiEAnPn0YiMO6wTuv//pc9wwLfMXuCchh/l68xIdRuMcwwI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24301,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7Se+CRA9TVsSAnZWagAA+lUQAJSia//vz72yraEdruE5\nf0T853cgvzBIpB1r6UsL848Oy+lblQTgySNPwthGCK0npd/dG+mvQs9kr+aF\nNZSeqmlIGKwhma133ZfyX6o9Qrjn/zoavaI8Tws6I111JyzLE2OG7hKx4bex\nqY3KXKV1zD5ZpOsnjxiVXBlkSAyFWdSt+YpI8ECAQcuqT/Nu+5ir8938E9rD\nXCE7PCpP+PEb8leMLh2UesrHlFkEnXzvxbVqlX2CRtlc0jSCmn/YSZKeC3DQ\nz1dH0Sjf7BTvocgpBaMwV2sWauLK0xG+k1oj+ypAAYSLOBn33SCOJaQZH88K\nh8EJcx2EcRmHTWxry5tilJi7olJi4VmuzD8Qd0MSwUk/miBUneBKkiocBZOD\nKw7e42kIsU4HNM9qzncTNxSB/NFhTr9DZ6rhJEYplPiUr1vShdQ9JByaSS0T\nV0ObyvWIVNB95c1nHZpAGbE9qnsFMlEY029fBT7xBth6xlS8VXy8jgQCvjqJ\ngx+axfxp//mmw7F17N/XhvSpEDNj0nRnuBoPxCoznNIa63wE7dqgkxk57KdB\ngTtN8UkhQ5QksA+PvLF4FncgzIXJkeR4bxvj2lx9svhCE2s7oPmi2ncQz9m/\nkSuysAjZJXhqKa6tHJn2++dpBnLTOks3hmNTeiQ40tH9vxnT6DJ+urCApyKI\n9FyA\r\n=ytSA\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"9d8529cbd579dccb2470a1f19fac57883cb2a5ef","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"7.0.0-canary.8550fa53b.0","@material/theme":"7.0.0-canary.8550fa53b.0","@material/feature-targeting":"7.0.0-canary.8550fa53b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.8550fa53b.0_1592600510008_0.10402796941309278","host":"s3://npm-registry-packages"}},"7.0.0-canary.93ade142e.0":{"name":"@material/shape","version":"7.0.0-canary.93ade142e.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.93ade142e.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9907e074f6622b5a66117aeb0328524fd3786dbc","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.93ade142e.0.tgz","fileCount":13,"integrity":"sha512-oFMVfIZSdUGZZF2UTcCpdwaLTo2SCyLwJzj165cGqT1e90WCpeMEMm+iR0bIVI1Qf3qm9+aEslzms2DF3cfDdA==","signatures":[{"sig":"MEQCIEj2dzIcd74UE45zO3ealOq9UDt2fBlmU6tUx3J+iqxVAiBrU6lhXtlwdNgKGxVimg5Hu1pLZ/vjfuB3xqqRZqAlUA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24301,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7Sf9CRA9TVsSAnZWagAAQ20P+QCz0xVXBT3NYQnmgTUT\niXuP3xH8EGRvYBcNSluZhq53LfBFqqRMeZhH1vZVHjvikqLBaNpI5wQtwfTE\ny+IBbiaEdhhNs8lbjBTdJcxHl2yxH5T+/Gfy6dcbGH3d3EL6/qBsvhdCwQk+\nZGwgCVGVW4r5VjAyQNJR104LTKGvf5NuUggD0AZx4njloz89cWTjVyqEGzXn\n8aOe781Fp9//yGwh5qf44EcDO6Pty0ISL5w/r5+Wec0VdaE2ylQw4cNBGB+g\nJdsiXP0rrzY3rB5Xi3Un8GAGY53aALV/pRkcFo4/3DC3C0aCyxfvpKFXgGjr\nYldarZQvxxcTfBDJDZCdY48QfAWlW9WP4Ynuztx7BX7ztomJvikKyzhByYSq\nsKfPjKq+JAByQhS6rCtkiE7HQjacEw5ut4DaQ9qNUACICakBvzfWQZNAi9cP\nxjNJ3Zx0K4LuM9LRRFaQr+VIgs3MrTuiF+evhWohSXYGk0s6lwGZbkIk1Ijo\nGx/Vx9ioJcMTQGLi+PU2iWvBv/ds6bKMKOxdlU/tR07B+pFrVZxVUW4uVerf\nKTFwU1+/TxH/xW3jpDZl3VV2TKEL05JiDIIKgadFc3J3fm1WbbEWo0OeEZFF\nli8uYVbyhlANJZb5nI197DqhElwCeTAyv6a6TotXMqOJs4ytOtX1iFXd73J2\ntk30\r\n=II4R\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"fe392b7ba8c7033e5614eb91a20bdf2e6d7d7936","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"7.0.0-canary.93ade142e.0","@material/theme":"7.0.0-canary.93ade142e.0","@material/feature-targeting":"7.0.0-canary.93ade142e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.93ade142e.0_1592600573013_0.6616408382899093","host":"s3://npm-registry-packages"}},"7.0.0-canary.a0032f5bb.0":{"name":"@material/shape","version":"7.0.0-canary.a0032f5bb.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.a0032f5bb.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2d43e2ac19244f75c695475d896353db9cd275a6","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.a0032f5bb.0.tgz","fileCount":13,"integrity":"sha512-8OqVjKr7bXs1VNe1WEgdVdRZcJlQdVT0pD11lTDTHWn4dl+ozKfZOOj4W/c+UBS8wjxTJzM/URNbj7FS+M7jbA==","signatures":[{"sig":"MEUCIFWDxmgfuN4ipileG8EuJkEm6F0pn2fGMpJ+Yu+ZTPVbAiEA8nNmiozMLz0bpmptqVxQZfcnpJUrIF9Tk4xy9clPmqs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24301,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7S3dCRA9TVsSAnZWagAAyVIP/13RFdfWgWWzPVTZOwAi\nbzH+C7phUWaFZHb42b2JyDAcZc55ImaDAxpSpJ7kPjWgRuEqQsVHAD+eXtH1\n/nMBZ6zqAltOlq1uG/2wRHzVj4lSlCv2TjmRbJyM4ih1Jw0ZeNXuX0YpZD4k\nSp1Uq9O1WlJ+fHDbCuBkV/X+I/C8DeXCubGmajoMaaq32zmKvOiFYAWpu+lQ\n/3CU5cXRHrOcZCMVKHi9Hcyg/zOl+AUTWklXtgLmpSdk3r0jirpvRNILe2sE\n/AcJmUnc0cCom7NS1U4f5nxi/CGKPaXvTPyg/cctaf9CZvSOzii76M+iANcY\n96jLvrMWOxuYQW7wDaRVbUiwGi2rFFaN+8EEcB7sCBgSavavnvwJEY7p6NBR\nfq6zJHuKTLbl9CC1b5WaGSrx6TKSsgyyBi0nRN62erOf0RlCs5N6XdXfOFHv\n3CafRHt1b7DT/ZLisqGBIpYnseMxcTf8HIpBMc7eJXRWQY868QQ52faQxofJ\n1Ds0dZBiATCeby/Eh5kKanH66EDbp50XQAxBxgUl53Pfbz9DPclP1G/9lQYJ\nozyWfSY4XVocBRT7M0jtPVC4doyshfUvgGRHDf5z/DVqfaYtwiOypVfUrI2m\nAjO+NqYRiJA71fiXAson9duZl7iwzClTbuL5qBaRGJrcfol7r+Iwa2X3TH75\n5ULc\r\n=m7Sl\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"8c0789d8c409d91f7f4e13675ac80e0f355bac02","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"7.0.0-canary.a0032f5bb.0","@material/theme":"7.0.0-canary.a0032f5bb.0","@material/feature-targeting":"7.0.0-canary.a0032f5bb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.a0032f5bb.0_1592602077179_0.08463648084192088","host":"s3://npm-registry-packages"}},"7.0.0-canary.3f342e721.0":{"name":"@material/shape","version":"7.0.0-canary.3f342e721.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.3f342e721.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"66b0db4d1297d5f2a57d603cd58838f0bdf34a2f","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.3f342e721.0.tgz","fileCount":13,"integrity":"sha512-IwQEVyS6RkfJEnHkXUr1gWQMwAAjI3unfT7mZLVDI+IPJsv3GOCLN5EtL7gAvaizKX1yYdQ1//BUBpFjkRVFQg==","signatures":[{"sig":"MEYCIQD7ATq1WgCp4v4B/c2BL7g6CYZyLCqQjkYNC0WvO15qYgIhAJX/sC+uzWbqiqKuvFNdlilE6Bp67y8C3z5+cxOlsqhG","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24301,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7S5pCRA9TVsSAnZWagAAZd0P/0jE2RRfkO+ws2a9WEY0\n0sxkSoI+vhFOy4b13Xem1cEBo4HexGgy2RP3cIFpxYJSF7d48DETGobCVBEI\n1IN6QWPV18+lPPwVSIRTb4Hj3rU0jOfdYRM9Z28tQ/e0kPblKl4RJGdQrtdc\nB/scA8JbS+/Rbnq29JwsIgETz26veShqmG4K1DxNIWiR4AuHKFPofroUMcKG\nTPLGODUH7JThxPLahnrjQq3R/XPrE6H2DnYpnvJDAr6Jp8UlKzsgVMrEJbsT\nUqwqZYYxq63wTR5PBVq5n8B546KhmBt7JOuZlw2vTgMK2wyM9mhbzoghUbMT\nkx3XQslcCDOPvSk5C3PNMTCwUpZLPTc4ljwAaMVmrCkp2iC60J5DpXNdVWw6\nOl2Lr6WWujBakeWMBBvdU912dCYry2T4hJgfZWbpJPn6jDeJeaHUiZ2MB52X\nKqJ051m2nuyDvcdG5DOSHLzzv94kv19l6sPOPa4pB1adUGEitTixg1Us8S2G\nyYfDooRRNqa07xOSSzQhgHu9PCPKqaya4f4PP+AVu5GHvGgRzk6GID1bWKPb\nEAM2WcMW2CdMVKzA+Q3eeH6sObJ8hgxz7ymCeYDOMytK6pVkCEsernGrjqhN\n4QeowfLXVB/86/IVCX9MVA1mY1H55wnc6wMu3B/dniQHN7OVR/by2wJ6Ac1K\ns4r+\r\n=cmIN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"e972042c8ae08ecc8469492707d55d647e3495e6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"7.0.0-canary.3f342e721.0","@material/theme":"7.0.0-canary.3f342e721.0","@material/feature-targeting":"7.0.0-canary.3f342e721.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.3f342e721.0_1592602217386_0.5522465849514531","host":"s3://npm-registry-packages"}},"7.0.0-canary.ff89457cc.0":{"name":"@material/shape","version":"7.0.0-canary.ff89457cc.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.ff89457cc.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fe7993a3026ce87362f8d39adf08a68f632b0734","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.ff89457cc.0.tgz","fileCount":13,"integrity":"sha512-snc9B/DCa5/Nsgy6bl5T+K1d7JvrmSfqzDytabYGkEBTGIemfeFktZEx4FydWBdi1nFGmHhoNRpJaS98WmxuWw==","signatures":[{"sig":"MEQCIB5KFQkST61MTfRooTzT1HRJMjaxuMzFwZmOkeUFPaEnAiAbD5H0dWaRXUCUHcygMByY+P7FCK5WLUz92p9X7jwvAQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24301,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7S6kCRA9TVsSAnZWagAAWOcP/0ROpxxpZNTvAjJtWu46\nzeBEFLvgR5IKqzLAdrNM7kFUaswtd9uNCSQ6WHuF+Rc7ja4dTsTxupX78j6a\ntPo009yk1daP1yXZqRzmpC2ZAGfIcMVHA4ZHcTI/s+JozVCKsV2vtf+t9jlp\nxYPBIzgRI+xa623dHdPj5wftb5KN1kAVYqhways/7lj7i4AK3HrkwiHringQ\n/jRNcyHYjubFiupcyCmjV1Rd+Cj6yQO9uK80flgt1rnRmlIQI9WahHW6BWFo\ngcyIDKNiQTjYqaK13IUICXfuSLvESyELPfKG67gF2iz1MvE7DJ5rN4zi16qq\nvym/2i/jQR0uHeUE8HYs3BeBOCYw5g/9oEPR+B3XL+rF3vVr4gr7IqH0WqRv\n3BPEBJnkuBJSyeT3+8Qe5CPsf2XVyrcDSISM1UySO/tIUvGj57BhW9dpbnzO\njBbVAe39sr+vu5kFVJ1L5TpNRBP78yrXVh2vKNF4Nr2pOXC4PR+0aB9+LZ/U\nmPaTeiGl3z7gZM99vBia3rZaIyg2L7jLi/7u1SUirrrun1NtahVVMMWPoqA7\n7kGOsZp7J5DRx836z0vEKJdlb3jOgvYubngY1+xi7S+tlRbdFe2VYoFKOMqw\nUosJO6YkoqI2QBDbbcAlkAzfO+nJpt6pPGMUjhzxvtsbhxpyrnx0LWeENzFM\nK3tU\r\n=Obfs\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"1a3ec64383e8afdd818b5edfb74f32f6acebd044","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"7.0.0-canary.ff89457cc.0","@material/theme":"7.0.0-canary.ff89457cc.0","@material/feature-targeting":"7.0.0-canary.ff89457cc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.ff89457cc.0_1592602275296_0.792183383082284","host":"s3://npm-registry-packages"}},"7.0.0-canary.4a1855cf8.0":{"name":"@material/shape","version":"7.0.0-canary.4a1855cf8.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.4a1855cf8.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f4186efa13a5476423327fb01581b6d857fc213f","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.4a1855cf8.0.tgz","fileCount":13,"integrity":"sha512-3r03Hd/zzgyYkj5Rmo/ODThKZscVoJKDLrXOuCnnjney0z4uRJj5Wowa/gzgJ/uH/K2hjMEcpCXXrllai5MrvQ==","signatures":[{"sig":"MEUCIA1kj0v3ArSSOIEmyGwj0C0RIKrMlMpxjGyTu8BDGVVcAiEA9cR4vszOmWQKlx6AZA3l0eAtdXHwPrsOoBd0bU77cWM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24301,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7S9JCRA9TVsSAnZWagAAJTYP/ig4QguNXYd6jRyCSqnd\n0hmHap9Wux2ymv7YSCWWSeyXLRGy59/T7fXgsX6LIwDqStgyfLU9wnbwVGd9\nl1263cEE4BL9dJC8yRC91rfsyqw8AAhWUprtwYZnxU7JuwWiXCcSPsvfMtr6\nLxUd6HF7aN/WicnW54IYH3AOzaAGP1ENs2jQN03Y/vPJm+N06qixdsI5/fnH\nQLKSd8Vb7goXPkp8tpPpw+zhABpP+win+TvkUyh9bifYFqnjPtLgclJ9megm\nGUKMfexaX34o62l6D8/Cfa12zne4pWgpW/5F7zLC5ifREzRsgyhf/T/BedAK\nUJ9BjBrug0e/fcbgxLS4Eu836GQGdSCv8Bsw0JRchd/0ELmssqkNGja6xflq\ni0w61uiCyKKaQoDFkfvilS7h7Qc+PEBNJ6kg5X9NVmkx7yJ5qVXTmc2cSPuo\nxoJQUUVJQSnKmeCMZsxhXP4hVbXiQFXwqRCszKlYM4Ta4LtQDi9V6DJRkpwy\n9IXQCpi3ViyMdmz2YfFf4wSr4Ml8TAJCu7m7/MoAbwQ4bvneEcRK7h3az49K\n8FXRrbdRW8saQ26Zk/R4YfxRG07qZXYUoY1q7d1SDnJD/VJsQSGslqZg2esb\nFSCmy8k6VP0SdUdVjtlkQcTRv1SjgMtA/QrP/gzQdKPzc/vHVgbCnl4Kfad5\nc6wo\r\n=khIA\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"eaeac5e820cdb30fcedba281da8c2c4a846f0e73","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"7.0.0-canary.4a1855cf8.0","@material/theme":"7.0.0-canary.4a1855cf8.0","@material/feature-targeting":"7.0.0-canary.4a1855cf8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.4a1855cf8.0_1592602441086_0.16873089649439876","host":"s3://npm-registry-packages"}},"7.0.0-canary.8602f1b4d.0":{"name":"@material/shape","version":"7.0.0-canary.8602f1b4d.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.8602f1b4d.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f39d093d2a33ba539ce9d4807d875d7993faad2d","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.8602f1b4d.0.tgz","fileCount":13,"integrity":"sha512-k79gYNRZTffmEi/vVT+exqEg101H4KoFDP2c44iiYpxQOucC6MCC/uY57lJsxfDYyoKL7KzZXQW1DOcRORl9MA==","signatures":[{"sig":"MEUCID2XFzkBLQXMnYgL5yfW8TNEy8rUlorL/gTGoVptow3YAiEAxVjzQofaRJJMwiB000HYoGPjDUkfOrxnDp1+CPzeTmY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24301,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8OkWCRA9TVsSAnZWagAAmegQAIJzd+jErNfCLdQtJmEK\nm8gnJmCNttBcM2ZWYmfp40cW56fF6JN0bEI4sZ4p19tFSG7Gv1gjWT8oKCFw\nC3a++Lgm0ekGXMvcYr1jvJ5vhLQEKMG5rusQA4qKDPGApRXwLn47Euh09l7/\ne07rvvMOovmGB2AwZRFxEipNcA0lYBoPOTOJLUVAhv5XOVMdM9D3cCUuh/mR\nQqUtn7sSyHBTltlI8mQkDn2KU8jlLkD6QOTU3iZSMnfoaJj49EFbI86QpLp2\n7RR9l6d1NirVPirkOsTRIpMCp6fsvvIeDzJwIjfpDaIlD84QzcL5j5MfzNuk\nl6kLbS9KwDnYbJoA2nca0lcaiVV64t3wo6zHEbTsoKiCYVhLP6ykrQKOix/h\nABMjbBWraQTCsBucVrNTySfPHQZW4V2qKpazL/lkG9yXWqH9/HRANmWZNgJe\nFGNu0zTgj+QwHLV69iQzm9s3UQj9F2geRcqB93N8AYqtCPsA8+R2REBzhMTU\n98eeHF4w7DoM9+vrogBbqJsR08SJ1bS9oakiqMRIAcOhcZ963dt9Qn8emCmd\nfp9KZxLqyzQabtqhkn+I+8MqnUAfHeBt6h71ZiT5GPyobKXcYxDoojTok8h2\nCinHdNRZ/jr1rMyqVfi5uEVUQKq+x3IcwX8OJ9xg4NjFUcF9TDh9SqBDi2e0\nULxy\r\n=qE/u\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"07f6372c5a2f6f8add971db62aba74793d912f70","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"7.0.0-canary.8602f1b4d.0","@material/theme":"7.0.0-canary.8602f1b4d.0","@material/feature-targeting":"7.0.0-canary.8602f1b4d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.8602f1b4d.0_1592846614085_0.7622171032821237","host":"s3://npm-registry-packages"}},"7.0.0-canary.69f9f0982.0":{"name":"@material/shape","version":"7.0.0-canary.69f9f0982.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.69f9f0982.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e494be759a4b550d8ee343ed8265034e42945bd0","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.69f9f0982.0.tgz","fileCount":13,"integrity":"sha512-d7XAcEvFgSmkAoPG9uyioQ5tAr3GCn7ndklUKohJFmmVjEYLKbg3qSHyrq4GAsyvtjRVHqPXWBu6pis2UJ+cPg==","signatures":[{"sig":"MEYCIQCYggwSvLNasW3/B6A5Tf+SMjIKkfD59hbnDyW/ykxF+QIhAIwCp3DmTYNS1qoFj6P0isR4RMrFFd6U2k1mnyZw3zI+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24301,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8R84CRA9TVsSAnZWagAAdFsQAIHQ1Kgwg7In/0wzsacw\nxP/0118rbls0JxgKaJRaWb5lloVST0NkC/ihi4erbu9a5I8DO28x7zCRFuNc\nr7EV+9KhTbOH+/y9DK4s7SM/VaZdKNaIi5MtcBqwdhmYjak/wFlkAjGfQTej\n190fXExjE3AZqE8ybTG5Zse1b6svOFeOnWNhA5NVUvhPl7+wrQM2U7UbauJE\nQvIhx8883CHgxTV5jyp4nun5DN3cC9RSfikl8KRHJvvAIZaugf3TJXjktwlc\ntofJrZcbTC3V4u42ABHqQ18grcP/uXwNVA/l4fNk8InRay0dRWwAwq4clRwB\nITKAeKE3U7IgdbjDQnXDqq5rnVBdhMgFMmv6DAFAZCb8e3ToEk7guQv+v5Kj\nX83BvP8RV2Rv40yyFmBsqP9Bqj0EjyUEGVkV9XtsSuX5M/iAEmcS1PZo9D/u\n5Da19wvjx6tC9rHINP8JvTSQNl1cIKg3KSbWJlSMzNV8cHRiDM1phYCq2qkP\n33oWntR6hrBgUEUpJhAP7YwmuyUtph4nmk1Nqt8AWP7ZwfQ/oeQq+Z20Nsge\ngUr4JuWxGmMupbTAUMG+rXdj8zVDj+bC5iuOA7VLkL0GAHJwtUML7ZcPHPil\nd0sq4jPWyDoNjD2c/kMfGMH51D9LtiI1VVeoi08tJtPhLq1rRoV7uWCR1twy\nEHej\r\n=4iNr\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"3aa0430a8c5f21a2aa9f3d54afe07b1c1b1cac09","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"7.0.0-canary.69f9f0982.0","@material/theme":"7.0.0-canary.69f9f0982.0","@material/feature-targeting":"7.0.0-canary.69f9f0982.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.69f9f0982.0_1592860472488_0.9779534116601569","host":"s3://npm-registry-packages"}},"7.0.0-canary.369a293f0.0":{"name":"@material/shape","version":"7.0.0-canary.369a293f0.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.369a293f0.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e6e1125b2c68cc256c00bb70d51f4d2f2f0b3bb5","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.369a293f0.0.tgz","fileCount":13,"integrity":"sha512-UkUedZJCCH9WFoTUsVlx/7aMqib/QZ9/1JP74ny5RQBHkNYi0KKGyQawvf1lXSkjrVejuD5sLDKyGLnLomkzsg==","signatures":[{"sig":"MEYCIQDLwdfEL2N7Cmt4rqoT84PKn5TaNZ/ughMRdsafRsYfQgIhAN6xRR/IbSa1j1JqTlU3LtDWea3Ia1MR4vhBTmqygAd6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24301,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8R/FCRA9TVsSAnZWagAA8cgQAJfdBMGB4iLNPyMkYLLw\nWAKNxIuLZSHOPvhA3YfhY3B/dQbGmC5oug9o0ei7IwD9fh/YM0SBD42zNWjy\nBNUsXkgHkyBHWySMJpbm6otcjhPO3xKtKUtShV/54+/adUX21Fn5wQGAEZCW\n24woqRYo+crF+c2cafZLCNolTSERD/xR4Ei1yugKs98eCorLk8nms+rqifiC\ncbjw21ikVYmJNLntUDzXdHqlS1iwZSHh2MUBtgHnaMBpqt4ilf+oCADLjG/2\nsgOLeczUDM72ZqnxN8SdR1Bopvvy711tS7GwEo84xq0iSg9HUfDJHUXkTPAt\n9/nmJu11DQflSap9QBA3nF3B+F2V4BsfdXgoSHnRJZkdPLZ2USxcERKoe0vy\njOaLM1fWHgh6QD7FGlE/ut8cpY2zteo3tB/z8hyOJiXqsepfHHSh4oHxvC3N\nYH2PaMs0qTKWHY8CXXLVxWi6B6zsrvSCBCOIqpwtnn6hfzdfJ9k9VpA3qq30\nfquR2mH30aE98P8Y0rdatdiArDfity/mSfc6exTp9L0wWQhQHJ9Eraas/lJu\nqYAO/QaGRBXgd0hOMt6h3oS9TnZKo6Uhg16ebyVZnqj4M6J1q8xtKsx+6GyD\nfTFgtSXCqcelK1Jc1WjmJrCTwnl7gfOlOeOo1UPOQqe6i0sbvgk9MHP5ueU7\nTqG2\r\n=I4QA\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"4b9943a16a4fab61aaa8f5dad0d4f7aecee862f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"7.0.0-canary.369a293f0.0","@material/theme":"7.0.0-canary.369a293f0.0","@material/feature-targeting":"7.0.0-canary.369a293f0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.369a293f0.0_1592860612644_0.09024828977490573","host":"s3://npm-registry-packages"}},"7.0.0-canary.f1432b5c6.0":{"name":"@material/shape","version":"7.0.0-canary.f1432b5c6.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.f1432b5c6.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fa7236b9dc3ba4915f9ad1636c0094c3ea389885","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.f1432b5c6.0.tgz","fileCount":13,"integrity":"sha512-xbsyQuWBuSdh6TF87Ei2sd5SVP1DyKeINzqVcTD5cArwAECL4JwBl29PEubLJGAMLbFclheczP9cDBVirmD0gQ==","signatures":[{"sig":"MEUCIQD8jg2QHC6yF4BKzs6jV0x1VxJqJudKmZ5mLKEhE15QLgIgOI2qZtqwYt+MXLUqRSFOpYzdw65jQFfajUMFBgF79fs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24301,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8SG2CRA9TVsSAnZWagAAi2oP/0g7X/AQjmlGJNzh8EAJ\noSiFlQllEf2a9yBqf2wVSa8Wst/6VKJnZ4bwEtFfOK2Et4yRXBVqRZ7KzTX7\nWck/u2pvNsbIJr0/BGnI0zDD1sZBuk+tpqvvUA0RP3Ds8nCkjPlAcY2nrEBw\nmie0B3u1xIHFXk+8FCrSItwICZVe/TvsOeU7/ZWgoTg1J4VoeGxp2kgHKoNV\nvgPJZyKjm2WsFVXOGXKX2PKzL6uhpqEv/t/QscmQufbS39uo8I+hpKeJu5rG\n9K8FRDlw41uZy38CQR2m6FaD4tKjJkgEfUgqdJl+IpYYEsBEQLqXBPUpyo8d\nULS8uuW9UtTr0RSm0Hx2MSWSv1g46n/IBjTI9fnl/xo6PRqzGrmBHbbo4TtG\nZph4JilbNrnq9BVZZvDA8V9ghQmxy/Wirh/XacNnrgpQbk/YCBlRs5IgKRJq\nA2F6EuNZIiKtq/qqz9jrVRjhRphmPlPFt/dCPjsgrMohGpXwoulVflNQXEmG\nKtP5W4zcJFiHBNAZVu+jbhOcjKpRYaD8SKQlmLfrO5yYrTV4cGhGYAfJVsy9\nWJpdBZThvAe5iqq3qM8hllDlf6jd0hhrX9GU+wYMrPtj+Kgb+u4uf2jTLbad\n5su1skn8NOzgq6HAsgUoek/kFF93ZQYVwqlNkutOy+NHSCdDz4Jce34Rgrx1\nAnqS\r\n=qbKJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"9987341fcee9f9c549490bf6cf1a6ce57b5a83e4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"7.0.0-canary.f1432b5c6.0","@material/theme":"7.0.0-canary.f1432b5c6.0","@material/feature-targeting":"7.0.0-canary.f1432b5c6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.f1432b5c6.0_1592861109969_0.2571685778797086","host":"s3://npm-registry-packages"}},"7.0.0-canary.4757a16b4.0":{"name":"@material/shape","version":"7.0.0-canary.4757a16b4.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.4757a16b4.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5cc68c86c697c9a00e146787dd86d47eeee167d1","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.4757a16b4.0.tgz","fileCount":13,"integrity":"sha512-+jlqNlWcoBfIdOAEguI+QE2d1qgAl9d539kT6PWuPz6D8F+hz2Hd3waNbwVTY94S71kX6SPq0TsqsYyqdr4cGA==","signatures":[{"sig":"MEYCIQCOx0yDZexgeD1W/qx8iR5M5/QawApLx2ZmHZIL1jJcnAIhAPb03Wl135V823fivOs5zJsPHWtugH/bYycLkw7QNxna","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24301,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8ShWCRA9TVsSAnZWagAAVzEP/0atBghTygpY6AJBEvQ2\nIhdkFbIhM4TXcGBTn6YhjhEulMzAJZ/CA/YfEdQUhVxq5rrwejpk6028dXfL\nwHYGJmuhrKICduBNQ8B3QFNojG2oTO0af27S/NyxFsdemqoW0StmiBvyeMa0\n9peRaAR1cl+BbS+DaX8HXXGHNK1l8J/VTkEv8NaAgFTrkvpV6dX2sTf3q0ia\nEDnzzRzRgIAQpO+rSI88KwQQLfyWUFvS6r1pfShLD2I5dSZoj4O2FKJCi2Yu\nLHCws9cfezV7fV2wnaVh/dK2p9no0su59jB6fXYzeTobvugKiMvK7e2bl6nJ\nPC0jY1GcsYxxTyDIJ0oucMAB4P2bCoJK5IoBqhZaAJaUKEsatHdSng7H3Iyh\nmlRvrqVDGs4vhVow8064ICz91ch/OGdKxGl/r1ORE/4EycG+hny9KUUVkj4X\nuhtpzltFa0bPqLEEGQtfcFzbDNC9BT3xHGBI2gWDZ2AxjKOe+6Gh7gtF6tXq\nwQnz5emI5zLoeifS7U7YG6vEL9r6/dXq+fU+HsTM+EuZsEjwkj+9Ch6Myt5h\n9PosearyRn+NTInT0jk6b8rRaol4EKdNK3JyBUOO0wXdhzdPThoEN9hLVOKV\nsYjSqXb869Lbsg15ie7YZ1nH3enplmvP9stEt0UAC2e8LJ0wrC8ZFcvh1C5o\n2K1T\r\n=hceS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"50b08262743d25109a9cd3d4c87d82d0631d9c79","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"7.0.0-canary.4757a16b4.0","@material/theme":"7.0.0-canary.4757a16b4.0","@material/feature-targeting":"7.0.0-canary.4757a16b4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.4757a16b4.0_1592862805645_0.4063836318929497","host":"s3://npm-registry-packages"}},"7.0.0-canary.f8f472762.0":{"name":"@material/shape","version":"7.0.0-canary.f8f472762.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.f8f472762.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"763d5e6b0e8d3c9b4d5f989b5928429ded87a641","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.f8f472762.0.tgz","fileCount":13,"integrity":"sha512-07SRhA4t76+MpT2T5VhjrMSvWCLGXZq/fGgCFbKuwkaUci/VuWl0lrW1Yfb8GA37GYDSwz4J4dylDk3IEnyTVg==","signatures":[{"sig":"MEUCICOL44ap+lCQJr5rekk/K9ygEiGFMwH78/sGsBf8F6vQAiEAhm79P3R4UdwaeTnSjmekfsuYWAw4tDkAzzC6mkinqwI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24301,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8Sk/CRA9TVsSAnZWagAAdhoP/0Oq/ZV1q2cgSXq+fjPl\nSYNMpZpkjP8BY7B+zJI56qnu10K5hYBLYreiv8IjwGhz8pt/k/0ty7c83IDo\nUDSI8xUN9CatRpiTFrLkXV8qiZBcy0A9p85ife0GF2G6nIRX+bMjq9Em1ruR\nkXwPR6qZnjpLqI2dWCbVAmgKtAiKaca3YmEAn2WdbUAv01BznCJYsOao18UP\nA2ArqtOVgp/5K0xBzN5P927qFdwb87q+mX6K1HZGKhMVz/vGPQPMwEAySfAC\nlXRRl5Dp3XX8yyOKl125nHUVFD9yk7a4cFlWimP3R/hTOCH/y8kkTftq/2Z4\nizI/QUxkBbpnIS0KX1kqhoBxPwddNYYJrO+beq7SRgV8VDWvfpgnnbA4HspO\n+1EIoHYeFY1EvJ8a1dRRS4yvhgqFC5vKgTmX8IPeyUwYDM/cEAVMYDKpBgjG\nyyRKZtHP+ZTBNTds7IvdK47qdxmTXdw6GVUEY6e6ggsUBWsNwvGG/YJkhHNO\nuA7ILvDn4QDE3kxM+7z9wrBFGLK+AihxPdISXitEoNwZawJYRkRPINZ0lgIU\nWcyLMuI/yqKLJacm5uIKqe4lHbijpjMBRlAmLlmzKjxnMnrDmPQOFtSkaYfo\nMeuXe+nVcoUWzY1dcwGvY8uiDw8rneaFH4j9Ci43dJP4bRAG9L2wW4hQiBTl\n7tY8\r\n=PbUM\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"b72e40a4e5c11a670f3423da9ae1ab370f088535","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"7.0.0-canary.f8f472762.0","@material/theme":"7.0.0-canary.f8f472762.0","@material/feature-targeting":"7.0.0-canary.f8f472762.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.f8f472762.0_1592863038463_0.030332143363357433","host":"s3://npm-registry-packages"}},"7.0.0-canary.7e4d55c34.0":{"name":"@material/shape","version":"7.0.0-canary.7e4d55c34.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.7e4d55c34.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"27384481e81d91940ab7a1e8d30b85760a558b7f","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.7e4d55c34.0.tgz","fileCount":13,"integrity":"sha512-d76GYDOVS5NwktxIY60eqf6cA1vOz3f6tAPZ+kLC9bGpvTEyL+FUcPjOAoWcrPTlo6wEqHg23k42sPaW5iTEKA==","signatures":[{"sig":"MEUCIQDqCEpFt57RgLfcBuaBvS2Avx3aj43QrVVG5cvFiOOAwAIgJp6c8OB9cvglcIoyJGkbL3RffujtwIqZhoGnq0KAH/o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24301,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8TC8CRA9TVsSAnZWagAAGrAP/i7Xe4NvHRDEUEKXUCuV\n/dX/3zJKvr2N57fsit0mx3bozYHyybKGCu2lMZNwGW23U6Ca0grmuRT/XP0d\nDkBn37wyREAuQudeYNeZ8Uzw6GMPTdN3LH3eqhW4jaBRY+11ad1Ly0gt6631\n46JUCLIideRfS1dHm6DSlpMqNHw1KEKqvNlK14UpXt7w6htBN26LFXwj4zTP\nPpICNXxidlB4CXCnTNDY7gQ+tGyZ8MuXkUte33D0b/nBnF8K2j0+fo4QlFwB\n28nCVHRtGG0LhwalBpa/tUXuDlSar0WhRXeCnOhWgoDhkKMw/3HgS7r+ItlR\n6ai55qZg3TBQjUK4hekoAkspAUiP+HXhUxitGjWeU6fwjoFvsp3DIQDLkhFf\nn81JEJJHLLmpIEG6qoYxCk2ui6aGiYXqdXdvZaph+JnnV5avAzKnU3//Yqj4\naGsNF9TkfD+ebnQ5Tm7Q/HLldVzOzRoTojdDDn9+/EXtOtYfMnN91f5gxl+g\nkt8u1MhI4Rlfmj4NpEli+JPwYMkoOEVpchppgwAEzelOd4DL/CoHu7rD8xcE\nOxgIP40VCiERM5BfEkfXTrhSXsv/NTpHvU1YeEcJq6389c1DMXZ45tTnA5zx\nAXr11dkA9WjbiwZp9JWNqQrG4CVwVp0XVoIcM8h3aWOycJHSrrLmatDL1JfR\n0ZXY\r\n=D4Kp\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"1dcee78d27cafcaab3b8f265b4f1bea83600563a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"7.0.0-canary.7e4d55c34.0","@material/theme":"7.0.0-canary.7e4d55c34.0","@material/feature-targeting":"7.0.0-canary.7e4d55c34.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.7e4d55c34.0_1592864955930_0.6603530645313391","host":"s3://npm-registry-packages"}},"7.0.0-canary.bd1dbc91f.0":{"name":"@material/shape","version":"7.0.0-canary.bd1dbc91f.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.bd1dbc91f.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"632d18c07008b9a8ce25bd7333808d0cb7a84502","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.bd1dbc91f.0.tgz","fileCount":13,"integrity":"sha512-L0xlhOQbUV7gZ2Je8ZMVzxGaYqUAk43TwZd9NHlPaW5ZCmDVTXI2Ij7La9wJ3fDhwMuZ5pycM64dJJZ8UVYmNg==","signatures":[{"sig":"MEYCIQDDyJc55SJbFySeWetfTxgmXWZoOreOSsBtUAwv3CIJwwIhAK5YmCjU9j8gbbyar8SSxdNpYJ84O5qJ0ge22ylcZsK4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24604,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8hFvCRA9TVsSAnZWagAACKEP/3O3JMDCDdETvRezjPjq\nwQs6BqEz1mrubkfXPGm8y9WPr3nFt2pwme0c/jZ3RMFjZIh64RS9EaNckvRC\ntjivwZnnJ/z72qntkGaYMg0DPZyy3GYvezXQdi9ogylZ053WV512/7ZuwCnz\n9LpBygEiud1VdXQJP9HqLk3VgvErZUfKsfZsLGIBDm7kllPJ8LQ6LnHuBdl+\n+FarFk/qy0wLqNxdcnFVxZUKAtp0U88WmwuMJ3d38BRsBBlznrNQa4P/b8IZ\nBGpehNecf1ZE6rlFJ+A/MZEIslCKH6c1qBAB65Bzzlx6yOqr67yIU6oWBwf2\ntnVeJhEOcZCrQoI8kQN07Tx0amM0Y/q/zunwesno7/wuIsj1vU+5fhhw8byU\nNb5TWJNZ61HtlTQsx/ZA1N8jIXbg3i/m8wdjjFXdIB9CNfHTitoZsfj2Octw\nKbcNfH7fMKr92ySJyg1+GPAWjOGiCELuAXBhL/Ock64aSGkDKQf01FBbpMvQ\nCPJPz/+krJQrjFJeZRNnpa2t1vTVQ8wtcqA/XLIye8sUh/7GnTlgmqZoJxH2\nbB7HTY/VO6D7UiSjvsSbahZ9Kgk1G8c0C/909tgcaonoS8qvEIRz8/26HLX8\nhm4rk5D1wmgaw+BOHt0XfA18BZS2jK2632haSQFAcV3K2HNnDjJ0whO3CLh0\nEunP\r\n=R4g0\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"b63b8059c82f418a3f6134124de3ad8bbb08976a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"7.0.0-canary.bd1dbc91f.0","@material/theme":"7.0.0-canary.bd1dbc91f.0","@material/feature-targeting":"7.0.0-canary.bd1dbc91f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.bd1dbc91f.0_1592922479389_0.6730547639958409","host":"s3://npm-registry-packages"}},"7.0.0-canary.31523bc62.0":{"name":"@material/shape","version":"7.0.0-canary.31523bc62.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.31523bc62.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5dc8fcce6443f2d3f618c13978f13b1e49f226b8","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.31523bc62.0.tgz","fileCount":13,"integrity":"sha512-RypSRqljl0PCD2FxJieJZDgn7KpX7n9MEdmnIyNq1DgffwgDVxSTzXDgScFkGo1fuYZQTaDWJcG+yRPxuDrG2g==","signatures":[{"sig":"MEYCIQCn30tGLkc0Tfn9kuZ6473lH/HoDADSvannNQsXlxjIvAIhAKPrli6TTaWaOcD6Wz6pnhd7XSOPB02FtyP24+xKICKj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24604,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8hK5CRA9TVsSAnZWagAAtyoP/0w+Esl5hy95RtxA8FaE\nADGefKDJEmbOXyaXyb33saOZNI5JjT4d76Tup+KNW4d9wag4nisBf838tr/M\nv6LapVpycMei1oU6Kkk5WIKN/1b7UWCtiSPeEJ+h6j4oNdR+w62L5I1IPuik\nQ7TPDLTKNcmmuF+A9lf8WvFyJD6xIFk6GXCvKp8HZoBjSh87qWQODin1f6SO\nf51DiEDUa9IN2M+xvBz2v1PSf0dL77s+Ae0fY36L6C/hGmUq77wtDYJFIqNo\nBxrNhF4VrP/NtBAGcHpER/duCJ715itTd9QhwHWb+X35HIfWiEL/+TqeNAEK\ntos3lqB8YtakcSufZfS29jk8vHNRfvvVnqeUHcddxDfM03sAahcObSEXxbht\nMqo1ekmzhY1ZEEpoTaEbYKmDuzJHfH/y1Tm/VsRpfvpE97BVS7OEC0oFsmqK\n5sYn4nzsiQxUbzIIpT6r19amHGDUBO0Y/X1Gm0YMg1GzAIwl40x5XVoilHBH\nh2W/yxVB/y0hKALOLptmMio05bUBDeTbhHaIBgVFN2KUiD3ET2ghsBUHPnOJ\nantBSSAxTOxQ7G0IZiuw/ntvE6nxo6acyWJqF4lIQFiq3AXUfWLL6dP2q03n\n1mlMuKVn7DNqlu8xYlptOMe5Wq7NYA5AlKSVmDm9VVUfFnU5YfnBNTiXs6iB\n0wFj\r\n=h2Qu\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"035ab4d41a8c444abf721e44192fa6e10bed9f79","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"7.0.0-canary.31523bc62.0","@material/theme":"7.0.0-canary.31523bc62.0","@material/feature-targeting":"7.0.0-canary.31523bc62.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.31523bc62.0_1592922808591_0.17411417594371503","host":"s3://npm-registry-packages"}},"7.0.0-canary.a96b6d4d6.0":{"name":"@material/shape","version":"7.0.0-canary.a96b6d4d6.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.a96b6d4d6.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ee54ff6abb3feaa90dceb3eba311a38d81f65170","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.a96b6d4d6.0.tgz","fileCount":13,"integrity":"sha512-krz5rSIKDKbsxNfBlQRSw7tozHbsf5pWZ5JpeRdUFdqnNz6u87ZumprnNbq3uM6RDpxxSfME8i3JO4PY1ALDtQ==","signatures":[{"sig":"MEYCIQCgpYeZPMqbUZ8EqbaoRFsHoHRKt8GoDDWUr3XkLr/woAIhAN0hCFMuA0m8yKoZ0IA78ECrNY9o9TLUpTbFofJTUD5S","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24604,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8hQ8CRA9TVsSAnZWagAAGBMP/08VF4VLvs64MWhX3QAk\n1thseHHSA8/Zn8gEocm7nAHk4it279O6De1msY8Q9K46hNDL53t1O51cKSML\nHsTCCcBfEaBqiT6qn8M1OAqRXDJ7QqfJPuS/pDOPsBgK6FQJe3x8xeaUvgXy\nHCWJjFWiNiVygLiQJW7oolgiFWHtYiAZ48lluJepg0Nuhd+EWDVWVyehIXZy\nW+ohNQyN9oglRts/WR75tkrcxwjaDeZhbqA0rk5SPD6ZM8OjHqnHbutyuzK1\nLDOSQz7qZ19+eIhvx5WKKjSKmnQv4CnKLby0PqfDVl0OvXa2H7+qvCP4Kq9B\neB+ad+Y3Plj6f6oo9g/vFuL82ICtvyFJuIPCkNFEcV4r5Qm5kcg00/92XW60\nGsrsdmuIWH/vNTuOI6YfU0qrlDDutSTucm56F3AumpprEjusPoD9H5MmHRYu\nkEn3plU5ijcdKbAehmCpo46adXEDyR4tUMvUlYW1ohe5bq4Gna5VwOt6mM5E\n2s2+FlWoofM4SDcuPAXf3WUey7eSCVeEZc4oEwCzySE7ItZMPkY7i9BOoTxQ\n3qggJKJ2Wi0xvAvHygSIk7jhVyQY4Mhk2MJ6n6SFSMdHVxkQlt7pEkN5vC0x\nHAuusMv52D+5XobAxwstS9pS/+ub8qZkv6PwOI6Wl/CP+nC/rQxxPusZk+X4\nnTdY\r\n=vdm4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"ddfc88933cd9a6210bdfc449fd3fbed391abf4c1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"7.0.0-canary.a96b6d4d6.0","@material/theme":"7.0.0-canary.a96b6d4d6.0","@material/feature-targeting":"7.0.0-canary.a96b6d4d6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.a96b6d4d6.0_1592923195861_0.3932764149527459","host":"s3://npm-registry-packages"}},"7.0.0-canary.ef3a09533.0":{"name":"@material/shape","version":"7.0.0-canary.ef3a09533.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.ef3a09533.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b0ddbba3c8b866ff5146ac5f0e69d416c03dd477","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.ef3a09533.0.tgz","fileCount":13,"integrity":"sha512-33vZQLrvs3dBQtQnZ1uxKWTQDYJdwayfbUUejcFwli2FHblAieeDcEklJCLoaNKFW580yfxyszYMA7YHX7bNIw==","signatures":[{"sig":"MEQCIFAbNKDiXk2nPElZuUcVRW3PXlgGd+w9JuayXIz7wryCAiAjRuHSr0iJ37wzILkv72purXbYnXIPoi7p5d/yubLy0g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24604,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8hYvCRA9TVsSAnZWagAACIwP/iA8VBtkey+P0yqQv1V2\nxTosHIwBNc8KymVeu3eQ38AcpzJhh+VPZcd2d6id5Tf5a79fM+tx3iQGVEKp\nlL+mIgg3S9gstkMe6O6ceZzWageVJu07vslfP9C6gtr2Ep+i2TDhFnNczS94\nqQjdJcHcrOTn7+CFhW29I71RaC8nNncyGwLepwQmW3dHT8rYcTG1FZ3IKdtB\nQk2uKUMeViH3CsG9q6C5qExJcsddPl8AjA4GocdP7NMxFpRVwUqiVtRwgekD\nrAzOc9N2cuOVVdhoGb/ONSkQ9lHTsOUhzMPj6MnqXzySMvkHxLEYMqVbSmOS\nMSZr3QJBkw7nUwLa9dQRw1TUkEoPAAoulvXwxGqcegJ8aNX9U0IucHJ5tBBF\n6XYI+538JzdNYG/PVX5FQB6UG6ZGXoFpg2MxGEjteHbl0kTAwxRzkqv41LT4\nLP3Rbjr4oz2ubx1gmYUG9ThLw1BBe7klcKoTZRekhcpNJtlO+tV6doBP+OiT\nUvM4D3KuXe86JLPdcV3ocOZpdIxfvL4gLZmCpmp1v9QQFpPXY7rtP4F5y4Cq\notB9Yyap0qkAu6KLInjOZvhXZ9c8StniHMOqrHYP/WPG5wNpYM0ATbHy/OTK\n5isnZbIjIh+Xd6FKRPgj+S5OsdseAYGgoJOLhnnMIsKiWgF6S5fZ/SW2jSoh\nSVW3\r\n=AyxV\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"2af091492939e0fee42736977683591ffc221f15","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"7.0.0-canary.ef3a09533.0","@material/theme":"7.0.0-canary.ef3a09533.0","@material/feature-targeting":"7.0.0-canary.ef3a09533.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.ef3a09533.0_1592923694783_0.03610141268831124","host":"s3://npm-registry-packages"}},"7.0.0-canary.080965f39.0":{"name":"@material/shape","version":"7.0.0-canary.080965f39.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.080965f39.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bae0bfdae557283abcefdc55140af66172778926","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.080965f39.0.tgz","fileCount":13,"integrity":"sha512-6F82xZouroQAekrIC9s0nLceuDqedt1RpmMZB4TgKuOEPhpP1EF2GNe/O3d0yndQL5gOrC/UPKcwwZHKvwcIdw==","signatures":[{"sig":"MEYCIQC9Egp08bhHFif4Rt0xayZvBdvp2gqdvHeTYXhrQTKhNwIhAKVJ7VHCU364JYEfPgcDO/Mg872pKpbuuR0wvdLMmwuM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24604,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8h0VCRA9TVsSAnZWagAACQIP/A0+wQnR6oMzkqDIH/RJ\nQaIJhFuFluvbDxAk5elINjDhf+lAMRSBPq4Ivb1o7F1z3olRnhEMZAH+iP5P\nbOM8cWArfd13Bn+GtED4nFRWGFvv9mhlzEUHwnDdt1CPV0Uyfr2hJksj3bMy\n5mx0inLqIkxOn0GEHCNrjy9wcPO0Bw+rgS3Vrk/Du2sFEpG5pMFd8oEGix1s\n1J0abIklWY7xMn/Nq7hPiMynPRzJcOIVN0KcJ1Ces7BUJsWok5MVqwSyN9Yi\nHr3CqOiIoEm1hZ3/YFiL2AExY7xp/q+l1MclCOjA28iMaZzcSqlLjIEG7m3T\nlU+oLhg3HlGxaeATeolJKNHcfymFYGHfwXcHsxtF9/Bdc1/u6CqkrdR29icI\nebwBhRyCuCIsBA/bKyh/9zfhaM9Mti9b7BlIqiZn/Cdrl3xACNOvtLJHQ0wq\nEQOrs0Z177W5LDyu/V8Y6s/h6H+evm1icedqJfbe8zHNZJ44ONTWiXjqBUIp\n9lAPEOeVYE3cT8lYVRfSnpfjwOEdwm0BLfBPCYw9XDH29g/AeTTICApkPba/\nH8Eh0G8qPlXfqkK2QVGZvhFCQQzJmwgWTVrH8ZxjduwK2gwiFJLQhydYhXQE\nDBlimZA3XMLMqSW4sdSY7lHVC9QhM6z/eLNeiQbTOMLq65NfX9d4Cx/c1rY3\nl9iy\r\n=GfO5\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"c0d7c5371df46e0114aef4ac9bc2b3aad1377f76","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"7.0.0-canary.080965f39.0","@material/theme":"7.0.0-canary.080965f39.0","@material/feature-targeting":"7.0.0-canary.080965f39.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.080965f39.0_1592925460619_0.8707234640407575","host":"s3://npm-registry-packages"}},"7.0.0-canary.1bd67b65d.0":{"name":"@material/shape","version":"7.0.0-canary.1bd67b65d.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.1bd67b65d.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ef37ad8db4edf474b1b756556496b731e961e5d6","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.1bd67b65d.0.tgz","fileCount":13,"integrity":"sha512-Hyxsw7YGf/lzBJeHARduXvcHs5gwkBKPXkf16EwLh3zZdg4Mm4t22BzjmHnzNMkQ/ndfs9MCLr8i+rxilN4bNQ==","signatures":[{"sig":"MEYCIQCNdjRNn1QBo6TPeBIQu1n3w55nK87aj1KLDYtqGQIo4gIhAPd2l9phF2uen5P8drNaKRpF++mMNAszHLuU4Uzc8Nn1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24604,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8icECRA9TVsSAnZWagAARHQP/Rnlv5urRjWE64F950nU\nbFZ8cnMfmITXKmaotMQFSIqa39gQrACXwZKlqxqW7zLQM/RBLbD8p6wQrcCF\nNkZ376BNREWoE5pLEVnCLraUuQC1FzV2lnkzXZgFhhqk211iXtKDrgXfDsbK\n3QVQdi7UUsA1i78XMNMenqILF/GMBPDokmdZJwp0e3U5g2KDEulfQyd/GDV+\nc+1sUpF7X1GIB94FnKwWR5lHDgM9ngcGqhtp7fFxCxvMliWLWFN64w4mGatb\nKGea05rUxWndf2rcXioQXt476/PWh4UIa21aQUkBe+cmXFGW44tKYMJHpXDS\npAmxRUikKffBAef3r5YvXDD4iLzSzLZRWjO5ClyK2ESHM7cNVCr/3cGCaOxW\n6t0sKZAxBF0I6wMvTaYlmu7VKkERtzD7cjMkfFUBEygVhGcPdtbzb9mDIJMr\ntp7VBYrMTfXpb2iVItfqA0SfJDUXFkc32CJX4AZerhjnN4j0DZrwsl+Snp/S\n8qduy9tZyOWVOrkheXMfuaeTHv8/nmd6/yGdZljho0Ssi/V3Oxj+vOTIfyUA\njmAvLBafGG9zfsUra+maUYejQcu0xMK+24UJl8JCxUn77Q5Pr2vepx5kIvTU\n4/95ButeOcedmZOA9UtkQWv3qono9S05lksJwPWA3XvUTN3oJ9TLnzGV+pna\nluGD\r\n=2PzT\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"dcb3206c3f6c1567eec203025b36bff594d66678","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"7.0.0-canary.1bd67b65d.0","@material/theme":"7.0.0-canary.1bd67b65d.0","@material/feature-targeting":"7.0.0-canary.1bd67b65d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.1bd67b65d.0_1592928004459_0.6365019836295602","host":"s3://npm-registry-packages"}},"7.0.0-canary.18ca31248.0":{"name":"@material/shape","version":"7.0.0-canary.18ca31248.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.18ca31248.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"759d3f6a74209ed9565a8f2c4f7eff58fa504fe1","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.18ca31248.0.tgz","fileCount":13,"integrity":"sha512-eS2gHNRnnEwA3sDsIT1cwvMZ8qWjH65US2+6/6w+aSwTsOElYPGM7Jnuskv03IrDOOwuYZ1dN7msnJ8oQhSRrg==","signatures":[{"sig":"MEYCIQCMOoou7h9t0+GaiDUEKZ88SwSFoGvBiUgm9YDlh5skpQIhAIGTSQLyD9uv/05/KhtEJnV65GD885G58wSevcJlD6BJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24604,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8kj+CRA9TVsSAnZWagAAAoIQAJ/a/fy8rvUCSkpfRaF0\nIvYk4lb1YFcECs3/FtVJNoSMIqpmF54YdVJQc3qiAynKqsCmUa2xxKtJ8mJG\nlAet8FWX3kMHcw/O1sc8m2wgwSVQdSz0nMYGNOQJTkCxh0/DwknI6IKj8x/B\nNCnziAQlUSDYs8+jSEinE3PsjtSRyfSsdKFN4eafG9TrZRw8DTcP5kc06Isr\nPUnFDLjPN0LoC1FTEZa41rhdAobIE4tZCHbkebrC55Y7Mlg6C96IuKdfe83V\nuasFzJMJ0jtb7ZUHw38AtLStUEp3MjYQu5tnkaOBJla0DmhAc6/hsvrS7tiL\nCq0DYQC7zYm2tP+ZU3TvV9H1HEc85XmB4+2Wt4W2qp7Tq3oNk5wmhyICdRxT\n3+vaD/uP1l0j5V7Im3upMHgCTTQfD3nLUapZkIMyzDlfnbLvXiPYGh1C2efb\nMQhar+6rBrYVH9Fv96UmOZEBmANFhIm36NRcPdLMgmHeGNVBC7PiXMQyZw2+\nbCfBiSvLQGys8NGTOZldZutK2BQSJaGJWs0Q2IhqpxEBnSqXiuVlJ8if5X+E\n0fQTLingPRdZAfJKV1qbwUp3zSNRdKhh7rpcO54nguMBMZfPS2c509eiM/D7\nEWpiWLoVmQE8kn+szfFIICO5ac7wUoMIaKruW+G9B5JFtOlmJwDHISvyse4X\n5M96\r\n=mmF6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"34a77f9ac5b41ab1f71969d01fde32c58ffc08ae","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"7.0.0-canary.18ca31248.0","@material/theme":"7.0.0-canary.18ca31248.0","@material/feature-targeting":"7.0.0-canary.18ca31248.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.18ca31248.0_1592936701601_0.506697301810404","host":"s3://npm-registry-packages"}},"7.0.0-canary.39cf00836.0":{"name":"@material/shape","version":"7.0.0-canary.39cf00836.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.39cf00836.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c3c93afbd8cd295a688eb6d9119c267faa9ff074","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.39cf00836.0.tgz","fileCount":13,"integrity":"sha512-LDtWm9wNUgfqFGYyag+l89mb0ZWHMNk6Th8o9aR+HNgMP/ryDNolvWmT0f/5XNMDidJnLcH/DD5Ghz2PC7qAzw==","signatures":[{"sig":"MEUCIQCRlnz0AagdAmAAkBEBN2GJwexx6gxRp7cTDx/Me+nyQAIgEhVRppX5btfhZG8ItdP/oGAorZSgyNRDbr17S4jhaOQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24604,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8k5eCRA9TVsSAnZWagAAUd0P/Rsxd/chQSNuaW2QapVU\nJnDa7u+GejsKXpTPpeb52oxlYJ/eV2x90vF04cJlwcY7Qoo6C7OOgeFnhsI2\nBMpZ6ZigKdiic7T6PAAr6CH/uxxbwunxFuyZ/sl8WGRz9+0TgqvnirNQEgNc\nq3orRFgtO1Mnlu2WnmZjrsJLKnTn2TcON0A/8Pxk/ffR0mNKFyS9uDX+BWp+\ntYRF5YLtJzTU9RI3BZN0M8XlpMtPfzNhqIJpJwBiY1kqyC3X0AFO0MMoUV8O\nHVnqeLlppAur/Z0oH0Dv5FpYdrk995+ETTAa1USfRrJH71MnHW3oJ5e5vLzs\nVmkI3KGZp/lMjhH5OJizdzfa0L/mSH4wxWyBc9qt5BXUgvBFFw0yOjCmzlpx\ndwdhpulbKWLLi3+I2h7Yx1hlakuYPuig02kEupWGI8kWoh2hBcntmIYyzUVU\nFEnsmn/+UOWJ9ob2vy4EZjWg5GwKDpXyq/OFkUefGfwGXR84A3eLHO4zmzhP\niSD9SqjRDZjP5HLAPWgts0xrwxaY31GthGyv7VR9x2yt/KWVXKHxh4zDqiJ2\njVEJ98BbxfJbX2eUNJsm60iSroHh3jYnEK+WvjXSFA5hdImQ5mgyvemCHHiY\n3e4BdPnUHS/YxYkIbCZMimDjfDtO0kzUgVOohOLE1We6CEISr/enwgDv9ENo\nMo2X\r\n=/xtM\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"490def2a6575f8ae6a6151f024a9af3fed1f5215","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"7.0.0-canary.39cf00836.0","@material/theme":"7.0.0-canary.39cf00836.0","@material/feature-targeting":"7.0.0-canary.39cf00836.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.39cf00836.0_1592938078158_0.6039858028838418","host":"s3://npm-registry-packages"}},"7.0.0-canary.1bfda9e05.0":{"name":"@material/shape","version":"7.0.0-canary.1bfda9e05.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.1bfda9e05.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dd08faae296338c3c6bfb2d4991e07569ea799c6","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.1bfda9e05.0.tgz","fileCount":13,"integrity":"sha512-zle9P7alftuMYlplDmAw9fdqBNZdVOSCztOMdEXPMVQxW2TZ2l5i8Zp7SFuNJJw6qdWtiSYV77ufl7RG6iYX1w==","signatures":[{"sig":"MEUCIH/wkDr9oTUCjxI7iYKv4+Kg3oTRb4GJeMJ5Z9HnbnYaAiEAvcw7LFNpyZSKApJIqHMVzW2X3Z/Z/qpTZH3WHPugplU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24604,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8lFECRA9TVsSAnZWagAAMTsP/Rdy/qah1VWyfaZpHIMN\n6JTXc4q6WMOmotPnI0ZOVejnzZ1fz8ie2zrmH2W/zBb0owVQNpTKbIBdoc2D\nwoZXaOpd/ZXMuWHSelJmvL4emTllmN/U9Xzay97HIcy+ML1kbIizhrUjAbSD\nTv4osBrtbpJJvuDvQm1/MR18h+JdzLoiW7WjohrXwO/NvBL9+hsY3nzhAiOz\nRIagS1g9dcwLv7hdIvFJ/f/cXAofnASNbwt2fBxGA6KF7mWMIa+jrgivlasO\nMUaMUlLgUgFJBeEQrXcw4JATEcJS0192kGH/tFZiuTxEPwAZpwmEiRyhiVOs\nHfM3MZLbuF3n+rWaIhTCzcZdqAPImsAkbP8kGeSvfu/a9sbzqtpUQa8Lnifo\naWLV1bvb6faqUA5Jd28Fc2z3g0k0IC9vYc/e7w3TX5T4a9t9uqM+wPlshjR7\nQPsXCtW56AKrmO6Bz+gF9nSy9V7t59w4FSVBuLe0M9UpV0BhQ/kfLhMVKevm\n4Mf3SIGuQ1RGLtxFoePrrVele8weEGdQs/N6NCOHbnkzw/Ybe2xEnAIAUc9u\nfIiM4pkrLCj/gjlBARJciePh6vNT5/nYkIsEnOY3AxZkbIoTWVXb/W6oO1+3\nThl96XSy7kNB9qTxR7eKosrCoKCS/7YQTtqDErSrPhTaOk/8DIeXs0jPzTGu\n3/U7\r\n=cKpO\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"d858287d263a004329d22036ef43b63b8ec8eb08","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"7.0.0-canary.1bfda9e05.0","@material/theme":"7.0.0-canary.1bfda9e05.0","@material/feature-targeting":"7.0.0-canary.1bfda9e05.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.1bfda9e05.0_1592938820199_0.3405612151386468","host":"s3://npm-registry-packages"}},"7.0.0-canary.08731bd95.0":{"name":"@material/shape","version":"7.0.0-canary.08731bd95.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0-canary.08731bd95.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fd184842b289dfa8f229964ad46cd0b236f8561d","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.08731bd95.0.tgz","fileCount":13,"integrity":"sha512-rLiz9fOnlYTfXRyR17j9z4xpTgC8I4oor/uVK3FNjzrVxZMmrbrFUH0zTkv/3Knv6OwhZDNOh/0hybgb5937HQ==","signatures":[{"sig":"MEYCIQDOiKW/URthzCP8Pwn2woF1yiREUdqaQwxmTMNUvrXV+AIhAJuojedSaHsz84+0dBKW8mNyM/qMFD8xhnCMgJI7/Ssv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24604,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8lHgCRA9TVsSAnZWagAASWUP/0u+IJqUYkd7LWoB7ztc\nceLDPD7CsMRQ/ibnZcZt/B3pWru8X/H2iIq3b7ZY+CMP3naF5ry/bYwLND5L\nXzH3/GxfJH9BSLB7H1tM+4KANTq8RvmajjmCMfyBPspzYjSe4LjG8QWMH6bC\noJYU8GLeACzpCwgpC2NCw3iWIL/DaNvFYqtOGJ8AZL4upcQs/G/y6dDdAZK4\nTV5ecrqbVJMguou8CinGAZv26NEvhNxABV2ApE/BRsfIkZ8m5kIhAkcfAvfr\nz8b3siEE68WVd5DKLcWhQsYVarO5kBLmqgNw9hR0FKwI/ISPnd9LBtDBx2Da\nL0mcm5LxZ8YAXkUp0JtvutlYvSsYYV/NPA9TBnf73uSC51TmzX9l7qtjafqV\nqDG1G58VwC0tweDtLQa/8ovEiX76iLPe0WzF8Cw8TmW8h/6PfkpYq4JPBDfa\nfZ3hsOaNchgWflCc14f9ZRQfvxjXfdR9ThYAGwBLVH5YjdWkEsf1EsRlO5q2\njlq3jpVgShm2QA2jIpsBHtxTsKFhkUy/F7UDhjWC+hhL7rmwGi9W4ujeYKbU\ncKpCbHGqTG+rC9HHYR/DERWZfTGkc0k1ThVDtJFZv9s34oKic+d2nYs9MaEh\nnjgcsr/VtHHySW7FkMRaucHJ/Vv0URVtVX0o1BjHNDjGKOyAKhcyopEOQaNW\nE0el\r\n=0M3S\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"8e24a4ad4b32b05eb883e0de21ddbefd3c8f641a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"7.0.0-canary.08731bd95.0","@material/theme":"7.0.0-canary.08731bd95.0","@material/feature-targeting":"7.0.0-canary.08731bd95.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.08731bd95.0_1592938975797_0.7142596970810093","host":"s3://npm-registry-packages"}},"7.0.0":{"name":"@material/shape","version":"7.0.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@7.0.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"64fe72a560f58b3da02d3077963f21b0f806b759","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0.tgz","fileCount":12,"integrity":"sha512-17s+B9ohHRFlFZPVDsIiZNwcxlg0Z9lPpETxhSn0CbfJ17UPSI7jQouebrF/APFSpPTyIuoW7mmB95On78Jf7A==","signatures":[{"sig":"MEUCIAwOnCUtOoswFRydAy8zIeRFvspxqK4siKSY5F/iz17xAiEA7AilNV95XBAScARou/4NlKF45c8x+8Y3XQYAywRaofM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8lOrCRA9TVsSAnZWagAAU9QP/iBifW5jx6kjyZwkLTx5\n2xI4U7vE9i1Zt1gMCnmXnlZyxpnj9zBd6EZjbUM1wfZArQltb4b3gdbb68IT\nPwDbhL34eD9zXXZkAmr8HRvZIFoqPdKMW3toh9WksIQRGgubaH2c9GgBAcj2\nBYFgBKhZPnO6bWuXFlOTxdwXTJXgUTzaAGGSK1R3y0UiVSETPT2Wuk4DaXl9\nhdTJhQAYCHPq1ZO41EDQa3FLunuLo74y/ZwIBqnmGaoyiGPKRqgRZhUO5881\nVbyGIb3EwMbRg0S5X5+vmO/eRv0PpYqwzneQfJTRovZiS6Z5Mpdu+MwsIsOv\ncCs7eO0AmvkzTMis5+Nn64sF2GHhST03ZVJUutERX8cyJ7yWow7reP6pz+EX\nkkUPjYrELi1YvnTsd3/H4vR/ausMDlpDXD2K2BgTErWptWG60NsZwkebAmXJ\neYbMWB+ZrfDvTQv9QsPCryIg8vwgjsl0bAV6aK4PTaA+hoEgjf9p3BkLD9J8\nG6QkOTBdJgAeDtthns+9QQMBsWLSaiKe7IaMQuoX5fIfYRVIF2zURhGY/Tvv\nImI6ifKofOI4s1GWwe8C32/+yuIZa2pZ3eqlUx5ExmFVsuHusnAIDOm6wgJZ\nc6mCmYW7Avsjt/L+ZxDvCQvCs0GVS39THhxTHCzjXTSmgUZDBE2FfP1Z6FtQ\n+B1f\r\n=iMPf\r\n-----END PGP SIGNATURE-----\r\n"},"gitHead":"a3212b2099765947f2a41d71af2cd95fcbca4b97","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"^7.0.0","@material/theme":"^7.0.0","@material/feature-targeting":"^7.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0_1592939434649_0.11227527222992273","host":"s3://npm-registry-packages"}},"8.0.0-canary.a3212b209.0":{"name":"@material/shape","version":"8.0.0-canary.a3212b209.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.a3212b209.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"54aab58f8c9f7e04c0ad842b217a222edd7883b7","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.a3212b209.0.tgz","fileCount":13,"integrity":"sha512-kaaM8/MHV4MAo8YLLpzslS8B2iYqWevVzbL2vDF48cS2kJa0CdmsYQsSaHViO4zlZ1ZQNogWxjPtZ+WcSVIkyA==","signatures":[{"sig":"MEQCIFGgwuAZE9K0yTwlHwi+eBPE2+brXP3WaZM61zbfOYTnAiAlCj9S9CROix1n9a9cEgISEucJ03fSQotNaiomZhWUig==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24604,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8lPkCRA9TVsSAnZWagAAaWwQAInY8JwPqkcpeWKZFkad\nA/8By21nJMxUtIRTfEGbs+HIPllAeQivZpsCoD/6PG4pudtTV7nOXic7Cl3A\nAoHzcb/8xT9EzL4mlixmrvfxsG1jH7FbEHvdDM1yu+xlXo/sGMII572IxBx8\nxi6U56HugsloasvhCYjXa9hpVAXr6yGd8/j7TSV5TQVfE95i7cGjTG9s60EV\nX7RcW9wt3gyz5Atu5Yq9kslQu0kJORcGu4pRQD+BTtHbqPmD9lJ4tHszFh8A\nEZAggUbV9wyVS04nNeB54/4pTyipVoCCle408o5QL00zcPrxkesp5CHnzvhp\nwQbq4mKZqjyxY3BCDVPPIaG4tXVvt2P91wnlDSZqQCT9h5gvzB0xChkrKtml\nHYmpJ3K5r1YFFKDdn42upUrlTx3FCJNfRBYxJG+GULtomSKIGCmF+he2MtnP\nDMnj4azlOA//LleoASgr0E51iq+GkBXI2BQHG1yuVXFTrpnja4kAYdIcvey7\nLAPrnJM5WFKcDreuRBRECUYrxTjzfCwalWRZWXz641YsvjzAtFmFXOChQrFs\n9FVl0lxCtDSOFQWGc6KfyWcpgk3ne5miI95tygR8a6G20JqP+tKm7N827rU8\nCSeLVjsSxQ1Fw1mA+leHOen7QsseCEeaKd5vKnZJYI4AEXYPcf4Nf4MGC5eD\ngUaG\r\n=b8OQ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"c48f67451e0470c28a2a044f902a31f9fca577d4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.a3212b209.0","@material/theme":"8.0.0-canary.a3212b209.0","@material/feature-targeting":"8.0.0-canary.a3212b209.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.a3212b209.0_1592939492541_0.020389435831148717","host":"s3://npm-registry-packages"}},"8.0.0-canary.15e81fe98.0":{"name":"@material/shape","version":"8.0.0-canary.15e81fe98.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.15e81fe98.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fe50f7c841401d6d2858b753f64d77d198f82e7a","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.15e81fe98.0.tgz","fileCount":13,"integrity":"sha512-y/lVxyLUlAlaTBqKA+gCWA+LrDp38OlcxiHxW/9YRFc8882EBCLQZVNrRXkDRuUYYKuEor7GEsxV+9VJLjel+w==","signatures":[{"sig":"MEQCIGIyEc7o/QSX/IhKU8f9Qu68mtiVpeulyDcEaP6KMO7vAiAfOjajs5z2GNpWefwZ5uEHvzt6DUxC0MxLDio6H/f2XA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24299,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8lrWCRA9TVsSAnZWagAAtqAP/RfMWBPzEWu1odVLqJV9\numPhS+VP67R3KyYhH4RenCXW4F821sJ8TZbmxQFhIojFME9ArxswuPMSttl0\nM1XO1pC8AMlh2rjNSriaj95jl0AnLmxe1boQ7DOmAI1Y6IYXEM6rqT+dF27v\npnxA5pvQEyFOotNw44qRGIfhVpnBxBMmH9czM8eXiLph8ajPDHxJmOid7VyY\npGbpDFlf0y9Ox1YmpcSRTo4qYFxS3GMNmwK83AJjQg3iYJ+t7kT8wXBreqpY\nae3vv2GjsW/CDKE5r82b5KumJAVbgEetf/sCJ0XAfz4pYjhyTUPvHsOhBtFx\nkPQX6E8/39dVuzafxav0YRG6ezwPdebuEcLJE9c+kqo8mGg8ESjwkdqryCby\nhKifRen4ypoluqz2bby+uENlXEC4GZadO1kslAY/ImdwkH63uVjMNAJEYTRg\nCxJGgB8tzIdmqXdSvfpUU4wkRowX/pz2ZQryOORw1XnJWncyPIuDodYA/cBg\nP4CmIDveCJ7Md+DfS9eeuhe1LDOwnFMr/O+3ZVQixqrAjkgC+AK8eBXmDPD3\ndkdKTiliTPPc7eSpA0YluQHPO/UsMuhAb5AYg1BOqnxBamSH/A1vv3EyvnfC\nsoq4iPYvIPHq8JCWcVrE52XpN7++lJ6RNqO4hLadG9YaZp5ieQvllnPC/d4A\n1/Z5\r\n=68fU\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"6c7873baffc445c3cff5a006913ebf1bf53617ac","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.15e81fe98.0","@material/theme":"8.0.0-canary.15e81fe98.0","@material/feature-targeting":"8.0.0-canary.15e81fe98.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.15e81fe98.0_1592941269641_0.3421672208369053","host":"s3://npm-registry-packages"}},"8.0.0-canary.004c9d392.0":{"name":"@material/shape","version":"8.0.0-canary.004c9d392.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.004c9d392.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"094e4504264989404bb2efd013e98207b60bb5f0","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.004c9d392.0.tgz","fileCount":13,"integrity":"sha512-mt+dQYNqpNhZKsiTRhCeYFo5b2xKPqhXOYQhtEQLjkOd5ReuscjPtPCJf2DHNXSE6B1SxVO40ybN5H0VifdQnQ==","signatures":[{"sig":"MEQCID8s51J/Lebt98xQ7/ERMX4sg18gr7tqz07ZmjstRj63AiBwQ06DjsZCMp/609dkisrMn0j8hUZ6fZQRU1Af6F+J/g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24299,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8oh/CRA9TVsSAnZWagAAppsP/1nKu/fHVScHvRqQVt+D\n4oRSXrC1632zTehBy1SRZ0dObmQATN/BYc7aFrC1cfQYcWLGGJjpYnu65ujn\n/5CGekrgVQ7ID3XhFqhFIxQ773FYjAAeUbuZI+T19d1Ook1KtvoH8a/Tg+Nw\nq8Vtqtm9sAInj59HqTb61t87gvlU/3s8KcChSHdS+QP3uUfIlkSXNW1w8Uj5\nvrgi2iSsbzEMDZTuX2S7LxLyucecD24UJklCqN2PzpqolW35SIMX1eClAeXk\n/PRlSE9enjfuMyLVyCpx9ExOqPhPhXMs3IHuNHsxNmjwV9JeFPIQErvWry5F\nerg0vUl9UbryCXYICyr8dT/JToPeEmp6CcjW4EloZ+HkWDi/wPUr5KJr77mg\nNFGVxRNQ2Nkfsg8eo0HaBsvdDiifjVlzIF6AJslFR95j6GOn45T7K9/Ptz6Z\nlZwcv/ZZGjKbU1kMV2DeVxZk4Olz8L0KDpHqci20TrULNF31ensNRXfypVj5\nbHGOqb0Ebi9GV3QhEG8JMLhxnLpXQDUfIwW89NxmkdpTTuhmJ1ZjTw70IBRt\nBiKYLaL+uio59G9EHG+FUaXbuK7IcMQ2te+ua6eP/AQOn8x5RkFl9uzMfxnk\nUhMMDEZCZmZkQEsF0Nt5XU8YF5Gwl3VWL2a8xJdmUlHNPUggTkOr0+Y5pKgJ\nI+Sz\r\n=BG4v\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"776ec8815215499686a6c5d2a13543285c30a7ba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.004c9d392.0","@material/theme":"8.0.0-canary.004c9d392.0","@material/feature-targeting":"8.0.0-canary.004c9d392.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.004c9d392.0_1592952958871_0.763450373044686","host":"s3://npm-registry-packages"}},"8.0.0-canary.03bde00f5.0":{"name":"@material/shape","version":"8.0.0-canary.03bde00f5.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.03bde00f5.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c5444a0bb945f65c1d13e71e3090a9255c64984e","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.03bde00f5.0.tgz","fileCount":13,"integrity":"sha512-A3GbLQvYPwKSbZEdbAXKDmt3XgplW0NRo2orB1s8Aw4ZqsUS5/HLOXHKrPFBATGvf1RQIoSfWpidkIFODd+6Bg==","signatures":[{"sig":"MEQCIC5qTMoCsiOO8REbX/jer/l6W9FkMEKbs4BYXnIrMXRVAiBQmO5vw93BcXWosDvGrbhC5lKWWAcHdbn/fYpGerm2mQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24299,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8p7lCRA9TVsSAnZWagAAZVwP/08QwoQYDQ5gXP8OnP41\nFpeec2eJMwncr8P0PxyStHgzKre9BIIPDvBGrzSO3/FcoXQDGo8Y/mOjpQgT\nXYD9fznd7ljGuLqNIaJhcs/r1BSBaLNwVNTqhFg9Rij10IT3Jmgjb+3vtMme\ncrr8jEVUxn/PkyeiTJR5dC6G0+ZXceVUyN0gWbGzrByvOS+1MuVQeo/lkgYX\nNCquKwjmrkbjaBP8qq6LTpoNhqIqvUw1xKGuBk9SRPprHy/5/aL99OQQVmSC\nzaLP3Ty79qr5LNZ2WEt1ncwvB/DyTMea1h1B+qkIv47KrmQbDAGLv2jyv8rz\nfXfttcxmm2RQxpe99lXvWYClpYlm5cPsDBAu1ooDyUy6UfPKZPvMg/dH2MQN\nZAJMKVrpSUv1XOshMaf+e55icmnJfTOr3d7v/aIg8J9GGX57HERrwQaJg3+Z\naZQs5fvj59Q7gxskCm1mi9zIO6YsG9vt70WFbTM/tLbxDqthOtSWEGxt6A5O\nY0qkVkxEWFbHhjuy8KGxuXQP7xVkETGny5gbBWL4fYzghO1zDEibl5rgskL0\nn/z+A4+JR+qx78eVdQpo0UYtO4EGEzOljg+cjR2Fp2OGoQKzIcfdZdt2eGQQ\nMz/dYMA5w/TUTW1JSoP1K/EDrkL0nBGDhCKoE3FxoRU+NUuHeFsG2ZCbKy8E\nD3EA\r\n=gwaG\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"c3937a4069800a251640cebe987bd7911de089aa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.03bde00f5.0","@material/theme":"8.0.0-canary.03bde00f5.0","@material/feature-targeting":"8.0.0-canary.03bde00f5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.03bde00f5.0_1592958693156_0.266262379052175","host":"s3://npm-registry-packages"}},"8.0.0-canary.599b8c319.0":{"name":"@material/shape","version":"8.0.0-canary.599b8c319.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.599b8c319.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6b257aa436f606a4bd28a05349888b0d9e3c06f9","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.599b8c319.0.tgz","fileCount":13,"integrity":"sha512-OE5yeb5WoDwpilfRnyXZisJlROafrieEANTV0meeT2jl4rl2faM3Cy08LbtTBnNasCtW3jsUbS0IyFhSL/DdSA==","signatures":[{"sig":"MEUCIQDFXn6nwqWln/hu5YTGdvaeYAx2q84Rj7HD3xQSOUAqdQIgXrRXZwZb0h2qIzD+FQiWQvMUNehDQQa7+Jv0JSGl3lg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24299,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe82mmCRA9TVsSAnZWagAABygP/1K3iNUbSxan+6KjA4do\nluWZDi6MldZbERGW1hxjg4NV3f1TXyrWDAQzsliPzpVfh6SdwJ8RZt8wENps\nCZhlYj/MWfVotVWgTLcSmsPXESgdy+kFyIHPtOexbp7NdaeBdhTvKXKOSqar\nWUt8thSvibKoGf7dyWRU9IRk86VTexewNw7aJPRESVRAZBuFGY4hmrMXcdVt\n/BVlNrRauC1wuyNEeHgSJFUPZG/35fE48tkNHMTK99PGiYEUhHk1olkF/GOJ\n/y0r6UolJW/07QbCxp6x5HAKNVGqMliO4Y3u6p9gsP5DNJgM/Qf/GAFNXfBs\nfXik8EAUBP9+PfP+dHhRWRTPPT/TkZ8zK153dBeMz46wlqgGkc0QrApR/pQX\nSq2nYFZ+46hKsFZsuXbfaUH91V45FZFUA+RBVW4ylc64mAAl4dhsNeyxeVnd\nXu+98JDjC9ikbTTYMCAynavlSuLzV459EH9YmSdh//KoqUzX6EoVKoIigBzu\nAFTV9i5Rrd/wi0ix8CjNwudHuqMML1g8YtH/+7sOxGb2n5kA1wSoVx7aVX/x\nnUMK5vTo/nlhWnSaeP5jctFv4DNynlY2yJYxKi8OkGMh7EftTvozujM/hx3L\nflnhJkwXzIT5GFd+EoWOnozc4niEc22c/zeMpH/bKOmMYNKQ0XoAsgp5Sa9u\nYTt/\r\n=RC1Y\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"dc6dee1190cd8d60caae49aba599e9d7072433e6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.599b8c319.0","@material/theme":"8.0.0-canary.599b8c319.0","@material/feature-targeting":"8.0.0-canary.599b8c319.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.599b8c319.0_1593010598253_0.3312718867353328","host":"s3://npm-registry-packages"}},"8.0.0-canary.87e3be418.0":{"name":"@material/shape","version":"8.0.0-canary.87e3be418.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.87e3be418.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f1ad14ab48ba18cab4e5faccba872c1cd871af47","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.87e3be418.0.tgz","fileCount":13,"integrity":"sha512-DSGrC6kKKChPIIfecYzQ3UYbbZht/YzMMfWzUKyBpIB/n38v+gnAseXYnY7BoTHU4qNYgLoP3SAP/VaAodmzjg==","signatures":[{"sig":"MEYCIQCqkZrP8L92f013LS3R2D4S1OyEwA+fl3Vq0bKMhMgXXAIhAIgFAUgw6LEn/7dB9RArdn/+2jdtRA6jRnj/Qz9BDwr3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24299,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe85MNCRA9TVsSAnZWagAAnGYP/1BpaMjtbHuEoll4JqNH\n1+66gbdk7yTkINp0lRBwdsu+50H6WqT0FkoBFzdQaw3ESVG1faLjYSyJhpfQ\nqFiU+BSTRzgFiM34j+9HsV8kw9g8OoiLTwC7WwWzAm7rc3AwCucTlcAjJ9SF\nJbgMI1PjLRpZbGtAO9vkqSP2SYYaL0/L1eoxdgube8stJatcK+ZB17aiEfnk\nPrV/H4wQSRs1zypbFhNkrtTfzHI/K9zYDRJIqAIFj8PhFwphqN4MUixdEMb5\nrMZGvkBDeGe5eNU2fY1+OZlhcop8GY5A9TSeQQcy3+cue+Cyc171qDvVovMc\nEhU3UpiniGHmsIjMkl7LbOH0hP4tKCroXBMtd54EVR96yRclc+7Y8Lp5c4Za\ntkoKXcT5E/4iqP+9+IV7M97KOpQ63jR9UjOkFH/cSf3Zs6PdqSdtB8mDlTyj\n3CDPl7Qyi+WC5oZBsiDYH1Mhi7LDkxrhR5wHq8Eq4smjjfxuxbrO0Z5SZ23/\n9mBR+R+JiAPhcQZMWXAIUyNlh1mi09Ee4kglGXX+6qTND+AKKMCDMfjZZcst\nhR6qTJF8iVYbMGDgrDd1r0dmtgq1hZxu7OJr4L1m+eZMYCeZ90pDPlnGa0im\nLqVi/blebuR1dM/YV+dX8ajqPu1WzHNnRGZ/bBip4kLqW+LjAZXVeZ8YK1GV\nrM+Q\r\n=l9Ao\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"4f20e6e641b48a8ec7f7916b83272bb1322a3663","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.87e3be418.0","@material/theme":"8.0.0-canary.87e3be418.0","@material/feature-targeting":"8.0.0-canary.87e3be418.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.87e3be418.0_1593021197372_0.23987857694385206","host":"s3://npm-registry-packages"}},"8.0.0-canary.035cf2a6f.0":{"name":"@material/shape","version":"8.0.0-canary.035cf2a6f.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.035cf2a6f.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"39b11efb4fc1a80f99f98aa4867491c94ceb081a","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.035cf2a6f.0.tgz","fileCount":13,"integrity":"sha512-vWsBi+efy3mQ5no4D7LaGgCBTbGTT2pwmyYlW+dFItAhundBwuIfC0kk7R2cwpqc3ZoIZU/8Jvt93cNR0a+L2A==","signatures":[{"sig":"MEQCIAe4bWEwej1e1euIxIgMuFNOl0BoF4PfEDVXe9VtnuGJAiBI4y+6aV5ha1IYUjIIekLi96nqLpl34ikreXVGQFnZSQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24299,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe852pCRA9TVsSAnZWagAAFFMP/RQ29il2hxxGOud+QdVR\nSbpSRwsLupWIyOY3jo2Dkr2pQEvMbsMH4yP1lFpb4FjJq4Vkr5dS8gCwGwdL\njOFm9/rOholz8boEQo7+xZu9A+WpQ4JB+GzTPogopPMjFhUGzjV5theG6svB\nW1FvFDWLrmfFhojbbKGZPPx0xTLBaskRrbV2Jyu3KJyYne/bZuStD9i4grWJ\nklBxR1ipKKvzJuYTfogBbdoCM+E3MKi2ubvFkFTd6J48FL7qjCoQXO0krxQL\n0qmkwjzgOqQS9piXUv7xzO/jBHzNt3oJJNocZHdbI+E+93ZtGwVv6ReQRl3e\n9glCCdhvMEB2wl6Ne3/9VaCSrPYF8CHZOOW/wM3mrsH97Z9TdSu0ITmAqFvk\n4Mj6nbv0Y7rXN+8BjOrRB5bI8uF7PRjz2OXLg92sv/tsLWgf6xWNz608Zx28\nHPG0qTwn39dXmWb++kRklOeDQLl351Oecs326UfbxQ9uAuk0lt3TV1zw+aaC\nUx6AEZAXxFHaEeAYMxAaZcPgRJ0HL+pe5mKDi9HW3urcPN1QTmJoMuedF8Df\nOEh5ae7s0On9DFnB+2RFlnvNaxjSjpIqcB9dUXcdGrYTjMb/lINEG7xkHSjB\nMXtfOV36CfOad2Dpgk8lDyXVWGwPoUpM9UuUE9URw/6Y7j6+BxTSvyAUW/QC\nyvVS\r\n=h4Gw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"b41149a9f9767b120dac2367ee34f615761dcf3d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.035cf2a6f.0","@material/theme":"8.0.0-canary.035cf2a6f.0","@material/feature-targeting":"8.0.0-canary.035cf2a6f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.035cf2a6f.0_1593023913592_0.4202563203567673","host":"s3://npm-registry-packages"}},"8.0.0-canary.2fed2c12f.0":{"name":"@material/shape","version":"8.0.0-canary.2fed2c12f.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.2fed2c12f.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fb40be15def602f6c1d57b471990abe0675a20d7","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.2fed2c12f.0.tgz","fileCount":13,"integrity":"sha512-ik7TRZ03m1VjzU/n/BEMUVVqtG97ekiGWIcRLPTrbBRxqgvE35Lpo3Hc8DYaLa6Qicu8eqKqB+sSnbpyLWy2kQ==","signatures":[{"sig":"MEQCIEIq9hba1oBOACggCIXDaXINMRR+0ls3n5TdcMW8bxuSAiA3kbuGrIYuTkbMH81sbo33ZGfsZzIyR4dWhZIXqKjFnA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24299,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9QKtCRA9TVsSAnZWagAAEPwP/A6ihSZar8sG3oPTywCw\ne3vnSlEOU1JcxhM8xjYLRcNrLGgMPb+5uUhzAppgrsbmwhF0KtdzOePLqJha\nybWneM3z9fzIl8NzQLVhxSrhtkQcEl5/pM43+/c4J9S8KYLUruc4IH4JVuaC\nezUXXXU/un8QM57AiV6p8e94clPMjO0+k/N08TOKl7sSfGMCjJ6UgFx4KeBE\nAZK2hQ3Jdq846Q2cnqwtz12W3Rm4e6Wteh5ZDXoGBBckMzIkz2ECTg4I3fZx\nHSj3FRM23i10IKUFoUmKz75HzKHxyDXCQb38iLqKs6bYv4d5oTHNKzsKNimU\nMi5fIfp0q7OmETjkdCC8Q0CYv/fg2ElAHytaDIfAWuj6ZLo9hZA4Gn8K7Mko\nx9QqWKkJAf/Cxuifg2C7mZfWH8zm6pvbK7agxGWEgghr39/daZ1ynsgiiFt4\n6gbd4yKVRfK68NGPc5FVsgK9jtwLTwrN1UdzLgi5l6cHMRPjyrAOAwo0dVvw\neGoQ8JYKP8IRwhGoz+/0Y5XXA1MyPq/Cae2gqwkg+bDtNzCJ2Dli2cYshXrj\n4CAc17XGwoUq8s7oiG2qaH9X4cKX6bEGY5Z1vSW/be8NvtpTmVrfYr38gUFS\nt9q+1IBDr9lf4iDTa7y7cms+HlNPFUrphdsHRNCk9MsG6sxfXHWVwBVvaTVb\nsbH6\r\n=tdjn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"9c7b4d7bb8c365a3b1a4408204f63c124455f635","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.2fed2c12f.0","@material/theme":"8.0.0-canary.2fed2c12f.0","@material/feature-targeting":"8.0.0-canary.2fed2c12f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.2fed2c12f.0_1593115309113_0.5325618557741756","host":"s3://npm-registry-packages"}},"8.0.0-canary.38197b443.0":{"name":"@material/shape","version":"8.0.0-canary.38197b443.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.38197b443.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b37e351242ac7d771cc60aa83e56387d98ce4f5e","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.38197b443.0.tgz","fileCount":13,"integrity":"sha512-B4/qm6AAs2stv8UJvI4IuYsRv9O/p5qptSIZ46xtsYWhopaVuCd0zP65kfBXF8SEDJIp5L1XP8i16upnpp8RLQ==","signatures":[{"sig":"MEUCIGFmlBMdDJlYxY6Dmf/V0gTWfW48kgQM2dwz25lRATyxAiEAzpr9pr4TrDYr6el/ydpxFZ3mrlTMdLYcHl8SDBRtQbE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24299,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9RWYCRA9TVsSAnZWagAAHfQQAIijvHWemM3X+NyCp8rb\n17gu+1HnO91WMOJlS6ItgPeCeazUWbMH24DZg5CWG2OLmkKg8IhXw7HMM0oG\naaq6wCoSw/brB5tgmx+GZ0GmWOSxbbZLgN8Lpg9TzpU1iSW0U1JFk3y/AU1Y\nrX8HZ8EAO/skQND6Ys4v4sLZKGrTlHqOU8ijFhjsd6LZs3UlIai3lBdFY/x4\np5M8Mi3IAYxukKRJtGG3F0lzKKEIDsFwPyM9dMjOXcvQfLuzrFfWjFWejqGg\nva+g42EYDPDj/xTUXTHfSsypxZh8mZVkwHLzaHIHweuxH96yZJ835tAOXsLW\nhIKcBqSJxW/zJNrhnZMaQzQn6oqs+pX/BHtpv3cOb+lqIh7tIAWJ9nn2uZj/\nWnMfEVhDi2TuUtUUPDHt/VHxlIeLBjOKf737RhenCy7hZG3YXkITCKfdshmV\n7V5xB5AFThiFCeOZUjlQJ/xinKNN0hnCksdColvGe6JhbMZU3VsXj8ATvm1B\nm3+S5eBBIIK09q1nW7sl2A5XOgq3MN058MP2kj8r/aaS/WGTwh62fbulPKlt\njPAkcbGEP6rRga8chWS+fxWRBBRH5K/FEpteQLRnzJfel9ErBRy8Eosenirj\nCbMGV+gUxo8XEf7uttYtjW3I0LaBgO22z+dJlk52Z/FYslmxCPpH2TvcOwhx\n7lcE\r\n=3tNT\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"d5e18162ee3d69aeff0d489d4f3f73bb1cad7b1c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.38197b443.0","@material/theme":"8.0.0-canary.38197b443.0","@material/feature-targeting":"8.0.0-canary.38197b443.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.38197b443.0_1593120152310_0.02992048790610924","host":"s3://npm-registry-packages"}},"8.0.0-canary.69a35e80c.0":{"name":"@material/shape","version":"8.0.0-canary.69a35e80c.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.69a35e80c.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b906192a5df0510a8e3dc9155994c297e9208536","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.69a35e80c.0.tgz","fileCount":13,"integrity":"sha512-jahrefnZLY9jvy+9MFqWeqLRPZarIasMq9Kwe7NvWaDKrN+W6Ag/RM4r/UUttPkJm0TbW2yZT3B2pEtrA6X9xA==","signatures":[{"sig":"MEQCIGq3r44HAGTWtlcaCcO77PSyR2M9Q+6SNnXijpwrovA/AiBlwYNYieoEcFgTxAxHsZNY2T+TZwLz8w59zk46427F2w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24299,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9jKgCRA9TVsSAnZWagAAq6UQAICkGsLt+0Zb59NeiIrY\nENYWEi+FUAEZyA3t4ps8RCKUD3o+mvN5jLco4FbVVhBOgPrCe6tkRfBh/Tqe\n0F3TafkpzajIwCVNdBAW3FDXG6zOQ8ciqPFCPT7aeFphE7f3v7EVb9LYHe4b\n/Szd9zf1oD6lhWY7FMZwndIoKaIfMppgPbikJZDTgulhNKoq0Qxm2z2wUSJr\nMWXE4BSkP2C9yhA69kY4Ij7adn+qRtmjGaLYYDtQ5fsSIUkpxuNZ7UOhD80U\n7FZKeBoZRVh3wQOkYQwWGPWT51PIGFRA/NpTaUqcquu358b82NQnh9KZXX2M\nJqR8CvbOVVkhgyYa+bYO4TgUEIRcQ75KyldpPbx1Jd2yGepZEfuWRWMFQ9nw\nLNcGW3XT5xtyw4R8aOPqfvD/YG0lc+YgmPybdsdRzaMzS7DL9f0ru0EOuJmJ\neJ2uBY4E/12WBVFOw9GNHEsen4QweU937DoQGAM1aUnoSLRI399Nrp77AcRo\nj3CKASN24+0xGPPgu9jXaRImOtOklHmvuwGc5e6Mmt08kC/a3pPbOrnZLGMn\nLwPP4dtCSwneGWLL2CkDVbLVGcn7f/XkChJVrnKY819Wh5A0jqhas6UN/Anp\nvR8GqZ28B/5Oe2fUZE+4SkrJHA/0he+QJJ2gfhuD64cvX3Pid13vjAOm7E5P\nCAAI\r\n=XG3t\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"35bab77d7ad4b820da5ee4944c2cc2b7fe1533ba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.69a35e80c.0","@material/theme":"8.0.0-canary.69a35e80c.0","@material/feature-targeting":"8.0.0-canary.69a35e80c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.69a35e80c.0_1593193119963_0.9505070331964578","host":"s3://npm-registry-packages"}},"8.0.0-canary.df7154fb3.0":{"name":"@material/shape","version":"8.0.0-canary.df7154fb3.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.df7154fb3.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0745e16ec2a23652597792b71384146037b8d1c6","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.df7154fb3.0.tgz","fileCount":13,"integrity":"sha512-g98YYaaYcTRUrtKSppybB8Nj46TtLWpB84JtMll/fjSf5fqezbSOwt14PjEPC/uhuDtM78zk++h5Er+XHCUmVw==","signatures":[{"sig":"MEUCIBC0uLGwhUFgkZzqTh1su1FId3bz2Zqh2n3d9PPb8zSXAiEA/oRTZun3wAYtDyWElxkiRvHSXs+Iu1nTczhh1xa6xbc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24299,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9juQCRA9TVsSAnZWagAAWpQP/2RIoz80OwrVKJ2iPVJD\nHp3Z/r1cyOrrJnUn/mWVAoQSZjddxjiKIWY1NKGZfWEtpcUNV3b4dzfiqjvU\nkIzZinXJot4ipkcEpYnn8TEu4WBH8AqBQ+dKe2wnaJAaTMz3dTH4KgWHJ9HB\nTU9oYOD61+mSKUZ3+8stXfypgSjY9MLQsYG2tcYm8f0d5TyblLVf7OdipMR3\nqQgGGKbr7anPR7UxGRiBOj7wyY9YSpNWEKbNogIz2UefGcOhyv6rNuaGxElr\n0iVj4/cu5ko64CSwoibeaK49lFykFIXUoESHy+6s3r1OyJuzASv32Sh0iYkX\nXDcZe1P2ZSkYrsH/XO+oSkA20NMM7hU4VPr8AHgKcivqqUO3Js+FFMj6ZaTD\nT+KEHAlCtOFJ/sWUA8xlJ5QaPOZlM/MYVI152uhIefZu6rnyWBuTEjm6n365\nsCS3CxMrtOd4niLseqd9uoyL0ShiYNxmymKXyhvZomczKX1RcaaKX4yLH9tQ\nBH+ZTSeKxTVVdwK8lifw8E987QCSg8ZIo+T3mCpg9sjsiRuY21bzzeczdI7r\nVYL5rnCWYs+LTZOLOXGBs4yzszXOaXcntq5KFEx/r3S6UKd5HCRtmKuYEBOP\nU+Ub807qlGHhIkZCdyZneYQB8PgIol5q1ERq1dXSgHYH7r4IpvvDmGt7ithc\nLtS3\r\n=oQHN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"9081758d517c13eb6f120c62abd9689f1fa99906","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.df7154fb3.0","@material/theme":"8.0.0-canary.df7154fb3.0","@material/feature-targeting":"8.0.0-canary.df7154fb3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.df7154fb3.0_1593195407648_0.5557228656830269","host":"s3://npm-registry-packages"}},"8.0.0-canary.d5618602a.0":{"name":"@material/shape","version":"8.0.0-canary.d5618602a.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.d5618602a.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"60a03a65aa4cd4d5e35bdbb12d5f675528050cb3","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.d5618602a.0.tgz","fileCount":13,"integrity":"sha512-bk57KQ93dpuO4L5jSEYZb6wEywninVKgibJWhOcQJTIPWxmTP4BcNl2K4peZUgV8Ig1pBgCKEBWBMXLi494y2A==","signatures":[{"sig":"MEYCIQCOqIun7y5Pz7E1OM5cBP2aYtvPP37GfYuuug6teymFjQIhAPxu1CGTOTPEcfGfGpjDXgqCkWAYCepYMJF70/vtWjd/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24299,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9m0hCRA9TVsSAnZWagAAL5IP/230bEuRSIrcqtEse65H\nHIatXf0J/FExNeYklSNscVCKPYs0ZQPJYJOg19ZGQjytnkIgrMOUrDvsDl47\nBSm7jXJ1uyegypzxa69oaWDMvVzzY89c+/3AU7Bc/eIx+3727qY0WP2YoioX\ncXtgYuftRSphMv05g+vpGcDgLYqNc0QmpUk8TiAIazWsy5fEDB7H036xeETM\nttq7ci1Ypq7PwPToO2UcTRs3zl+ApL1y34N12l7gpxsZ4UJ6pr3GzQWAtobm\nMAi09mYCvUm2yNZDWPV4yeXwEdnUKiDl2x+neCppHCrt4uT67h0kCD2B3f4v\n9fC4q4n13D8zG7cyMbjAI6RPBKmVUW9344IfUyN0FF/K+f/YvErYuxvpnahY\n0CbJUupDrTt85sVe7W3wX/scg7D81qaqk2/ZXMOhl661P+6mMt+czutwHzrE\nySY0UJcS6CpxrgRLXO0B/kQ4gijPZFpwVuFVHh4srBVa/M7OiEHgXou23U+u\ngO3hUtZavfLYiKfS9D5hQ1uQ/wZQnJ6iaaiwSy42xZodnkj29DEUbC/P3QoA\nx++Pq9tEVRb5u4SKk+4Uj6LRn2hX41lvt4d8pYeFZf8EqU7fW+nCy7360ycF\nIjZncVmhjqqWEemUj0qUv4tG76/lT6W+ziXbbAJH7l5Bh7RbhpgmbT0uOhJM\nAmtA\r\n=PvC3\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"ced8c184e8043c7ac8faa813b76b9661cbe247c2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.d5618602a.0","@material/theme":"8.0.0-canary.d5618602a.0","@material/feature-targeting":"8.0.0-canary.d5618602a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.d5618602a.0_1593208096652_0.6775994870629476","host":"s3://npm-registry-packages"}},"8.0.0-canary.e590b376b.0":{"name":"@material/shape","version":"8.0.0-canary.e590b376b.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.e590b376b.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"87c72f252472b444e87d8663bbdb853c5d92eb92","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.e590b376b.0.tgz","fileCount":13,"integrity":"sha512-bGnQkKxWC3bbcWwURF1sdpiU+cUuCej6h/5YjjEJAqgQvELTnD4Np5mMXF9a/w2oXTgruKtPG1yJSYifNqXM3w==","signatures":[{"sig":"MEQCIFBzSNpye9lEZJB1i2FMt4ZElV87AS0BiugDzc/lEsU/AiAgj24mW+iIDxEHkjMUCitJnyzkcBB6EHO8xdA3ipFEhg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24299,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9oN5CRA9TVsSAnZWagAAgrQQAI8qFjtfmbUmma3HZRyS\n/8vDKejfhGfaQ9U6doXU10NMOfJIs8VVqkqB4/esUFJjTIgKQh6Ph8zF/U6J\nwdbrLQmn8Bc6s4LjKPpFXBMOUA3KQF73OOcRllr8aKnWMAiiw6mlJ4Oub1ED\nElM3yzznSNuWvWib5gZYnFmJkKj8DLMOR6yJNO2/joFo2jOEb/amdqapFp6u\ntUaBW0MYs6rN9pGLUomydBIR1NdL83rXeJerBkZK+AQumsLmBOZoUBBa1mMK\nb4hd7aWB9CT+SMnZhxSXc4wRjKooj0OLGYBl8MvvqjVOwDBtpFnwV9lZz6J5\nPXQoRUTHwlrXnp6D3kM+g0U4aKKkNXHhbhwZLDRFhQdqpSmFtor8sQEWUw3c\nXdF5LUnaTlZT6WjnQoJF8qxcWrPgdCKONBTMDB9ic1gKPPorFDDmUXLWfLmg\nkn4xKpZT1u76vDyUVD6nSgI+pr3shX1MisWPRQkOL1SNtgRgEWRMjC6W3TVG\nbn+XC09bIsNhLPHYTcpEKf2Mak7a8HeII+DgZsA2zpXKfGhqWkoxpDhSSy1w\njEs5xLM0PwQ1gC7/W4XeQSfcKxdGZcIMX5qpQd4ffXykXFKYHiJDgXN0TlUl\naBDmL190aTV/NZsiJoC7f5IUUZAB2xIak09IRN6L8cEbwEMHrHmwhJqjrIi4\nclTG\r\n=5rGT\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"0ddfb390b804034a98ec0b8e7741dd3f3250b5ab","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.e590b376b.0","@material/theme":"8.0.0-canary.e590b376b.0","@material/feature-targeting":"8.0.0-canary.e590b376b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.e590b376b.0_1593213816882_0.4803161089439345","host":"s3://npm-registry-packages"}},"8.0.0-canary.0c9d6bd2d.0":{"name":"@material/shape","version":"8.0.0-canary.0c9d6bd2d.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.0c9d6bd2d.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3281b16093d91ae5f04638a3267e56af26448a92","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.0c9d6bd2d.0.tgz","fileCount":13,"integrity":"sha512-qaLOg+yQ4VY2oOf/M8AjQhlS/7G7MqfNbBnMhhDak8YpoblKmy+EfhPrNrnRXLfrY0m4G9XpEqJyfrNW1OIIVQ==","signatures":[{"sig":"MEYCIQDqypSu4rVgI4MNYjllIbqUU+J8S8A0s7Q4MMBYiRyC1AIhAO2kWsC+vbAdK8OChASmqf0njtafJXXzTUmL1ZyGpT0Z","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24299,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+iGhCRA9TVsSAnZWagAA9LkP/1lS3FXiCvKC1+vnrdN3\nWb0LD6L+HTE+48f8crRIg0mMa5aC4UQkLS5xhcm+MEhqqx4j6frFJkGDZ/cV\nzihPfxJRTVsQurBbr/qm6p9HdvmYdmKgHg/WmaUDjf27NkAjpmMqvBfDUgLA\n/TVoi7DZ+ARKvPynKl5XQm1gyHgPUuipng9Br8XijXPsK0MPTaF7GrDVGRQh\nVaxC0nqB8BC9xHqZog12ukrFiYPRbPz5Hqr27rTeM+lpc1DuoLPDj8n+Zy5v\nSykhqtbtzO8e7fMZOl8snY8yYpSoNbY3xgN/LlVXnz4V73BGKdX/52yD5mtR\nE7z/1GT8CBfGuS+yQ/n1NKYGeHy6V4fs0CXJgcSnWaflHhCPZchfrcOkj1Yu\nE79WV6SsWQerWwB5SIrL9WmE6s04vo+yOSUILNBu0duw+oxebZT7VdFZGF8t\nmiRrNOj0oB15kpiMr8eqQbQPWu2keHL4N5Ch1Rqesq0VW3JmJTcaizYFnWSX\nlZt7qYW+yRhAl0ZgS7vr4t6/OnQRFJFxln6aoRYW9TK79dgPhMv6lBGXp4iP\nJ4sG5lBm7kNbs9TfLaICRgacwK7FEqCoWQKKOEi41nBeH51t65mwZY5UhVJg\nY4EAZkKkjd8/PShacwec+fXhh/SgVH2bWfKzgSiyasNdSDNsKD4BbUgYU1ha\npZNH\r\n=Lfb1\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"4f171433da859f637823aa04bc12d72783771f90","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.0c9d6bd2d.0","@material/theme":"8.0.0-canary.0c9d6bd2d.0","@material/feature-targeting":"8.0.0-canary.0c9d6bd2d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.0c9d6bd2d.0_1593450912966_0.6507259086023103","host":"s3://npm-registry-packages"}},"8.0.0-canary.c1fec4246.0":{"name":"@material/shape","version":"8.0.0-canary.c1fec4246.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.c1fec4246.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"42e22d3342b7a6660793b3bd7de231460396c00c","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.c1fec4246.0.tgz","fileCount":13,"integrity":"sha512-NF7gEzOuk5BMV9WHkGQolfQGGxt69MAdFeoh0jTSLW84n/5+yw/ytRsrg6QospemNSaikcH4fDWu+w6116V0fQ==","signatures":[{"sig":"MEUCIQDgX6oGmBo97pmHHnVNTS8iPlyw5DQpttPxmmFyb5w27gIgSfB3DVqvS3BZr/pUJE5qoNfrJWJsOJQ8YUx52aVu7P4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24299,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+iU9CRA9TVsSAnZWagAAcHUP+wRw/vFAn71A1l85/7IZ\n4UGOvsKE5to7B4Uuuf/XTKj9x+Ja+bfso8nIp5sjM7pCdr7r7spQaVRu2jyi\n0IEg5bjHrV6IXZnLYMuRoPh5SynDxtxxLm25dnHhMPInH1Gcbn18dq2o1gZe\n7mcSPOrMG2ISbQcteIrKyYb8nBATHs3gmmclPcAPt2JfSLusX8RzvWQi3S4K\nKHof7SJywJ3pzFtGi1/wniOVeN15Y47cRkyqFXU+OM82Fegz5mmOOe2BKCjk\n/aE2PKo49Txc6/0ze/IaXc3U0u1Aw+hwmY7oEH9AhhRK814/idxo2rXIYO4n\nuvFgGmInrOGMSxm37fHW6kDAFxcnQyk5jXirX2rIovj9xr1zpOJ4xSVEPiis\nWAUaVAcudmb5fBC7sPT2KI2AMT/6li/Z7kKDSBmZjFUeiuB4NW5+yTZxHM47\nMt5BkYjR7Fq4FLIx2wNqEq2m8h+c6I2t/avc5yNU/yrX1Qif2tZ2/1hwEHmi\nEZHGNpTQiHGfR6SEMyQTF1pyLrNxYHRmXv6SYc84QvxpsrvuHEGVrNM93W5W\nRZm6BNW5z5kUQhbxdX/NqQVRyC9dfAqaN4WLwcSkZoUjKdnWmB++NJ8LpszT\n1466B2DFUhsMd/Jcyk0BDAvTrAMgwptktMrp5XPXXStVwOFAIbos/cIQ1JO4\nxSdC\r\n=dYXf\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"0a588e37208b314f42e946ab4add50d0ad1ebf7c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.c1fec4246.0","@material/theme":"8.0.0-canary.c1fec4246.0","@material/feature-targeting":"8.0.0-canary.c1fec4246.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.c1fec4246.0_1593451837092_0.2839850484903743","host":"s3://npm-registry-packages"}},"8.0.0-canary.c678a9d34.0":{"name":"@material/shape","version":"8.0.0-canary.c678a9d34.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.c678a9d34.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"19bbe9b3fae26394ae9f740d73cd33387fe9b215","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.c678a9d34.0.tgz","fileCount":13,"integrity":"sha512-3yU1RnC9taNFm7WblhNZR2DrM1FvSvpGPKohMmBEuXKmyr1s2tfDA/5wWhtlIj7Ii90o6lNF4IA4AbPqlM5eGw==","signatures":[{"sig":"MEQCIH97EZWmtGBT4D4/McAvFbskJWWkhdnjcqwT+zlf83utAiAPnZRjAzFstIPXpKZF73vTYu8BrQ3tXl7KXF6TpKjFKA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24299,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+iooCRA9TVsSAnZWagAAr+AP/1NxWX84AFJ3/bUcjdVn\n72kmVwO5lKNtnD8UKARNyJdsYvb1SlIxMwJ3F1aO8ZDjQRBbIo9D0CWXvVoB\nhg1sFxzKDHYvfCM4BmBm5pwxNktT5DE4WrFpLYZWDhIbTkmTiHNmmY5Fa4Uv\nPSM5rkBWLov0jJley8llVyn2rOLG4C7Rm5W11AUlwdFVweZQ+LLPCwLFTCI6\nucRnQDfYpGwq20S2HVKzr+kJ6FVJJ2ECbJodUvL0yuGip9Wb96WvcKU8ndcJ\nN9tzeRLZttEzAKdRDkkzJv/8dJKPDW4MvomBrZlSrdbO76CkL9pfHRazl5fB\naAa4+uK9kLTYkT70ci+vNQRsNwHG9FrvC3agHs/Vot35FrjYy2aQkWj767lJ\nLExW3gH4tSROpwqkGJhfDG9dDbQizBG9LFL1VS2e8SqxnEVIgS/z/zOfo2F3\np9HumHe6AJQzzTmoXbcxjV0JKifTKW8rEVNdBLP7FNqkV9bft3qMTrNkvtiA\n92l/WNBVTKowgP+GWkQZnY2hnSCfDt7HnkEL3lSa+4S+4onJCUvvYyrGp/Sa\nmZ/Dks7ucHvz325cIgMoQwRhtGmmvM2031ONpqqqtT8IgiZmTVwHwo/tvRH4\naBPXXcsWpDPjC76g/77uPPvsg7RiALPkNW6CB9WMXkZtVir1utB84s/HpQNK\nb2Dt\r\n=nWGf\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"bc361f7c6bcb498f3a6dbbe6255c06a66b7dea5a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.c678a9d34.0","@material/theme":"8.0.0-canary.c678a9d34.0","@material/feature-targeting":"8.0.0-canary.c678a9d34.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.c678a9d34.0_1593453096138_0.39706535369089413","host":"s3://npm-registry-packages"}},"8.0.0-canary.521afaf6e.0":{"name":"@material/shape","version":"8.0.0-canary.521afaf6e.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.521afaf6e.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bbfd48ad105de6ec1d5fd6845ae76dc989cb809f","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.521afaf6e.0.tgz","fileCount":13,"integrity":"sha512-ti/GEGuplJBw7rDXUWcrSmVZF9ISgWb/Zvj2R3QRYX9YU25SbC+a1iayZiekIaTQuhcDzW1fy/w1jS7BqnAFXg==","signatures":[{"sig":"MEUCIBx/EGm+hue+Jgo/gNbAZiUsysGVlWUlTM1zFLWr3zQ8AiEAuWWQkXpG1cLu/mfzmhHwh+Fa5hBbQIMPEmDYxNN9eZw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24299,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+1S1CRA9TVsSAnZWagAAHHsP/1V4/J+GOcqXl9OlNrFc\nXhkOsWj6/+Am1RrbgHoc8soyCVZmcqAPAm4yPNGfgD2sX4qKUqOtAY62N0qz\nfOnweRniCmiG2/2X8PVl6RGMQFxWGXN6WGZn4HicHTIXxPQHcfN8XFeSltN9\nrBpsemlX1wO46jQZFSecq3G4Pi1cNIeVoLtFzI3o5YOHVzWZWcGzDZpBqbpg\nHe1P9FdWPsw/Pt0r9TrlzatXlnR6fD6VDLJGzl8KJsPrEbIqeE/py9UT+cKZ\ncijulpvbXXazvtqs9u4LPjZYmM5A5V0F796f6vxzRdYMozHN4H6xW06fSVqn\n6p8MMLO0RfqRx57TJq4BYu+jQhe8AOguj01nWRZHK/Xjt/mWtNUYRq9M6eJl\nLjMJHK9TPdV0HJ6qShOXb82y4eQkupvYGF7MHlz40KKx9EKkebB0575Tug08\nI5sYjrWx/RE6rWCCaWrF+dMS96wPlerrL+bH9flDYQEsAVBUAsZhhiJiEEtA\nYRF3FYAlAVIxVZIZltnd06o7wgMSya63vlc2qJJ6pUYI61DMRmrsiAnP6Cp1\n7PqNDLxcmsA4qiENraM8yvHU9muh7NY91FZ9deg5XlPdGv7xrEWxlFy0vkzw\nj3str8HkJYzmghUtYwmRndQjPnZLW/QVFXe+r/C2Mg7IwUaTofD0v9dEkei+\nkljG\r\n=bcbu\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"7ef14e207a6031cf299541a4dd72c2eafba3ef91","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.521afaf6e.0","@material/theme":"8.0.0-canary.521afaf6e.0","@material/feature-targeting":"8.0.0-canary.521afaf6e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.521afaf6e.0_1593529525223_0.09030975992478618","host":"s3://npm-registry-packages"}},"8.0.0-canary.a2ad48839.0":{"name":"@material/shape","version":"8.0.0-canary.a2ad48839.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.a2ad48839.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"12d55bce7baed020b769d8a343061f585064320d","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.a2ad48839.0.tgz","fileCount":13,"integrity":"sha512-mHCr3ZpjJ93s5wMcCo9KZiTc94LoG66QHRc8z2KyE7scicbtZbb61PBBDAcY9VDSRVp/d7JFI6KatZcPWBxUpw==","signatures":[{"sig":"MEUCIQCelnBHyOPtvVU/vfUL+ltUkRf7bEOu2EsVbqg6pA1FaAIgbfs5fd0Tw/GHgGv4VbKY0wO66AVf2uXyBV4KXwdarFs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24299,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+48JCRA9TVsSAnZWagAAlF8P/RkgeBZ/LjW2Mrjr/xAU\nZI8/SS1alHbWA2Kx3F5dhuSjiwprjwmOFJHnwM3RRNqyEggJsLDcbBDOf3hX\nOr88tSH3pwpMMvePm3yhW9EGKHjS7kpSS67ULhcnaObRinLMHdGsDvonKdfK\nLS8G4+Au7PYZPjSDMBg9h4v0KfxXYxTazZR/kknToih3TU8YcD1qchkmUqcX\nk1++t/S3FzNXMVOEOO+tk4PWwDOLDz7HttTaUtZ1UmP4lfKf5PN1oJKZPmm9\nOG3UfzQLHT0F/VXK3kGXgNaTbi9tsFXSkPkBaK26i94pX4wdNT3std2kaCy3\nyLOO9iG0pmxjKobLEAdhh1WGicitET+JFTkVtEGIHO8GMYfjHmxEMxc8pgTR\nX3skiUudpAe74yHgCOYYNvylwwnt56xvEEgL40u2xIbX793WEmp6/10bS7NE\nlBRg1anFJ0HM6F31XZ19UuSpoS3iaurhVYA6+1YywoGpvBKjA69KObwCUq0d\neShqADPoQgjFbjhu/Yb3zMeBsTVPRGVB+7bj++iG4OY/ShNxtJv0Ka1+viYZ\nVNblxAlBVAO3jEC2U6tLluNEgjR2URe72D4ggUDNn41AGkyPXmxBuvYDdu/v\nKhU04qY0xa3H2owAb5TShG0OjUq8f4oiUMo5yjD6Gv3VRB+BhAGpCo5xXMyg\nIJyO\r\n=0Sf6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"f7f949a98e604fd4cce2507e8d63c145d2f34e55","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.a2ad48839.0","@material/theme":"8.0.0-canary.a2ad48839.0","@material/feature-targeting":"8.0.0-canary.a2ad48839.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.a2ad48839.0_1593544456802_0.11087971648332307","host":"s3://npm-registry-packages"}},"8.0.0-canary.ec2385881.0":{"name":"@material/shape","version":"8.0.0-canary.ec2385881.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.ec2385881.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6095db74b4af8a3680b28f694879dbeebb12777c","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.ec2385881.0.tgz","fileCount":13,"integrity":"sha512-Q/vJ/mGfXN9jlWflYzmmy+dWj5dBZtCJiE/ZTooVvgUtDA/sIsl1a9JaIdrY1I2oCYYKype6Wbz6u2pDXEFSAA==","signatures":[{"sig":"MEUCIHlPfs7aNHkZBkNTn51FbHbkERz8ApznBo3QO/Y8aMUwAiEAxYqJU7tnYNSTO96kinUtZetGkRSvzDjHBdpTPqE7Z38=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24299,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+7LLCRA9TVsSAnZWagAAi9AQAJCpIEvwCUOP62sA7g0A\nAs5RlFhQbRnZ1yCpTwn9PIYybhmmqyPaoxxsof1JdQgfXVOpdD4kfNzpzQYG\nYGhkNgF1Xk7rvOhoNao4cytB/W8ntFXn4g5VtFBVkgwlNo6n9aJGuPqkGeEY\nwYPHtCuhflzAvCshNxHxWyHhZ1DUi/gGsZMxeBNK0X+lPAo78QIzEOlYqGvj\nvI3cpD7HbjOAv6cMtl5oadMVh4z7aZU04fCznQBJRGMBy2ZpBrPBpnIYqDHq\nsKjgRV7WJXieM8wI/9fqsNC3B9PzdBs1Qsi1DBAd0B1E5zXsOGEUBxo1WQhy\naYKhxJhbn9PxNd0Q+BsLnyO+ioiUe4p8dZ/PgfcnncAl0BT8S4qFdHGImRqi\nEfZAnQ6vtjOCiAGxzdpVWomzR/jPW+EUljJ+cgU60vMF4GuXEjRiGzMTey3V\nD8lfrIsxtH0ARIencEsCgrtuo/YC4rnNYNJjUAmNQA0cUYyqv91kww7QtGg6\n0lsFY3hm9rWnTsNL4qEp/WVCLni3P4LOIh/vWfqkxhnSsak0XNxtxYG2Yuw4\nUwHLCQcfhUbiSQCr2Ahe4TzT6ShuYI26ZNE0jtGAGlrecRaMUTaxRbwoPH1Q\nvG4L7YymZYb7cWqO9hrLcCCQm0sPR8rxOISI3BogSrdK7gexCUpdiq1f2ssA\nKsy5\r\n=4acN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"0039d314b5ff29856a2f17a5ede426f3f01c80bc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.ec2385881.0","@material/theme":"8.0.0-canary.ec2385881.0","@material/feature-targeting":"8.0.0-canary.ec2385881.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.ec2385881.0_1593553610684_0.24049334245963472","host":"s3://npm-registry-packages"}},"8.0.0-canary.610c26c4a.0":{"name":"@material/shape","version":"8.0.0-canary.610c26c4a.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.610c26c4a.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fc53d74e3042912efbf2b245ab5bbf3394673ac7","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.610c26c4a.0.tgz","fileCount":13,"integrity":"sha512-rltLE/QhW/TsHeiGu+noM2wca++1d854zm1Z/wWcZd4R+qU4WF4t6SpqvY+CkYkQK+0vrFTwlajwHpfzXxsmGA==","signatures":[{"sig":"MEYCIQCg0ps7EY+NLAMg5xNoFtsAL8GZeEHjHMUjUIhcDN14QQIhAI1crymzbwnMM/rW3DB+D3RdqXm1ejMQcZOoWlRVY5/3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24299,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/KQFCRA9TVsSAnZWagAAFCMP/22kQ76aE2zuf+emwp9v\nr5BZ3Z0FVO8/O8hGxyobUiTiWV9Ip+3AM/F0FQd5tDGJDpVbTivXHTxsdTno\nO63V718QE3ckxuG0M8Ob3ujexib6G+zeu7Z6erSHgpZHIUHontvIxglXgLnu\nG48hZm5NbvTkaSr1yONiQMXl3kXg2oKBcdtYzMDBMK3tGimcS+Gr2bS5RKfg\n11PwOepFHyGsUTKWxYb/k+MSJySvsp1LwAQHmfnqE/Wj/Re2FbivHv9RnwWT\nEwfcUUTl8bjs30Fm8E9y0u7ang73lratPydURiOw1grqhhb0jdE5buFYZ/sL\nPQkRXh2qDnlBiSQRAZv8C5gqSKTVy43oy6QypLm2KCJn0TKiam8mByJ6yZDA\ngLL/9xav7IHMjbby21A9sr9g4tqU1WPOJNvjgzPWLdXkkX3lbEjyUrPjmPK3\nVtZNq0bkBBOkblrvHfyp5S+dnJtUEP/YS6tiZOrClC5R+hSoksazYgltyVAd\nZPpbhMv9ObAvg6N2Cf5+BzlAZMz3knqdPLvVoEPgf5ebPD41F+gja7Unapqm\nipUJSJ+aZqyzLXDsjFvpUeFUs4vZxMnBO2ZwU9de4Ussop65c/tbKsIB2Pki\nnwySw62GRnndmmhoI5afUMyS0jY7WRaNnNOReqeULqbG/TIvt61TMm8Pmgej\n61gp\r\n=2gLv\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"84352d6873c8f275f890267635fa416189f57a3a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.610c26c4a.0","@material/theme":"8.0.0-canary.610c26c4a.0","@material/feature-targeting":"8.0.0-canary.610c26c4a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.610c26c4a.0_1593615364653_0.49883924325595586","host":"s3://npm-registry-packages"}},"8.0.0-canary.e2ea4a99e.0":{"name":"@material/shape","version":"8.0.0-canary.e2ea4a99e.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.e2ea4a99e.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"52c14c11aea2a101317f9b69ea66968b147aedaa","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.e2ea4a99e.0.tgz","fileCount":13,"integrity":"sha512-ndH88Kjpd581TLZAnBSwTbAzgoFzKiBwI43AFO3cVZS29YbFuLUpQbhhLqMfHeXnW2La3tOD4IcuOJGmA0pdXw==","signatures":[{"sig":"MEQCIAwZ3u9OY+ziKyVX8NcLL4T7gDAWN6pfj3k2rk894RCXAiAUFxkz6FxthaDm60wratzKp5KUEweElXCE59quNKnVGg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":21522,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/OOLCRA9TVsSAnZWagAAZawQAIedfGyONiuTiFjtoERi\n20VljhSasgNGIv5jv6XLLHZBXjxvqbnReZzcrYp0S06h/X6fJyd3RqQjr5LA\nEwlD0vYE0WgBp567wWkhQtDxeiydMDQzJAfoCwb7IJEIe4BcP/+JMO/goI7W\nIt/saqLxrbyGQK0Z+U+bkrh1JnlLX8QHE2+ykOltVKc/Iir83jd8E2KmHSB+\nzafIZjwSUG8vEgoma4D36kPZQ3QQJLf2YVzEdWnvz50akgvmcNLBEW9ar1uB\nzjBTq2DZGMNmszhH4PCUi6jIVKx7yG5LqCbKdnODJ/LntSYWp1QngwkMWD2L\nqI2fcT83fwA68gtAE1FP1KCUnYlWkNDAdtWdqqJOzjv9QiwM2bgQ/iAIrD4B\nMhH2CeGyrEkxnG4etnyTkz2j2lGBpnYSivujv4oKsgIXCS+K/C/P6UiTlESH\n6V246hLfNzfuDHp3zjNMaaxiO9N9I/ruPOz3De7eoBDoIYZidSYBZykEq+AJ\nHE5v3OMbiLvFHZWwc7ZYyP8vNB7RIwh62UZ6ziSLpFzD32er42V4RVzKcu4x\neP4eMosZtaRtiA8bIU0tH4ba9mKt/SWvE23elAw0iF6vcluNioTgo+Ytuz6f\nu8ve1o/MMibgFkzURIx54kWhPr6TxLzdotPuCzkaQlOmxFOWMYhptUnicAxV\nud7t\r\n=3yUy\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"42e9f40d91c643a9770e5a563a204c7f36196a3b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.e2ea4a99e.0","@material/theme":"8.0.0-canary.e2ea4a99e.0","@material/feature-targeting":"8.0.0-canary.e2ea4a99e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.e2ea4a99e.0_1593631626869_0.17795576230273502","host":"s3://npm-registry-packages"}},"8.0.0-canary.a78ceb112.0":{"name":"@material/shape","version":"8.0.0-canary.a78ceb112.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.a78ceb112.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b652e07486250b36346246c4db07d5b2dab3e145","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.a78ceb112.0.tgz","fileCount":13,"integrity":"sha512-82fYRqdoBoFyS9+zuqqd9YJrsw8XykLA2xEf/ybtRGifwbLlk8ACrGN9dEwX6ixl7gt+JsXKBR9piF4XvxVjaw==","signatures":[{"sig":"MEUCIQC2cEiRnVUfPvlcUaS60DZOzPeT/tt9jBXH+k4BWLbIdQIgfAQCljuQMhM7QroO57DJ7eYAj55bfHIkv1wvABKaAqE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":21522,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/OZKCRA9TVsSAnZWagAAaxMP/joMqmYBi70QYo8iHHTk\n81+pjErXwR0LHUMgQRlXetxnJtbQtjWGA81Mool5zCwfFYh6QnJqZ0nsJBtx\nXI3HLi/w8pBx2/0dIHjF3jCbftgjh7mTODt1stoT3HzDO4KNUBwKlifWDZPj\n2VQ4WObh7D0EBjHC6QAlpyRcbkMl7jE6mzzRMAxXeXN+LQFM/VW3in0z7Rq1\niLHRzYDNBIb9IpBSStmPJ9pl+xgaJHCVhbxCu4HSOT1kP1e/Fp67Vt7sRR2n\nfFuL36Ylk1eR2Qr7ifqAWdPXbzlkZRrbwJwgp6J5+w+zdeBjMIBMVJ0+34w8\ng/r2R27ZmMkkO1Rr5csIZJ14c6Vt/dSJFyGhTwl52lZEtG5EZ1DCmYAiqJbe\na9OkAxlA8e4xW1/34GfOVdOu2pGx+tMbecFA0lHOxSch04OaDhCWoD0mAWrX\ns0AtsQO90OU0EiDD/3LgSJdKiLRAJ4M2RQlc8ZmY6hw7gijlttD7ZNZRLrqy\nVApF9x+VoVwr7VAmsArzITZ+SnLXh5zx+cf1BGYMtyG1+qn1LsazHR/NQWRV\nhGy/FbfrLqoF4j/LgFMoai7EOr0meMmy9xSGDAHEstFruvwvGijh54gSxiH9\nHtgps3SrPi5C7bWZsNmRQNkb2XzC+Gv3uzoyzlccdKpWFbT2O9F9QdPq2Lti\nG/9o\r\n=VnVG\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"3a38e39f3d172dfa99254185d8b0d4c03dcc61e3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.a78ceb112.0","@material/theme":"8.0.0-canary.a78ceb112.0","@material/feature-targeting":"8.0.0-canary.a78ceb112.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.a78ceb112.0_1593632330259_0.12587889602449764","host":"s3://npm-registry-packages"}},"8.0.0-canary.b0c456d33.0":{"name":"@material/shape","version":"8.0.0-canary.b0c456d33.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.b0c456d33.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"746e6113269989a80e1e3d9341a355d9555f293f","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.b0c456d33.0.tgz","fileCount":13,"integrity":"sha512-WjJ0KqeTzIqXNdfMgHcHNbq3mgZTr6xl12pipHk6ncbp/UzijaQNkNA8hSJqY3yWL9QXrjWLPuw/ZtLzRW8Kzw==","signatures":[{"sig":"MEYCIQCnkr6T1hH0vrICkAvrApd9YtJ4IKVwloqSZbwm7nnGKAIhAPm219gI7ntaOMwysqrWK3OQPRkybWfqS9mdGsgLU1wA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":21522,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfA6iDCRA9TVsSAnZWagAA8ckP/iyzXAMmzYIyTlUb9Xld\n0lPRWMI6odtRnryDTm2ZVL56H5LEe+gXiB2vdaxp7ODLeNi0NqNbnYl1/Pw9\nFFW0iVkwBXjvfWHKIdnKWzvwj6zl6vE3tPfkm7TGcs7+kE2L57TxyuNMWO/7\nzyL2iFEPEDSYJDKmZSqzRPqJBxBHr92IqB1AFokUlJSzR7wZU49rwTEBDSxM\nZ7ikhndIGBEj9XDz4XJ7b9R2GK2oIk7RooZH3k0UTfCukOqsL0bwIV97VZIm\n1zAx23AHfZCZc9mO+I8V20G5ipE/P77ONUEaxGiGfy5kScGs/sjuJagcHpzq\nG4OWlvdDRumDFKPbn4t8cruTr7WU8vOszrIy16zt85c4t0+Bq517iOZK0N1B\ndjoykpNvzf6X9MTkURs+RxbpWdHvq8B40P3a8xdZzESD91Gatrmu5RhraVy8\naGQGgLa0eyBGNpMmRityD0I11iK5vMOg5koVCAg64ADmW8EhTbJD6KMQCS8M\nugFReS8EXyRARcTZuHUOFnEL3y536dbQWyEsJK09cU+LwAmSkKs2PGSEVsR2\nenFt+zwxCe7VD1jdKzJZPY3iVlAyBBrV7WnB+Ntq7s6G+eQONTw9GMQqupVx\ncEWL9tr27dQNBjHOeBkwqGYAoFh3ZnSmjeBxAdQzKacdAwyO5wT2Fm4lBW4N\nUQIB\r\n=xXzZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"c9a540f1489e069a2e5cd262f5daabc034039d2a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.b0c456d33.0","@material/theme":"8.0.0-canary.b0c456d33.0","@material/feature-targeting":"8.0.0-canary.b0c456d33.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.b0c456d33.0_1594075267275_0.13993147105912773","host":"s3://npm-registry-packages"}},"8.0.0-canary.2e5711e04.0":{"name":"@material/shape","version":"8.0.0-canary.2e5711e04.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.2e5711e04.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dbaea69a91c207c529aa36a71b4eeb70e6a90b61","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.2e5711e04.0.tgz","fileCount":13,"integrity":"sha512-zPT1Nt28yTFnECPq9HWRU/UWD6zhYJNY6bJuUiQw1SKU7POik3tnvs1EZ3A3Oau2c0HFCBDGOomTSn6wUJO9gQ==","signatures":[{"sig":"MEUCIQDpquTsQrftDjFSYUoC6k9F58pf3WAbk7DVcRKh/aNm9wIga/zDrKec1Z61pkBRGX7qJdIqJjoceQtUBVN62PBMW/o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":21522,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfBfi8CRA9TVsSAnZWagAAuVAP/23R8VvGNxqmChVhZWs7\na6ay5wIUF/UE8+wfKy6DkYpOiPyvybE8KDVuanv12RdJh1XVaFDBlFduj6Pj\npumUhtm3CpcwDWaeq4HzfcDcFpUVW0NHIHXxAA/PtYvvGs7f+diyMddu5xSp\nZHy7fa8GZ/WlTIPzemO/qR71v6HLyzxQZjx5pOJI9di0nn6I4zPa8VLNSvvG\nvdFW1u5Z4vaQlc3EWNxxpU1iO+/DgOdYa0jKrHVO4prJvqZleXdDPv7+HwdL\nhMoMBl6+VMk2mP/bbvt5D9t8h5OvURRQGuWpeDqYxwAVeJEK3i0L+y2Fz0Y/\n5VdPVIYOU5Vu8c1S917zsfg8ayLQm4h9XmCgdLfbBjxTYzb7sczDNGoc00zy\nNzmn3RoZe00RPnn+GMCEG67k1ITylRre/zOfdZYXXOZhH0ItSvzLI+M7M4C/\nTgUZpAkz8inJVpB321WEqgeqZXI43R7Lg8i/Ak0aNKHdlghWS2+2VVsRqXVM\nGdkz2d/2D93I+9N1BUr09/XlAKOM2bRwQ2c2zncAA5egWBE+/YJ7M8yhC1w3\nXxVWd4dJ62nKEONjksaJsZOrx/h3VML638USRvCUIWga6bSu0JeboBP/d8lx\nKzdDdq3JTNNXPV/horlmnKzKkLm8q6Vp4BfJGmvwn10D/k04CrVYmG2dI63S\nUOHK\r\n=ZyKQ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"4786b99e99bbd4c7b7f10a9111b884c165f1bc7d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.2e5711e04.0","@material/theme":"8.0.0-canary.2e5711e04.0","@material/feature-targeting":"8.0.0-canary.2e5711e04.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.2e5711e04.0_1594226876412_0.6870826819122933","host":"s3://npm-registry-packages"}},"8.0.0-canary.811fc5d24.0":{"name":"@material/shape","version":"8.0.0-canary.811fc5d24.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.811fc5d24.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"af97ff2cfec731d50f9c623e78d9ec2023675e75","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.811fc5d24.0.tgz","fileCount":13,"integrity":"sha512-2WOH5JzvV6L9wqIMlEUCWWlFBwVKupmVUKv78GHW6/oYOkCP6+zIih2FjtI5cTq9/AibX/bz4IxCtKACxC0l4A==","signatures":[{"sig":"MEUCIQDa7kd9mHWUj/8bqfaTu3YsttRWq9aFycj7yp0X94G7CAIgXoOQZvLmyEHTvlB9mAURcA4bd8zXTxlAu1ijvCVSghQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":21522,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfBf89CRA9TVsSAnZWagAAolQQAIcT/9D0nYkS7/36bEL9\nzMWegnxrVAWrhyfciqY2N86NrVcQm+3hWi8wiUhy+IHQEmIS8jpFPEs9Qyzj\njSM5gN6FOsxJqky5HwF2dP+MMFWXwp6XtTD01VSrpWMgvermUBEvWK+iTE7N\nyyFK99UFmoj0t4VbQJgLMgHFEZkswWK0L8roJZsR7R3pJYlnJw/JY3LiL0Q2\nNoYkXJWob/4woAT925DN+KhqXlnigRf9DoiJRqBB4VQe1ptH/zFS28MTeISd\nUdkCtRyurN6O6R9/3c+0uPdBo9Ef9fbl/S01u6KeLCs7TDw8NuSJWMg9TsIq\njTilUSy1C6EcFFZjobAOGLftxE5zgP/KES71KV/saRsKujs1ldHeTdgv2+jY\nb0iqCRfP1acuNUQUgH5EBSePq77xWvD9giAqmS6o+uz6SqGnnTQv6FUQPzaL\nw9btcFDejvm9E4NgW2Qt1SLndxIcbASuSl4k66EG69igtDGfF12P65MgpkEL\nx35MtiFwzNnJPIYF6V9m6QdptX5UlSA9NPpzjWKu5sdG/p84wH4SCrLPW3ET\ny+huYVr+eyNjOAL73H4lO4UeGmJmvYCQ7McQwBlonBi9G1+UNI9oJOOljytS\nFSffDgki4a2s88fhUL0aN0/XclCeZ75q38d2UrONotH4Iy4x4peSydL/VVgn\nrfrN\r\n=jzY7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"d1a1abefb8800a6dcc0cb20f74923403ee1ca66d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.811fc5d24.0","@material/theme":"8.0.0-canary.811fc5d24.0","@material/feature-targeting":"8.0.0-canary.811fc5d24.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.811fc5d24.0_1594228541103_0.740385045653946","host":"s3://npm-registry-packages"}},"8.0.0-canary.6ed717ddd.0":{"name":"@material/shape","version":"8.0.0-canary.6ed717ddd.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.6ed717ddd.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aeefc5983dd5b9a15a887e9d11ffc5ee0e5039ee","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.6ed717ddd.0.tgz","fileCount":13,"integrity":"sha512-9tu1SMSgMydGQUDNMKRIWomBRnqblm1nr9tIGZnU3/ph19NfMW+WyB57NBLu2LE65dzPCuuDxM0EaVRhFqNTMw==","signatures":[{"sig":"MEQCIC/XXbzI7XUP2fuP31/X04gnJCa2sgrOoaVeO7jNwHYTAiBMOlkr33YuMOtjVFTt/J3d2V5JeP8fkUH9Soym2NbRbQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":21522,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfBiH/CRA9TVsSAnZWagAAl6IP/3ezllXYZO/PYMOK+AjX\n4DiDY9uMk5vYaX1vd9mDQ1WJkAieHDlmwUYXrDOF6ZkauYLvstk+WUGY2m9+\nn3GxObml2kPlomScNs0YYhcSb76Pot0EkMj5seycfokAWkpX6yD2sdlNvmHL\n2H3S7+yZCnoRFo74jJmjMtQnFreHjPed/dccUid0/ZhHQKOm8zf13C+p+CZI\n0cdeD6GC2brrEDlZQuQbIr/nsen5cOFx9AQjmHy4uB3xf9Ha7CMe8hpCCCnD\nYVkUyrPN1klLopXf2u5nKH0bEpMVxq0rtHHbALfCz3cpBg8go0oCqWOSEEr9\nD2YUZa4hH82EWDzrWw9wXADdJ/vGUYUIa10HNR2+9IP4zcOv+ncUfeK2cKnh\nDF3Elp3ccoY9EjyoscbCecHYxVxUYUsPkgrTXPYkXgR8dgItA3sH+jZekXdp\nZkNei4n9poPTW4o7CQjhUHYe3f9XJjXSe+5OkJJg6M4Attlkt7B7vZmD4DB0\nnbJUw0TOyjF8uh9LorKkmBX+pdI00mCYT19BmvbHsRrSQ9pwLGz6b49VxVwy\nFPMUULCETW6So/+coS0WSD1CwZsolF62N7y6noVWx1Nl8gsYDhcD97cB57RO\nxzc3kjdkXIL8Ah57ye4kpOZBhV2jaLjkbrli8IAUsTQcP4EeBrvmXl476Q/X\nQ8lB\r\n=Dwqq\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"7c9c6df731e0edf42938b11082973eba27e870e6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.6ed717ddd.0","@material/theme":"8.0.0-canary.6ed717ddd.0","@material/feature-targeting":"8.0.0-canary.6ed717ddd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.6ed717ddd.0_1594237439021_0.87753247824613","host":"s3://npm-registry-packages"}},"8.0.0-canary.d850de590.0":{"name":"@material/shape","version":"8.0.0-canary.d850de590.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.d850de590.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0bb4ddafc79f76bc49185e208c5e43c8430ff6da","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.d850de590.0.tgz","fileCount":13,"integrity":"sha512-ht5pDje2zBZiZ9lyCiIlRMy6KVv6nFy+OUdwf+fNay++Om69sqW3wiIdvu9LmRoMGKTg2NKnb2EiQXygaD83ww==","signatures":[{"sig":"MEYCIQCs7bjwAkHDk/5jqUyJAncn3xB0kz1EIM2xMiBExINIlQIhAOdjZUx+UtV8Mkd9m3R7vtVh9jYJaxSB0XWHS/HEEZGb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":21522,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB1xpCRA9TVsSAnZWagAAx9oP/ja2Xx2m3js8fX3oDx+3\n+T/RLdHzY0F8NCaUZdYL4qIaJJSsGj96bBMv/SrDu9LlxcHNGvU1OfQ/6UGy\nP+MsV+wEpdMiVm3wsx+O+uLJFPDoZf63rXCSfPYxi0+9UCit7lsuLUZ8gbmg\nqkB0gS3Z47oUAK0sK/OIVcdDxusadMR7EGm0CTKCKpOUbeQo9SHR+JttwHFd\n0XtFo3jBzaNpvSXCIAZllaGFBRs9EB65DELjvtxH6Aq9YHG4BXH1L8eqMIEq\nwzCy0GKoywUhFw9oBb5HRWqDUoN7IRr+mKlUZ2o2Jzk2tN3Vb1BqNOn5AdoI\njk3PuqVKKFqegP8Zcm1qyAEUHGJqyzh1zCuV2VQWFfvMp6DnOqTgTkNmI9kb\nB0/NLvWNp+wRhn0jtTlGJ5LyohdYvYUsZNtF2zX/h1HvdtT6s+kNb1tYEf/m\nZWIJ6XrbO+W6N+wGFsO6FyHyNWQymfOZQAFDwnjnFdmRzEFxzDobANfwA5i1\nDINdhV8nOot2Gi8LMVPCo+NqkOq/8J7MZ6UhoiSSFTFTkCTJPBA5bqMY2Fum\n5dzAbo8rWxtaBkJUWSLp1R5MIjj0tRXnroCkmXyVVJbMZvRv+YNXFfQfYfei\nmE4kaNLj1Pmygu9Mq3rh9GF0GOpRTdr8EBAaCVsRccrUmIvJodolA78SewgU\nyan6\r\n=OqYQ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"85039ad97bde95db4d57918266320d54c581a680","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.d850de590.0","@material/theme":"8.0.0-canary.d850de590.0","@material/feature-targeting":"8.0.0-canary.d850de590.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.d850de590.0_1594317928771_0.3222991317699466","host":"s3://npm-registry-packages"}},"8.0.0-canary.e07a70841.0":{"name":"@material/shape","version":"8.0.0-canary.e07a70841.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.e07a70841.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c7ce0898e8a29a7442e3d3d9dd6147b5325ba4e2","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.e07a70841.0.tgz","fileCount":13,"integrity":"sha512-sDsPCe6TqO1qHf9Uqwrbf6bBwVQtCw+F54FF1M8MxPm3LDyK5wrluoXh3GLyCTuaK4pw44yqU8Ct16hw47DtZw==","signatures":[{"sig":"MEYCIQDwAFGQkJwIrAi6tZgWaNqwil0vF42uNT8gvvfVO7UkNwIhAOomYFFmexVtkH2IRKRycWN2UB6ODmomo3tgnBxZ0H76","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":21522,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB2NlCRA9TVsSAnZWagAAJLgQAJ4u22mbIt1A4+bHppFz\nxtJRnSIkfdMTlxVUJRixkmOi/fbMjHYIvkFlQVgkc9cIMZt40Q8etkfadw4r\nUyhBiyO0pNTcT47aZDnDs3kzfTuYPq66Nam55UYmocQfAVahzJV0wToDcbkT\nI3xMQwX2EAp8sfcWkQBRkv+itR9y9oho3K8zVucEZ0bciULlbuWJpZx1fHAF\nq7+q8dNCWuRXmCqdIvTc1jPmmxjX8gHXBniBHnqMWs3PXcLDV8C+b0f9zcZI\ndCI01td6wSKMUYiE69HQgfcDI/zi6oWB2eYQz2+/YDv/5jo4tD56+lw10OM5\nku6QTKy0F+O+WeKwSoB2teY97meHaI4g0ERqni6547Vh8VhlVvlVvuE2qRBp\naHzvdjsKkBCnTM+Y9xXo1P8JE4Bj5o4xkocQmfi7zT5SyAlmTapIY0JBL9bg\nwjhxYeqXIdbKSxN5hc+bpNf64oIlLnA32cN88rW6CP8E/RA1Uac2JU5uXmeK\nD041ly2XMrIhraEXW4GSw0iXaJ+7cIJgxeQg0GVdw25ixP9Nxz26+eoHOIM1\nynGBLc+S4rn7jlq1Q5JfOo2CvG4kiCvAz2Ft3SduO45eU/scpGIg5F/ZQmBo\nwByxveCPHKNl8EMKT69GxkMvL3VRQrdw/LM/Yzgm6j3iBfHeIImPdyI+B6l+\nVLbR\r\n=AODw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"105e9fd32899b2c9a4309baf6e879287104cc0e9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.e07a70841.0","@material/theme":"8.0.0-canary.e07a70841.0","@material/feature-targeting":"8.0.0-canary.e07a70841.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.e07a70841.0_1594319716799_0.19965676040465064","host":"s3://npm-registry-packages"}},"8.0.0-canary.37947ed6c.0":{"name":"@material/shape","version":"8.0.0-canary.37947ed6c.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.37947ed6c.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1df4d8645b0c25dec96613d5b376bb135184c9c0","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.37947ed6c.0.tgz","fileCount":13,"integrity":"sha512-L1cji0+QmC2DvZrhSejIC+82iaV6fAVD2TXy53E+09inLDJ9aVJX5W2VS58U6eHn/qc6VK+lo5l9RSUvRkV1Qw==","signatures":[{"sig":"MEYCIQCrBq+O48NEr8fwlPpaR/EJeJH8zGwWaMmBfZjKWvST0gIhANsDQCe1nok3kEPhk9CSSc9nHLdL1pKiU3HTzfQcn6WQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":21522,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB3+0CRA9TVsSAnZWagAAFGYQAI0kmQp6jeZmCWuvn6ad\nWUjQ1xewdfBnXnYoQxqc9vbX0uNMM72Fpk0Xo+r1EahgOUVcGTi/b9OgXmYK\n8OTRrZhaQ1ui2Xk4BFOg+p14o7Trhk8ACg6xNZ6Cw1ap2kYsK+g8qx10YOfi\n61m+af+NlBx4X94x9StAf8LOKoJf9T9/cxl/blcsCCX57J25o22FSMb4U/Wj\nIFz1tOjpiql0zyglI3RzVol9yDfNX6dKN/ZHUdjUn95xf2ihTTUfytHvg19L\nyua8HKgozE/DACqy1uHt8FLlHWtrmNZcGMtQORvsi3TB+LQKTszNILr03Cr0\nNmath1EKPHjeiCdv85voI1zGG3HBZ3L9afyLHBOtjL+MLEPjV4s//cdZNBLy\nwa6dNmFXXQ9Wt2EW1NrypuC1SCJhyjTLbOgykCT9Y5PiiX3oJq/DqHXJ3P4K\nJJ/O9vhTkK0WpabHj7ZzF5A/oQNB7mUrqedSnm66ybrBTkeJSJZYAKwsVKNB\n8N8aMdh2VEb56cok4YSEWZF3V9VltEB4nZsYM90tgTsF94K+NmYKdePqVpsS\nx+hXk+U+YxeqZSzTEDuN+q33w5wVbNnGOd5JvN7QSZZ0vxSbWcnJXNTvqz7C\num8UGEOADOF+zow1lHZ58K5+PKKmFlaoioP+QoKv1F+QfVKGNjcLIQh8rjZH\nm+Xy\r\n=7iWB\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"80c4a00e688d5a2b1a35ee55744d879b782effed","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.37947ed6c.0","@material/theme":"8.0.0-canary.37947ed6c.0","@material/feature-targeting":"8.0.0-canary.37947ed6c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.37947ed6c.0_1594326964288_0.9119901503649595","host":"s3://npm-registry-packages"}},"8.0.0-canary.5d443afec.0":{"name":"@material/shape","version":"8.0.0-canary.5d443afec.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.5d443afec.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"006d3669f1de32dc1904c0f9680a89be9f8a9fd3","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.5d443afec.0.tgz","fileCount":13,"integrity":"sha512-tbkMAoN6b1fgE8M76Rf1PaECEmZ48FiQT3i4qvzTpzdnjo3V3ZPCkLKC8lBH9y6il37pTi/quNEGF4i+Z6DaJQ==","signatures":[{"sig":"MEUCIQDFJnDTslhsowMZUswOvuPmGlZHw6gEI9WqEXHqRG78CwIgcJI6lPlSnBhDpFQf/s3T43BNqnX5Mqx/CtO0COgTJtE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":21522,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB4NdCRA9TVsSAnZWagAA01cP/3NHcKYKIwZUg3dgxBfW\n+MrkNh7hmjwaAUjjl/mN6Rg5VacwejCneT9D4a5utfOsvsZeifjqsP0rkI/x\n/XMFQPV/+X2XgwQeTVCtaGjS93RjYSt4FCguzUtXPkhvnpBK8KbH9eqR1Abg\n41lAYIK2WDsRz0DdnpUNXE26htndgwdT2BYfkibmUJGDXlCmsD/DDFJc3OGg\nHKBtaal33OVJDRjAd49raupRVEGUR7tKxf7+8KbVZCrTBGQRIeoHy5xNTDF7\nzec5PJ6jj/kub5cMHj37jkCj2eg125E13rgmou3AEaJWTlNpP2WEm7r4Mg1S\n/U8Y9KPwoOB04DtBA8RkNvn9AFacEsZ2DcBEkEygP6XxO/JcsWuXbT2BD4WK\n0LNSIMibyH6M7PZCxsjyFW0VipHwRE2sZzFwPSnw9W43+ImrY284+8jGW1Ts\njPNL73UGCPID3UGyyhgq/SwZ+MUYahhHC9sHclfwWdqt2jo5BbBqzvNp3lxG\nt7LBXgj6DCFxpj/g0cKTyLKmUUmXYTsq3/5kbHMPttAa7aRM4njm4rSiB+I3\nhHvhjX1z88o/sjc2MZJ1bGNQ/qOe9CvjJtPlQpwlvcZPnDsEDCKZbttNho9J\nXQYlS08ehMwmik/MO/1dJQ7R6YWESqJBnqSKDTpxGn0FtSFV3jI+8jMQMQ1U\nuXtm\r\n=QOhD\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"5c493d15f89898617c3127c53145bc51e8e60930","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.5d443afec.0","@material/theme":"8.0.0-canary.5d443afec.0","@material/feature-targeting":"8.0.0-canary.5d443afec.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.5d443afec.0_1594327900799_0.37632479541632335","host":"s3://npm-registry-packages"}},"8.0.0-canary.9ac1ed914.0":{"name":"@material/shape","version":"8.0.0-canary.9ac1ed914.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.9ac1ed914.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7af1ad6e9a1f20173bd73d28f0313dd56f3dc088","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.9ac1ed914.0.tgz","fileCount":13,"integrity":"sha512-y//Ew6Yp/GRDv/28fPH5SclG+1b/V2iOyd8bitzAhRDCX9Bs/7LEL3KeLsKjoNxY0xIN/9zu7tqWaR0Iy+lCgg==","signatures":[{"sig":"MEQCIEFKh5uaB8j76SvGvD2xQFrGZv0DStKB11zaryu+cOgKAiBCWskApYo/CbZ3oXg6F7d73DG0raVMq1QwTIykJwTqMw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":21522,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB4oqCRA9TVsSAnZWagAAx6UP/Rq/hSRpnBM8dC/Y+k/Z\nNbuKdnUlDptpfRZQ0uUhwaz7TmVusXupbYpDiPVWIYZ1Wig8OmjlgLXuYg+U\ntSQ0OPxlbnyuTedSIIAguY387ys7zIy6SCFmRPyTkp1yz3va52RFYXovW2x9\n6cDUWXLdRBSjKWG/0DrKSXKY4oiYHA4Vcuk5mgO8jb8uEY+rM7GoMQWDzcRe\nb7qHZOpndXUMw5OfnN94RIYnMX4+5gJIyO0xR8EP6aRQ7O9HV1BZ7tr0R0/C\nltv+VNFhoSH/Ao1LZU/ITv6Bhe55fXZTIAIGtLBVKZrQRo8/fYdJ6LZ5vLO3\nVHQq2pbBzHZ/JnHq2Gd1vPC1OKuhD8I6gF2lPi4CJKGQJ+Cn2C/uY02JpcXJ\nnrStTGccTDSCWjRGHZ61Cin1y1d+9O2lXYWXM9xvz3PeHlEbbiy7Pvf88vjE\nDaghKpZNynKsZjOUxhT5woFrGI/aJm1SXNqVt2u3iZP3x1Kz8AQsIXu/DPWc\nSOgTwDITOTd9EXYLBxFgryp/KiFKWlFLpFBcfb6XKP8a63314Wt7KMUxWoGF\n+/dUH7c8Ae6HAq3Mv2wk37sPVlXrtEU1Ww1oldfo1pPQQOMbtauflvHpTZhA\nlVqmw3oDKzolyP9wb/acKSBrvPKnMJ5JFFDpBb2gckKGWXs8NXL7naxLxVwZ\n6se0\r\n=mhpb\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"c08d3c600bb022db1bcb4efe520bed724e653a77","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.9ac1ed914.0","@material/theme":"8.0.0-canary.9ac1ed914.0","@material/feature-targeting":"8.0.0-canary.9ac1ed914.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.9ac1ed914.0_1594329642000_0.06979592811851587","host":"s3://npm-registry-packages"}},"8.0.0-canary.1e7cb6198.0":{"name":"@material/shape","version":"8.0.0-canary.1e7cb6198.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.1e7cb6198.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fd944916b9704d9b53821ee954c357ed585a32e3","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.1e7cb6198.0.tgz","fileCount":13,"integrity":"sha512-Kh4oMe5+10rf0qTejcDE/IjcH5N7GWJdLeQ+jlBVQJQslWs2ZAU4+dsFuaaUcgK03mxaqQQIDSdpa7GOzhU8Aw==","signatures":[{"sig":"MEYCIQCx94QX9tpp23Uxwd0kNrTo7fYh43RCiUL1/yJQNgu2/AIhAKhjgyOxTYHCtET55ErzBfytKlKJ2/HghOSkbKaO+Ckh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":21522,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB5ZNCRA9TVsSAnZWagAAKfsP/i8UhYPsBBU5e8fui+7K\nN/OUaw4Eyn13L6ME1w9bAWQVJzo97H1KQSNFygucDAoXonjSoiMrAd36LXjV\nc855aqeFcOr5ACICDPuc9wCqElzCqObREuD6UoeOaYArak1iLx1VYvkXpYt2\nLquU2WT/6CLiNG8QtNoHf+rCE8KGE6zis2ZKge+TIeWe9rYQQkC44kgLAhXD\noTs0wxjrQoabHzPnnu/hoDrElxMRxS0I+5s2E615dD5mvqFDVM5cPOe88MAt\nBS7THzsAkmRqe7+EzG1aMNzb6XrzAxdwLzuy+norcs7igmubyqw84ycxF5ra\nvZiqFGbjWzignAZfOecHIT1Zr1q21WElQOjqqiT7VndqnZQpWE/MZh3LlWBx\n3SNEBP01sArJl6r5whyA0scO/NxUOrwwHLecxY7ddDVSu8Uv8pV//t7k8FDH\nU53s85xLSOtt4cXLamTSPnO71pT0ZawVrOuPvsDdIu5pCn2OzDYTR/Xria59\nBhGWQ+VyIghuDi3BswfQGlgdgcRz2x8BwHCBDQYY8dXFhrakCM7ClbK0FQt9\n8Hgq/7Z8FplkGwgv2pdSGSB+ZtxLz6TsJEvk225+RVtil9lP6An5JjXDTD7s\nCQdtbuMSt0dG19+es7TI7ci+O33uo1mu8ZfXER0upA2wwsDS0d8bph47r2hB\nPuBt\r\n=AGw1\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"cbdbb55d01ed2f63aeafe8d77fffd1da5fcfc011","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.1e7cb6198.0","@material/theme":"8.0.0-canary.1e7cb6198.0","@material/feature-targeting":"8.0.0-canary.1e7cb6198.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.1e7cb6198.0_1594332749209_0.2673674997686353","host":"s3://npm-registry-packages"}},"8.0.0-canary.843f636c0.0":{"name":"@material/shape","version":"8.0.0-canary.843f636c0.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.843f636c0.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3829f909a9ae5946dab2ed2fa6c4dce894a3ecbe","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.843f636c0.0.tgz","fileCount":13,"integrity":"sha512-+cJjMverJ7uqVX5S3wCRPQB+9nAL0K9khlkqGUY9kKpmO8kVX9wClI7AjZwXMVF/bNmk5CStcj3cHjsztkA6BA==","signatures":[{"sig":"MEUCIAr+exEEwx8QkrgDgrLjOWVuK/12f8V+BjQLxglFIVbPAiEAlLrsilUeOVMc9B9NunBk18V/93QHFFAoAEYkyvQuyg0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":21522,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfCKiUCRA9TVsSAnZWagAAlukQAJt2a4RJW3nE7E/C4NFf\nCt6RvMxNPCMxEfA/AWpv3/mPugc0wt7peAgdoI/ACyXdA+pMqrRab4szB4Aj\nS+0RhzUttW1pK0rYns2D323UlIkLVMfndnm7bcU0e7YPv64mAypHx2kZyP4H\n2kNCfja8Y+SCRIB8d/rQptVULkR+ofbwRjn7jC2RVJHxV6sbe8u+zPg9wm7i\nukToztoroFZAL7Ipm8ALwrKeBAcVjred49pyqEQf2xTs0AXyB48SNCSF34pK\n3cjSqj+ZEcUoFoQx8eSciumyx4mCQ5zpOekYrE6Gu/TkMzyi4ObJp33S80an\nQafv93BLvKvw6TfWIEKuFCBKYUmtDTQ1oJvGqXWMehwTAZFA0wnPxZC+VV7E\nqorpjP8G5UkeVfkRoFrJdZTuhZtGoyAhyjjwc1ZbY/WUyIRSH1flZ0aZ3tBv\nKqKy1TDwN1kmz5l9fbjBEF8BHWL3xSETfOFW042Qn03g6CtzE2MUUHE82hg5\n9Jf5PHKzp/htUTvWQjmD3FKdYGpK//SiP2g1a5Po7VhWu1AfRRAxVk5aZgA1\nGwAH78FJ3BNqvN7mAzhzayGnb+V/Kz0w6md+6+fz/J456UFL/XPGXT36rn3Y\n5jyEDbYh4+mHL9dQzfstba6iwuJT6ok7Wt6MdAauOJP4aNA2zXw63AueroXN\nq6oZ\r\n=1zgX\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"641b40da40cd73b439cefa7fa18c86bfdf31e497","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.843f636c0.0","@material/theme":"8.0.0-canary.843f636c0.0","@material/feature-targeting":"8.0.0-canary.843f636c0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.843f636c0.0_1594402964200_0.9363141492498088","host":"s3://npm-registry-packages"}},"8.0.0-canary.b2edaeead.0":{"name":"@material/shape","version":"8.0.0-canary.b2edaeead.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.b2edaeead.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7b15dc04e6d0c485606800b327943789e6f9e4af","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.b2edaeead.0.tgz","fileCount":13,"integrity":"sha512-hwcYEm7TBrY0lG/H8fU7/G4POGKtszuVoIYSBElVKwm+Xd7ePni4Vyf+kq+uU2vdiqsMAHsryuqC4zLJHnHjEw==","signatures":[{"sig":"MEUCIQDRCNy630KsdyTHKg2+Otn7WcZdUHCvJhf8ToP1NWwrCwIgJTxncjzabx/SnOQf5Hca4fPMIVbbfI4bOktoXieag68=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":21522,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfCK5OCRA9TVsSAnZWagAAY/MQAIIt/gMvqmcMz7SurgV4\nrzdGKOnxhlon2MIGgWeS2STUWrNG8UHf/+Fm0zbzvD+Pzrgxa2Acx/wxXEEt\njRvK9OMr7MRO74uryGelCKc3MTp2Jc7+TD3eWbCsT37GQF/Hxhca1FRe2y/o\nEp0UwnO2wx1V2ThTv2z6BLrWsXTBd2c6VVzXDnTocnftothenhynIUFcMLB3\nc48AhY5qGSPDo0b9bFQbVTMTNASPk4j9+OkXMHkTOQ9E6t2x7tUoGEBkj2Qk\n7slI62oSzXiP4yBtvOsLmTg3SeExo3kiUYcKxwMY8R2Ey7D6goUhFApctS2I\nv/3qe3PCMjfBFA+EydGYqJPTjXB3P0KmY6pa2IOfwoBWrmlWEw6E8X2ggYC3\nw1mROKBWcPzl0wE2gi8IZjkNsnspQz7aj2D24H9tydn3IGe2T663X//6Rs97\nrTNNh9wRBeuRb0t0CMgsAUcuRLitp9YfMoc3Nfrd785xafzgtRVE6JjBP+lW\nfaJtChEPszW+p5RP8OX3u4y7tqxeUH63tSZrY3Uhh5zxOuqwF2kIwv8c/u91\nUczYsCv1hXxGImXMuizlrTxhgzaD03QcGO6KTLeC0BahV8HPe1TbHMS93aN4\nMtesARkLd99T9/2qXMLw+TkKAsDf3aW4NV3LHO7LVtbpmnIxST2yRO3vGbMa\ndPfs\r\n=Igd9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"874d83aed6fef221001b68d44bfceb30072cc18c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.b2edaeead.0","@material/theme":"8.0.0-canary.b2edaeead.0","@material/feature-targeting":"8.0.0-canary.b2edaeead.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.b2edaeead.0_1594404429681_0.7095684201936996","host":"s3://npm-registry-packages"}},"8.0.0-canary.5dac1f624.0":{"name":"@material/shape","version":"8.0.0-canary.5dac1f624.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.5dac1f624.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2df5ba38f5b1a7582235fbc7d3813fba57f2d141","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.5dac1f624.0.tgz","fileCount":13,"integrity":"sha512-hvK90qtfX51/Xxz/5asAlW5kNLZ8xYyd/2liIDSSnVWWu8eOnWy9o+Gu27uPDdt/y8MiFE/U2gco2/Xqd5K/RA==","signatures":[{"sig":"MEUCIQDLWu/vMNVrg8koM0e4XfJklGt/UyGPrEdsQdwI/EraAgIgJWPWyBCZB+gyRTQg8voXzQ12UGkjpslUEvc8KTEUlow=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":21522,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDI0NCRA9TVsSAnZWagAAnKkP/0zV9VTAMK3VQ2Wo+ZVO\n2NMfk4OEOzsRcM2G1rgNy2f6NpvwxLcMxSEQw3XHN5edEB/be9SQgf9fweJE\nbFb3O7/+k5DyHCVvyXkRboUASIiezc5ktEb8Th6KRpLPmYDoY+3TZ5obJzUJ\nmRFn2jOuLWPtWTy058yl7nKorr7tHOgl3Dwo319zm1666Z4STOqeY5kLTFuq\nZ4Q7t6VsS+L/2fO7lBgW2eGklY0kR7ZsF8yB0PVG/5gz9jA2CbemIayhSysD\nUojO0+xsOTr90Ci1dLQe84Td42PJfuAy4rFEVuUNW+T0LUVsTVTmACwWE/9v\nMUSiehFWWwjc5JAhnIeiZGpCx6Etl+lX8DbrSVffFrM2S/+xslZZpbe6PEyr\nN88KaY7BUaZaaJXnZy6JcEEvas1tkbJ70ha12WaG5ivx452K691YvWIrO9ok\nJopTHZhAzaxSROO4xOeCy2J5HjI3GrVy8ypVqHOlZUxU6bkf7wOhj9wvRdbV\nH4/YyXO0rQxA5zF1tcV6vdqQOMmKn0tc7jtoHm/FdJXqsUzHYwP6Bqt/GSXk\nADlhgmHU7xqwseYSmjGYCJflHJyawTMVoDBVam92LLQc8iDMz9DvJWqjOr1A\nPnjiEQHvKVcR4/Eu3y8y2ibJueh01wkTSTsgZqj1DRE8vppgNah5+zu16ES8\nv2xI\r\n=tTvA\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"3acf16b30fe876c0d319f5d1681d177bd0089cbd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.5dac1f624.0","@material/theme":"8.0.0-canary.5dac1f624.0","@material/feature-targeting":"8.0.0-canary.5dac1f624.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.5dac1f624.0_1594658060982_0.41422243865475483","host":"s3://npm-registry-packages"}},"8.0.0-canary.4497acef8.0":{"name":"@material/shape","version":"8.0.0-canary.4497acef8.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.4497acef8.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3d54c6760363b17a0a7a8e9f17106004aa96668e","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.4497acef8.0.tgz","fileCount":13,"integrity":"sha512-sECxCW8UkKDQWEt3gQ0K8ubf2IxeDaBIAnBNcYlQVeBR4isui/lO/uDRHhX9DCViMyNApF0iQ39k8rc6lZnQpA==","signatures":[{"sig":"MEQCIBuUvy4VGIR5T+i/fEoCmoY6dWE9Z92awJBxtrHttsAHAiAa/I/6aDoTA6ZsJckm3L9nPrwRBgzMzQzN10aFqmuofQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":21522,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDb8NCRA9TVsSAnZWagAAayMP/0smq0v/3p83he73JSfw\n+y7qyFqIJkNMNNfX8x3I1K9pAau6K4Siv8FLDO8/ycgIza319TNJPJI3tMjO\nSY6WPmAnnQasNJggqiOL7SI59A+OWaiMC9kMOfZP9MHKF3aJmBVtUqeA6vgt\nvHRooQwdx4vXBngv9slu0Ag+MFgGzt53t5twitYuwJU8HuHUpe1b+6iaL1IY\ny+GaICQTRKstNGJH9MoGGnC61YJR9v0xbd7e38Tl57WT9PUz5WEjAbOWdlw5\n0Y0jVstWnav25lDVxXRtTIlAuWvmzB8d4/5fUjfgfkb8leO/5sCRMqhtSX9B\nQDbtRgozDm3cPgUfE/8dS4HIkDvSJw20eIoSkOdL8hv87p0gfdkKqibVOGYu\n6SoyAeBRsn7un9LrXhih6DZ+Eb/tQpJ1zj1uMkwXE/pfU8JR14JFv+o/1XXl\nUqB+T60ZUFJGRFFNUSj+UA1ufDTSIoSDnCgYIHDl51SMLRnWCvIHxCX0asqe\n714Nj08K06TmoaiIPAallH8T5HGMooRJS/cmrdWF4w4tSyAnfyCS/E4lPpC1\nM72yV9W6UuT+iEdcMRGlRmBc310WaOUMwhq5BsKREfPEmwexFBVSVYbmiChW\nq+dpTgQqeAps5rHPmTGGvdBYOrnmXMWUl2GapWe307mYeRKoII+HfkVb6kni\nnm3E\r\n=eYk3\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"dc90b63c1737c63427815af4f6de59841a57a1bb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.4497acef8.0","@material/theme":"8.0.0-canary.4497acef8.0","@material/feature-targeting":"8.0.0-canary.4497acef8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.4497acef8.0_1594736397186_0.12578691447463175","host":"s3://npm-registry-packages"}},"8.0.0-canary.e6e23019d.0":{"name":"@material/shape","version":"8.0.0-canary.e6e23019d.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.e6e23019d.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7475a6c58bd39a52630dff1eb640785aac4a93fc","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.e6e23019d.0.tgz","fileCount":13,"integrity":"sha512-s/KZH7eoQMHFpHQN8STNxo7RrZ8NBvbnfxp+GtQLkn6uZCR+U+JdgjckSVANvqk96i+ozXqFZ2O2y2hYCmEenA==","signatures":[{"sig":"MEQCIDVUCocDgmd8StEmo/a03Gpehi4L10WYnWjASxmyjArLAiBe80/4cMOqQVu82n6cqoZUHLc25x5qVyvx7ixQ2BLWqA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":21522,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDhE7CRA9TVsSAnZWagAA3mgQAJ4FMBhzejb/tg4hQpcJ\nRaaJ3W4axLJqZqdgOf/VN9mC9IoJUKHy+V2K321rD4kA9ufj+U9cPu+qPjdu\nbXd4bbcccAjIC39D/VV98KDf4lxKmXq1dQbIeu9B89iBSK4Joo0STPOlHe3w\nqGP1xnMFNnWrYJd5tbNQ35sDUdHG+SMb4m+XIIfCg2/2HOIp6dva7DROeHoN\n03uJ/lL0WOiUeqJuRxUacD0IWaBRuLnA3RzdrW9C8CglgPCFvi+voHs1Oh0d\nDrKJ0LbszFPFQF6uWFmGcS/m/qyOqFPlaqZ+8akvQHjwj2iPMifQi07xk1My\ntikqlSJqaXgXOHl/CYsPz3S9u9sNGV7bFIn1WOrV0E33I4MWgd/tYuaQgtv/\njIbMOiXLyDrnI1IJDOeggZAHRRWy3hG+AmxkK5POvFkd7IGwkNno4ITpZhlT\nMLY7uMt7XL7UjGyaVu2M/9ghyTA4ys2bR2ivB38BhDRHoXVCnmSYdwL00XRc\n8+q/Jn45sFtf09NCyGLvjkn+RqyfwGFzeXJD+OQ6pPL1PtyDJI4j2MkCUGN2\nxVqXRqSLPbeppMtt8PvdjNgQuABV/oYlPX8dioP4wii4Jppz1lu/ObJizC5h\nW/qpzQ3+REhEJxefSLsKYtXdwOGDQuDRjLfLRyQW/eASfuOE/yDKFGbBH9ld\nSA3W\r\n=KG33\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"db31520d2bb46404d9d5c364a2db4e2bc564e4f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.e6e23019d.0","@material/theme":"8.0.0-canary.e6e23019d.0","@material/feature-targeting":"8.0.0-canary.e6e23019d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.e6e23019d.0_1594757434700_0.4155654851205888","host":"s3://npm-registry-packages"}},"8.0.0-canary.d548d7a92.0":{"name":"@material/shape","version":"8.0.0-canary.d548d7a92.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.d548d7a92.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f7b16b768bc17ade76eaf52bc22dbfad889ac708","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.d548d7a92.0.tgz","fileCount":13,"integrity":"sha512-chygBN3+3QZN0b4tWPSLkjUsRqe3jE8iiM8qllpMIpYt1zRCTSVujhWuLJdU9PhfIJzeV/3au7cMuH8x5467Zg==","signatures":[{"sig":"MEUCIQCiMhhVVwHct3Xox9pP85mMrzN2ABRXKFKhMB1NradwngIgfLfsJtjfv0emBr1dOj2nxwfTZB8kAtJdTcJe+RTDH2I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":21522,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDh/iCRA9TVsSAnZWagAAz8oP/2h2mrxLiKTzQaKadnpM\nv5wK9J/PHRz3ZWvmUkFsRNdIKC6ao7MpsYbc8ePs45vuAvOagQ3C/9Yqd++a\nC48sPU4cleXqu2+YQxUNi9Vo9v56RXLxTBrV4NkUkefyVO61PUW+EYWkb2Tp\ni9rKSv1DX0vcbjyUzLMdOaitSSEPBGjUteUHNl97r0YSJZxkvTckS+IJBGdd\nmvV/lDQVqO13HdSW3Bv+cHDqIiMHCdbZjbrCEPYSbISL/MtVoiXt3os/IaDP\nxGNbsnYfPYdCy3pXRMcuioGgbZbLUutuNClrUX+TLmUtHAiyBuDWyKmAN72J\nudY0CvEjGaPCrwrX7yTUKJHa8c613o8w8gi5AB4jMzFPTq+Y5cwF2tn9sYmH\naHRhniwKq0sVq3wto4SqMG79+5r59rtQXwqDMS0j/mc7yxtR3Mvstk/l4Npa\n+mpox1OIkgmmOOKk9a0kR640v8Qj/+AnJ1viD8VJWQDJCr7Ix1+0jrbQ3By3\nCrbmmrF/i9B/R3YqAxMCbjGTyGmLnskSOxtwa1LOWdennM3zA7WuDRpPkGZW\nme35KxBffqgxriAI3DIkFZ8/tNu4b96QIRfxbG7D20HzqLrN2FF+QzzM+vT9\npg4GRvEsRj7S6YYq31GTjM1BR2i7LJQIfCaHN/krwBpm4KPaXP3oM5JBunTi\nkoed\r\n=CHR3\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"9ac3956fa3f0b35d113404de60048e8aa1c1a0a9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.d548d7a92.0","@material/theme":"8.0.0-canary.d548d7a92.0","@material/feature-targeting":"8.0.0-canary.d548d7a92.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.d548d7a92.0_1594761185637_0.43160265866742575","host":"s3://npm-registry-packages"}},"8.0.0-canary.58ce529cc.0":{"name":"@material/shape","version":"8.0.0-canary.58ce529cc.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.58ce529cc.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cbaec0bbb4552be370c11c6613f353f1fe0eb269","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.58ce529cc.0.tgz","fileCount":13,"integrity":"sha512-DDoqgERomjZIHvpmgKIDsvQvFO7QRkTK/tKkuKb8nxOkTG6CW0X3x1/Wxq8NJKKfw0yAcQdcBoSWvYAP0UOxlg==","signatures":[{"sig":"MEQCIGYlHHxVhTzJQGbvS4cQw1rTFb9PWSuGusrbIiNpxW5oAiAYlCiAfd2AMDjmL0HJGNemenEn58KSUbO5wdLVEWeXig==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":21522,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDiBeCRA9TVsSAnZWagAAbTEQAJ9kpqqD8OzhBodhe8/l\nXsSJovBGGAJpQEsDfrmxAJnGtUmemhWSHe2TCaYbas6Jxg85Dy8vZQeWOLWJ\nVnwaCKETdkuTl5/D9AttPxEYnAh5wEUxFnixB9n45bhRFF15Kq8x9JDQZFEX\noslad1oIHOcgtxl+UGo8/7ahuTh74n5qI7VS25OF0eXG1CxHgyZTvSuB1ebl\nifOC9vST7akhlj9VoaW06fQjpaKOpDA//dInMhk7ra1cUbSA6OzXkk5Z4KO7\n/XR6wYgTgPnF1h/lKZW1cSRsugB1EJXuFf2A77hdsyouFJAxHdnhcsVI0dHB\nsX9Gt5kw60RG1nuGDThBrUZkwQZ7p5glXRh3KqJRVAxeGy7PnEy/f9Zv03nJ\npFDEhbItbhQv/d1NJ1uT3G7iIKb7RFBF9dt8uZB+GtF+2mA0794r/vOvt+n2\naRhsOuAwa5hpkNT/FmtIrM6CHv9Cq2G814nwH4WpO6a6Ablara7Av/fTMfHy\nr5utVlR6m+lJmqWT4pe52g0HvWlNTHPO3UkGqJw8PkVKHsxxey+ZHA4vo7Up\no0kKds6UaExn5rvr/8YeOw7ueKLpp7i+fAD3ABQ03/zrfIlAyRiacWh0cn5z\nf4YbJPFsFvIqGFZOTCNpeAGsX3kFmfTNJ5dK5YpMPG30CCjPPTEAJrsO5Abz\nHv+g\r\n=y49J\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"c45eee764d94f6c07b8a5b3770c89c8bb4ccfeaf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.58ce529cc.0","@material/theme":"8.0.0-canary.58ce529cc.0","@material/feature-targeting":"8.0.0-canary.58ce529cc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.58ce529cc.0_1594761309628_0.8910020779406118","host":"s3://npm-registry-packages"}},"8.0.0-canary.a0f1202dc.0":{"name":"@material/shape","version":"8.0.0-canary.a0f1202dc.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.a0f1202dc.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"18dca0bcf922d0ff31dc486fe46bc119b7fd48c2","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.a0f1202dc.0.tgz","fileCount":13,"integrity":"sha512-colCsfkkXLQd8ccBH4KKz1IsOd9okUsHPTDRoO5Gom/nqBDLrHYJQV0bWyFXhn4Q0ZEEwFJaqIzCCgKRk+ETsA==","signatures":[{"sig":"MEUCIQCSHMoCm2piVJEiNP0/DZeAxnOQFQ3avFaDlF9PzvKbhQIgaXWkMSP6RbwBtQN3j66f+4KWmPq/K8BM33oP0amcCsg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":21522,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDiTcCRA9TVsSAnZWagAAjnwP/1CjfpNde8twQSblLYRL\nhJ9b9xNRGSkUTX+LYrxSucP+ndf+XJX24WDmCj2WVno7cC3eNlT0e3AoNKnS\nHtV8kv3mB05sg/xjTXwB71GF51Xn6dCPifMnHlwbz31xWOJyaTr2v7FA45y3\navGfOeT4XfGHhCNm5VxP5XDcTiBPVuUx95B8kqGNR7DNABmLEI9JFqy5QgSX\nW4DL0eSeIalsxZDGCEkjlRaX8gNfMpjFtonqZ2dcdvZL0Q4oij3gR+RK1DZR\n7vk8i1pAF4+I2NHnDnkXkxK7Y4PyRLMeoyXSoO5hL3XErqffj16N1rFYdnYY\nEO1JHWEZFrqBfi/NPu0ClyT1WcVM5aq5kDjAkgVe6SxOUUE/PZWKhCWTUjDr\nN1Top1cT66KHHoP+7xYuowlTE7DEehHtIlDzkCyLPYpcTLdzq72wr8MVGZtR\ntGwVLbp6aligToxtOCZz/HeZI/R7qWMwL7m75I+SEHEscwD07JGrhSbDyX7i\nZtv++FjfXrwq2ehDCSbafExLwMHa4wYkXL2eXpr0jCQ/VlxdhqEdPdmSN4c4\nu+waK6US5sCRM5WkXs3AdkT87YhYSsCMhe4CO/B1zGhqFSBc4mamczkpoQUD\nyYJNEB78davbPlGEmBfjUGcbTj6LNKNBsDOHnMjDoPd+0aLgh0VvgWLrjz5/\nukRo\r\n=6QWf\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"93fc447a8bb5a55abbcf4b72084f1c65147f3cc3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.a0f1202dc.0","@material/theme":"8.0.0-canary.a0f1202dc.0","@material/feature-targeting":"8.0.0-canary.a0f1202dc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.a0f1202dc.0_1594762460149_0.9479386473899398","host":"s3://npm-registry-packages"}},"8.0.0-canary.ad4df58c1.0":{"name":"@material/shape","version":"8.0.0-canary.ad4df58c1.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.ad4df58c1.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3e1ff1034f90a6332bc92c61720468799d6018f8","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.ad4df58c1.0.tgz","fileCount":13,"integrity":"sha512-otMz5M/FdoU+68nPunK5eAiVDKIyez3L1wmYoy+ktNjrOykCuWSX7ALBE8s+Jd+h+btIFU17V0Fgve6DBoU0dg==","signatures":[{"sig":"MEUCIFRqWfX797Kfm878n3WCnW/jReRMOx9eBURxPOXTPPc6AiEA5UVAZw593vmGNs1h03LP3OoS9LJhMoTtWxmKaWPteJs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":21522,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDkkyCRA9TVsSAnZWagAAhuUQAIicqpy5vFVq6B17uLbZ\nliy+aDFDIvqatiIcLgMbwo3C7WMM89Y7MmhzD+po2VdSKK+ASstQjMvmvNFf\nviSUH1BRa33ZmOwbSRrgTeZac+gWWHCAt5Oe8xhqpvof338kaPo8j6F3AWKC\nI/tqG65qY/0gdr7Yx9Atm2Q0oJC6InOe8z5gHh6+DokpB4tGC7ZUGR7JNwmn\n22ahl30LLL0jG3Zd3zGiypBTHtoIGusOK+G6VFNU/8VILf4Xj8Quq2Gm4ouX\naEz0aWqS+Q9rkE8IkWF+RQlRJuLfLehVfzy0ZEp+apjuRHddOaCTWxWjSshB\nin7uPgq3DnqBBv4sbSBsUnPXFzskL1TIhCEioovnvSMbk96qP2P1fBvjdvtZ\npkuRf+Umzw32rTfguvayis8XFOvfQkb9yZWPRKBUEGOM8DunSadSDVbSI2oj\nKXpQfo0+4pB9Gev51s4Cj6Qlx5strdkIcknboZg6sHUMcir+sDCatGAMADTS\nKN3H4LkNB9EtS/ostAWUl9nT14ZCDK4QZ1PI5zbLijqOB7aaboNuW6DZR9A2\n4/ZjaWZpPxH33TWA3PPezJhQBb3jLQQYD+B/UnalrwY9LZRatp33uIvanmbg\nwOrnh3g/bqLwQjTpTNALzCk2i4v0qcBvPXLksYU7hiC5saOt9bqNidF9baad\nAQDn\r\n=zZtY\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"f3541b13d081357419478232ca7ae0021f2a6b43","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.ad4df58c1.0","@material/theme":"8.0.0-canary.ad4df58c1.0","@material/feature-targeting":"8.0.0-canary.ad4df58c1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.ad4df58c1.0_1594771762400_0.431747383349536","host":"s3://npm-registry-packages"}},"8.0.0-canary.01db89053.0":{"name":"@material/shape","version":"8.0.0-canary.01db89053.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.01db89053.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fb850c1f29b598969763ce1210464cd44b5232ae","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.01db89053.0.tgz","fileCount":13,"integrity":"sha512-xy/Z59NMfYfyeUcOfbWgC364CbR7E6lWcamRPWwVuuM1V3/hn0wj1dsFcf3wjMfOFTBYLGlv8DHtBmnK62yHqg==","signatures":[{"sig":"MEQCICtaKRxe6zf+iLxJcehW+GQ3dtz6dL5CGuWjjYUFLVkMAiABX2lbabDnJxzfJAn7A/J1ubjwqbkpubvc5Fj0z+tL9Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":21522,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfEIKtCRA9TVsSAnZWagAAGlMP/3N3QtFzU/bs7THfwoeF\nmuvjGrwHggYieaNktWcSEn/pWrH4Eug3aYcSBhYXXEP+/Ywrb5hzyJE8UOwc\nuo0fFzkGyl0JqLZhvI6eexe1NJUBZrS3wYAlc63UvjIHSJxwU2nOmS2i7yVz\nBvEe5FMjCU4WvwnnsQy+YkJx0xvz7lxNifr2hhCoNwQijrM1zjR9SDtne3rQ\nTcR0TxvWDId0qSasFk1bxJeRk+LfVNpvM3l1WYWzsXt58heq5yBcAci8ztxi\nmMYUC5ighe13j9u5zZOn2bWLI3PmJ2gx58HzSuPpxjCNYnATZN0eQXduEj5i\n4C3sqil2QKKK91+075utN6fauP5Fgshp0cEw+k5w9fQeudbg2E/FpGU3LyC0\nX+00HTt7jVI6y7aWxufLpPu+1AOcOoQ/4ZU9bq4l04yMSffEg+B4km4mDMFT\nKce6qYKF/Rzkdu2E3NaFnj6VW4esrQQu8Dxkz9bQUjJtsgr+gAK/WXeGo7Uu\nZYpQAPGt08M9IBKwHU/wWEVwg3VKUpaD8cVg5yTCj4y8oXroVnJ4G2V1H72G\nSTx2VOy1e8DThPaDE20gJHirmVLbWk8UUkejspOdelK+i/hLzQFRrn6JZLV2\neP67ePpmvHBZxqgbGdXx6/QcllpWSD250/V422/kUFqnhjG28lelCSLeT5hk\nu/6H\r\n=k0Is\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"8780c29a82c64caee37ec22f279b264af42412b6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.01db89053.0","@material/theme":"8.0.0-canary.01db89053.0","@material/feature-targeting":"8.0.0-canary.01db89053.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.01db89053.0_1594917548672_0.3574094992823673","host":"s3://npm-registry-packages"}},"8.0.0-canary.fb5a4cdeb.0":{"name":"@material/shape","version":"8.0.0-canary.fb5a4cdeb.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.fb5a4cdeb.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"afdcdd11754509766eb1434f92e61eeb3ade7a93","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.fb5a4cdeb.0.tgz","fileCount":13,"integrity":"sha512-T5kchQEZXI0/IIvgl3znlrzP6GNVUbzxgs/toe3cp+Xdgh8idQoVh4NJd5dnfUKkNsidkWsIs9l0W2hPkyVsNg==","signatures":[{"sig":"MEQCIApq2CfK6IbVf0r1vDSveL1m2QxpxgOOV8W2ufJn32T4AiAvyMrKmJ6rSkinZiHHIlncnhqgEk9hyjThL8KCB2XqPA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":21522,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFe5bCRA9TVsSAnZWagAAivYQAIPiMNrF/ZEM0uFD8+f8\nuao8nBN6L0OS2uQuX99/r/8Ai4m3qb1JF0777RJi+QkbH53mhO0KCkkuMWv4\nXZ6Rj5RFLnRQuuaMH5c1eQCy7ug/oZiNmlfF5iC23KY3EsqQNaQWJnfzH8I/\nBTncdkTZISZO0CexIlBhyHTvY5B7zBERcQFvr6D9Kl4ep41QZA8OmM4mb3l1\n5HHrZnc/WVbulWie0Ev2QitM0K4KfdnfuaFnFTIXGMzU1bh6hilYD42NFZcT\nhBQU0CesVFjJcoVLVuhaKJGYyLxeCG6XIGcRE7NreYO0JO6NYvzFtk1qh1KK\n14r7Mf0vr4+OcUr8/8YKXk4sYPsIIyK67oJYp0ehinx1mSD+SxT15xgjyeY4\nODwHaM5ynZultDPpeIbfl8JJPgck4Ey7pOt2XDh6Ts9LvpZu7hWx5eYWs48o\nmsrGXo+HbTwiXbKoNTE2fpjc8SA1HL4BQLDUYvL18JrdMM2aejtdtPO1yVOl\n5mMBBz3Avmf7QgkHGXFldhUfDJoC8yJbgE+aIz19UsxN2S3TSWmRMqmI4hcK\nf+DonNhpfzUYxJvkvZ9yLZhiBtP+9I1VFn0/4CZEqC2KOEG/eTK3axPrEHGo\n/R0K73WiSWMtERkwUeSdQrDgZuNBoosmXecsIDnPNqAevsUI6MvKBvv8dYRs\nj4m/\r\n=ii/5\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"8e80295b6b3e0ec36934f8d691b193c740458d1f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.fb5a4cdeb.0","@material/theme":"8.0.0-canary.fb5a4cdeb.0","@material/feature-targeting":"8.0.0-canary.fb5a4cdeb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.fb5a4cdeb.0_1595272794916_0.8643026141671675","host":"s3://npm-registry-packages"}},"8.0.0-canary.8df0f517c.0":{"name":"@material/shape","version":"8.0.0-canary.8df0f517c.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.8df0f517c.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3e7266ecd0559a116e6c62097d35afee85137ca8","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.8df0f517c.0.tgz","fileCount":13,"integrity":"sha512-2rL0LRSxxiurnQlX5OU0SpzTiNDH2S0ET8pOIbpBi2rwxMA6HMRWUYbc0gd9V3rd7UIfKB4ejbfcYnpZpHAHRw==","signatures":[{"sig":"MEQCIEbHR0yQvPhDfkb8wU2/s9j+p8yYKjrJ6i71BAK7o0tlAiA/vZXbgm3QeiqVKBJxe5sd2cKQcLq1UMhG5kp1STgKiw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":21522,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFi79CRA9TVsSAnZWagAAIeAP/i/gjBPYfMggdd/Bki76\nE8wiyk32x18UIm7pfzTw9WGezO5SZ9S/wRAChP7Jvd3z+E8ZGg6bvXEIxs+U\n0D5esk267VOre1I9UJjV6roFbrfxz3rBZX7qkwh23g7YAlPZwofBqGTDHh4z\nIk6J2t4TxYXkybW02/RWXJojOAQ1ZAHwyF4SQfqqjjbp/NNGc++EJUPGdp0O\npTH5d0qu7HOVlrWm4jKEXCdPfH4PgZWgMTrgZtMmTdEku8fI2QWOJwxz2vSm\nHvROHPg3945hPTlRJYP0RsiipDgEvXV2ntdjYAENxab1mVAy8MrO7SW0nm4G\nvYaJLqSdwGNesZrSVPwti8INU+cWxzN+aclsvDjWdeF9A8m5VAqgnEnfgR9W\nnTj5M2Kno4XNJCn3kSO+BRN5pmi3vsvydsJYL+HhtDsYrvdCVLs7PxMHl76z\nOhalRO5bXT1msOqCtm6Jen9aPRSZKojsf0yLO+shw4pYDjKa9Is31xk4rAE7\ndFMDYqiPNPT4gWnGeWf4gJcG5vICPHuRu7guEVstQlPiTZy5jIjb/pBZjmWf\nX3Ix/zLwXjProz4mOFmtOkseoG4l1j0xDyMF1pBOdhwvn5ucywrSwbTR/5z0\nAsDgJF7/mCxZ2rTnDjCjlVqwmVH6RDHf3hPlEmQqt/JrlDA3FL3dXqqQN/zb\nP0Xk\r\n=TXvZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"5fca8679b0dad51628e898ac223795eea8e54d56","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.8df0f517c.0","@material/theme":"8.0.0-canary.8df0f517c.0","@material/feature-targeting":"8.0.0-canary.8df0f517c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.8df0f517c.0_1595289341233_0.7921447504494525","host":"s3://npm-registry-packages"}},"8.0.0-canary.abcdbcfeb.0":{"name":"@material/shape","version":"8.0.0-canary.abcdbcfeb.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.abcdbcfeb.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0600a965d271db2f0875d11001f4275f1855a3d2","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.abcdbcfeb.0.tgz","fileCount":13,"integrity":"sha512-ZCSAQ6tcqVSWZt7qHWSonCKwxXeg+sopHN6st5p+L5jAPdIfGkoPcDf+VuyqSPAosGv5zFPbuJF4cqh345YvDQ==","signatures":[{"sig":"MEQCIDm1/Aich2BL/RUYC/LA/l7jEvAHvt1vnzsWIDrk4rw5AiAHtDkZEoya3bXw2R2oTAQufoRr8oFLiZYMZFpcjvh+dg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":21522,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFjvGCRA9TVsSAnZWagAAt6oP/ixifw6HCYM6Xe1U1F5B\nO//l4DnDHmehS3i9xsu8TGxnfObBOvwzycgAYArl3fXZ+/v3g9Kj1DU34GK1\ns6UavJu/2kSwnOfTe2JNDcTQIadExXYpPJ50Lu/MsS12KG6Nox2LX233f80t\no9OSF/Bzm7qBDYFuTPersB+iEdb6x0z/UfxmsjyDtwGTf9A90xgdt8kSydBI\nWg82PBN6SJyN/7MpAyQB+9CIB3Zi3iC33FlHTNgWjVlOsog3FyNFapZaKZR+\nRkkD5rjig2qyhcWRdM7UlOxEcmbKjd6GDc3gnjsoi4cWzyuz5FbKAECpgvgt\nZyqzmhqDuLHbKWHvE+RmW1uApsDMx2nDzy0U0kh2unAcro1emdQQrO8BB0v8\n93wIJZJwko0e2nFYYWssoXK9+PMTBgmoz9AuTG925a+q3M6ktm0Q2ishU1k7\n2blDrp+MvYBSZ7/DdPRrKzkRSDtHcOyQp4seLN+4CllyzAsXmh69uP6AAfZd\nxQGZLqKW8Exw35tnLBsx0xY+BvAl2tWCUbPk4SrGDj0beeK6/Q5jwGkmjAp/\ngtvLoQ71Ch3I2zSoMZH/y00A9OtMwGausiXOjLY2YPY4b+QLQTQbo9hZovjC\nTigCIxf5JEpIdzWHvhtj+7a2A/Z6rq8dqBS4AT/WzoI49Gc2anjsd63pVi/3\nKfjP\r\n=735F\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"946720776dd73c7539bfa072ea415124b3e08a55","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.abcdbcfeb.0","@material/theme":"8.0.0-canary.abcdbcfeb.0","@material/feature-targeting":"8.0.0-canary.abcdbcfeb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.abcdbcfeb.0_1595292613863_0.9174951830899114","host":"s3://npm-registry-packages"}},"8.0.0-canary.7bd5075de.0":{"name":"@material/shape","version":"8.0.0-canary.7bd5075de.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.7bd5075de.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9340c3492ee32f1e435216103fc45725a38fdb35","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.7bd5075de.0.tgz","fileCount":13,"integrity":"sha512-ivEwmWvnkm/joL0KK2E8wTUTENke93bKn2KUarrxyMhvsX3hBBP6gBWWrMUnVUdUbqtzrVwE3rwMq97kaQLgcQ==","signatures":[{"sig":"MEQCIE/ovkJD6ilgw4xmNNKxHSaSCYPu8qcr5TXvMgws/pUJAiA5JqIkgw3Fnk+KCNzMwSIO8su6q1R4wYJ9SOJSdxceHQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":21522,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFzgwCRA9TVsSAnZWagAAbJQP/iznbSV0d566uwUuq5Ul\nC2u0it2dnUMBR83VpOkHZNko+A/QzTlSz8SKMxttj1Qh4AjRmoFQujNzKS1A\nm5ambjPsTRzZLyZxOKotJ4sumV0nU/SJrdjZlCkqIFM73gCq8nFCt5VohPn5\ne3DnUIcTd4I/mexPSUjiHEg3e9Mre7VWTZEfi9wozl1Uge52Gfp/1G3R/E81\nsOkW3XJIWFGvBRFSBcvZymMJi/kBzPR/TmrRDQmOK8yW5luS3qgyVYbdZmXs\n/YXcGI4DhphF+vxF3wdSYCZRqSbuhCXoPfzjwp9HaGeE3KTMS+CYiJf2Ctpc\nE2QIpgNbgEvXUidJee65biZowIHviHknZYGbh00h9XVBjsjXmC52kX0OgIqJ\nijIoI/HTXIFF1WXoHneKXtqFHrDPpVIYDpKYRWzou/SvX1YCeK6rMbOTcerG\nsykk6/vy10H3ut8ppi0Za9T3rQLO/mqwv2eu4oJ2xEO4y31SvndpZuUQ/YxO\nqd178vdiYtrf2TNDeFvXizj0UzJ3sXwImYhMm3do6wrcYr0eAO4smlUT5C1t\nw7uip3Llv6K2Mib91t1tVtygkEzJi8dKKn4pAz97emFJX9eG5Vca8MfiFgvI\nTTnVe874WUiw7Yrq+JsFl7AbrcDRn5JJq5aj8Vx3s/u0d2p8DpR2CGq7q3hF\nDfTD\r\n=T81g\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"5ae456e961b208e98164fa21047b3ff2e3f3d8e2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.7bd5075de.0","@material/theme":"8.0.0-canary.7bd5075de.0","@material/feature-targeting":"8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.7bd5075de.0_1595357232045_0.7269151937422018","host":"s3://npm-registry-packages"}},"8.0.0-canary.405a29a20.0":{"name":"@material/shape","version":"8.0.0-canary.405a29a20.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.405a29a20.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d734c50a6bab0827e946cc01d441d33f05cb4619","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.405a29a20.0.tgz","fileCount":13,"integrity":"sha512-/bI5pHpsu5r8SrgGoUl+/KA73zM01SfVXrf5Gs5PascoZ9ZdMm3w/JeY9Dt+bS6Jgt9BLbU6fCSDumgmB/IWLQ==","signatures":[{"sig":"MEQCIF8/ZwnBRpMf5woTiMO/GaGaKRI2mDnfTsHuR5Kcyj5lAiBPkgMH5C7NcwEnqWrtQynZmvsUBiux/tGMjYcCKOJGcQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":21522,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGLxLCRA9TVsSAnZWagAA9/4QAIED6CyO8bUkDasqcd+S\n5dq2sm4we9rhkDPa2G6OaHQ04ciXZqSlAcDEusKkDzu257TX3g1D7FghfBB3\nm94YcZxGHi7Oi3GhEK5y+L9BkP9dV8EkpXtLDwpNk+PGFawfqgI3apI83KVP\nITIPSgIayZTHlViFRWAvqo6nxy8/8oKumEKMYE7bmdnknQQt44PntxtSyrSw\n07WKO04VLl3Y1d+rjfQ81UoAu+LLIl5NTM+IZ045obeBiNhB4p9jQB9Z0gvs\nGoeY5FeJobmefDLfUpYEEhJlisw3+qY5Tdre2ivlTKlYj6JR6gCsccFPK0RX\nkWl83k6na1GX8/2FwyaChIdap4KqPRnozYdrGxULOfdKyy8mDFwVrpi6IqDU\nt/exnRgF/s5WR7zFJtPAoQuGKRw/7+1HxV3NEYIRXPcYk859d2q0A5Id72N/\nN9fYnFQMyItcwywCuoifZepwAAuQyFd1dePtAHtshHjyyG4OXposXXeZv93f\n6uFJa4GMkoq3V3VxLgT4M8TxWcrh5/fvbD7ZfzjE6JxHeDm6WNv+PE4umr54\n9rwWU5bgFVfMGLCjMoOVWr6R433Rw9qqCLvhO8lGwlfqFDUMgZLOaWTrzEWP\nECIryzBe0llgo/dLjLQwV3QpJmeBr2LUYGmRJJst8fu02SdepTUA2Vs3acc+\nKfIr\r\n=Uhn0\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"02c4f49285e8229cf49d9e4a0df213ff914b949f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.405a29a20.0","@material/theme":"8.0.0-canary.405a29a20.0","@material/feature-targeting":"8.0.0-canary.405a29a20.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.405a29a20.0_1595456587524_0.20279389376019785","host":"s3://npm-registry-packages"}},"8.0.0-canary.f3693ac4c.0":{"name":"@material/shape","version":"8.0.0-canary.f3693ac4c.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.f3693ac4c.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1d707cd9ef4872ae8abba8dbb2feaa3d34654962","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.f3693ac4c.0.tgz","fileCount":13,"integrity":"sha512-7AQ2ag2I6UgZniMCjJ8gy+a+soJVrcC/1XdhDoFdgbtl28nSKzq1n+6pBsu3eKFtbBTTqMS0fgbEUj8hcW2XeQ==","signatures":[{"sig":"MEQCIFm4V2KuG+o3ycO8BSGC1W3pZGG6U3FH0s2jknR6XZqrAiB4MHKUhe1Q9wacsKpov7u/BJPoDjw6ncgE8dDdzdee/A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":21522,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGL7ECRA9TVsSAnZWagAAxG4P/3HMLgC+T+7UecIBykO5\n0A0FQiNZoYhVPjA3VyXdxnoc5nldkGNlquL87w67leOCBjLzfwyhbVfhfgG/\ntJuak8NbtVoPmj3voflqVKC4/Dap8FMeauSaRyIkqD8oRiaN3s6giUGn9D+L\nTM1EyzvvPjoLunxL895xJ3Jl58ZE8KWK+t4MVUCOXU0CsKN9psAEilHSkwRw\nvwRcQQ+7mK0pPyUzWdTMEuz/2i7a0Cz+jdZPxLUFpErtprJPnfqDk70KGF7E\nUs5bOQ4fXjvPFC4H7RNt/tIYmVUndS29qgtlvgQfWvAHrL2kTEeOu6RxYOKg\nx5CVIyovUK4agH07IeBKxBSgljvj/pF8x/bEtxbmC8RnzRBziAxAwlsmbqJO\nrnQSaGaWpmJ4g0OzW9NFBtVhkZx+KwUXuAeJ5miTruAobunp10eKB5skBl4u\nl8VIDVsosyp69ohqQLxq69vmFpztJd6XNB3cVB5tcsg9z37/wNgjAg4G5dns\nP13/SqttE6qD/q74WN127+qtmTgHcehNGd0rrCHL9qyOVanncS7wEC7wx5jV\neghFx2aEnmWSIn/qqwIeZS9FPGeCNUst0zbmWqphnsm66L5a6erJXTdx167I\n99g6hNvHvwns4HGFBNgbVTV/wBZNVNjSluJQbbU76lW0MnmdcaOBJSrUlZwm\nzhel\r\n=6dZ+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"d3170e3936d96d26a6ca17df46c1febcfc33078f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.f3693ac4c.0","@material/theme":"8.0.0-canary.f3693ac4c.0","@material/feature-targeting":"8.0.0-canary.f3693ac4c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.f3693ac4c.0_1595457219718_0.9396665919437166","host":"s3://npm-registry-packages"}},"8.0.0-canary.12a109680.0":{"name":"@material/shape","version":"8.0.0-canary.12a109680.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.12a109680.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"279dc1b12a0c33fe18a2234a1383a6a32e5892e5","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.12a109680.0.tgz","fileCount":13,"integrity":"sha512-asamST45w3z+Nv/wGPdYt3FoBhUUT50FI2bT3vpSLnBtgA2KJ9+SmzEv+vtZCmsCwQiyo5WrYWWuYeWQ7ITGDQ==","signatures":[{"sig":"MEUCIFRifI1HzUZeZdWFRCXrogzyv63u4TskCH5cQUwLUOmmAiEArV+JQFt188Dsh8sDgyykGdLXu0KtCU+zI3oiftMHLtM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":21522,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGMXECRA9TVsSAnZWagAAwZsP/0wxjE1yKsFResWxk6VE\nP+Czakgdre5g1wJqUKee6wn6r4BE3KN/gXgRT7SFe7S4bQLJiUHrrOK995Yg\nrwNZ5oXZ38CX1JMLYqI5smc1LwGmylsWV/YB0pirqTwnp5f0gVZ8yNR5WrPG\nk6ZI8OJUaVjnqno/0r1VzoaY41/pFUamst46cMFOahT4Da0fw6iOMLVLANkD\n9G3GWKMRMswnrIDc+T2DJ0zlwbFzBsATEjqQpWkJvibWRLIdJ3h6qta88wJ0\nl7ty2LOPt+DqIl6FT28qbp5GiPqmNd6WkChN/WfXr3rpubdWXF3/s9ISMcMz\nbXplhCIUYrsTqAy2v5Glb670xYpU//fz+iUvV77cCnCDJmCGdQDdQCzWSpMd\nSkVLR8XKfP5voedLSkX8N/gXyqETJQ2B29coHDKhgQH0RCmB4nnC15bKBQKf\nLbTRObR7n993IRrwrz23rMlOM0/NhOIxnlCQfpDFPh6EY7EioxewsuyJk44y\niIEariJT4wuQY8m34FvtAfRn2NTjlmSpjy2YAsp/p4eynhAAqtfy6B8A4Jy6\n5R/NXwBKr2cpCcegLzqNkcpw6jieGEtGtlXvuDqyjrcpdCsILa17pv1okgSk\nyUy2P7MYw4SUewQx7jOwJiaG6a8arjz5ZrWIBvhaBYPLk6LvEDhyo9owCIXf\nbLCJ\r\n=d/r2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"a403e743d7da095028c3ba6d0a66ef2f7812aa8e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.12a109680.0","@material/theme":"8.0.0-canary.12a109680.0","@material/feature-targeting":"8.0.0-canary.12a109680.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.12a109680.0_1595459012247_0.6633302518954098","host":"s3://npm-registry-packages"}},"8.0.0-canary.bbd06696e.0":{"name":"@material/shape","version":"8.0.0-canary.bbd06696e.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.bbd06696e.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dd90f5b48c0d59b78d50e1205e8d261a40519f8e","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.bbd06696e.0.tgz","fileCount":13,"integrity":"sha512-HPka5MMLsUf1bRci9iByPuPYAwZbb6BLRO//2GcZwCJBH7I6epDtbp0z16T73UzYbcOqUHTcIDuKEjPnwCeqOQ==","signatures":[{"sig":"MEYCIQCKvZ+wGSivHu782pWtWF29wSwZ3AbzAGR4QUoyf/gOEQIhALn9BLuhpGGRsFcCh3C0Q4ScLe2/yDnGdLRHBBXbhnxd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":21486,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGNFZCRA9TVsSAnZWagAATIYP/0/fMxTU4gh8KvDz/Zb1\nAZ93mT8t2fkstmCVimoF0uowhNOZaxyWdjmYPXYdzyDNBM31RvsvsGAZ0HGo\nyvC9oWg4iZPP76ng6wSr35v3S5gUsvKXEEBT+7OR0gR7bmf7CKsFO8K8KZoX\nEUv+Mj0UA4WQkwhhEX60x74KFj1ClLOKoHRAC7Zk7xRx5PO1qobKdRaLosWu\nD9ywK80yv/fv8zPCobonm6FqYSjRqZ64F5xeDEWD88tOIkk9W3IHgLGE4Yc4\naK4ovLzKe902gl+RXVmYMc4e/MbXn2JcqXa7iGGHd5vHAiVEGFfCYMi5VQFb\nmLb4I8L++7tWm+M3Mvd0eH6dngqhsrICGAs5Aezcuybjt4ChmZ2O02FdsifY\nS3krjpTtQOkuX4Intkc/QLnk8ZsEo21xPrpCJkivRjcZbpiuVk83oxbIHiw2\nUkA9SeDN7n46oz0IpTmDip1hIZLnTqeRjVQDFEl96+tnjxNtmDU75FYuatmH\nhTBU9J7e3MxxAM0rAeIAvNlq0g/B0SpqV/nZmvd3pB3D8IeTqctuwYm3vy78\nwiQU7UqS4AiJsYhrLDK7SXFCv9/VOBJXDqNip4c6aZjtwrQxyHpzJG4vlul8\nFzILoKeBc6liAQ75RAXY/R9zlwYCxEU6vLCstMg/GJup3W3cI/odXEksKYQx\nOuAM\r\n=EOpZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"1d34a386a37996e326b9ca18440ff1cda261f3aa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.bbd06696e.0","@material/theme":"8.0.0-canary.bbd06696e.0","@material/feature-targeting":"8.0.0-canary.bbd06696e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.bbd06696e.0_1595461977283_0.3058042214113419","host":"s3://npm-registry-packages"}},"8.0.0-canary.4951e7651.0":{"name":"@material/shape","version":"8.0.0-canary.4951e7651.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.4951e7651.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c616536129a218711947f1d028267873784ac840","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.4951e7651.0.tgz","fileCount":13,"integrity":"sha512-OtdlinBZJsFg9h9LUKvssItZUagfQEm24EfAOKYuArizF10wapsoMW51EUxrcv9vAi6CFu7Mj+eWbdKwdpkOzQ==","signatures":[{"sig":"MEUCIQDZekx6AhafyAXCYAtQbwrCoFWc5uH2M4qrLrS3euGQvwIgWfTBqvvmC1hQ36Z3OhaEz3DUFN5lim14yvp5JgMLGBY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":21486,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGOy4CRA9TVsSAnZWagAAT68P/i5+CeH6mnDFOM/cloYL\niD1rwcC/TXp1xCOy9FoYr0VUAQ/6G8Sk9xFJGab7xXhEHC0zQUdhd0+DLUUf\niilFoCjhYS0Qn9X+741KPxjs5UNNBu0bUSrtLynjNO9mKyMzGADm9Z2jYDsE\nT4jhGc/BYs7ootb8dmLlk+Ctm8IOr5v+6Jjj+DbhqHbX+43mT8OHX44yfT5n\n5LTA4SfT9UXSxxmp8PpGR6E6WwvN1WzIYVJFs3LQ/tq/r99gj1O+/y+yUdeP\n41fpd5PMsg9hVWelzh80CD/IG5TiNxF+aSnPhKyMwg1Jk53oAhBEjuUINhGz\n7Y460dG2PSSLco5Mq7z81kkFJU33kJ73SIDERxYCf68yxyJcf0CQS33dfOJO\n8Cn9L1dY+RynmRNl6SLjRlJDKU9m4ElVR3Q1dfIZ/Kp7fqRqSf3jKaZKx3ed\ncwRUQ9fKCAnSxtjm2+8X9blVgK31EMx1EgPgjn4DrzKvVzX6ytrfLUU3uFXK\noyX5UXqU4a+Mpi05dMCGsdKcb0q5dCCtnltixhBb7Gc9cUQQ39U0qkASqOCP\nM7R4YpLiaLIihbOMHGV6LRYoDDwPiXVS9k6LptvvdGkiZlam2Fd4BzcM6HPv\nTRFqJkclMMSPnGDCK79G0p0dbb0/So2svd54wExkQCkFDTSe51YUzduikeWj\nM4Q+\r\n=kzxq\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"32ca9cc0ab948e59f91965e96adf325a142b8336","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.4951e7651.0","@material/theme":"8.0.0-canary.4951e7651.0","@material/feature-targeting":"8.0.0-canary.4951e7651.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.4951e7651.0_1595468984372_0.3236089617812903","host":"s3://npm-registry-packages"}},"8.0.0-canary.75deebbef.0":{"name":"@material/shape","version":"8.0.0-canary.75deebbef.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.75deebbef.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5f351feb879e2878f9d9e1ccdadb47887c8f29ee","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.75deebbef.0.tgz","fileCount":13,"integrity":"sha512-QFfkOI/ptwFCkA/9vhJNKC9R/3ZeOtENg6Jmo7tA2/r/KzwH7KwZncoZNw1eegxJpMun4cI0YeGOA3z1B6i+Zw==","signatures":[{"sig":"MEUCIQDvjPvt5SHUgbxqNXIRFeT3gcIo7chxYokXVzxZVaJJyAIgUiZbQPSdMStoKKq/Mg3DginDEtYBDflBqhm1FjPos2g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":21486,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGcznCRA9TVsSAnZWagAAo1UQAJRnBrYiekhLdSYzlFTT\nBM7BFc0LuKDQ2AAXk5I13ZY4CvwFOSM0HfBjnwwJ3SX8q/qkwINy4WUYEPdB\nHGJXKmcJT1SBgIDq1zvn5Y3sZZIdTMbd3emTGjx+m4VWg6Eb83MkR0x2p1z6\n7xHc/AU9tj4DAuMsR1QWGbKFCDupl2ITi3v54Hn1NR6LN1EpkkLJ6+jMIBsy\n2lMdocqL/i1nWQVN6edPwSMgrvUh24BUR3Ml8/rqyURubk8MWKRyfes3OQTV\nyFI3B9SfTZNDX3asBthPpMGHO28HHTGeZG+3ywqQOIh+9Asanmx1Ro9P4HUh\nclKVJm1XAor2B6sjeZ70SodxACEwXBP3zvsxZRGFqRg9ueJ3DaPutpYtkeVF\njSk2K4wJVNrT8k5zm8ifQUjNAfaTgNDGov/v7cnMNjjqcBYOs6Jv+YV4VPxq\n/XXqfH+UetEIZCDI3BGqu6PD37wy8deKRW6JmjK2n87hUdnBh2KcdgQ+JgqV\ndY3HLwUpTswLGZXxYjvw8oo7M+ouTvXiVV81jk6l12TTOubI1Muub0JodNxV\nC8K/2XTnIeso4saSRyZDLK/nmexIQ9/dfJgrEHYi/eqs5HEx5As+hyPrILyq\nCSsmdwawLrQe4QBqfTrTCr1m2PTVkUJwSMvUCRZUHQlW6VgmbrE2MTYFkqaY\nU9Tz\r\n=tx9h\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"3df5ec3c8a254202fe3ba9017528cce3d5d906ed","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.75deebbef.0","@material/theme":"8.0.0-canary.75deebbef.0","@material/feature-targeting":"8.0.0-canary.75deebbef.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.75deebbef.0_1595526367043_0.9664383606137876","host":"s3://npm-registry-packages"}},"8.0.0-canary.95aff33ee.0":{"name":"@material/shape","version":"8.0.0-canary.95aff33ee.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.95aff33ee.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"81f8efae1fea875aa5889676607680f2e6604f04","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.95aff33ee.0.tgz","fileCount":13,"integrity":"sha512-eZwkpBpGTZgExk78Vt5LoIp1PT931HqEtxWyy7RU9RBT04hQkjL2pJ7zKPs6tD6maT1IZbt3I/vZteOrMi8ErQ==","signatures":[{"sig":"MEQCIBWuGON5GTmZhCKSA6IarxW4GgC0oVX5z7MhrNNtMepbAiBn5wq2PlyRO/+8OUw9C+DD3lOWxOqUUR7c1Jl/v8/+lA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":21408,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGds+CRA9TVsSAnZWagAA4eoP/imzfAwrC9adOs7z48wR\nstyysZLnq72q30kNTb68lvW534z5vWKBcsPN8ioIAVkVgXtBXeNhqSSl+siV\n9Y9eKhj2F40yc436d1WDBaBXge8NZvaSnAbfu9/FAk6y/9mkT5TViLdSIf8v\nuP20dQo899AoS6rFAeJLEI6ZbAVDmK50q1xKFXnKyDPiFMg7n11d6JsTzLNu\nGwo2wtXDVSD0ZhgO8T55ti/92La/FfL4JaSsN00aKR/nC5PJoa97oynpR4Ik\n1T0836nZiVD6KQ7N5Bpo7wp1b2XEqfZL6pkpvkgidawsX/J2LIyQCMFd1/CS\nqtrWqO9hxkWLymW+HuCuaYMyRFpp722SsHbtwz1p3LMngs279w49KOPRpyta\nMVXM+yLkMREF9e62/2m72HpiZf3p9zLlH5BGprtZzU0ANTD3MikBFgbW8z32\nKCC6x+dnSvFtR7BuxFfTM6g1MU5RfGhZxl+mBGtDGsN3SQWNNDHro0CMmXwu\nAdkUkctmtgwIwb0HGadshzZVBLYcYa13xX9r/ac8Nbkhh9E/om6P8zMiW9yc\nzAXUna9Fzi+OqPARH84vOJdy8Dmk9XyEpOoIMD7Bkw0Y2jF6hkvtZW/Jmrxy\ndQaMFEa18Pt/Tqa4W6pHmDwh/YrAbwKHmVaZHXvwpMoe0B58UZ9KR1cab6rE\nFPMW\r\n=5YGl\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"0343ebd62969f5d4315e249ad81f2837fdbaa096","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.95aff33ee.0","@material/theme":"8.0.0-canary.95aff33ee.0","@material/feature-targeting":"8.0.0-canary.95aff33ee.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.95aff33ee.0_1595530045743_0.6635807788503996","host":"s3://npm-registry-packages"}},"8.0.0-canary.9d9f47473.0":{"name":"@material/shape","version":"8.0.0-canary.9d9f47473.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.9d9f47473.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"537a25b20d3ed398dc079e61914106f9bdfe41e2","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.9d9f47473.0.tgz","fileCount":13,"integrity":"sha512-ODW+rQBt1rIo68FQMD7qc9QG1ebmsv0xq7slfmOaqVgqoT9JNF1jsRAEugi5rKKX7wbgt+4KhhsD4vQLm4yvJQ==","signatures":[{"sig":"MEUCIQDVHITdeH3bofGsYxau83ijJiHejx2J5mf2ZqR50xMQRgIgOqPOShW+EZaNFGDh+3P5WFz6W5SuPkNNev8OEgncBaQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":21408,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGev9CRA9TVsSAnZWagAACXQP/3B2DxGOd+MdL2DaoO6P\nuqCnXg9NXB+FXbtea3AsTVGIVfgkYAKVCoYibMEsf3qBtztu3fxUfE1mxm2r\npeEQM0AlbWkfChRxvlhy3nUOV+ajAnOtBCX9NE8NO4HVC5BOrH7N/oRECHc5\nR0apQgVlrMRNsNs+AlOZVAV7eOCar9XabCiM2uKWplQ0IlaeklI6Vda0gcPe\nR0rS3X2rTs8S85Z6NGzY44/xCKX/jh1H6efcPGjNmQwaeSyqUfuev2yFYcH3\nGV7L7A4sdbIXw4YfLctAF8ya3gwF+jbZf8c+8M2kwLy8zolZCXZlQ4X+6Vlf\nz2F3rxTjUMuFQrI1pPxs0zcESiO2oMTYAj1alWRCH02eqMKOM5Y3arYU6oR6\nFObPuEQLgRiw3xBEdyLBkirToHs7+PSbkXmEEw4XdIqeg0Px4P+zgpF4Rtpf\nC6qK3j+fMc9sei9mMXe99mh1rpV42Zzt96BbHfAsNoFdTnfDvtnV4KqUB/Y6\nS85+g0OmGJ2dW84jramfpys3mB18UoDnSpAmWUWhRbrSppQ0aZ2nPFiOaKqU\n8U9Ls/Nb3H/MGMPU4fXtwcTZO9QnUcaUDC3sT8pIJFvnOASm2ei5n45GAhH2\nJO8V9bWBAnsjJOm9i4Fj0Vwqo542Jeve9uKBYkxoo5E2q/o+91WIK1ZCoRTK\n6thp\r\n=GlP4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"b21be0611a45dd7df8e3b48a3fd0aab09d6cb236","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.9d9f47473.0","@material/theme":"8.0.0-canary.9d9f47473.0","@material/feature-targeting":"8.0.0-canary.9d9f47473.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.9d9f47473.0_1595534333273_0.41487490160658314","host":"s3://npm-registry-packages"}},"8.0.0-canary.00dfbf6be.0":{"name":"@material/shape","version":"8.0.0-canary.00dfbf6be.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.00dfbf6be.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9bf22155b356faba38c6ac945311a47c28a6e9f1","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.00dfbf6be.0.tgz","fileCount":13,"integrity":"sha512-K33bbhVLHGhJc5swZEdR8ICVUnjDAgRBLBhsqyIz6JNIyFCSE4t2503g6PYgy7RqtxxKLm9vCywIQn2LxVx+iQ==","signatures":[{"sig":"MEUCIQC8Yfaz9AIpp7CNYqtqFebx3+vuWewcH9LPH4FgWTNjhwIgdkIh2RJ3SQ1kfgCuUeGkO6c22n9X8p6vX7y3cSINQ+8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":21408,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGfoxCRA9TVsSAnZWagAAlyUQAIn2NQPgd0Gm/yhb5O20\ndUjhwU6Mv5gbo8ZVj7hgeGcdZFvzPU8WdXCs4ypX0EqT8+Tki+DMAQb+BZSc\nr04sAzK953gse89xkH/u69rfTuddYSx7EBc6NbVO0Tl2TZgQJwxlQPPj6AFU\nKtoQBuu3cLCVQVS0TeeYK7DMSCgnDasKTfoHi/QKN+Qq1AvzE2THC3h0Z2aW\nZHLJHcQFHGl4V5uCT6dQqudjw939vMOUcmbWEm5bcHIvizxSdT5w3xqnEdz6\nhDUoBqv0eAdcX+Q/3MsKs8jPzEGo0arq7cGo+TYgzaxd6lJ7qAPNhq3oqtI4\nUxYergjtY+4tq0MnHGQEkRyhBF0Uhz9S+l3uGEB8UcWiN0Vs+D6W2Q57e0Zi\nvpw+2RCxIPGTlYYrjbgO8Mlrj1wDg+ZS1HX3qzHIyZ+cTJ+HyfQCpp2qOLyV\ntcLQckpc/EofsLkLt8n5MHZiKtWwqmNRyB0jo88jU7sTpKCuqEzlHS0KMS9z\nuXqfxv3jX/uGixguBDyYoSb3MtRZHM6vLamlT1KSbEwXWV+BRmuWsO4cnC6X\n0HtrfeQa8sqqoFRUF3HSKTBqDNLJnNtqX6V87SsrxAV6aQPQiBpcOv/CNhWr\nTWP7BLV+8fkAIiIUwnnDe5FD3U0qtgLoD1bZJRd71e/QVcbiPdBpSi4Rd2C9\nregM\r\n=8vP2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"e4a97455c736fab77028e52beabb53323eb60ed3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.00dfbf6be.0","@material/theme":"8.0.0-canary.00dfbf6be.0","@material/feature-targeting":"8.0.0-canary.00dfbf6be.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.00dfbf6be.0_1595537969289_0.3437573015595119","host":"s3://npm-registry-packages"}},"8.0.0-canary.b87e522d2.0":{"name":"@material/shape","version":"8.0.0-canary.b87e522d2.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.b87e522d2.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"06ee64c5b0cdf4be93d581f0afe5cbdd1f8d6eeb","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.b87e522d2.0.tgz","fileCount":13,"integrity":"sha512-lS8LU9flcGE6f06sSoLJYrxXVuOhAW4ciGTFHe+azdEnOM2p7KuOMOQBr9vL0sn320+/CP8OjUeqVS9ol2qpBg==","signatures":[{"sig":"MEQCIBOS27G81yZ+h24nzzIGbOP8OIMLhIC+N8nfNVZVml5OAiBaEOp9siv1MI5Vg/W7apDnWLLes+XQp8JqJn9Pfu540w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":21408,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGf/YCRA9TVsSAnZWagAA79wP/2sp1lCyjOSXD+AY8HH8\nCMh6+3gDubLu46T/f3YZ4yIWOvr6TNcv2wt/m1CjLFIT1vL1Wgjdy3S67lsR\nXm5ytf30tPl4jOFPtVnxaxaknbXHW+kb7eBNcziecza8yi2AiXk75xpin4Pf\nsIUkUhYoGDILcu9HwIkUFnhnT2GNMqpop1IB6Dq+LL3QCgNLgZINqWmivky0\nEXCadLPXRfb+3FObAqeI3j+gP7WZyVkD4tyMe9arlJj3yhmQ3v7JcbWoVLwK\nLOUuVMXZxmsEfF18G0SwQzwbIMuTwOBugfQAwJ4dMqzsqcFobk76PwudUsXb\nl9aJxN5qzYRzLx3DFv47nLN4kik+Di/bHabQGZ7v9TbQ1fVTOnY4j5w8eN5A\n3G9kMmEi3jWaaJoxyp/F/uJEDlW0sFC593FGhqGoES5JScVLFvfBW0b2nPXK\nIsN5b6gOC1XZXH/mXQtUhZFkojDQmw2gWjBnAMGNxv6hdmS12LutJfw7V3C5\nUR56Rfkns+N4qlmW5dsDlYcydis90O/Hr4IP02rNq7CN54orNtf3+CQElMAl\nmhGcfzzqkkp0WFMDP4Hg/pYhHbE9OIUv/1LlL7Jnvuq7383Gtfh2bhU9aqQs\nco6R4s5uTj4Psfgzx8iTXDOQwhzHc6NMBhZPPRdYsDyFr7y/RJ+IdKXy+NZb\nA14g\r\n=Xu5g\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"c6b4bba75848a4cc1d6ee29d1b67848ff11a8ba6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.b87e522d2.0","@material/theme":"8.0.0-canary.b87e522d2.0","@material/feature-targeting":"8.0.0-canary.b87e522d2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.b87e522d2.0_1595539416290_0.4886503742824795","host":"s3://npm-registry-packages"}},"8.0.0-canary.5b3e150e5.0":{"name":"@material/shape","version":"8.0.0-canary.5b3e150e5.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.5b3e150e5.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"89c6275e695c4fc378625f13567db86ce383896c","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.5b3e150e5.0.tgz","fileCount":13,"integrity":"sha512-1e7AwXCupiPLIMLwjFZq/3fpiEW7wkrBfkOvVQOIMAM10BUzQeBoIGXBpBZYWT/8FHzFAawtBcojKRi73Sav5Q==","signatures":[{"sig":"MEQCIEmfHgc70Me6NKteYHJD0EsJhULdjI/qPIn+/whjAtuUAiBLK0jSnGY87HPKj4Uxy6tiUlyOyxoii4Lyt4cYVj8jJg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":21408,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGjg1CRA9TVsSAnZWagAARRsP/2Arp83YQknizbD2Msvu\nkuOXCyVvZ6sK49ars1DLuSVSm0O3cNOq/VXZbFKaGADXgngt2YBNv9h0jaN9\nbfJLOEkfGh6xSNK3WyVM4G+F1OX0XbgC+7AG7Xwn6qAoUIpvsW1Qmyoyiq3f\nArByJwcdhBOgFOD5EDprs8zNa8Z6kvpiTXv2hIfdgG6jpXIsn+dbof2u9w8k\n6tY7yh09XNaDjAh8eXtnQE1DNe+hrB76ZMxCjBDXCJh7ptfbe5CEj96G4sdC\nKjjpqjfFtn5XfnX83bLo5IyYI/XeZE32yR6XYM7H+C/rh9CObW2L509EIu6E\nOSmpvgmzW3U8CTmF/TA1H4xr9mv1YelYukRabNbyoG0a84OjeZmcX7hOKgne\nGxTrAKP1B4A+HVcXgGCAWExvH2e/p8IC3fwy3zg4gjcjE2ulsKIs1Sj6+iK6\n5E+lzh6pMHGi9+VcCPZtRxeavfpp0PDJhjuctpQY502kVCn9kc2kSdaCOP8z\nOO72QnsPqIdw0AdA4eUjBMJxZnKNgv/VAa+Q5h17mZKvfMGoNrPvHGUZTnfz\ndYHsk7fEmSECnoc3SUhRJ3wEU8YwPNZB51dQ8zrhoiZvtQlBiz90argdM3Dl\nQNdmLRAC/3o4NEE//qVTeo2gn3lwW08Jo/YcsTQoc18EERZiewcQlpkKxIWa\nr/Yw\r\n=cx60\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"bdcd04000450742ddf94918c2953ff0bbfdfe9cc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.5b3e150e5.0","@material/theme":"8.0.0-canary.5b3e150e5.0","@material/feature-targeting":"8.0.0-canary.5b3e150e5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.5b3e150e5.0_1595553845169_0.6998181911983974","host":"s3://npm-registry-packages"}},"8.0.0-canary.f0ae11786.0":{"name":"@material/shape","version":"8.0.0-canary.f0ae11786.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.f0ae11786.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"140a050be8cdfe526d0f7335d1d9bde022bccb62","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.f0ae11786.0.tgz","fileCount":13,"integrity":"sha512-ltIGniCkDs9ke6+tHATSWPce31YG4p/9e4JCieTYfHavJAp2aEDTEOQh5SRucadUtKVOnqY4Z7tzD1T03tSLog==","signatures":[{"sig":"MEYCIQDOaUnDsOlAmYTA4xlsb7e5V4ynJPkB+rPyofQKs3S7QAIhAOevNKJ3UGPy5LDr2lPKzLwHC8J+4KE5uQJtDFYdv5Dx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":21398,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGjzFCRA9TVsSAnZWagAAx/8P/2LBKetVf0Q+tdHcQ2VY\nY4jK1sVHawfBT9JnbYfZrza+XErF69cEoV85AgCAOpu1axMLi+I82Cc5t8vb\n5Zn0W6t1Clnwe2VIdm4ksFbOzXnqVYygmg7GQN2XY7OwtKYrCAFDPAVbNMVr\nXIgrbkLsOIy0yRAONPDtY2E+eHO7UtisNVnbAw4hyeYRaf2l0AvFsm71Xpqo\nrCST64hOayg2GUHbep845SQGGpC3lswo3VJXdqelrEvMHHqOchrKX2pN2WyF\nIgEwh1dmdlzousFYxGm8WQ5nKLkNW9P0Y7yQsTYCDIxGCgUiyruYCDWbkEBB\n6m8TgVqTigqwuzqE3a/YkL5axc5KY8MqA+TUFGNvnmNkaKwGEVWZum6MRHkN\n66JRZj+X1kpYAq3aiI9cLeWjqqIr4cvpeEiOsCyIAgu71ETNEA37t/+hZsrO\nMIkjvbWVhy5rYIvKLMbATyKNaN6RojUd/csN7/IYp4QSHS+CPrZRWmT1uP5y\nYeypottkOT0mZo4eem+KJ7VoYizaMvYIAwvShQuTUcQclImR+LoB5hy0ahvp\nyhr/dvHboIeYTdLEXth7CNUHKCe8ejbsi2K/J1m2wlkgLXOTJzyDvXgmoLNh\ndUbbSIK8c2Ow5+Femj17O2sZ1uNMDtxxIBD1uY7ePZwVAyZAkszWqK2wCJoe\n3+dF\r\n=m6Nz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"2f6df990a3e45b1985740da9e55bce17882e69d6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.f0ae11786.0","@material/theme":"8.0.0-canary.f0ae11786.0","@material/feature-targeting":"8.0.0-canary.f0ae11786.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.f0ae11786.0_1595555013293_0.0255988551706956","host":"s3://npm-registry-packages"}},"8.0.0-canary.fb4ee66c0.0":{"name":"@material/shape","version":"8.0.0-canary.fb4ee66c0.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.fb4ee66c0.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4c896d1d68391c95c17447ba7a7d35ae9718bf93","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.fb4ee66c0.0.tgz","fileCount":13,"integrity":"sha512-FAK6EqI/6Lzz4aXYTrZWcldeymKG94R2OzkSZiA7s0CwLfIk+cG9AUdBgGWgKyd0uGQ39TwGCdFBKFsH/eq4lg==","signatures":[{"sig":"MEUCIH2HtInaesd/vVhmI+K5KSVjpUmpVczFdRG5+8L09+gEAiEA7nVkN7PovaoGQJwoXjWQmq986q3dtLETI8My7YJHfOU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":21398,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGkMrCRA9TVsSAnZWagAAkCcP/1cjr73XfX27gr+Lj06l\nHF4hm2H+3lgSRvjczwtDMVwL6xC4cPwfsEjcqL63sEpaP/L/BLqudIJU3Awu\nreEPNCP3t+yGL5x8FXQ00hPfa4/YIQMZmiqpm8Q+GVb130kDrRW+euwGPSgb\nz2HasNXl3DOMy1xgDdB1ZLaSpY7nquXDVx4fRwWZQ+lVpAFqcF3R82tbbGlZ\n2TW0GO+bnqvArZq9cmFS3yd1cfIIing/0pTJfiQAufWkXdhs5RH3X3OmyytW\nrgKQ+oFPTZ0mos8EXwNgENXOmrFonhTR6SDGJKF1OjURy4fSKU+zTS239BTT\n7T3wVO0EPlGp366xcr5va35N2TYWKiRV0wcjqZPjZEbq066fZ4oas9EWXeK3\nj+WQ634j9O6Pt7mqaCKzq98XpQkjUE7DKgCCv27Op18TApPsoMAuk6YnmXo+\npRWjR4HJMMfYhjErMxTHWdBkWUaicH5lFG2I4SowPOIL3k5DUEur4iDSKnrD\nQKnmPx4rF3blbDugfJ8RPuyDJpkjLeMKVGeVC0oMG39xNEDKgIQPmx4KEmeg\nrZGagJvk2+Cno/Vyof3kaq6GYaG9SZjMOzwyU4l4E8riupvmwEz0EJc9Q9zw\ndhZEnUG4gTIXu8y++EDCiOdJ5JwNSnyUi1Z3BIjl71Fzq4tI325Kxjg/ogan\nxmFQ\r\n=384s\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"38a9d8f8bf46aca600cb4ba84272480ece6c67bb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.fb4ee66c0.0","@material/theme":"8.0.0-canary.fb4ee66c0.0","@material/feature-targeting":"8.0.0-canary.fb4ee66c0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.fb4ee66c0.0_1595556650811_0.02691674225594287","host":"s3://npm-registry-packages"}},"8.0.0-canary.5511e0aeb.0":{"name":"@material/shape","version":"8.0.0-canary.5511e0aeb.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.5511e0aeb.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f2dd1e46a17c02d0c436cd5b145f73f8fe3cd162","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.5511e0aeb.0.tgz","fileCount":13,"integrity":"sha512-kf5Iy/IpxzdP+bw/5w+fqktoinDBzGe5Lcf4Eb2ZwudIln9zVUKr4Ny+mUTVQ/4/OG45pD75+1R+goedcPXy5w==","signatures":[{"sig":"MEQCIGSF17s3JpAjbwQs7eaco/SZs2t8fqBNRtPIAYxTSouMAiBzQA0pTePVCsnhUtpbAhqHHukDCSZ5Tz/6LwAnKIA+Tw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":21398,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGxLPCRA9TVsSAnZWagAAfk0QAIPPB/2fO6p1t+DAhNxx\nmUIdYdCD59q7ZfCoyiO43IdE2XR+VXeDu4S5zDjEOQcnE0fhk8vl0kusjTX6\nEH2j1rDOTUKaIzZVngnM8+8eBdAQOyezaxo6Qhx7pEGNKJjEVj3lgB7SDC5P\ncGEVpQYQ6ocxuii5su4WlgR8nlrj2ITFZbt/QnLHDNAwPjGMyuR/CBczDQIy\nzG/hwX6X6ceHtcWitvSXFATRw5zpEn1nKJuPq9A1T8Yr+u4219pO09A9Ghwq\nx7URolgUPqKAAlmPYQeBy3DhdASs9g/GfcKCSC1KvsfwKDmQWrzooslZyjkG\ncv7GUgdi6ELqpnukgoVL2MFyWDCsmPzpl0LjRvMquF1vPwEzbF0yCcfYHn/V\nCCcNeZXJWHL61el7ifQr0xN8+R1vTfWuj2wFwnwhQv8DDPDCQdHw77NTtf0N\nfFWcs1DSht9SPu/ainGi1UzZ9zB2LvUSDp0rEjHikLNYW2vc2q6iyBuvdbma\n6PK471MoEYJ9sMvf6erNZeXMsbUeV7ed4kc6S7sD2yLKlmk3ftn7nE7uTHjq\nRBk4vc9ahsSpftLCHeTHqmW0uV/HxVdm0SHh8wg/QReNiG9FQlhSmXqD8+IC\nGuM+3OQOb2LZtHieKP4/8E0KTg9Wg+1TJG5qm+c5ylSXLkSGXSDj/JPFq6HX\nhFIW\r\n=M/68\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"dc830dbf81ef9cb796c66b2d35b70355ca46a37e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.5511e0aeb.0","@material/theme":"8.0.0-canary.5511e0aeb.0","@material/feature-targeting":"8.0.0-canary.5511e0aeb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.5511e0aeb.0_1595609806630_0.9581941488466232","host":"s3://npm-registry-packages"}},"8.0.0-canary.8388a9bf6.0":{"name":"@material/shape","version":"8.0.0-canary.8388a9bf6.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.8388a9bf6.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9f457952ef1e50eea2882b8187f3675c35c95aa3","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.8388a9bf6.0.tgz","fileCount":13,"integrity":"sha512-EOLNnm/LyqipmZOZ1oTrKESKFffDPuWiSqHqTo4tKhuYSzh6AhVNXDSzdPj2HRTC5fDwtrtTakk8/tinEuzV0g==","signatures":[{"sig":"MEQCIA02sfPUlCGbFm6FikZ5dudd9q/YYustwG28XFhVh3TMAiAWNtLt7mIPC1Pf34uipyopf6IOdR4oWz7X1RlWGa63yQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":21398,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfG0DdCRA9TVsSAnZWagAA0zQP/0zxzeiSrDK9ZnGW0h77\ncYTgo3eJV9g8sbCQbmOpwa4h+yX7c0pp8/c7+A8exKUWv5aM3RxR5giFmHZq\nrGum2lwXoQizB8gc365Gjac1CAyKkFVCviuVpZ3QEkjj199R9RYxa2skxa4V\nxEUnwCzjrgsagz8WRa0PFT5AyW7PdHLAOBsRo5353hj8AhqWnISooFU2dpTY\ntGy6/fv2KXFj3ZhWA8lLS46YglkNn587dRFnQJSh5DgvQZTUnBFFbWc7ctth\nNmmM9qFwl5IWxHA6IcJzrIeta745ND0UBATgutPpenl+T1eigw3ZCZTUe5xI\nvR2ZS/E6phKELnSngh3EkFIt1NCXMJzjWblEFFJdMeMOVJqDqJ8pcjRVhRSe\nJclR90lpTGiEzEPhw3WDcKPB6Wdc+sf9yjeI+KYoeydCrJIC3kbi+++fefps\nLiPvU2Dk65yGrRIFLAd223UDBlHKv9CBXDiNQpP8lW6uVkeU/mEYSqIk1+4T\npqHYQupGD/n45TzfMu+zdsHiGJbjVCtGyk5rdSDNIsaKoTBUUVPm4lAKIyeQ\nJFm8SOyQ0za/ybxJJSAPdOlWm9zavrU3+ETiW+iwG3jrVoOcG7BYymk2IVE8\nm0uh6YZaSiYC2h1ZeX442WNJj+RtRn5KWHasWZw1Vw2WmiDmDSZoiSmyFsTJ\nxBsd\r\n=MAgG\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"f2188ad8c46b8f947761bceed0fcdfd08019e97f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.8388a9bf6.0","@material/theme":"8.0.0-canary.8388a9bf6.0","@material/feature-targeting":"8.0.0-canary.8388a9bf6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.8388a9bf6.0_1595621597283_0.6348089381150501","host":"s3://npm-registry-packages"}},"8.0.0-canary.ac405eae1.0":{"name":"@material/shape","version":"8.0.0-canary.ac405eae1.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.ac405eae1.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"994fc1b01468e6642f13e987139edc9f08c883ef","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.ac405eae1.0.tgz","fileCount":13,"integrity":"sha512-aF1ymJP+PiBAFZxVuL1oMGIXajUP3x/AxSThyoOCg42zL0hFjnqDHuGzQS6/rDsSptAwpAsr1oM/qR2ND0JoMA==","signatures":[{"sig":"MEUCIAsdYd6AP1eBejA8CoLTcH++Uhn29UriyTJpL67sKb7GAiEAkYYI/O3s2nBT1+dqi46FcV5s158Qtq58pqh9nU8x8dM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":21398,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHu1vCRA9TVsSAnZWagAANb4P/ibe5EkvFysbGNzPrBKn\nT46s0FtwPyLlTqzhGMhHEHDMBOGfR74RPocqC6dNxsbJcD0vUMyi5dnzJt+J\n0/Gc3OCNgcuVQsM2WS/OThSFpipJV41yZLOVkQNPXl0A4p6qqfNviF2o0Ht0\nrtgCpdahrtmQ/yqyuRb18ex9Ia5Fr8+cGnu4LoAqG8LU1jZX984y6or4P+49\nOCOUtxYz3ziEWl5bPuyH/o/tyQ/kM8L88e8g7CjKM60W1oWcCb10jhoSQ9WK\nBV8xB+NLVodL3KuddgkXqgaKp2lGvVAysVpiYjHYt+qfW/RuVJ/0DE5Dlsss\nvJBBJSvcWTYqz2rsIFwfyZQPeWL5Y+wW/eNcc4MiUM8dIGyjUm1aAKcdeAUE\ns+ENIeptLOItVclB27Z224oMuSQKyCGRPKUncotF2li2BGcp574l0v5PDpRu\nqlLKuIH2xCf/ienXqTxSo3NdQxncjL7DC6DnILtE2tAHVuLf4oOpZ+dTu7ef\niD15mN6U1VUB+N+zVq/9k/z6P6srS0i7oI3YOeef36bMBnb0onBEwwSDnZp+\nZvad5FX/1H/ijoZ9AZyWGxnWFm8+ZzrAz2502bbT9YvqoLVi410UmffvaRD6\n7O9GM9QCghM12hcFQcaWPuJxiVKGU5XyB0OJ79F79NtZFBjjAZTOgv9L+SaJ\n4WUG\r\n=xdeO\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"c4f229736a36f17b97137adbdd4b59901eeac852","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.ac405eae1.0","@material/theme":"8.0.0-canary.ac405eae1.0","@material/feature-targeting":"8.0.0-canary.ac405eae1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.ac405eae1.0_1595862383277_0.4458705821780726","host":"s3://npm-registry-packages"}},"8.0.0-canary.75553837c.0":{"name":"@material/shape","version":"8.0.0-canary.75553837c.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.75553837c.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"25c582900464454c8be2ac14bdec8d5feb202e60","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.75553837c.0.tgz","fileCount":13,"integrity":"sha512-S8LfQjckm8pBM1gJ4N16UfpErfeMiRdjPwGppF6V0w8C+P8ceJMlIbPj0u2tOvH69ZH7kMK4fFmBeQE9eDu4CQ==","signatures":[{"sig":"MEQCIH/bgMw+aY1th6OaSctvVRJWEl2455+QvNnSy6QQTbs2AiBpWgkp6z2V8YMwLrnETjH7edK9C1oFAuZZVpJ3NxNqhw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":21398,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHu7XCRA9TVsSAnZWagAAGggP/j+JXmpKWEJiGncZiCkd\nmQGi/I6ZdcSrzi6bskYgkh6y/RmdZXhJSKOPT655OthVBT/yIaTxvN/AmbQg\nMN/6PP+Kt3/8LqVBIklMZtEPJXATrP3zq43oIF12ov4c9OEVC2GHp5SfastV\nrQ3yflKLIQoVrq59HBZLGwqwj04GtAK3LlNBqWTEYKnp2KxJIr7d6ctwomK+\nHmLT9FzWgbjS132wBte1tt+BxKf7U2HoMRzl9CK/ihoUjEIncnQy33XDXiJ3\nqhLs2WaL8O6ZhT8VH/Lm4pyXs7YdZZaLLR0K8ben29pS/vEGj49h1fdVjzKM\nEvuo8Vz0AU1LOEyfht2GPrsxSxk3mUcdIx+A6igFea/OXwjfINgTMdB3ZWwP\nWwdYGxiAjGWnU2rh8HO5RH2nZys0qdqChnBjDv4/l7C5d8EsQpEIcvLqdj5H\nPpsy8YRUoZTwDMKQft17A/CCBbsx5l8Wg+4ULEhsPB7TdB9lubctpBWLlhcq\nm50VMU4XAXD8n9s+SopQ/RzcL50boW1XaiVGCT1fSZyrBhutio1y9k0wksa2\nh6xxmPtNvk0+kdCip+7Jefg9t+nMlN5RSh+W1Jp2IpkRj1XlPJ7n0DVa8cCg\nHPf16DNoTUNpe+BVukpBWJQrgxuQqcA/alf1L5ttX38Rwec+bKwCITTAiP42\nqAXH\r\n=gT2h\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"18c0e52ebb63979ca614d6df13d96e2c1cc93216","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.75553837c.0","@material/theme":"8.0.0-canary.75553837c.0","@material/feature-targeting":"8.0.0-canary.75553837c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.75553837c.0_1595862742644_0.5091740875811692","host":"s3://npm-registry-packages"}},"8.0.0-canary.b96fbfc7a.0":{"name":"@material/shape","version":"8.0.0-canary.b96fbfc7a.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.b96fbfc7a.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"733bb1cdb2f8cf83ee7b2f6458128619bcf0b50c","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.b96fbfc7a.0.tgz","fileCount":13,"integrity":"sha512-gyUN47KUv5qJyCJ9ucUiL1SREkw7pbxsCS8H0TffThkEmbt73ASTdVU35d3iphAnzFVR06Hf9OywxuXNUlcN9A==","signatures":[{"sig":"MEQCIGXkSuG+v7vqI6uBvp7eXOw3OihvwKQD+umuKhAya840AiBHXUATH9+IoCMg4m0a7p+LBJo0kP7bYWPuLN8/2nseaA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":21398,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHvTWCRA9TVsSAnZWagAAcbcP/0621jR6sKHwsyjkcOw+\n5cawXrTc+OmYcWM7wQtdxOjFTExDaxtQywVlmnF+y8r1Zf5Xft5VcZusEiWc\n+90bP3mT10uCKl5z8PDNiOVSHDVf+FUYUIs2t/GXzgz3i2TkI4rPSr+WRu4n\nSziN07M8H+dPW0yOnnYE6boWt/Gy4C8p/C8WoxHGv2k6V0PTeEWHL3WMc5pQ\n4CbjcC47DDz7n+M4FKcmejrygLfC/yDO9DUtqXO8DLu3Nhgsytfdfb4OP4tV\nShROauwuqiq4NsP1FXvIYpE3ZLSGJkOysZ90hM+spCUScnK/3fbBK9dRBnOp\nrOVQT75iLLHm3Ob6W/KRreZ7JvyyvXk3W29mh5nQrYB5qFy1jcerp1bayn21\ngqezOV3M5wNZ/fQQ9DFNR135+v2IVd5n/oa1pPGzjyYLe5NlTbRXDuQHO8wV\nlTcSI2x8iph8cm1yVB0ruMKecbyhKvuIVuRhoPfOpNlCzNLs7yp4Kg7rL+UN\nGuwKfjES/R3lrZxl3JExx9Tt3LvW9Y4jEsw2m6vEC/q6mnpcTJJyYqvh6N5u\nISzXkU1FqXCe/hXL61JXkHKrJvrzQp5/kwXHNhmdm+rChcfY041i4QmMk9lR\niwx6/8CMaubTXOwp7WJ9er2txiEhh6Gjl9AuEcWrm+QthzkjuDKLNlF87dna\nvazl\r\n=fXw8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"0e9c13ddacae3f3bc09bd4f168d276110fb5677e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.b96fbfc7a.0","@material/theme":"8.0.0-canary.b96fbfc7a.0","@material/feature-targeting":"8.0.0-canary.b96fbfc7a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.b96fbfc7a.0_1595864278064_0.7092703489115544","host":"s3://npm-registry-packages"}},"8.0.0-canary.61f1a8d85.0":{"name":"@material/shape","version":"8.0.0-canary.61f1a8d85.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.61f1a8d85.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"73f0973f1e045f9690c4827ea679031b66d66fba","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.61f1a8d85.0.tgz","fileCount":13,"integrity":"sha512-RXAoIjR0wxT6fD+gmtQnbQ/SJnBcnq/PkcDK0Dz8vSn5xGByg+xBCjMInDlpkeR2OzVOSYHarvPmJt+SnfBlPA==","signatures":[{"sig":"MEUCIQDJG+C8zb6laqdpJlWnP7rZaVdZ1tuxdLWOp6He6juHSQIgSbT1t1rGhuaueJRoa/wO7Dr6QzLAIlH1Fo2fiE73yxY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":21398,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHvb/CRA9TVsSAnZWagAAQNIP/iknMjR2mKLrU5Wabnaz\nqpQmAUPs8c6bFjPEQeWDY3twRRch7rlvbbPVFf8+5X8TYVa/Ndqsh1Bb6WTD\nrbj5YeQDMw0N7ECSwYdwe8qByBEbCoF//qsgpESP7jTFkv6wEp48iV82g6IJ\n3eJhGeWntLKG2q3nDzYumGYO+f9AaOsk6g3vJQSLxkVGwHsSUAqEwbr/M/QR\nXGP8Oh4063Rctrb/nYRi0aD9w39cnWWQ59GcgxitC6Vp9VE6ewwZB3BlIwQh\nj1E4NX+gcNzK9sHPqCcnuId8GSIeWSMw3u/HLhGfBo6rQ7oBK9ztRhn+1pGQ\nqr3LuXK8ioW3RWXbV5G/9F5HqzgKi1Bd7tViIbHaTUjmuPEj5lYaOj+MmTKP\nghq3ro/2WvWQJHVaiFOmiTaN9HKXxVHLaunXaybUE315/i1ptJ49z4oPJnke\n/ciGG1rf0AekBdl1i15eKIFlF/CpzdVKAbSGE7ZP5SfFVDTCPLHWmTp6XeLN\nOIqrO8aZBqOb3mTrUoi9PzcCFoXm7mqEQ4YMsEkQolKolP3gIZpnomXdgruo\nVp1nCMDds0siXdnk7AYyvRjGKbfzoJAqF4yHk9It18Eio+1YfpKLAk6PfekR\n9OCQ2rbSI3GgYl/rBgrEdzdJld39G8UAIOcSN4KBMTxM8m/w6HQ1IDW9ejve\n3phS\r\n=LrAn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"71b0bdc987ed1b1b5ad827abc78149cd4efadb89","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.61f1a8d85.0","@material/theme":"8.0.0-canary.61f1a8d85.0","@material/feature-targeting":"8.0.0-canary.61f1a8d85.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.61f1a8d85.0_1595864830597_0.11457554917561041","host":"s3://npm-registry-packages"}},"8.0.0-canary.81dc33377.0":{"name":"@material/shape","version":"8.0.0-canary.81dc33377.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.81dc33377.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"32dcde7f1268f84c5edf16d093fd52590e9bbf69","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.81dc33377.0.tgz","fileCount":13,"integrity":"sha512-hEtbJ7EsH2EvF5/VHNW+rI5XudZo0Xcjy3akyuwj5P7+XCzBWJ4GEK4trNw/etvvwuAZt4J1uvxQpbLqlbgg8Q==","signatures":[{"sig":"MEUCIQDp+/NCFqBnqnTaFrURbVd6vqehp3spW02AD9wnw6l8ZQIgckHffkR6HePKxNlq13Bf13iOqmKZ2HXCy7ErZwlaJ9s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":21398,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHvnMCRA9TVsSAnZWagAA1JAQAIdb5Ib+P18yPraezWz9\ny6WglzUhkOQ51TNTceWvpZMTD5v0mCQNOIzpTs+lJ91FebjcRRTK13/B975e\n9D59ZAVemtjl6hVnpxa5Xv5YbEu8AMgB/o3bSq5yn4JAb/GFceZZkgqxmcI+\nw/3YP1xNMi0TkHrIvTzGvNB4yxs8KskD0s8EgHGyjSbYjKBN+rCo4L7250sf\n/aihIQcs/S4Tce6bPLW1A1ftq7J04UlOgZLHJp5RqnxRDKWJ/Z8bPxNTxFXW\n4QmsOCeIwKfieYw56uYHZWbBYXzr5hxjbNnTBTcNXTeiYAlzw3aJ7Sbx152+\n/LiWzsIkcc7pwNFI7K6BDW+DdZRTq0w0Z+OCahLsQASA9iIpC9RvzaSRhOpi\nzOAXoojSOZ0Nltgy3a0oveAXbG00YaDBy9ifm/pRON9L2byKOtx+codNMB0y\nsewJ7GQgDXDb6HHwpZ32Kb6NTPU5GmHygvo+LPBD6RzlaNFanXDk/NATPFCf\nFFtA3SBAdn9KsenmhVRCH9Qs4wOmHxH8V/SKU57rRwosBiewQ+OAh9DCyAMB\nYrFU204vv3dx1Et/4Xodryqp0r/N8P161+P2cWAw6zAomcX2iUZeJ9aLsdzP\n1yhOYPOCfa8bRzrDZzizgypbQVuqx7w2KXvZQJD5bjAkH1CJMrqntoIUPkbC\nEnH2\r\n=eKDw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"14e4858d309a20ecb69620f07c8f427bda0821ad","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.81dc33377.0","@material/theme":"8.0.0-canary.81dc33377.0","@material/feature-targeting":"8.0.0-canary.81dc33377.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.81dc33377.0_1595865547632_0.6860446356093546","host":"s3://npm-registry-packages"}},"8.0.0-canary.ffd9ede58.0":{"name":"@material/shape","version":"8.0.0-canary.ffd9ede58.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.ffd9ede58.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ddc934c10cc5092a2ff810bae13b583d2e9262cd","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.ffd9ede58.0.tgz","fileCount":13,"integrity":"sha512-cYQBlHsmIjx6DzOnJ7UcbdMWr8egz1cKcT12zaHvQHjg1LYRXfDnOMTDwr1LlzcHwY3iWgFuJAMeJBXCZMilvw==","signatures":[{"sig":"MEYCIQChU11IJYOBzWYdxop/ViyzF9Q3Og9F0W3vqeDPm+3qzAIhAP6+lLAm7PRyp26ns+jJ9ZaN5/L0RgVXQbpU/d3aAx8o","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":21398,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHwGhCRA9TVsSAnZWagAADIIQAJEOpe1o0c8xO5BcUzXj\nuAtycGRBLjpMDYyhRhW/e3TkV4BG1vgTgFMusTv136H/rmU/YHPpAIQ6PLG9\ncf0wyO34QSE9ls6GssV7d7EOcBzZ+pAphYUo1A8vGQgEw8qv7Gcr5WbXb/Zn\nSo9jMBH6WDZkj7sFrrITLOL5g83lBO11YCBEsi1S+ZI/4Oa5Ss8NCqLp0OnA\nfoJxEftXSyNBbYlrBjsj7Y+oJnML9yVlGKCAs6lI7RR/KAauMEOa//k4BNrd\nomFFWFMjULEJmNTscCKXKd5/u2JNmMfevzHe3EG1dMguH1959soAFrVMTpNd\nR19pKXlo+kzBpsPTE6tn2kCcXaAIQ1zMTP4W69I3ozCvl/3pS0rKSqWxNlAH\nfcQ1U08ZgKDTGjEDYwNMK6SkNG8vWHfXoFIMRVfox1XWgBqBi/epxZEJgkMZ\nGYMwbgIYpwfT+L0CestKBFKlA7wJFOM5PKKrqjTMzBYuQJDHgRDq4Jjs4Cr0\nHRNNorP7teJDEQKWAL2lOHmwQqhXFQEWmrEIdMZyclWZLvNCbQFzsA9MfgKY\n3nrEkSPbpTWXmobJedaXxayLLSyXadPTJGYG3eYz6HnN2WzBVWz3eH/nHUzX\nvUbxRXwmMo+8Fht2OZksQkXkZwD6oAhUV5HVrkZjsBw+5C9U/R8raAiEKHv+\naWcl\r\n=lAE/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"8a029ef9963cd4799ffbf7dd03908a696d110f7f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.ffd9ede58.0","@material/theme":"8.0.0-canary.ffd9ede58.0","@material/feature-targeting":"8.0.0-canary.ffd9ede58.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.ffd9ede58.0_1595867552434_0.5882781630226486","host":"s3://npm-registry-packages"}},"8.0.0-canary.52dc55acf.0":{"name":"@material/shape","version":"8.0.0-canary.52dc55acf.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.52dc55acf.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"346909b1d3bddfc3ee170592e3d4f53923c2bd34","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.52dc55acf.0.tgz","fileCount":13,"integrity":"sha512-5GjByKYiETeBVhAHCdiUjiGeC8z47bn6dzB08hGPWgvlQ57LlGf4bFlQiiI5AWaVEl7cxD2XsfqtO0k829wfLg==","signatures":[{"sig":"MEUCICHyqT1WSkmn2tnXAaAG++TwF5bv4PxoiKmlppgBJZSaAiEAx0DQ/yXCJPWm32/8FFrDxvj5i/bzAoj7Dt3d2HhmUs4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":21398,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHwoTCRA9TVsSAnZWagAAnG4QAI6aUxhLKuVydIxiUCLy\njODHJkxskCM6loaaw+5cX+i/byAq/pubaWdtxBXMTkXI37oph/Dt3QKkYYEi\ne5cnyJhUMiQgeiPAohHAd5r8+lUSxx+0bgtGb5oUT1LIrz5qTLCqJ+ln9Wyw\nMhI+OiPD3x9iTH8of1hWKzZ9ToDT9is6gY3tGYYhz3NftRKbEIjLhNuE/69q\nzLSD436MU2Wp+eaKtmuetNnmQVug918wMK5vtmE87nA+VXYGOybBWzFB8Sda\niURnHVUQ8uRMbVZOyEv1UuhHTLBlaANdK7/LpEvcEGJlI6/SPI/7+j+LT2km\nM7enFEYf4TsVmaeChKbjb/jjiO8VE6e1RB+IzQcBh2sVcryS2qFjEY8QTkYf\nbxMg56UCMbT5xbvM8wTO2cfvoSTSMbC6VZG5+TNO0z2sBy91FvgwT+ECt8Sr\n74RCrLX+PM+OrWQzX4rTIwl4kVg9bYLmkN73ntQ3GP7Pd1ILB+qKTgeMwm6Q\n8z/EvPqZdVC0A9S8XXvPlRDwa8z1AiMjdnrm1C3IAJFygk/2VSPKSHMraxdT\nyM3bsedAzwgiX6HT7oDEvB/9uTVL32Tl5GWTP6BWM5o+xV0Y0cIuHsOfgXUw\n+mNdEfWRaaJQD/+5XfgwsLBe4MEC1ff517kdPoeJq5HwL0+aUN5lPnsrn3LI\n4Nc4\r\n=aY61\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"b5253c9af3b0721aeb0cd096ac48b4c113801757","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.52dc55acf.0","@material/theme":"8.0.0-canary.52dc55acf.0","@material/feature-targeting":"8.0.0-canary.52dc55acf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.52dc55acf.0_1595869715226_0.03581550018771229","host":"s3://npm-registry-packages"}},"8.0.0-canary.d4274ff05.0":{"name":"@material/shape","version":"8.0.0-canary.d4274ff05.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.d4274ff05.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6948669e1ac44b896099170674f14c8af7e4d30c","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.d4274ff05.0.tgz","fileCount":13,"integrity":"sha512-af5z5WChSwK7NRoeEGZ7JO4lfwFooW9PTfENbriC3R/B6ycoOw9IaD6cQALY+ZGDz5ZSDDkcPeRvQDvjvtXAwA==","signatures":[{"sig":"MEQCIAmg3uG9Q1i5GxKeq2Z3H8KLPefdRtg8Mp3DSfbzjz/zAiBbtg3j1luKd3soEEzhatTZ2aGW7rm1HXQYjpRUauYLfA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":21398,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHzAVCRA9TVsSAnZWagAAPswP/3SS8eWDOjqZbvmidOyf\nOpIH56P++75GaTTk0KouLNnYPuRFxev5XlNGst/sVcdifBK7DbnnGpBd5mcr\nFsnaUMnmJ+31xLRwaCY5meXWf73kvH5ihhxv1RQdDXbCq3i+GRrEgnBGAToC\nu5MbWXD8hhCfxLYfNSaRn4KKBcwJjBtXzreg1FdJjOxUh7af5H6BBsbCQ4ry\nO7CcTTyRYBHLjl+55pzgJWD/0V8iMLuuoNFv+2rX9/zadL8tp3pmzu+8nHKq\nOwwiL+YmuVMooY9KJs+MzaOpHnjRuLEQXXIdkMJgYgSRJx7cW+vXYFew9zlj\n8yyW4oHi+QX+judpThqTmkAmOzYx09shlYItGw2sV9zEmnGgs4MxJ0MxI5aE\n1bF2+nhLUa3WNjgq0XPLx6vo7l4P2D1Rnsn4xFq1MDYArcWgEbRMSRX0uhwl\nqTnONIhBqamOrfAD6/NJKRQddTqtQtAtNzffV8kgGsTOQs4oSqHk2yH9tsxM\n+8iRbcyYYn+Akb3IAM8clttoVazWTOk1/DEL6HkxV1Hp9Nlbgt7sPaaZd7U0\nERR+XM7PA7YpnHCGrCfTPu1vT8ZWZI4h0KmcRB5CjyK7tX+ZtjOrEctq6vPO\nX2IFe6FUf2fSfH3EXKeQRYDS45gDE+QzWAhMASMpmwe8rQeM9ideu3z/CVFu\nr+Bm\r\n=zC8B\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"b4607e708cfd7069d540b1fd6042775c4599855e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.d4274ff05.0","@material/theme":"8.0.0-canary.d4274ff05.0","@material/feature-targeting":"8.0.0-canary.d4274ff05.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.d4274ff05.0_1595879444835_0.2156624199811572","host":"s3://npm-registry-packages"}},"8.0.0-canary.b82d0696d.0":{"name":"@material/shape","version":"8.0.0-canary.b82d0696d.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.b82d0696d.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e75a10c8c708b7c11e886c2402d9b828d856af19","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.b82d0696d.0.tgz","fileCount":13,"integrity":"sha512-cwiwv0Jlfm4+MQU/8aqN2az2sLOSEQE8O0/P7g/+SV8JOTaxKv7dqto9BBGATVfNzb1VDgGunk5KT2BIiLKiug==","signatures":[{"sig":"MEYCIQCBl0xRoPjAvb2lpA56FX2xIxsA8s14RjsubTHwgbGIWQIhAOyy58bxDy9XMmh1TinLjRUbFtFiBFMlimGUi6cjoiEh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":21398,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHzHICRA9TVsSAnZWagAAIa0P/RFsugpFDEvOsGLkYU9Z\nmfAt25xxjgnX7r/1dZZbHFX97hIH0Ir6tmai+EwpbGl7qFws+45qUCTPx76X\nf7pQ3UtcDaY+Fx8IXEwNGMpRzSOfQML1aSnu1gbcITSiwmwRcCX0PAZsSapE\nKbvAZB4kyUj9TtDVbAwdINk3jUENVYVD2SbMgQsOhLOPjPxbZmrjVWAHfTGb\n77L54L0Oq0GylZJat31twCAQf7zUBW3U0vCwoMNkhbfmw9moPkB4bUgUkiYf\n1NRqDH1QKo+FBwQEslNcoA6GmP/X+qAtakgLwsjncGd1EaW7jT/ODzPTr/S7\nfuh4jcjVtv+xPML5vxdYCxNTFzKMfSRJC949ZROmjlM9ZjuRy2eh5K20OnYY\nOzUXRi1tQNZfHBBGgXfA6fHsizhZnpV/A8MyLbnorl7yBM0BwbIS/3PZ6g7c\nolVh9QLkvC8u0SnuX2CeeU1FwB+rgssglEqFZpj0VQQT7H4+XaKDBpPnh7dU\ne0d8JBnN+5gteTEEgGWTXS/i+3t0QtsDEdWQxq6WoM1Cia0K4x0UwytprmJX\nTyS6ZGgDwaQ6uc7GGLI72Z3uVg76Io+kPeoAZ765dAP62hRpdJBcZL1hK0ys\nmC7S5Gx/Uq1ylUZhZRrzJpxZgfelW6tiJblpdTIqlILulmRE5gZkw8rSDN6Y\nqKtj\r\n=xae4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"914e71226c9aee0625b5bd1fff56b887e3c924d7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.b82d0696d.0","@material/theme":"8.0.0-canary.b82d0696d.0","@material/feature-targeting":"8.0.0-canary.b82d0696d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.b82d0696d.0_1595879879808_0.8519495725902466","host":"s3://npm-registry-packages"}},"8.0.0-canary.c2852000d.0":{"name":"@material/shape","version":"8.0.0-canary.c2852000d.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.c2852000d.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1b19d52477f9131e7c7870161d6d79fcae090022","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.c2852000d.0.tgz","fileCount":13,"integrity":"sha512-FLVs4V43o0hq0zeIB5qCJjKu1UP4TxobqOQ0nOoCM7IsFwlM4XMGAXcrZFPvGYfAtOLadi4Dk0PR6MMgX7Vlcg==","signatures":[{"sig":"MEUCIQCungjMhgqWM1/TU2On3RNBeq7+h0aYAH9/Wg9eZksBIAIgZnH/AfCPSRt7+1oajfQHFuD9/VWJim1zAwTUFsZQr8s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":21398,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHz/nCRA9TVsSAnZWagAAQpkP/R7JnlmNGbDJzCWXP/QE\nXBAC3m6laqtbIrIdFfG8PcK5Sz0x+aGVfYAkMabyPcCA+V5SeYw4Rn70tmph\ndISstpMALjm4L3kOilQYrR9slr9MASapuME39Uv0FRuz9/IlEtIN4IZshzSN\n2FJn/GjSP7LvWY1FllMNr2bUGCZGG50TR3Ykqrg21mE+r0aug4/HOvo0YSfF\nKa+2u/oMcVx4cKpfk/JRFnea3zwa+bACjv5lmkqKr4xRkb+LreAK/RH8YbwB\niv4GTCKYDwdrrqn7IPByFCCFro8piCxigbXgeWK5D9rq20bkfpM+Iw6JfcIO\nq2SPWPt5o83Nqs7Ur3PfHqIwHCw3xOkB/VfeQKywARwAilLHPO8HuoN/lpS4\nfgHZ96dIhelZmSb1tJEONp6rPu4gGUirK2fyiMkg9r57suQus7ebwnrPkcyK\nXx5OJRH75zJaQWkDPfahMgg0HqU1f94Kj8ZhYZPPrHDXK4DjZs+ayYQltOtJ\nufg2PY2CRkbkDbsyTbTbOAKUmLpNfTQCZFaW3osswG7KactTDnJAnHXMhV2f\njt9BpoEbw+1Y7cTumMnuzL+Iy9zHyMHj/G7AKul08VZNmxHZkSOJAWcyVNqY\nfiPH+jcg0B13kZcCV1Wm9LMXBZdo1ENRIW9Ue8j2tkhYuu9CyjMkfZkNcLDl\ni2mV\r\n=Dfgb\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"53080ff99f83ab326fefffad16cd09e449e79f27","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.c2852000d.0","@material/theme":"8.0.0-canary.c2852000d.0","@material/feature-targeting":"8.0.0-canary.c2852000d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.c2852000d.0_1595883495489_0.3007791814126337","host":"s3://npm-registry-packages"}},"8.0.0-canary.f86f83f54.0":{"name":"@material/shape","version":"8.0.0-canary.f86f83f54.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.f86f83f54.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6f535e20f842f59647c3ff9cfcfa9d0ad0266e91","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.f86f83f54.0.tgz","fileCount":13,"integrity":"sha512-REOpXGfKrKgplEnXhiPaWT35K9SCdRyzouqpOefDZ0hbAduxNsJMeidq+/jcH9V12uUFrUxkGewoKcDw5pMUuQ==","signatures":[{"sig":"MEUCIQCfDIIHNaNvFKxdcZaw+uQovJlLNWWarhcE+ysH2xLjwQIgIr+NafXV+C0B3g25cTSiyq0J1Fk7OSWNopJmFvxGsZM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":21398,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfH0z5CRA9TVsSAnZWagAAE7YP/2TTIG5LGYTmJbkAYsHL\nUUWvhot/DuYnpGLUyMOR43v0RgpgVia9KkFTzUBFsCoOe0CYuSWoiF0KWNlU\nP7ydLDNoe1CJROGc4LDBgoE9FW/ZCCXdp6B4wYbGUn4pouEu2BOgKR4tPq8l\nfdv0l4miVdkJ2W7TlXLlcoNKLg+Om9kaHi05qhJP82SqmzbuiTlSgkcM4dRu\nwNdsq/6vNuqqap6JFgYfat7MPp1vIhj4hqKbpTGjHHG100xmwe61GslEwcxs\nldkk23pQK6tw5y/tOkYhk93WeWjbQWa3WF9Qhrg8urh27UpoEenPiy+5lic5\njqtIMzvoJZ3RnNuZKDA+orkSM6jCHnZqOoUyhC/ooEhrwZZd4v1kunCElqmc\nRCdd8PUCgB7p2SejvNfWc/xdm5JlnNbKflqFu2sNCgrs4cpnXEu9lVsOB7gF\ns3WjecoVbtBQkDq0tO2pl56v5kqQioHHrZizjU5ZzmJVGwi86950GgsmARWN\nkc2+mn9wqDwnfh+Pnpd/4Bf/EBk50C1fHhZG34x8MmioMN+FMQdJ5emY8kUQ\nFQv2zjaS2gVJrw8wSBKvNhZS+WwikeiJ2CmsYb+1jSrZe3JkmjdnljC4Z4Mm\n9KruNtwhkYRxDyve1gBCv8vgNGaKSSNjSrAIaKfvD3P83SOTZZvPLeY1wJIj\nRVN+\r\n=vYGQ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"3c8abc334934dd33ace7aec681868717a4e26d0b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.f86f83f54.0","@material/theme":"8.0.0-canary.f86f83f54.0","@material/feature-targeting":"8.0.0-canary.f86f83f54.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.f86f83f54.0_1595886840989_0.375843005854543","host":"s3://npm-registry-packages"}},"8.0.0-canary.41eb1684c.0":{"name":"@material/shape","version":"8.0.0-canary.41eb1684c.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.41eb1684c.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c53a33f6ccb0839700417ee214fefce944bf0458","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.41eb1684c.0.tgz","fileCount":13,"integrity":"sha512-lsxU0HY01CD4WGM+hgazSDIkeH9OwlYGAnW6xWQJp59jcaUarE66g8BcYnPwkz9I9cYWGGu/R9mOcfg/Ue4CeA==","signatures":[{"sig":"MEUCIQCWjcKpTTrPDnLdCoKO0C+b6zTQ/F8lWZX5Zw9ZAMXK3wIgD24zDBlBQqUpZJdkPUELcGqXT79e8kK+uneKs4xvANY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":21398,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIGVfCRA9TVsSAnZWagAAQm4P/2eQ2s6PYgDld1lVSimc\npzeXzyB3DaAcLNzOUTAICxa80s4+SECObKEjAhOJ17/A8NBMyCUeYAN8CL3l\n0Xoe95D7xOeR+OK0PJR0Pk+ii26JT9cp5kKX1m9aUA7tf3hSTVc6AdVWE1Hk\nR4hcU3uMCD2j3PzaJdQ6GY0ukMneyJGwEzI3VuJoQac5wKCsFi1NHv7dquc1\naRXrrAFH01Aru/EYuaUteenTJqqGqUya3AsX3cJF2n7b7jWMWJIW7Rv2oNgF\nFUrD8vID4b8+umnBJF/WRaKqXsmLZtdSsJbBMVWimLTEOfDrHcuuBoNhHq8Z\nlK7psVoJWSBeKfu+i7X8et4eRaavZGh9DgvN1QmaU9clA6FULZ1wuaji1u2Y\n7MTCMkfv373cMpfInPmVNWfytc5MW6UlUo/RviF87iIUKkER3NQdBghB12Yx\n1beeNzXViZM5JzAjxgnj+dN895D0Jv80kBVsDV5HspliJmP/MyxOr3roO23T\nwkjLtOWpDrOzx6N0KsvauYsE6ZiBMOIDMgiWm7xHsEcHOYrON/vQnC7lTETO\nN/P/8fC1gziaACXGPIp8XYOHFQVil4iDvXcVqGKLQMd7Y4tp6d7O7HJ+EI7Q\nTLVuWdPzrQX1TtOA8z6aJWaQFBNNKxMTEOj6lEesk1ZfTiPtQljcnbNR8YnC\njkJ+\r\n=vRzC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"ca556c545f0bd908ba57eb0e24e99d142cc05b1b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.41eb1684c.0","@material/theme":"8.0.0-canary.41eb1684c.0","@material/feature-targeting":"8.0.0-canary.41eb1684c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.41eb1684c.0_1595958622565_0.21989492497310015","host":"s3://npm-registry-packages"}},"8.0.0-canary.9e2f6c450.0":{"name":"@material/shape","version":"8.0.0-canary.9e2f6c450.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.9e2f6c450.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a4f03b1200123a78b0b59298590546467ae6a126","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.9e2f6c450.0.tgz","fileCount":13,"integrity":"sha512-cAAqd2+oV1g1WbPHpdkq3OHYnkozoOgEzudmFJr+hbREaYrpdcoKDtW1+eceJCR/+BG1BskbpQoDB+K1B4ll7Q==","signatures":[{"sig":"MEUCIE+Aurp86iuDszzd9r+xxQGV5JWUrM2ADoZOwzv3qJsVAiEAj25T0KBa08EnSvY+mMVcpKMLiYyeTQKQRt7zXnK7R5w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":21398,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIKkOCRA9TVsSAnZWagAABCwP/j/7zEE6OOjKuETRHFpK\nK4qsp0KW5S6j+gKyym3WE/Y4H5s5vlsQbXONvv1HOCbOy2CcPG/mN4jsLgBo\nRsiNAKu/iwR6Y8fHtvUL5RPP/5Jc4jhzVL0w2B8hUF80Euc8CAIjKsFW7FzO\n3k+9Kr7eAn/AIISImO+Un5usEx2Z1NAYsD9gMzNwojx+7OlCDuEcXG/fQx+B\nuOyOs2HiqPksMOTUTZAmpe6d+8M8eO/u10/hOoY5+284Gp3BwMCCLwO6mjBL\nRC7qk1rmfXzm/wpKUOQiqOLurBLYwzt8Jhh3zIV+dk7U6rKMFWYtg7wbltea\nBoDw3CvtmnafS783Q/gdSUwlwkDP+EQr4qByhQGdqnAhbCvQF/oi/ZU1HvUh\nFTNpvPES7u+54ZmtS8MazK6BwsTF1aoWTe+qmxus5XEvBr/Dn024srFigsSQ\n+vwZVgPvinBme1kzFPIwBsXHg9Ne918NwHCNbcaKt427B5LRe3wPeH85y3iK\nbrkQST7CEizFlHAMdGgLCKiV9LXTiJp+L7Z9xY9kx23JeAJRwKdci0SBlQwN\nNPrXUPHu78pQ7NVZU7r5tjUskn0C9XMGzU941ayheCRa1fYYwGIhIUuGXyMr\nRlf/lZg3C4uKfyIi2m9297pZOAToTBiZ9uGcdyRu41OVi60wNkV/fxrtHRHa\nUvL4\r\n=fHq5\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"20a3870f861650ab884eeffe1d7657aa376a8ee0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.9e2f6c450.0","@material/theme":"8.0.0-canary.9e2f6c450.0","@material/feature-targeting":"8.0.0-canary.9e2f6c450.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.9e2f6c450.0_1595975950062_0.7457890641108469","host":"s3://npm-registry-packages"}},"8.0.0-canary.e6950b55a.0":{"name":"@material/shape","version":"8.0.0-canary.e6950b55a.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.e6950b55a.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a2d8219da84d7dcd23bce8e39681b24f6b81a7e0","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.e6950b55a.0.tgz","fileCount":14,"integrity":"sha512-rKhYNMkKZNZ5dMQMQCShBPcJUVPSC/0bCsPKTOWeptmweFOUG6MlhYmXbMQ64dECQ2bWPOIJy27bip+xxAbDbQ==","signatures":[{"sig":"MEYCIQDGJIhXfF0AMnp0KUoR7lRZ3dl8iceL/oQmRL2s85xX/gIhAN+Uk0nPAwepXRgYK3HVj9TiusjkVUCqIR3WkCNFBsqL","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIKwpCRA9TVsSAnZWagAAobgP/jjtemhpS3aAdzN1GPLc\nThQRo75LuFxdvF9DdJLMOzy5Es2Rm4c9/cb7ze+jXj1lswChPrTnZ+W2JIpo\nJouTkJJ9Oq+KnXZtTiWRAcTYsdSL4TcSq0kVAmyl7Q4CK9gIB9Dj9PaXA683\nmGD1vP3RBDw7UX7M/AZoZ9D+QGMoLBvwrSFK2RTs68r/+ScDiUcBODbGTc4w\nbl5xGI3mJIEf9lvDITwZzq/0OKHaUnkQJitKZVXbs09k9BVtBHN7Ad0RIvo7\nUaMKvY7rKevZAI00SI79N+0/gvpYB2m1CQQ4rf/NPkhA56JiC9lAyoGFvmwA\nd2XkOB3CT4255HrVwmyMS59OR/UFnZ0mbPT/E9E09j9KOI3qzpY5i7Gq+FA7\n/fQ8jzR4VU06WXNSqpoCCUdjKtSrByqKN7WazQSWmpU7vROgBtV3LyyIIGqL\nWP6eRTtyNMDexuKFWHzCUdBdYTnP48JEdhObsLGPTVgtT7O9hA0HJwdD6Fux\nO+CDy7q4Oz+F/kTYCHyVRMwKyuPpmGpvR3HnIAiieeX7Ubp+A8dhQcsvhQNY\nqxt/TyvxZcRleuIKfTO9Qp6jve5uJBSmghu/H2izqv9A+4cl/ojYvAPrNPbD\nfoyg0bgV57mQd4KVclaF6gVyjE39EqjW0i5ipRc2a+KjdlD4wE7DrqKSkNp1\nPOtn\r\n=zb+u\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"c71461d7d95f313de3fe5609fac67c2302432c36","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.e6950b55a.0","@material/theme":"8.0.0-canary.e6950b55a.0","@material/feature-targeting":"8.0.0-canary.e6950b55a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.e6950b55a.0_1595976742231_0.21918419569695025","host":"s3://npm-registry-packages"}},"8.0.0-canary.5e51ee38e.0":{"name":"@material/shape","version":"8.0.0-canary.5e51ee38e.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.5e51ee38e.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d70dad620ba7672ce45d6bf235e236f494f3b3e3","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.5e51ee38e.0.tgz","fileCount":14,"integrity":"sha512-ruuR22wkLBD8ecJb5tVDrADcw3x/BIcIK3n0HwcOoGfSMJjPLkXSxGlr0GSKaUDzRZFcKzusaBOsmFdYeUxqOQ==","signatures":[{"sig":"MEUCIEQ40YN5gA2Vh2eVGWt70x2mjQBy9KEndefQRaIO4qxTAiEAn6AtWnCFXJ4X7AoUk3CKwgPVz0R3VPgGOwzvgHk7/wk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfILGnCRA9TVsSAnZWagAAdNIQAJYf1dSrNqz3hOjTT+eX\nJECxl+X06pEX8NGJ5TYnhQjmXuxBvtWNmAHei8s/0yiXFWQxni2FG58ZFh0o\nVN93c3hDnoTQ0rBMh32e3W3rcgv1C2NOaDnSlS9UYD7zHhkIMKMJadYgeu4w\nAli4Wmb8Rttp27W0guX6LecK4Qa4h06tdda9174K352kZr7aiA196nd/kYmY\niAnF48pUNSzVWtWH93saKdTdfCK8m/WMLhcQbgEqroybxOQ3KZbYh+h7VuyT\n7qT+OXrxFeodJRQ/IuS/LByZqr4PE2SG2rskx9hpq3odd36/J57+JLvy3oP4\nTaXtZafJ1Ey1OvEV9S61AgXkQhhaMTfPhDj+9PKkkM0amVX910IjPBwgClOa\nac2pvI6t8t9BNoKy5kJqf8SXtzFXz0AOLqty1roKH6KhtkrWsHBD1bVuaC/E\ntkoiL3oWrKYtheh1jewI46KeGiH8wqpVsdjP68gzeLXOMXaJbRxOKO7wYmVw\n5KIEsq0Aq3K5UP85r0Eyi1PFqnmLUdwp+8XdO8i4EUk1qa7HmONy9pkBtNTI\nUPBXP1N+rKpUbW2ql3YgdgnszeIgNMkYwflte3LXWEtIW7xEhLkheSzLejZU\ng5TixsGgKjCR5aDvlX0jyC/5xCW5bpGAfe7C6mrKmmLwtg1VxAwe8Ba7TvQr\nGZeb\r\n=07wE\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"a7ac25d06cd849dbb8b1620235e913c46f5d7849","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.5e51ee38e.0","@material/theme":"8.0.0-canary.5e51ee38e.0","@material/feature-targeting":"8.0.0-canary.5e51ee38e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.5e51ee38e.0_1595978150737_0.7731037919435089","host":"s3://npm-registry-packages"}},"8.0.0-canary.a3898ffcf.0":{"name":"@material/shape","version":"8.0.0-canary.a3898ffcf.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.a3898ffcf.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b860a4b2c2a273ae1484533ef4490bc441950d26","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.a3898ffcf.0.tgz","fileCount":14,"integrity":"sha512-OgmXwXjaPR1cLl2uashwvTkteRx1AqrF0tlJWeg9ZCU1MhWDmOhgxvEinErDK1JwKtVPlyv9NJ9VIAsHc82qTQ==","signatures":[{"sig":"MEUCIA2wEfoMBkUCgdm1ZTqO+QC5STjzuEzcT2AYhp2OHQK/AiEA4qUfK6B3Yt7zLUnmYo6kBcbUCD20K9Yg5Q7Y78PPUE4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIMSBCRA9TVsSAnZWagAAIiIQAJM3dqHaWSjt7YmECjs5\nP2PHnfZA5HHQnqxlhyEC0LtZ++R1/1LjIMibHl5TqBoyBNMCJ9MiC76x8CcB\n7HkntNSVUOcVgw+oGKO5L0S2I4PrdpZ//5tSm+evgBHpRvOClIAbfShBb8aX\n4ri+/fXTV73mSscv3gj0hD8A8gEow/xkNdOr7LfsJB4dajJdks67gR9xK3uN\nyHZssKtdjmlILcrVlsxqUUuqNIPu5GyZAnx+dN2+GTJx6O33iv0Ll2yvEzLa\nDk7PPPFewEu3gGzALwMvj8+Ou4Yr/vBxdrSxedap3pLVg2V521XBya3liyXN\n+/fM4ifRsdWi6jSTvtA6QmVqIg2CsITvIvOWmilYzazieqkmmvTYxaHrp+hR\nwuizuz5BWVIcC+o9eF9pA3ufRP1PuMnnB1c59h/N41tIWSgyIHw5OGp6x9ej\nFAGYi1v2qiqXSzH6OJeB+CKS1M791Nc3pHBlJok6F7uYtEXdMGdjWIK2WA2p\nBvKCLc/bXu+abKJAQUbDYxdIWxSJFLRp+xpUdhc9oq/WaBVffjHFItK2fwZE\ne1KSR2hfBQvhoFz9ZzyfoDdHz6F5VAgIbiACQX8WiOQy3Ev5BT35UqVgNKcN\nw8LAsDuFWPSkvNh8lTWJy+gHFytqnNetzhkyh4Q0v/DPTjxl3U6TCItvSaeW\nKkvl\r\n=6WGm\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"4382580dcbfc3da31d5107a92231aa87122f3f30","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.a3898ffcf.0","@material/theme":"8.0.0-canary.a3898ffcf.0","@material/feature-targeting":"8.0.0-canary.a3898ffcf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.a3898ffcf.0_1595982977208_0.32460353413682497","host":"s3://npm-registry-packages"}},"8.0.0-canary.bc5cc6c96.0":{"name":"@material/shape","version":"8.0.0-canary.bc5cc6c96.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.bc5cc6c96.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"09bbb77ddac26bbf090333686f0f752e24171adc","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.bc5cc6c96.0.tgz","fileCount":14,"integrity":"sha512-miq2P+9NRgVMR7Z2JOLscSteehwG5DDkOCHBBPJ7I9ngNOEDH0/067G9lPNfd0yfPajln0bQTEwrV+S5218CUQ==","signatures":[{"sig":"MEUCICogz1P8Alqu5jes5xGj0XZgO3V3b9vPNr1p09MRoVALAiEAg24jonA30NuFE5wnBXkw+9QREZ8hRqH/O2C6bJaZJBA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIMeECRA9TVsSAnZWagAAL6YP/3VHcBew547J4oXHAJPv\ncZ+Yz5T4nSQ/l3nwUqXzdaBbGDVdAex/doKF7g6xaARe86EMHOjdJW+JnZZ2\ncIi5+UennfOT6Z1UBOEC1z2uQrFaZURuQxHa03XtC1uvK+AnqBOUaq2y0uuc\n+N6ABBlX15/dbO3SZnXy6/Chlyyd9sW86WflfkHMs/9Tnx5JxWBnrO66Tbl0\n69Pbn7LnCzFE+D+uS+zShMkkdnWbMuBx8JtsjSkAgo8BSupaaD1neq8Ir3q2\nXSVemTKnp/fFmSZYh8HF46WmJc0rPaub0T0Ib8F+GONabGfe3kcorYJkNmNJ\ncU3we9ffQYfaUPJUp2jRKfzMHLixguaisi+WaJzX6Y2WwdEcRWu+WeOrFvSx\nUOPLJvhgvVLH0iMDG4DD+3dtJyhDeQofsEWextwasXEA1cUNA7Szvifr+a6v\nqt+2jF1hTzrYQ4e/fog48RwBrawZGy3MTtepDM2zipLwHdZR3L4TV2YGtFy3\nK+vtX70hvOzt/i6PAyN1QQgPt7CQZZPEmZZbcb5pniRwE0gBHdoD7EEQNGkM\nmBsjcj0x3sFNh/Bgtzg01h/+dzUI+kJDAWQlQhnm5FkVWxfxYxDG7k8K1UV0\nFrxhwZHvVSGTT6yDWN3uTsaNuhXV7tgtoV6qQaytTyVZmZWSXnqB6ngj3YPI\nhaIG\r\n=WFlP\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"ef5b32f85df29f3c19f5f6960f0f2e58025012da","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.bc5cc6c96.0","@material/theme":"8.0.0-canary.bc5cc6c96.0","@material/feature-targeting":"8.0.0-canary.bc5cc6c96.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.bc5cc6c96.0_1595983748335_0.01575746135524514","host":"s3://npm-registry-packages"}},"8.0.0-canary.9bdeaf928.0":{"name":"@material/shape","version":"8.0.0-canary.9bdeaf928.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.9bdeaf928.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c830c0ec36b076e7d2eef1e9e4403efac73d6131","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.9bdeaf928.0.tgz","fileCount":14,"integrity":"sha512-vQg8tscqA8of7jKWnlxPQFMg4vYKKcaU57Qe+ai+ROF+Qk2Vjmxa7l4gEX2AhKE7gTjxQntmk4hkG4U4vtwQRg==","signatures":[{"sig":"MEUCID2WHpA9Nlj0nhpmEAiKL4b4YTtxnGZN6EeioZUYMBnWAiEAg2ydn1kHM9KNzc++sr00TJ1nXvkckyTo3Hv8rysX4vQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIM7sCRA9TVsSAnZWagAAhWoP/RI4hLuoMAuP3ws5zEod\nD97QIVfdEnlK0GrAIOQRbOtNoJ4kjwAq6aWd9b4QRj3fBi+NetHg5k40TH1h\nYxFru4kIgUUQj9xRNFp7OIWycYMQj7LttwNa3E90ypfic6+rUne+eUbyf0AK\nYX/9z2hoTfe3NMgOyGxgYfQLa4wnigWJYEvvMALyKbboiGUZzI7PYJ3qKE+n\nr8p2DGVBGR8wsRzdMvgUHTpXv85dUIJEjNMJCoapER4t3YlPpOX32bRBJHvx\nDWChULp1TEyWWCQePjyZg5kLe1jbDPuDiexeT3fII7Wd9awVCp46jo5Q9llC\nRgdO2qCWz3a1eGA9/X4ySb/OhpxQnz9C1UPkGgdfkgHfLwKMIWkzLbzIf/oH\ntYxRCvpnjL9ccXExNRJIQNB+dgFwAglsfHYRdAexCA5FiLtAyhdCx0KUfxjO\ng/wA993Av0wZ94ZlAS4xXCCKgWHQgB41hDpfwzD0jW0CfclC9SLYFePe/+hP\nEy2kXwB2tMaGYQs8d+/ppUYZHI8EzgJJRbUwW3s8O72dp9EU3x6nqYlu4PXI\nn98SGfajade/xtpbcl1yrohYEYmxxEQgat1Gsr5Yox0MsOQHPiPZceVlOCiI\nARztKUPXWjvpSA0DaRIWeKk0LNSF+zRS2DAOp72LiRET3fqVN8+ZnKqbWa5o\niQp0\r\n=1fSi\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"0fd3de7a6a462365d56e724dcf32c2c1890f553c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.9bdeaf928.0","@material/theme":"8.0.0-canary.9bdeaf928.0","@material/feature-targeting":"8.0.0-canary.9bdeaf928.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.9bdeaf928.0_1595985644163_0.5896908170825919","host":"s3://npm-registry-packages"}},"8.0.0-canary.fde2c1f9d.0":{"name":"@material/shape","version":"8.0.0-canary.fde2c1f9d.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.fde2c1f9d.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4d991460fb5cd5be85b9a9e626ff13b55478dfa0","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.fde2c1f9d.0.tgz","fileCount":14,"integrity":"sha512-D5YyW1PtroxDRdOJDsOVPn9W6g14qq6kUt5459HluqOFrpt5f4B2nqb5m1UZQAQJzvKVrtSh/MRQ/YpKL/Q76Q==","signatures":[{"sig":"MEUCIQCNhDlOniGNxB9wO9RbiXVfhGTWaGg8ktSFvoVxzDV1JgIgCBg6B5kLhP9cJRZrbteKmcJlfjDOovqzFPM7HQkDE14=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfINI8CRA9TVsSAnZWagAAtyYP/0TPlnFEVt6xZVBB403J\nVS8vvLaXX5cL52pAim76xRsrSmqEjibiROgPU8zt4NKawzT8J4nMxhgcl5Fn\nm+1xR4bAJzbRLnIsPA7ciNd3inOlwJ7oEHRjVgQL3yb287jQwFLY4OK6bMXF\nemgQp8rhMYStJXQEU8B2YhHbcQKhD8C2IR4XjFsKaePtZ2H3lYJSwOw+YcWV\n7UKgvtHFPKQtVkfU6WPFxib9v2Hw1DKLeMZwHYLNqIwpfR1vkDL2F+dxi0Qn\nyppbzHyH0ImfRKGITgfKYMlEl4zqqWvcteELZ5SbsGAcMtC7ZiF3ACmesS1/\nnWBtbCj2BPi+qzGODZcEgbz5YtyzRHRb5K3M6JHwrP6y8hLVSG6jms76pW1P\nwqmNMNcwx3ZZI7BDmEhZKE8FNyqQ9Il5Tigzbrr0h6wFY5Lbv/HVI4rG035O\nSP7LEjfSA0IZzlfJ1x8nG3PPM6SgBFhp1au2zGcLcAmC8FVQlyZAd+6m3cnp\nAQYy9hkWx9ZX2NhSb2v94MFxgQPovEYrGTIJostt+CHp51OSC5EJNOduhZ7e\nZ5UAG5XwNm7N5g7i2OHRfFxokgk8ITDuvKZ7kMiutiR9D98+YzK3t7oItKC2\nxIiAGOBu/gpvCGkMkjGDsgPFQVVvvI21KFiqZpwF2L3QOPJkqoErtLgHOmIz\n7MXd\r\n=mJEN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"f2de51610533bd781edd8339c8555a3c03546e3a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.fde2c1f9d.0","@material/theme":"8.0.0-canary.fde2c1f9d.0","@material/feature-targeting":"8.0.0-canary.fde2c1f9d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.fde2c1f9d.0_1595986492001_0.42903009486321775","host":"s3://npm-registry-packages"}},"8.0.0-canary.6b3876d5d.0":{"name":"@material/shape","version":"8.0.0-canary.6b3876d5d.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.6b3876d5d.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"268e711a34fe722bcb49ce9bb78e1f812303dc65","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.6b3876d5d.0.tgz","fileCount":14,"integrity":"sha512-Gr9G8tAMlPEZIgyk9R0Tro6OtTZL4li2EjVVbJFZ/uSTUOcTUYUC5OneZerM0M1XmB6naIbr6PXhQIWAcnk5Rg==","signatures":[{"sig":"MEQCIFU/FUJJR4ojysmo018WXTyjy28AlqLaLqC8DetzmIBOAiB4Dg4e3NJti4Z0CXGFLrS9iV/ZmLsA9ydYat6YYZiBXA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfINMpCRA9TVsSAnZWagAAyCMP/1lUN4Upod8meO1nQZEs\nDvKkwHpZelKrKCPkVSukPN3/ahRyS8LvnN8gOLAwtj2xZIo9eh3gzGpVovZU\n6uaTIfP2SDnKYsldxDTAaqfCjMLhheXR50z3hg3qO+QJGknL16kOe7/1LZ0N\nC+mmj20ihEPxIdh/fOQZG7xP8Zvr61xlx5tmMQKittR26DKp6qH5tHGTXual\nSW1HpYksr19lC81ObfR/wCOyYTjssppy5K+/nhpBeJ6BBjvrCqrHDtQHnxpp\nkRNdO3qDGX7LEQCQSSofuGVB8Jtew5gUyjZ6SETFsh6zj79SFhf5oKVq6PjJ\niAn25WLkrjFsgAGJtSwy1N9QbmhXp+/2ch+4e+zZqlfZeJa28qi7G5yO+pVK\nV6yWNUuIwegDpa5aXbPNqTubwRYJ/qvipiJyGTfJ3O7TjC6B6PpRg8LJEqEf\nR8YPQMqCV/BlZmrSCAcuPgy3i5Zu8dWZRzfH5zlSk5VHeVemn2fIUcnAm6gG\nwb/y5BXEE2nfslf/PEZBG5qG7Y7qhL+G9FUU1HNJcKsl/JrChGClYySmcok6\nAztWZUgmonmn7Klf7f2w3xMtEJj1KntmjqreSvDyco3zP7l6arbCOcebRozS\ndmiyR7PQMeFavS/dhcUyiDS5ptgWfFAHS1DW1HxkdtWPA2F/KAuCGZMs4d+j\nccUX\r\n=q6hn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"3559342f661baeb39f2e70f1172040aba07dbc1d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.6b3876d5d.0","@material/theme":"8.0.0-canary.6b3876d5d.0","@material/feature-targeting":"8.0.0-canary.6b3876d5d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.6b3876d5d.0_1595986729107_0.28656327021671846","host":"s3://npm-registry-packages"}},"8.0.0-canary.30ce17873.0":{"name":"@material/shape","version":"8.0.0-canary.30ce17873.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.30ce17873.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1765bdd25af326f4d77776cebb88c540ec4c024c","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.30ce17873.0.tgz","fileCount":14,"integrity":"sha512-9u/YC3GM/KCo9xn5S2ZtKn9Mhoy0o7e8oiZllHU3vei7ALn0kvGbho9KlSrv2dD9+hX/xDa9K8XaLCEic1MkAw==","signatures":[{"sig":"MEYCIQDHsx+KuQyiObKR8tvf5tZejIrQ3lRQGE0kWhail4exCAIhAIgQKFoqK4t7ROJdgyZ8fLdYyLq7mCxmHGQsV/UoBE/N","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIa6ECRA9TVsSAnZWagAAsB4P/i/XAl4Ej3j/x5gYoUhI\nC0ZRHxMRs2/pcXvgAhrSffRL2VkKplcya5wnD0aEy5n+GYPD14BFfEmf6umk\nh3AX/5QVdz26VB8TcJQxM80jeHSjcOuEHLqZU6JIuJ1nFMySoJ/k/7QqO1Pg\npcr7SV7GHgqGUGajRzK6OOwoxysLS+prMWQoqboLlAeBak6eC968OBxEP2PS\ni0nyaptv6xpAD1jG3FqN3uB4RlIsgQgwgY7hFrcx+LAd+l3tbiYyr3sbjfvi\nslYiMRqB8C2CAbuUBglVxk9dy/SHu+SuiHzckloSdTqSjmC9U5avdeVtPFCy\nlorIM6bzKccM3iCM3UpqhM3tItDEFrena4Bo5+vyOGixBHtxZUhATfabmh/r\n3E4F2g6Ks3ymmxRHCvPwb28t/ahpbJB/4+6SO5AxZSNWDAGOVaAyQJzceLCU\nS1UtKdYQphwoMflqYoD09tNWCt9vgcQgBq23cuNLnPhOJYe1KM9Euc8UND3L\ngolCwMzIj/OPHeShSvxJ7Pkt/a30HfoEFRcnfv01fAiV7g6GlCeKqwrMpQqK\nUDoQ/IvYmGz3vSA+JQ70+jIS8HXkLpBJcigfYMeeFXgsTVcPqmnGiqCBE4X0\nZA5HfBMxrW5p8ZU3BHQeMYQznNuWw70aZuH5fB2XVrAbF0FJnTriveTHu7B4\nrZ6E\r\n=UpFz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"88fa0309b6185f09fffdbd61d0c3e16f53c2530d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.30ce17873.0","@material/theme":"8.0.0-canary.30ce17873.0","@material/feature-targeting":"8.0.0-canary.30ce17873.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.30ce17873.0_1596042883846_0.22325050496665","host":"s3://npm-registry-packages"}},"8.0.0-canary.f6bb43bf0.0":{"name":"@material/shape","version":"8.0.0-canary.f6bb43bf0.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.f6bb43bf0.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5f85b198c1b8e3a844378688f1e64f5df3b1600c","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.f6bb43bf0.0.tgz","fileCount":14,"integrity":"sha512-7SWJsgtrg/dQ/BR2ryJHCGZ281/uZgNZpMesQgVIAWsoW+diIGsk58NB8zgmnoM1+DZrA+4hbZvE4FYT/VuROw==","signatures":[{"sig":"MEQCIAVnzWDs65WXEZfyylmstUYryFHDb2+rh5hl2WSIKNRkAiAWvsQFCu0VD+YyjRuWWReVqM/+W0zod3dTmfGdh3NjEA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIb8aCRA9TVsSAnZWagAAj2UQAJV2umiiETDxFOguYMCh\n7jiPtue7brlcUjxT3pX03YjLp1uvrMExNRrbX+1AqwZR4Sf9APtUcInCg1Kl\npNcctMyrp4bTrWpslrHlrRyDO8Wz9zsYWZbQz2CoidKlYKBVrir+0RG+GVV9\n5AOiB1StQI+oKoTrNYb8LvWg1hI0AXfAzkp8ZDcjCrzI3b1K+8Yy2F05YR9w\nGCDunFSiGWTWrqV6PzhtPyIVPt+ApEfFnrXUwOZnUkeDsSGg/X5L/QZ++JPi\noVy4cTo894wxuzG7o4Dteal1paMic7LJmCsPEyDH1WHWG6Aa+/SeImVaOo8w\nt2cue5KJKYrUW+5+UN4KcizlIhGlRw2hvbu6GpRMjuw+rTnCDiSgamG7V1da\nhCM0Q8UJ3x/EvwAZTvT9yritTtvhGyD7IgN+xXgpShBhm5/j+RQxx0Eznorh\ns4oNiVigyFlZrKjHGrnPS84ayyFZbnYrS7Gf3rpEdL40lqw4emHSXb7rfwMd\nqDGd9T4lPaHKHVZH/OWD7ZstsjULQkb+P87GjrYC75AUHSSmfPQUCR8fCquj\nxJG2IpvOQ9/XMygC2g3UvxReGjea3W0rBMxU4D9EcPIIXEx6l/k+Bn95tqoA\nI6G2VSKyfdPxYKgEcapMhLEDGTBaQYzXWe+mws5kJoU5V0Z1U/6GyjLeuoHA\nbm8S\r\n=g2Vr\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"d511f86ad9ca4460730b732c04ab497fd558d515","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.f6bb43bf0.0","@material/theme":"8.0.0-canary.f6bb43bf0.0","@material/feature-targeting":"8.0.0-canary.f6bb43bf0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.f6bb43bf0.0_1596047129704_0.7729393373604041","host":"s3://npm-registry-packages"}},"8.0.0-canary.6af75f6ab.0":{"name":"@material/shape","version":"8.0.0-canary.6af75f6ab.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.6af75f6ab.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"527754945e0d05ff902e0241d31bd8831379c450","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.6af75f6ab.0.tgz","fileCount":14,"integrity":"sha512-T6sHslVttMHllaKbYQGrcGO1q/uGshTifnRxGeYDxuLs47h6+o9fPHDzGL4MgzlqogvUrzX167QI8+dA14gYsQ==","signatures":[{"sig":"MEUCIF4L8wEmJIazNxrBOlHWTBn5cdRm9NqOYu4+LxxC9T3dAiEA+uwbGwTqrdxi8c5D2dJ5ibaJ+qxlJyn6dvMUMxbGaC4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIg3UCRA9TVsSAnZWagAAQ1UP+wSYKUEOlanzgA1rPky/\np5ya00ok50iVzGxvNaVIOv0DCzMJICYFiwZcN03moCZHRp1m1R+PaFoTIUk8\n187n0rVVOY1u7Dgt7JhwiBWG59hZIQ8Ybdjx1kGGUppqjluiOtBvdGBGZQLF\nk7ZCMaav7kE8GBPIrWFN1icKM/kH6H9iu1vL3ZNJCLCJcylpX6WdNgNG6HGD\nWworgueGF0AnnhhyojK/hwFjac/dxRPefq5m1WjkCi268cNmajshAg5AotBH\nI2ZLaOoczeT0FQA9beuetk2wHMQsXezWd8fF+ggd7WI5w1zyoA4op3i9/pU0\n0FGgnfuvAa96ovqmQFFNrf637uu08vCexMz2tTU5E+7piDZ46IWPfgcBWU4Q\nIrXqO3Vy44HjXhQyhApt2Y3ZQe6/JFHMIuiqi9MXRWorfym9unUvfLRtVs1x\nkSb9NvbFlRF8EOOWJ6STIqpLoRdmJsfcP7YQ4ulwzNK/baRSy1hPTe8JNNKV\nAGwJ7j46n9I+Uyfk0ch/GTW44xQ4nJBQEemGlZh2hmTWOPdZvckKMRMUTrr4\njuh+vzyqBk/aj5tF9gpodPGpJU6FGZKAumyldMksYDQNZ/cf/DvT+UWUH85a\nwpq4+1k8ZfdCnmQxcxR/Ak2vvbf1CSa9MyyIKofrhG9Ukl52N3G0w/MrryiX\na+tM\r\n=coqk\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"44ee60f895715b8f7c0a7da67637babfd33452cf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.6af75f6ab.0","@material/theme":"8.0.0-canary.6af75f6ab.0","@material/feature-targeting":"8.0.0-canary.6af75f6ab.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.6af75f6ab.0_1596067283998_0.9166638929604285","host":"s3://npm-registry-packages"}},"8.0.0-canary.42d7a65aa.0":{"name":"@material/shape","version":"8.0.0-canary.42d7a65aa.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.42d7a65aa.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1e2480c3ec83830d3fc71c24276f654c5f774b37","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.42d7a65aa.0.tgz","fileCount":14,"integrity":"sha512-J4E7FhSaLFa4yyE24yE/cMWdH1yTMSaXKu50yIAgVSAFC/Tn+MP7cWstZ7lvG+d49txGi7SDesPDcR9yURFOWg==","signatures":[{"sig":"MEQCIFNKG3sIhNH7z5tipOK7fFeCf3arKV6O9yDYpw/REx8YAiBB+6Fl7xyvbPDiVJ+ftN/3YAepKqXyCy/adFKfhRLDTg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIg/xCRA9TVsSAnZWagAAyDUP/ilbSwwX8ntlAHnVfjMR\ndeaPnhRxUa1y6FGQsGKpz/xXQQAAD9mLRJABAv5OEZTWhgf/k4+7njVWarHj\n3LLFPK42E4obIGpmtIlotPEoeHDP1SiRQmV2JxG1e/r5LmWqjeIOQioAlsfO\ngr4UGtrM1jkGGQuSJnqJgzEZnoGIurIgPH9WIySB50/wPXRABmOC3v/nQHFD\nZtJMMHaXkMjdtPQBmtaO8yDMqfb0FRiOEknE77TBeo79XzaKaob4a85AJamN\nU+HMhqaFcqbGcrWK6ALrnFh7QFs3Hcl5aLd/8q1+/Z0vkft/S1gwtEN9SJfS\nCIDzx05fur2rFp4uXtRCNa/CO1iChUzUu9ffoG5PDRt8MYq/34H1cpAC0dFt\naEh8V6VRrM19qt5jPV6zfZVTZhf1L1evw6yUCHo01atLICaFJNgMgxBZkzVx\nBrQCDYOq0Ng+mDfkCxr/APapopKxW3RCrsy+MvFUkSvptyKuTWxRmFjwOPbI\nBo361GzR+ESRxXLfP4BWc4TnTQjIpFvB3z+xoldf3hxwfPunWLW7ym9uF5Cp\nCosQGPMHENaTjJMZPGq0Q+qpXcrecY09yVZOKWbPvBhpA9zdLJIeyEbYe8Xh\nLZDFgJlOc9d/pMih/HRWbjuSdCxj6pZvIbKxOV2/63yIBlonK9ewzwUpNuFz\nIVxv\r\n=BXS2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"b6645573c0460e7bc8187d1a21ef306b674e1017","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.42d7a65aa.0","@material/theme":"8.0.0-canary.42d7a65aa.0","@material/feature-targeting":"8.0.0-canary.42d7a65aa.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.42d7a65aa.0_1596067824930_0.4180198802496069","host":"s3://npm-registry-packages"}},"8.0.0-canary.85abdabb7.0":{"name":"@material/shape","version":"8.0.0-canary.85abdabb7.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.85abdabb7.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7272ec404583b2f7d628bb7db3d9e43bb87f6479","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.85abdabb7.0.tgz","fileCount":14,"integrity":"sha512-jqzA3iu1h5juG7UPhtKt5+w1ZAkZQJUgFr1/Z/zDWhZXm+wA2B2qhgixzCJj93dZPEMKm71CvRhuGAk17gAT+A==","signatures":[{"sig":"MEYCIQC8yiI+RUnSYEd8AMFwglldBhoNK3kJmmDwnkz9CsULKQIhAOrnPgZo4WDFwYdUdgL4VpaTrZbQ/bGOtkC+WBFe5GRK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIhESCRA9TVsSAnZWagAAbuIP+gKVlN8tcAiB2DY7MIQe\nQBuVXq1Y1bjdvGeE257RIaCiw1X9xMsLT1573FAoKKcyFLjbDwZrN9EY8LHA\nSDdo3wvu5TlTsVG/c1YY/hPqMwEFTdl11K9GSy3mjb53rWdbFIDAoaTj4KeP\nqS92mJOWKUSKES59bb6oifyFMPKY3twG/ZZD9M27HXhWyjAlXXh2XOcpTBC+\nheduzetvHZs7jgDn938KTRhyycFJTnT5lzi7ftc4DSiHktLHJAKcDEMl08mG\nOnnRJ/kJVutCSsVjoNpG5reb20SQxDHkVQSzFoeq+66GzS/zEFho8/pqoV8T\n1Phhf2hTgvkIq4RYQDg+BRBnM8WWYAUpBzQSAonru1Eouy8E1dF+e1iIBJpo\nOmvd3vxv1fSaelJcHUyQsPy3zx64IXEbev5bdsDIJMP+7kMrmZkyoizf3wZJ\n7ira2tCGMabOUuvpkfWmyg335RRopnOPQRmE2BMo7S70WE0fchgVHWGu9Nkl\n7WO3cXdMOysBkRKVUhixcwwK5XQRvykauxT2tmMxoMbliu8/KemLnPhX4yQI\nwbqf/jruUZPBtsllsKtGuwKuMz/lKsz4purbSFa/8uNE7iMv0u/jzK9K6un2\ngWE/LGFjll6Y4ZZpeVpYXztxvlVBTeNYQmibK6wVp/LAxwB1ImFnnIkiAMYY\neRNj\r\n=ljgf\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"4686052ff6039efa085c0d360393374ff4b2143c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.85abdabb7.0","@material/theme":"8.0.0-canary.85abdabb7.0","@material/feature-targeting":"8.0.0-canary.85abdabb7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.85abdabb7.0_1596068114466_0.33502445302280814","host":"s3://npm-registry-packages"}},"8.0.0-canary.49fb20ca3.0":{"name":"@material/shape","version":"8.0.0-canary.49fb20ca3.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.49fb20ca3.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3b7dd55c170d3611763631d40782f0041ce6d42c","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.49fb20ca3.0.tgz","fileCount":14,"integrity":"sha512-EXNhyPtOs4kwvWinN9EaNyPQa2FPkYpJMd/4fBxRzJNusUt2WxD8/fckreLzRYYgBbCUPOSE1m2ZKW60SQoLpg==","signatures":[{"sig":"MEUCIQCEXBZQtg8fHsBRcVb1kPQXaZVTgOdUgxEPGCuxqJLsTwIgCviBzo877A2lppxnsJ5mHlzpTGmWhb/3Ukb5aeUlSP8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIiIFCRA9TVsSAnZWagAA7qwP/ip4AZtmqWk2hScvEvsZ\n1fn72dwJa8FY6doC8KSKlPh6DDULpOzXfZdrewRkFMzcMlhw9GJ3ggqF/v8c\n+hl1ATcweVeNt0LQl5e8+ML1vKo+aDGeZKiJF2DqrjIyyqAqGiLKGeRQXoxW\n3Dg/EVtS30V2YELlQC9V7p05vDB2wMo81z9YHIUFjciRlDxKva5vUDakLJtx\n0/7euxBHmJvShCIcfyezJXYoZqUq0eePp5zZpu6ZZy7rX6zAeUZj1vjQMGgl\nFimwnhlOZB3py/ANlYwSwK5Q0V6C4GLp5g2EY4nsatVGisCp604jBsu6ERDU\n9E+A+7RMdSXKvrG034RmtQGVJWipqO9ZVVlMmPXY3zi+O2FChO5gUIWTIHiE\nXSzTmqRfZhGybZqZek81fVptp6sTPN6g7yO4K2cLw+2sI4HQnvEZFFDsTtY5\nS2qHmHVwgacJWjPOIk9fGv+cPEMPJbyn6pS156B597vqPd32WZoPTvHrKStu\n7aoS/hPAldOwancII8LZHFwMZetejiZj21JiqmxetpAosb3llxnGxW8C4+2J\nYfWaTS0QcsjuI8JbB6ERvURyHDX3A7JnSzzrsrZUE0HQ2R3jSlIvvZ7D6IYr\nM+c5HwqG6pc9hoTiGeX0Qc2T4AqlLxkpU8IXw8wdFO5Ixjpr+f0Vcrh/TkYA\nGqdK\r\n=iJfN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"9c66ae7fdf6570d9cf334102b5004c5a04b628fa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.49fb20ca3.0","@material/theme":"8.0.0-canary.49fb20ca3.0","@material/feature-targeting":"8.0.0-canary.49fb20ca3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.49fb20ca3.0_1596072453558_0.6938701924561204","host":"s3://npm-registry-packages"}},"8.0.0-canary.962d4abbb.0":{"name":"@material/shape","version":"8.0.0-canary.962d4abbb.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.962d4abbb.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"959e855af7e72d3c8677990efbb69129ef0b712f","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.962d4abbb.0.tgz","fileCount":14,"integrity":"sha512-7GA0l0ibP644R07UCYeNzWIIG6FZQ6fg4SmWEF15SSRneTwiEeDOimK2+L1xWp+FgrlyqFVBspJkRjt8tENdww==","signatures":[{"sig":"MEUCICxrDSG9TZEC7bf8juXBgWwrGvd7uCy1wCRacm3fhX5DAiEA3CJuqhzBCkuG0YUIN8GsMIwLIvM9a1+grQXE0wHW5sQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIvDpCRA9TVsSAnZWagAAqHMP/32ANZg8J03vQnySR4dn\nKs5Ac+L+p06Mv0TBtArNfy6FifgRqz0L7ipwtKCx4nCUahScCNd3r+fWyk9/\nP4QciTDTh8rHpxbHerHg075NffyFMwNCQE/rWi6ClDM8ZKdb7RxWVurUQWKu\nA9Ba+ViHqQlbd8TzvCHsbGXK5NEyw51zLzzx2V4NiwbIHTHeob8SRCp0RnbR\nkJnpPzCSerW68UDmBzmPRbsxMsSv+lb8/evLhfeKjL7KA1HFYUwaxxdE8Yfx\nMPwwKiouwl+rNz1qCIqT4v59jTG0kYfXKWFgvuQ+lyN5ylGuI8LMNwLay8OK\nDPw9y8/9rhbtN+/0MIr2q5J2h474HGQIwQc/q3QVqiaM3eNuSrETjbDAGVUS\nc72cnrmxVzqjna5xXDyIPrqXQsp2aygaz8OhTv0knPSqi6In+mZ4c1+ATG1/\nNw943FWzGjeEgO6VeGEEdpbBflrIb+tMDUSVHpJfFigeseYh0xNKJouzTgNQ\n3SSEVddV/wAm7ghg/C4gDh5TZnjOrVoHztfOBEz2L78S+aTvuwl2fxubvca8\nKSyldc0rpZ6MM/mPEaKtdi+GlKY+4RcHlRVzq5Rb5b0ebv0D/sC3P243M5db\n9hYdzSDoijigYzNsgD1lL8wkofvSBZB7FWCK5hJU9DD6Fam1G7snrOawXyj1\nzEX6\r\n=HuoP\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"d373d2867180ff5f61fc4d7afb88a8825cb5cc9b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.962d4abbb.0","@material/theme":"8.0.0-canary.962d4abbb.0","@material/feature-targeting":"8.0.0-canary.962d4abbb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.962d4abbb.0_1596125416796_0.3875337612433034","host":"s3://npm-registry-packages"}},"8.0.0-canary.2fcee40cb.0":{"name":"@material/shape","version":"8.0.0-canary.2fcee40cb.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.2fcee40cb.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b51f14636ca71965e542570f43a792b39ed2b0d9","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.2fcee40cb.0.tgz","fileCount":14,"integrity":"sha512-056ZRybGfkcRyx3JVdMN/WLybCXVi2xsXxJzhvPb7mZJlvoXfdNzTa+lkUEE42HuqiMvLBoRfc1smuuWGx9rAA==","signatures":[{"sig":"MEYCIQCHXtDheSYOY+HvGdfCIclpAz7B9k4q+aY2TLmcixiqmgIhAPIMF21CPJIxKcE19+WmycZmd0bBXQRY5GJVNoflRPc2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIwGVCRA9TVsSAnZWagAABTsP/1EEJmAtBaaHOsU1VoUY\nX4vyChsuvbESn2U6vWuBBRePTJquaAQH2Csd2j6sg5svUN4HN6xujZ6Upv0s\n6EeHnn3MZk+1c93N9q1YXLuffmUBg5S4FGHb7ZaHrxu+bMhIis5EVjwm3zqS\nQEYRSNSxKj17f7uykVZfKfxKnniRfMYGQxAi6JUqKA45a/vFQG67IvBU61xo\n7+rjb85X4PUDac2Z+M04ha/WMrkwu+kMxd+dfEJVjBXT3mR4K2tgDTaS+0lc\nbC3WwyZ+hE6Z4gR03BWM5bhcvYiFmS+Oh3qfMKg+Tq2rgSf7kJm80EDC3CZq\nOpd6iMO753dvkwYPThpzgaxTWQj0bbRm6nXs6/PRewGn+as+abpw/cOLRiuB\nPPi76MMsmgozWrIZAj2lTghJOVxIdQDDFWZKj+0GK9uzzssHemWdfcku0spN\nj59qz0Tpl1YxvzIqUnWGUYRTN5nYcXaI/zsJjbA1tlAHD/4n6clBdm6e1r0O\nMcObOmhpfd87ExKafBkKisfCqC/6a+zaPfxALD63dNczEpfqnZZun2tYrszU\nc/lacXx+5nfnE3hcbSM9NfxeD+TuNWb+4hyj3VK1ouCTx9iOTtaS0VJ+J3wD\nsaKdIRhbtz1XZtZyHr6vWe7yE9kkhk24Eoe9uot0IQjnDLAcvqI6DDN4CuZG\nM8Xm\r\n=BbYF\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"f769a8a60e9cefb9e0e6306a96914e8e4b4c0c90","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.2fcee40cb.0","@material/theme":"8.0.0-canary.2fcee40cb.0","@material/feature-targeting":"8.0.0-canary.2fcee40cb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.2fcee40cb.0_1596129685313_0.525375572895203","host":"s3://npm-registry-packages"}},"8.0.0-canary.bd5987f5a.0":{"name":"@material/shape","version":"8.0.0-canary.bd5987f5a.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.bd5987f5a.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"46ad64d07c423a8aff85f3b4e5367424306009ad","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.bd5987f5a.0.tgz","fileCount":14,"integrity":"sha512-sQ6l0qbn9DeJxJShPavbJhF/JM+0RYcr4WfgY8MsMo4I8Yk4rR/ZzuWi5xnt5zuhgngIyXPGogUtr1QN75NzXA==","signatures":[{"sig":"MEQCIBl3NZvenMS2+r48Fk9fGqYc5LLuTLtu5vVCeM2JlWAIAiAR8524VTKucDCO1Z9P+tMuXVJtyt+A3XKMmeBNsF2vKQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIwddCRA9TVsSAnZWagAAakUP/jSMaKLaxdy2vDqGAuYj\nb18yC2Vsq3RFoEEX6XO3gSxvdNm+9LxhkohY/8dZzBXo5s0svFQD6lgyl4vz\nfzH3mvdA2b8nNtp4VoiCY6knxWAEF7TGVAliCiMWEI4VHgzgp3hTkIby+eol\njaJS7yFAUPjUyKX3CJ81zzlz+WFN1WyvKV+xGhCeURaZogSRLKQv7o0d7vXc\nF2Gkt1WFHpaKZqOhKqg6qQLQhIYQbYGl0Mw0SC6MLUuUecyJAAluLd7PVahf\nKhGnMR5A/W0pS4ip1wca6/WQXVpXY8qmjlKE5YW4nETcyXJ2KDpfPEwVw7kQ\nB/RbDExtyFXvja4RflDlvdic1EZ8GacfcaFG29gr1Nr3eDZ2GDO2f5JvQIIL\nfZfNl+PVK8by1eHfZ4oW4YO0GDdQD8iTt9Nb6tTDXcpC8N8jk73FoBCndYS/\nI0hjlGQVUFS+TaHMAPGCbzDOtKUD4Pi9HlH8Txt2srqHAnjtmz+qm9wy7ghI\nM3WBiZciZyMmxYEzYXZIjHKEQ1rwjNz4t2qZHfIa71lwrPDLxliwRoMxfVAf\n2nWOrtoK+0XP3g9BdgouscMB7Y0ch7QwY/EAIkpAKcvhcL3KMt73VT/RJ/Uz\n7t9SCjgVgSOD/mX/p5ctGgX7bUd1pBd0gisncwiCnQKRfxPmpghsBZCDrtNB\nH/bB\r\n=t0L2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"7825c698a6686a8ea967272c1f150363b3845900","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.bd5987f5a.0","@material/theme":"8.0.0-canary.bd5987f5a.0","@material/feature-targeting":"8.0.0-canary.bd5987f5a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.bd5987f5a.0_1596131164519_0.08680502147597813","host":"s3://npm-registry-packages"}},"8.0.0-canary.005e86a9b.0":{"name":"@material/shape","version":"8.0.0-canary.005e86a9b.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.005e86a9b.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"93fd00cf59f88286716379003ced36970033b40a","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.005e86a9b.0.tgz","fileCount":14,"integrity":"sha512-PMr4c/LC5vmKZ9huZGNYXZxdaPY9edBYV/EkeGFf4im7XrqgsdrtXCkn6layp4a5LPEndJv76NUPJ4YbkXP5zQ==","signatures":[{"sig":"MEUCIFKyX9KjFU/eVUSGc1v2Gar8JeTAJQBfB6RJsfj8yHzHAiEA58VUxBsbzXL19CKcbNM838Jdx/+JxBGfASa7HjxGohY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIwqfCRA9TVsSAnZWagAAcWAQAJzkeMMutv0pG8pjv7ky\nt9OI5Wz3OC0tfAyi5EbclSi4lBW6yeXt+hMrGfoowthk0PfHUhIYtuLjnV12\nDMtoKzB646jEm/LvReTQKw8Vqwb2po1D1EwZ7/TUYpuK7JEM8nEe2f8naYcj\nlJ67d0qLzBIatrA4Ulgc8QRaOKzaDorNmT3FJXxaXSMlrQk8PNU92IKvFP+H\nqTdN47QeK+V0kjRJmItlDZZ5jHdq7O0nJ6N60abWrQo3g9+kv4jVzgKidikS\nvg0Doj1+mGHkg9mKjkXl+L051zm5aIsVbsgMaLAkEISoli9hD+wQCKCgMZfi\nKXuKxqDl9e6Wyh2udSAMV+Rj9H0hs+/UmZQ57wvMWLL6Ou+1dq2n6dJPcM6x\n9LsTgYg+eEODjCzLxf2MUY54Rrro1Ni3smuAKkFOWOjUuocfrGMHesS4jU/f\nIs8Tnl5ktqG1nsonqAnXx/bO2R3YbuoCwK0qaV1tEARZR6wSGIUefYBDD2KD\nWVMIMdNrPWZGHYCVERMliDhFpgjRCKhOqwkBUuspRBqDVm1wjJSGDrN88uXx\nfI0osfWFyYDwJShN7I8y5+C+X/FQdaY+BebNiA+AO1zZ9oEXJvQu8eS04KKh\n4JD5ywq/lN46zSRcoEC9AvWaZVNp2Chj0eGD93BqxmehbPvqXHpdi5CuT6wo\nbbD2\r\n=1NgJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"1c429f861ddbb35ec8588ea55cb1845296ab0218","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.005e86a9b.0","@material/theme":"8.0.0-canary.005e86a9b.0","@material/feature-targeting":"8.0.0-canary.005e86a9b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.005e86a9b.0_1596131998965_0.8894403998813911","host":"s3://npm-registry-packages"}},"8.0.0-canary.e309c7c68.0":{"name":"@material/shape","version":"8.0.0-canary.e309c7c68.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.e309c7c68.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"062056e28a3a05d49dcf9ce4efbe9042b5b39f91","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.e309c7c68.0.tgz","fileCount":14,"integrity":"sha512-/bqb1sUpXw2RuaJhLVMPXLth/7xahHr/1SSMwzH1ryRKsK8Ji44RxrY7uiH1FNdrKk3JRiRmqKS79wADQjufhQ==","signatures":[{"sig":"MEUCIB9YujPAWAMuNUGQ0az1D7fisgrWQyTvNCVXThFiN4X0AiEAsmZ9moib8lHvC7i8IDNSVS02OEkB5OYF/AXtZ3IQcTk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIwyoCRA9TVsSAnZWagAAFlwP/iQBGu+DEqvwO3SgQj2s\nR/EwvqQ8gl/HkBrh8wbxi3MMikt6XSEVPQT4ixYFcCR0mTgk6o+QJiM+BCr6\nxwkVdBqon8S8Ct/3WGAKKX9vNUSzk8oEpd8peFF77GwkHhJ0+8WcAowSvBnD\nLkDmhk9WOcKp/eapUnIizBKkO3pdeXE3mpzBY6DzS8UZxd5jA8W/aU4DmGOZ\nkXaNdq+GCFNh//Ox95aOL1CW/hBYCg9PG8EBjZjG3KhSHhjJdOxUOlL6fLxz\nDS6BzdvQ8pZ2CUKQnMJXBDjVrL88WsOVyUFKQ5837DzR8UreZxs3bstecH0r\ngWmOYwMy5bBqeJoTnBjylmoLzZ5DLAJVFwb2W/LzMIhnSU8c4/enRYBvb/iK\nz/GVjQ6mzt/KdYlsdDTBDS0CKOTRWYnUJz5aQO/yvdOZ3OyfCk6eFRT7RiwN\nAquSlf4ew7yJklGWs9vQ5gfmFNHG1n6SvEAmZiTaBbH/p18QEyVo397zcyiF\nriT2Bz1SUE4BeQIR+IxDN8a5uDZK5lJBYOnGjZzIIxLqTJPkkb7zZTAp7zcK\nJlPUA/DmXa3pZpWeofe8A33rz92c2QQUNUMrBXY2Hd+y9EQgM5+VRAzsAhRc\noVrlMPzBPriYGF1TC8CVx73PBN1hjtXW28VClo07FsehkIcCEtP64ASSV76m\nIqKV\r\n=LUfK\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"3ea460933f859061781daca3ae127802388c28bb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.e309c7c68.0","@material/theme":"8.0.0-canary.e309c7c68.0","@material/feature-targeting":"8.0.0-canary.e309c7c68.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.e309c7c68.0_1596132519721_0.09785354545403946","host":"s3://npm-registry-packages"}},"8.0.0-canary.935a51cc0.0":{"name":"@material/shape","version":"8.0.0-canary.935a51cc0.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.935a51cc0.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"61661c6d3d7e0639e2a3fc87cbe299639d8683d6","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.935a51cc0.0.tgz","fileCount":14,"integrity":"sha512-9mtSYrJNxiN7UfZbr4l1DUiKg7NWLT9IAHAIMBmyU2xQT7b91nUepNED2GYovkZlq2mcmpLtSMdFgFup94C19A==","signatures":[{"sig":"MEQCIAwRlCYtyJhOv88E/3bh9rt7rfdnd6D3woyJsrZpgxr+AiBuagOnxq/MBpMCgnRYLkZGQFBwAj9P6HC63ML4YznU/g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIw9jCRA9TVsSAnZWagAAGEoP/isSheYv5CW/PHSsgEHs\nO3EupudkHjoXny6WRrxPmvH/5LcaxhfZ30IJXb0LCGs95uZrj9jUn+7A2ZqQ\nEWgVfucm7MK/RJBuyc7H5zYKIPW9+OKqK+51j7i2128I5IHo0lYpSK5caWrt\nMo1eEKv6jF0OKIUULTXLhiEruWhk6hhajYwfXjUORh8OFcUtT+pRfv6PBqsj\nPRqa4lJTNy3Tv6EPLocQLbZVB++Y2e2ylChlJjU22EEP3huX/I41teDEE6Cz\ncVttFa3DdAe5R9ryYwZmK5/xomBfOEfWEblrUZmmOVyoh9BqpcJf3t0hlGe3\ngrbmLj3VjqGG0TRftmaQhYpsCjsRQIwwSyjNmSj3Qvca2nGWW5pgJwbWyJ5L\nRvnIBdUH++H+5onsVyYI7euQ7xwrt2Xxr0S+w8jhWfnyyZGoko3p8VDIbzE/\npLvsRtDmJM7e7DpZiv1oqDRLy+/cZe4wtmiBUy6B2StO0ygLNP07BYrE+8L0\nPrfJh8HVLYly/TVFo/s95rVZp+sf8HZAyTo6rpWJ1kmiGmmv2xr3h/TBsU/F\nURTu00ijbvjIlJhIRyQ/ZGYf7x+p33gljGj/wuzaSVVaBFxoMjekUwfc5rLa\nIko0Y9N2mfm9Dn1t2OkY675FFdgBD5NQwLxh2WPlCrF85WqFyddoS7Ygc+/l\nJGnR\r\n=1dqK\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"79622070723d97d5c4052839435f92189e8fb6e6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.935a51cc0.0","@material/theme":"8.0.0-canary.935a51cc0.0","@material/feature-targeting":"8.0.0-canary.935a51cc0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.935a51cc0.0_1596133218692_0.8934139346597707","host":"s3://npm-registry-packages"}},"8.0.0-canary.74839da7b.0":{"name":"@material/shape","version":"8.0.0-canary.74839da7b.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.74839da7b.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"82a8766202cd49ce7572ed7f0a5d8399ef1557f9","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.74839da7b.0.tgz","fileCount":14,"integrity":"sha512-SSeRBPSDbufh6WPYSkdpBw1eqGsIPmAqkQkBiHkYuQH2w2owYApeFPG+zr1exRz91eLwM+cswPyLM9ZlFCIQXg==","signatures":[{"sig":"MEYCIQD5UjIO9ScEnDShp/6s7YWah9dHCWo6sP3QQm6Suc38yQIhAO5tm0YUmr3ROt/q6y7YS5orYwExee7BP3eDk3XIhlN+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIxHyCRA9TVsSAnZWagAASXIP/1QKXA0+6NdoG+UNcfYh\ncTf/IJk7zYcfKj6g8v5B4g1SSdiwO5gpFJSM7knEULiqt9JscsnhmHE/JmVH\neZIMHi1dnrKqXPPuJIPNPt3TFIjqk9RN8f9X8mkt32uZEc6C/D99qLPYF2BF\nILZX8zjoUsv7HzVgA5LqOd822jNTTZfHSe7N7zfKRgC57ZfTSkfHILZT4KVp\nIEtfkXOQhUfzIcb9FMKgWYy2xGjWF/roRevGqQLUiEO+3yt9tL6syrSPJ6SZ\nYpXEkMQtNDC8ry64FPzp7Sb+Jg/yPO0f9V1b4ASjpUMvwrGjm6n1X2nbM743\nzDsWjhAHpg+TIC9/03vR8GecmOdj6NK4vcP6T/lPooWtqEigtUqYQgihVrRs\nfvXWrX7337pAVtNVWPEqtVDsZob12pxLHNjfyCqnzFWJZDjmeVmBQn50H2fj\nE44FfYDsLwj6YoRfRQhYTxOSd2AGn4AsO9YUK1sSnDqV9mQR8ra+v8t9ElwC\nJ6ltVXQRzlPfOCWDMEVy1NwfioE06/ik1mx8WSXHDsu5Zu/8N2l5RnRkykjF\nZwhWA6lNXdNVzZDk+l+YIozBINVEC/DUNds3MuLLSoBsiSNYkZvV6Yz7Thbf\n8j90bL2j2DNNlV9tk+z0UbuhJxgnpbWy8kcEtZINWE77f1/tDKLwqLQqL5iZ\nCpVK\r\n=TYPN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"ad186768bb65467a86f70e827e74fee089e25811","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.74839da7b.0","@material/theme":"8.0.0-canary.74839da7b.0","@material/feature-targeting":"8.0.0-canary.74839da7b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.74839da7b.0_1596133873831_0.8638404112634301","host":"s3://npm-registry-packages"}},"8.0.0-canary.f041a48c9.0":{"name":"@material/shape","version":"8.0.0-canary.f041a48c9.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.f041a48c9.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b999d5794a282ccffdf01851c835f6f75bfd55cd","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.f041a48c9.0.tgz","fileCount":14,"integrity":"sha512-GTm0q7OL9Vzk+6mrst3UvuYoUAaDPE1EeZcsIebhiXirCpvNLLxomebNmxAoFIXqy1vyDhLsWUTZXyF7Hic9vQ==","signatures":[{"sig":"MEUCIBFse11GHAh7u6xFfo4SvgufIjBjSGZcgtumn4nj3bA+AiEAhimWO778OQ+dlfQnokA7DhdS9t9Qt+rLhvCRn4hwmak=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfI1DRCRA9TVsSAnZWagAA72MP/3sf+FVvTjk9HOqtk9f5\n3y/gWzPfiRjkSueqEh65GlQJc4Jn8YPTcJJOvTTyw09Gm/ox5wDOzxey4DrI\nMsuTSW9OlTxa/2pBfBKN9znwODyPCKviENymc3gGOJCrqwYbVHrvhPlKe8mI\n3A2KiTbu+93skZLUs8GP5ZYV9Gnvk3wV4nY90eeusduN49lGKdKrz/ENzF9x\n7CLOosGStN1DyoxVbZlv5aQoYGNg5opincQqvqxRKXUoq/e/Mo1E9JLA3ogm\nJQwSfxejisZjE5RcQwixz+YUKyE2jsz+8ygc91zEVRwySL+wj+sHc6TNoR2l\nxxD9EcYTCRfibdU2Zl1rstyM726fLdcgWkO92zVz56Ql1xZHoTZTXg2R45nL\n9m0YJ1+dimuF3USZ/GFSy6Xo4B96RmMGbJaY07n3KY3+dSn9tcA5JPl4kb5p\nIE7LHJHGuVPAQLN+bHmAwacq0U9gMscYOj75J1fPg8pkbwQt8iDfNhy4g4EQ\nll/icdhr6aMlOflPRAJRg8AmRzYC3TvScby5yZ6lCTXC/dMqpGrtcaGDmaNJ\nH9DunUo99qOTr6fhFzX+vuInqLhXvgABNeqbgpr93xhTpAgrh0Wo2o/e4CfO\nK05GzUlTtBargOKzdfULvZvO2OrF3/KOk89SsOWbRNYuGUG7hwnbJfbsLln3\ncE2S\r\n=U7OS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"e37611a41628785b7c1266cd53abdd9da0208c00","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.f041a48c9.0","@material/theme":"8.0.0-canary.f041a48c9.0","@material/feature-targeting":"8.0.0-canary.f041a48c9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.f041a48c9.0_1596149969278_0.4010182541461831","host":"s3://npm-registry-packages"}},"8.0.0-canary.fbb1381e1.0":{"name":"@material/shape","version":"8.0.0-canary.fbb1381e1.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.fbb1381e1.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"458137130614ad96d8ec830a7bc790e3e81ffb4c","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.fbb1381e1.0.tgz","fileCount":14,"integrity":"sha512-C87xQT++LMO7KTlX0O5W/aobsJKYj/fSGyR482mDAnMixf1MSCXnLpnnyUpPtU4wey+C2CC8AEOPSPe0tXtiSA==","signatures":[{"sig":"MEUCIDFevaPWcCzDfUxB8gbmoBCiQA6DvjNPKSw0f+zHsobGAiEA5eU4697ZTy6GSKlnkkw38SnEBj8FvGdajmdL7RKvuq0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfJD2+CRA9TVsSAnZWagAAgigQAIXxd0i/tWOy7SzAskCt\n6pa8X6RM5wDbvQ9A9SIKAt0Dx8bG0EY7D2SNhu/5pTWhA9bMkOVB6qbhsBCh\n10rmiWr26M2m3Hz8zW4H6PsQILm2w+gN1S4gIHoB3WpX6kQddv9AYEUJLTwy\n9Lh4uDRHlE+O69YUNr3JVZHClum+/QJ4jd0NKkulbajD6JCTMjAMByzFZ4Zx\ntr5OAKgt7T81yGDTcHDvXGedRfjR2HbxYZ9W+lOSKysVhxAMHHJ/IIksrcsd\n4C/hD9jYWYptauNNPjEw5bODwtp520FXRluT4F2P3fWUEkC0jxcKOdwX7JLO\n37IEJbZNuiF8oyIgK4xp8fISiy2W/ROsH3lwdwWsvIfs7kI80M7thCeeV5vR\nwesM5BBbntAuV0bfZeCij/AF01CFfmE3YrTn0hjaCcqghJ++ZwwpqbTKrdOb\niyBp5p0umLSFS7a56LXU1h03X6Df7OozVuNRpvKuUM2gAa9BRSNtmb/kGqxd\nDP36YtjsDe1UZ2n8dW4iLcl/qWG3B5aRUUeEP2vR+gHR1dc1R4KHCEaiPsZO\n2FsMs6MiyGVTKWJ6F7UMDT/WKESjMIgZBEztpdoqBubWpcBNHPe4rQ/JvU7d\nKRKJ8JEQrggxioRuuUpulT00lr3vcleeXeusc42dWHqL8UxpfnLrgY9986e0\n8Ui5\r\n=ZVdf\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"7c42a890f9b5f1bce3c7986f37f806066e6e30bc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.fbb1381e1.0","@material/theme":"8.0.0-canary.fbb1381e1.0","@material/feature-targeting":"8.0.0-canary.fbb1381e1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.fbb1381e1.0_1596210621860_0.7213022345973308","host":"s3://npm-registry-packages"}},"8.0.0-canary.7f61d5785.0":{"name":"@material/shape","version":"8.0.0-canary.7f61d5785.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.7f61d5785.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0cb86884ba5b70af628b1744d744f09ec667d2ca","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.7f61d5785.0.tgz","fileCount":14,"integrity":"sha512-CoLTrAEck0fDEiTenNwrTShjh2BSUh4pRFIdoHgnI2631wSGCq/RWVjg1GR6HjQq74iMvSl5OP61trnhE8ZjyQ==","signatures":[{"sig":"MEUCIDjbxXpzExAEqTkU9Ywzx6e/fBYtPbYnBTwA0ao5b+spAiEAhlrZkXCr0SUKOS3rp/baxB4rvg4MX9vEleyS+5avBIo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfJFNyCRA9TVsSAnZWagAAN0gP/3qZGsggqDh2HQQsIaNh\noRUeiSIFNwVXMH1zPz29LWH5kk6S+mBJV56d+U2vCP2EEa3p3ZPVAL1Ljn2g\nN+7Nf7azdkmMlMq6XBEPN6YY1iMgWVxVvLZzCp2rSPCxDBevjoekfKdRt+EM\nn5/CPpNXP3DUzKmxowdQGHw/6EXOukSdgUULAwz63Gab/ISP891AxUq3Nfud\nkDzTrYrXL2tVyt2PJ9fil3Mpc1gVO+az3NjcovIGe3csyj63cgWV1xDbfIJk\nzpdnjQ+W1CjpKM2O9kJWd7tMvv/opKZq6PxFy4DfmZxjiEuIdmBC5FFZ1cLI\n5bbFet3jHf+Nnfi4LuMC4Ql+vbzz/hiU8wgVUin1cYrtOv7IwdFVfrED3z1J\nh0ns6qJSdohqYCpwHVjkj+PiTMaca2r2N3wXf0HWBP2euw70vmaHCK3xlAKX\nPr0HCPkGTzSd3ek83VJtWePjbhOQjGBTdh6oKGaGsbK98TM9nS8TlRwf5f6e\nQmW7H6Na3iuIh78w3at70mcHbpQEg/uv+V9iamjhjPwEBUid+XvBS+wk1lx1\nG2uDRSYd3qfFXP1RSMw+fQVkEQO9hvGX9rhaBJzrJTw4UtSYTTOUzJlhd69Z\nLVC34RGbBcC31etQSWk/SkfBYRu5lhlJKo8YJ5m3iPIES6l3mllYR7B+Nd6o\nXPO1\r\n=L+Ho\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"beb77eaf7ccf3f03c6d830f96485010ea9e3d47d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.7f61d5785.0","@material/theme":"8.0.0-canary.7f61d5785.0","@material/feature-targeting":"8.0.0-canary.7f61d5785.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.7f61d5785.0_1596216178161_0.7027112412822929","host":"s3://npm-registry-packages"}},"8.0.0-canary.e1bc84d10.0":{"name":"@material/shape","version":"8.0.0-canary.e1bc84d10.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.e1bc84d10.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"70e3bcc5ddce048bc9bca18b81a18c222f999293","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.e1bc84d10.0.tgz","fileCount":14,"integrity":"sha512-cWc3VGHrvxGtRiY63XwRbhVRdycccYEZnJaDZwuDe5w3vKC5MyfefGRA0HqJOAGUmCxHBFpW2wt6iNb7SuTHcw==","signatures":[{"sig":"MEUCIHLf6RpMEYzNmf5DEbBk0xfPbV1QYkdXwVHRQZVVbFpiAiEAgGNo8p603cTmt0rzWHiZd0PyAJWBWoBBrpUN7CzdH68=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKE5zCRA9TVsSAnZWagAAfukP/2UhWoN/Ywh26KtBcod1\nVxNS7BaxE2Q05tJJ26dgtxK4xdp8VCi6Pgr8tGR0fbDx0sWW1qXnGU+vsRcM\nnXzMaGrHBDpE0peGe+Nk3Bf10pqEFCLZSM6zrqMze7QnQq9peWpGxJ4Q4Xdi\npurTM06Zh0vDDHChVo6f23xqdw/7cHaNm5Zb/yLGqrgU4F0I2MTCKqAPu3GF\njwcQb3A0E0H4ttdkyMBezNdiQswlerucTeZaiCZeBCuVySud4rB6t1CdMIMV\nEcP0Uh9So7BuGQl7hUm/xpglUNy0fVDUzsNnKdTqUPq/7N0Rrc4wYJzb8pSJ\nNXdF0YZk5bTctHg0gTYhlglFSsPAfAd4e/qsr9nruviH5vTqDG+RFRytC/3+\nO/HZ/fB63UOB9HqQv+0bPqSgrPRqlWVNz2h8fHG9pC2n9qH8YNhnkbTMrlna\n5OMlRmkYS9BHrn33KhKS7g4goGPWycYzihInyWlpKdW/E5SNhsbZ4EDJy0k6\n5Sq3XFx91ZZqqj6QkJev+KykZjRSVbXVFAzUX4M/XQ/Wh5zr85NVWbWhND3v\n+4z+kF5N0mOVt+dIcABjcRKYpGq8TDyy9xdo7EEGja+phozmZstDKiLlg310\n9eWugINlgGHX1atRmufbAivpfXO/m+vrYu3tP1xvF+YEf6QCOMdqh2KQ09l7\ntj+c\r\n=AHOx\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"4752dcadba6adfeb006ee3689e295db016f4bea3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.e1bc84d10.0","@material/theme":"8.0.0-canary.e1bc84d10.0","@material/feature-targeting":"8.0.0-canary.e1bc84d10.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.e1bc84d10.0_1596477042825_0.13823063074598596","host":"s3://npm-registry-packages"}},"8.0.0-canary.096a7a066.0":{"name":"@material/shape","version":"8.0.0-canary.096a7a066.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.096a7a066.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7b20a67d06b4c3e3b6bc4a9742d3e44fcbfff5db","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.096a7a066.0.tgz","fileCount":14,"integrity":"sha512-UoagRun+cQF2yieE+ErJJQpNLyn2+PU7FifFF7N381sMBQTcxQZ7bFHNkmj1eqUPUsiWxbJxnjsMjQ2Ez5e/Aw==","signatures":[{"sig":"MEUCIQDWB/vN1dtYh5Hr9x6qo4Q8xiBXSSnHfssyajjMbGLBUwIgCDOuBXBTqELJJDDuy4k5Mk/bfPuMcshU9A5m2VtIdFk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKE8mCRA9TVsSAnZWagAAE0YP/Awdix+XzNPYnS4LeTP4\ni+XBaPEv0x4PlgYX0GXhGRiQTZc5K+hwshDPZJ2y5cUOiGNnBNc89SdlMzvD\ndiVXgk0vovPNJQjQy5ZKiZYo59O7PzG8/S8bb4ifPL//2H+P+IUYQQOsOjlw\nFiJSLOW5ddtGeZ6ZCVknJGbMaVAigK4EA7wh011TlnZ0kIG1fB6t89PYUkPv\ncY4o+mfgMoyc2hcLcz8GQNBkVdVJHtTAksp+WDJaJZc4UR9kSmz8/RM5HJvV\nuQG4xX46rG/sm5SvZcL2Q2jT4skkAQRRcTNSGGdviTXF6dRQRhN/77ANtegr\nOKfnaQOgxLHoUXPjRr+sh73zLBHIUSd/ryH3YMmOHlMX7qBRaZv4eevzFucB\n2ZOweZ43FhGdrnsSnoIhWy1LNYNsHCJPUOccwxjOU73+/g+UFpOznXHSMuUZ\nDI+wF853aL4S6EoE6TqsuncfLNqoOhWJ/kJXiubHFgIX9e5W7LcBEmF9r62T\nU9jZb5NARDS32g4fr5LJtCZGN8oEQR2pcqpqLNsF0VhddHtEA/aA9eSxrBgn\nLIumig9vnVQQMObaEUubKS/gWs5bC3/2eRMviF2RW7OWO1jcJe3a8BTwBLrJ\nPJBRaCVhonAhV+1WEfPwb6FbhFaEogefQYUV7Tp28GhJXta3ih4n/jBvL2gQ\ngdCz\r\n=H5OH\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"c1f4491c464cef40f62d03f687af7b443805fb7e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.096a7a066.0","@material/theme":"8.0.0-canary.096a7a066.0","@material/feature-targeting":"8.0.0-canary.096a7a066.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.096a7a066.0_1596477222033_0.09489879253167088","host":"s3://npm-registry-packages"}},"8.0.0-canary.aa3a3e5a4.0":{"name":"@material/shape","version":"8.0.0-canary.aa3a3e5a4.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.aa3a3e5a4.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e5359709b32537ca3a9310aadac932dee8c64482","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.aa3a3e5a4.0.tgz","fileCount":14,"integrity":"sha512-/P6kBH95kfgQk4ryRLAGYksCYJXj67Su5KLhOXa9+HX38mPk8GvzW63FHhGTdIoQ5PRL7spiumycAE/qB0N5CA==","signatures":[{"sig":"MEYCIQD+NuKtCKAU1oKf5jQJVeubP4YALMz+tQzpgPAyEnDUqQIhAI29avIXI75Hkj/G3fTv0Pm7DDjwm0agvzwaU3WpfxhO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKE9BCRA9TVsSAnZWagAAyQ4P/2FDzkOndumOja9wFEdH\n1uThvHaARnG0++bVo28EmenPGLcxbdLGyQLnjvPAf9+KBHZOaIpLJAp96BXE\nWH8GV1kFaPeDug/VofiEoaLhQVuLLRj1yf1MlIkjN6D3TInN4dlPIoxkSJ8r\nt4irg1ayDHyriU125K0lP/xClGXz6uX87E1f78j5E6CPUzhdvzxXL1kXGsCq\nlgDMQVUfC+HsndXtBpwrZtW15CtuZfohLUidAlEKUs/gc5WUyNPskPbVXLR/\nC9Tgyi6YuP6LrsKNzSf9hX/uV6O3QpTXZHjZf3XWz1NRkVQ5zlaCLd+iWO0h\nZYEwzo5wAg1YgXFMeH4s6Z3xCZcsjpc1pnf6MpG0O7wp0diYUJufcJdI48kB\nn7W5R2UnDqX7YAqc1JP3eDpNF/Gmni0cTepiz/k/oymDljfzaEzsKe5C4zXj\nq9dtMBLcDF5iayWT+5wOPWlTJuEsJ1qo4Yhrqgm7WXI6Qc5niJHTS4VZlh40\n/NmOj4rw7Ipy8qFwgDTDkKB/t98AIz0kWr0kLFxwnX+Y7mAzSJjOHlJZje7c\n86sYRF2FzsZZ3wLlOhj/tnD8nEBXwkCAIgzkz+6WQ0EVNmwWf1Df9YlPHETw\nQOMU+vQhK4H4Mci+C0Gf/U9LGPtiTEBqnwcmnp8nm57MYnRKk3Sn/blYpTi3\ngRZ+\r\n=7xIl\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"8e25515e9c171e19310cbb58630a760408b78c80","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.aa3a3e5a4.0","@material/theme":"8.0.0-canary.aa3a3e5a4.0","@material/feature-targeting":"8.0.0-canary.aa3a3e5a4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.aa3a3e5a4.0_1596477248825_0.032942582633224804","host":"s3://npm-registry-packages"}},"8.0.0-canary.5903d39af.0":{"name":"@material/shape","version":"8.0.0-canary.5903d39af.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.5903d39af.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d09ec262ae88d90bd9679fdb7c66c2b7bc64172d","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.5903d39af.0.tgz","fileCount":14,"integrity":"sha512-wTEmxpl86Q/IOvL0x+om0qbQNx3yJKHOYeYMqYYzFZA1ZCh7W5Llg8hJ/xmOWaReQoiDPwQUxezHhVfwbQ0y/g==","signatures":[{"sig":"MEYCIQDLl8rpKL4+QTCOrLu8JqAivd4pNVgxv936OdmHDqC32QIhAKYUEqU0B50U7kFRT3zfCq0b2aA1Fv03mtWRA5g7mAHZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKE9NCRA9TVsSAnZWagAA/6QQAJj5syGclSErZ/F/EdPS\nSqeT2+v2Sa7TjebUd971V+rq0Htz3ZqqJpGNIp7VatQON4xGh/IBDM1L5B3q\nZQUpjQnldiNEEw6uscRhGyvPiAAZiW4apaJQi82nGPJGi9IsqHufv7ENUH6S\nkSg/SK80ZDyg228HrZekuQSh0jGcOAqiBcXpB+ULUVVB8d0la2dTQs0aUjEl\n/fhGiy8FZEEhe6Y6GPkNgsT4ogqmfp9YdCXU0R1yt2NaLuTAhfL2+GF7c2lW\nFcTByzd+Z3eXx0rBY4vY2utyV9jQYjdG/dez+zUhOYGma89YPR+kDOh8/FEA\na/B93KqoOI/FYUB4aX85G7MHjLtF0xqYQjPYDliAnel9+/HhhEAq5WEljQxU\nwgeo9ct/h5YxTMoeK+enU3VpnqJopFUxWqbouWZ7R3jUfovBi1cOIjhlW0Ss\ndwjJLdBTVNzoulK1bnFQYiEsZBCsrlh5WDoB/fpPEu2KDutHnjpDul0r2U/T\n4WCxkhtmkENUXwWgVIhDkvSdthESrcFZNpapsNRGRi19U7U4YVECwbtC5j5t\nJ6ih14NJbq1UQTuC/KkYFJOXSSpo4BYyNsFqYZzxJqbZwAHZZ3fzWVryHhDz\na3X442PzvGhfKq2Ll7+Bt9hx/VfV0szE7TpsNlqpEXe7qv05VeF8f8z89IHx\ngCic\r\n=xeaV\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"8a4f2eea8ac8483e7e0a1c93b141ea9dfaebaf4f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.5903d39af.0","@material/theme":"8.0.0-canary.5903d39af.0","@material/feature-targeting":"8.0.0-canary.5903d39af.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.5903d39af.0_1596477260938_0.3564000674525629","host":"s3://npm-registry-packages"}},"8.0.0-canary.72258f898.0":{"name":"@material/shape","version":"8.0.0-canary.72258f898.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.72258f898.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e758501a897e020896a152b30aeb5465512e199f","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.72258f898.0.tgz","fileCount":14,"integrity":"sha512-Rm5zrtPwcNNgf3EkzfenmfXLQpe0IIfiCe8mDawBbG9uGQAYvA/HDgfeExJvlRuumeQ3imPlo1fWd28IYSpXQA==","signatures":[{"sig":"MEMCHzqURYr7/bpsRvvphcfQvjKOGFPGnCbQ4NSrEnsnKdYCICwgioh6aI/me80Wy4LKqwzwPinQwMxkcofJheYeHyCs","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKLcbCRA9TVsSAnZWagAATlUP/1AHTRr04sT9CsuqX9aW\nT6QdO6hIGdLRc/OYjIG/sn7yxpQJPldoRexIfA7EDEeqSDJeybqr/CM1qU49\nMMBLH9dJ+9b2+xkSMXxzERaRZcqmoEaqS57B+pg/r0PiP2iblT/mQnz2+V+K\npuGWqgg+CpIpi02tlkEYYRNZvIuNhDbTNtpHqiKxklYpSOCrTussaZ5t55CB\n3l4RjNPhrnIN+2VgNL/DiqnGNVAw4Zv0K5dN2epSYtCNz7i8RoLk3lDuInPe\nmcFZjySKmWjLh5jR3wCbGFeYi1/D3XWjgm81BeU0Hj6P7SQ75gZVwMPmcUyG\nEJvhPo/pAxwRHpEiYGKuNzSaD6SJuI9dGrs/DlO0+iJ980dH5t2RGSQAaqMB\nlFAP4kgeBNkX+/yhFwwGohojQaA35no8MA5boqtLU5XfBuSRDgfAKJs0mSuC\naRAHhPOBH4681ulyvK2zP1r41+nXT+LPw319PJmNq+Mis5WLcJBdLloQj+JQ\naSCEPiXJ0PaKM31dULC5DqbNw0mkClcq5EXXvoKj4w/N9/+fGb/uODyeWpkM\nkNSpElOyjKds7VAdvJqdPHrIyBwtn+npNo7SxL4k8gv4bCIiYm3lJa3+Fwdh\nbV5MCrFCW7T/RzS9dH2AaG6uM+iC3kcc9L+OuhPqTc86bVYF0ECa/FZgGTTD\nZZEy\r\n=nwH4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"ff2c64799ee2d684ba36b9cebd15fbe0d0ed17df","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.72258f898.0","@material/theme":"8.0.0-canary.72258f898.0","@material/feature-targeting":"8.0.0-canary.72258f898.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.72258f898.0_1596503834823_0.5612861492895669","host":"s3://npm-registry-packages"}},"8.0.0-canary.1b44b43c8.0":{"name":"@material/shape","version":"8.0.0-canary.1b44b43c8.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.1b44b43c8.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f87f5c158dc2aef4ae2ab74531f0ad22e7833153","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.1b44b43c8.0.tgz","fileCount":14,"integrity":"sha512-G5GQ2Fvi/CR1aIcQF1syK9iiexGwr0grekAkdW61z6IkDlj6n4pPxbMoTpiJU8dX6PKMPSivypLLvOZF6R2apA==","signatures":[{"sig":"MEUCIFPOlFWFEcSZ2N7yQ/2rK52BSGAwDgAg6SJplOMgTlpCAiEAsLmHKqd6nEy7UsTN8ibmePlWZX22CyZiCKMpRqadXSM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKZFJCRA9TVsSAnZWagAAGdEP/0nJ4NVMas0Ay7tvgLFc\nwdj8EdUOOsziJvILxLdeBzzbNEzXcVLgGAeYJ+JqZHv2j3+bGmxWskj6UlFo\ndlZwwOZcWgPr0KoWYy3q395QIywgxmJzeqsPWtYR+OVu/xO0DRl+hz2FS20b\n3YejTtWcY/4Sms4zRyjPPsctz9aPXwAv1e3c+xKnhFB1neBYYcd+fQEgYP02\nQoFZRFpyQjwlYG4Xs5+UA1dHLW0Yiny3/dxihXfPf4SkMopaK22C5hdbHDtm\nmomuMAJNHV6rp5xklPpoaD/Gv1+w4QXkPrdjPL4PNAxfcnZLx9Td60mwrwVa\nsb8hSFN/j0KYD9M80ygxuPqrR0xkdhmd2uERPKniCqLZUQWniDvOpw/gWRlz\nCWDyimSKf07e6jKw63FQwiSDZJcuSghuPkGRQfGHiWQA1ujmN4p6iqhjvVke\nfczf2Q+Xlx60YwdnWrahPzD6LR57quilWdweyvIfux17OrXrGVUP/Wv2xhaf\n3rW4j6kRzbJ2oiAsjHRTtETtx2MGAFySggVEfGN1hHPHk+/yTqr47Zv9pp0d\nAh/Pe0f3U4J6W7Xa2ygogGp5azO2BXSlPWL5i1ZBuH29/Tb3DAXvAjktSYMt\nN3spgfk8nAboaehCMM32xa351BxoEcFs/1CQ5mXRhvvxCVmsTaLf8L+kstN1\n/mqF\r\n=R6IL\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"69ee70c646249b45b57e59e958f1ca6d8332dec7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.1b44b43c8.0","@material/theme":"8.0.0-canary.1b44b43c8.0","@material/feature-targeting":"8.0.0-canary.1b44b43c8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.1b44b43c8.0_1596559688691_0.08185404328345913","host":"s3://npm-registry-packages"}},"8.0.0-canary.e9d2e2f96.0":{"name":"@material/shape","version":"8.0.0-canary.e9d2e2f96.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.e9d2e2f96.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8990a686b7bcb6d3af3f37ed23f5a7c4502ae8eb","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.e9d2e2f96.0.tgz","fileCount":14,"integrity":"sha512-NbdLPYwK8QsErVJxqnc8/b4ySQkjOeL/yL8Q2P/ARDG6YYl40tZYbTScx1HijrIhD/kyo2nNvDuXuZU9A3vllw==","signatures":[{"sig":"MEYCIQC9q/0Zka2Uy8UPrCaodUFtlV8T7BqGo/rVvXkDw/0NmQIhALcV0S8ZjPx4rhICun0ozsbA891x73/9gzihqYm7zYP9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKcPnCRA9TVsSAnZWagAAHzQP/iVjTr+YtbDYBCJKn9dw\nadIRgUt1HNN698V5myMlfXosJMySCRtHZvcHKcaEsbox7xOxFVbm/w8DlLMu\nZtkmSs6Hwk3BxeVqfjbfpkurXc1pWwUJnjonKi/8eWqQawGZUvF/GvEW9GQK\n/xPV1LzPDuiXncUE5xQFEuyj3YLhGkPEevu99FfmijeEke+Ecdc0SomB5XMf\nHT3xQS1ueq/jCvDqeJna9gFQaLi0Py66F3OjmOFICrqVoNwffiavvUDw9sa9\nvst7CCnkLfCfXhjRPo64imiAt/Us0HTExyllgsjua42kL19A/8Rfsd8yQOcs\nqYBBSDRIqUNmVp12hzdtja1caQwsyJRdd36T2Pm2kJesKZPcnDsmrpR6u+Qb\nkBr/xQwrYF9R62Tm6jXvyyc409He9MBBttvgiFZ1HKZvGUxnFDMiiyBzXFey\nUDvjDfgfJPf+p04KVJCgJsnP8fARxEUJbP9BVfwFZmtb7D6iWhM8/uk2eEBs\nDXjuEWuvfqFoLHi+I8fOyiYjpIw4yovNBMiL1EFvHO3JntGJg9aT4OpOrC4/\n56UkkapjhXAI2cNVHmA7jgfsaQ1gWtewN5dKnKtg/WY2kVgPOi/hPv+oPb83\nSGpRshengsCUkFEcRYuSRjWXehmBCpLeRfxoZd3ragS4Qhdhs0RxGwuEj2/g\nTLSe\r\n=ca54\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"f6bf51788bc1f39067fcceced79dcc12b2c59caa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.e9d2e2f96.0","@material/theme":"8.0.0-canary.e9d2e2f96.0","@material/feature-targeting":"8.0.0-canary.e9d2e2f96.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.e9d2e2f96.0_1596572647367_0.6967010492205761","host":"s3://npm-registry-packages"}},"8.0.0-canary.b9dff0a19.0":{"name":"@material/shape","version":"8.0.0-canary.b9dff0a19.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.b9dff0a19.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aee99c74fb221991d85051c715bad635905e124f","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.b9dff0a19.0.tgz","fileCount":14,"integrity":"sha512-LbqF04aye5EacEKWeRnqQj8mjHLwa8TwfWmCqUxyvfRDkLPXDq+acpo87eW7TbWw1u+LEJuaQhhgEd68lPxddQ==","signatures":[{"sig":"MEUCICdIAOaSyqHWdrfOXah4hM0hrFJd0BpoGibdt3jSrA9bAiEAxj2Hcm63VLxoW2IUTstS1KpzeFtEgtdznT5Xvg00ROU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKiwdCRA9TVsSAnZWagAALloP+wbDkWzziTS+2gWGzATw\nizWrM3RPX2butA0E/wPRd1DpnfA7zCZs/Bn5M8UA8JB+80KB4GGM2GwwYBAq\nPcgDNiilrUlC4ZMdMYGEgpyuvRkaK0bPz2WuGwYjX02narCvn51WLUfxwy9g\n/014RdEjZ9DT0nZQLAVSV/ueVVQ5raOvYNct8YdVS+XXYSQ0PAwE9Hi+kOr+\nduGn2WpWX1R5LWx48nc/49znC7EKwZRxAnxvI46xyjlVLgzGxRTIylmI/0Dp\npc5iSNdK0AicT4SuwoWta23nIsEP1ARu48y+/ONlgZzv6vWPYO22vyn9vzfw\nOK/mKl55Wb6xFq19ldeL7o5dFmlw+lQzMWlxa2pKPKyRLIObeiK6B5WbZ/MN\noLZazxx7bxMS+gc4TaN1C/pvGhG33OgBoUtEbbWdR1hi8NlzFRUVDkws4GRM\nFAhWVVGIX8omKrflGQhlIq+DIhMJj3DEEy6vtSWgn4YODd+i/gYcpwW8NCe0\nD8fY54APrfIt3haVTHJF99bTcj4EWT6EqCbjVzOTVm3i68+KTSeDFyzzCEGo\nJPlc7rbhjgtF5rNWdIftdIYSZXAT/4exUOjXduDbjqFRQvY7J4LrbFrFUVd/\n4YwRT8N82jlIThMv4cljPwT0Jxn/xTuV1KRIeHUq/jkb1RfetoWqxlaeMOCd\nU2Pg\r\n=mOpB\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"dec2f9fa4c83e98bee860646fc2a65b134a7900d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.b9dff0a19.0","@material/theme":"8.0.0-canary.b9dff0a19.0","@material/feature-targeting":"8.0.0-canary.b9dff0a19.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.b9dff0a19.0_1596599325014_0.6150500984936094","host":"s3://npm-registry-packages"}},"8.0.0-canary.2bd09a706.0":{"name":"@material/shape","version":"8.0.0-canary.2bd09a706.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.2bd09a706.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f704124a014902f05906576feb07077c10c667c9","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.2bd09a706.0.tgz","fileCount":14,"integrity":"sha512-9YhZ+0nGzfrcJ9LS9HB6PPRYO47AQF8IH0HwZ0WK3kgqVUhmpykEsaSP+V1CM+WEnYLZpreX98aRGV/FO/UgDA==","signatures":[{"sig":"MEYCIQCuUHe1hN/oZL1X6dBvX51eyP+jEIwyeTiw5XGVfAmTcwIhAMBuA8lSay6mzkKnYvDHx6FEzxH5Was97/fLduRmXsea","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKi1LCRA9TVsSAnZWagAAUxAP/Aimls9UyYqQ0d+kdZ46\nytAHQeYaf0YTQfm62J9odxur2WUvulYScIk9v1YjoH/5JQ1onRngSAZ5jS2e\nXvFI7aJG2NOES7kY1ixoAuQnTpjhvgfXehJDLKrLulzA5oAtmYLrXHbZdiUJ\n0/T7cFbXbWk8SGTOgYo98nyYohG0vsgJLDoQyAq6EDgpepYTrdzSKEIH3pIC\nHMYd6E6wGLjPAoJlkHhQq6Wdf9UDKLqAfCD55QzG48QnLcDvlSrQKs2/04BH\nUoDeBu+cLQaUpvxA5JakPao0LFIumM+qWd7Uzec5FPL6cC1aQK+QvBwQdgZx\n2J+QcVzJoaWRNAwIL4hL2DFn2GF0R8TZPMYWbnvIn7nOjRjk7wyOfIHHQGuH\nw0HPLVDCDTz4bFAkJkbbreqH6SYQ3tQRLquYdUX627KHpoUNafdj83tIUDs4\nhBVIFibrYZeA7TZkB77XC7N8oGJZWycHpfqj0eEherR+k3SelluzfZIO+wEp\nW4aIMl9hjaYo8KmlWX4P4vug6HyNffdEFHgvuIuXo30TswzewaA/6bg6Ak3E\nQUgd5fcXqC6eDjlODE9K6IqOb2T6BBk91DwTnrrkCm7zzdKiWmqYJtebm+6F\ns/CFAAwgqh4S64BOkBDixgH7L7If12YYTT0PZrCZyvSOV1Ads+pBN4RfG9y5\nZ97H\r\n=5M1V\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"c8b061f3fa8ffaf5214e79fe44f6c575216a1808","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.2bd09a706.0","@material/theme":"8.0.0-canary.2bd09a706.0","@material/feature-targeting":"8.0.0-canary.2bd09a706.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.2bd09a706.0_1596599627045_0.6399149612250297","host":"s3://npm-registry-packages"}},"8.0.0-canary.e0560522f.0":{"name":"@material/shape","version":"8.0.0-canary.e0560522f.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.e0560522f.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d0e20dd1fc1471e3da664cc7115a0bf966687dd3","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.e0560522f.0.tgz","fileCount":14,"integrity":"sha512-ZxsFZSng72dAE1Ri/nD0sOxU6APiude060P6/yRMvdzRzYZb/iiKVOnhPmJ5Z1/5J+vXRHULZZFpG9yH4cbbyg==","signatures":[{"sig":"MEUCIQDTWx7g48ejsbOBqf82DBPToDtCj4CA50bignNO/e9fGgIgPpQ7eHGuy1VIzcJFdEGvx6ipNMxeCBEdV34dAgHeAtA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKuo0CRA9TVsSAnZWagAAW4MP/RoPPmeXxoXp1WQY0tys\npPUYLShrvWqI32349TDEMjps+6pA0fC1YGhqzdxXARgA5FefsOJ+qJuQGxKR\nSvnYucMwyjmU1C5+An3AIcEn4jgDU3JMmVMi+L312JDXml5vfdDlT4fhl4CW\nE+wVi1jwsbCMBtuUIEQB2RMvxHLx5GNuIaTrR+3h67D3v5AxXrndDDIJiKGN\nA9n4MiUgz2roE1Yr6+9oTcwxsteQsi9piT3021yrni4cNX/Z/t6YktTrEWQI\nCBNyD/0n++2G0nbwFONO62HJ3a+41XtBZTMbaYq30bhaigciLIJIyMkj+iTu\nE++lQmT6p5zE56UHxxMInFa90jFE4dhTHBn8U910UQxEvSkvt9fjpaTxEiUM\nEaBK7OUuBjsVf8AHG9R/VNWYROWryjKZXp28JBEmAiimwcvjKCvRdmcEJgEh\nPA3AaepsarFp4Yat5IeSxaYY7GhEuPMq6uL5erMZRx138Q17Kixwzwiu/2aM\n9qdgPYfItUdYXlLNiF9ZZ9PtqGq6XjNtsOf9i2BIL5hc8idpWLysNe/AkGeg\nSRNHRzO6eaI6VSqtpI7LQRBjrwIwvD1Ass9WJEcDqno+Vf06FV1eBJizK2co\ncHuax1gFLquwYEbxnJKRfIWvXa7Mi5FCq2wZGD3WNPAzGmALpY8N3GSKheOR\nagc2\r\n=j9Zu\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"f4f71f168da3435c5dd1bb74e7ae0c54fcc45746","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.e0560522f.0","@material/theme":"8.0.0-canary.e0560522f.0","@material/feature-targeting":"8.0.0-canary.e0560522f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.e0560522f.0_1596647988153_0.900278682141239","host":"s3://npm-registry-packages"}},"8.0.0-canary.08ca4d0ec.0":{"name":"@material/shape","version":"8.0.0-canary.08ca4d0ec.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.08ca4d0ec.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f3ffe8544b4f65ad2fadb0822d7c42c7e968d8df","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.08ca4d0ec.0.tgz","fileCount":14,"integrity":"sha512-JguxxOZ+9Dv/QwnaLtryUM7z30b6uHoQNlc6sDGEEtPknMDbys4UoojdOQRLO25FbEL7S799Ji2wgdKZsADsHg==","signatures":[{"sig":"MEUCIEYZybkdYoDMN4HUSeeyHzw4tQ3rz3FvOXX4YdyjYcWaAiEAzy4OfDU+AqdPWEzQ1dPR7rUxmDwxO0KcUDNsUcB0h/g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKu7ICRA9TVsSAnZWagAAlTgP/3kBMZ22P7ULzMLoLBgs\nZNd7B1u9/PkCX7tbbLzooYHu9j0P2YAi+FQuDJ+K0xeIl3FFv2vQ0MbkRVyl\noFnx9EOn3ijui1bliEt//tAbrHCAuIEjQL+nGsPjP6xQ10g8QaPR6XonkvZq\n6KjYxhaOzUnVVWsD+WX6ROaj70PH+WoMw/in8RCMax/fCDtTBX81h0gtuFhs\nfSWP4QxEk8qDf8yFyAnqUgNf4qddRTD+TpnWo9qwX2G9HxVDz616cZgDmLfN\nMeqtMh38JoibN55xcsccV5SUh07J9vleFbFA8bs2D7mMd3d4oIGvC2qX28W/\nL3AlWpUSujaqZPj21TGrWqZlB7H+h7zdAXQ4Gm/5pV/FfhMRY8ExDmz1mA7M\nKOILZwnBtExC5/3JDfzJz1ZgKHhXQrfYgAY5E3q/o5DF+nqeLZ4k6Ett8L4C\ne32sxCbjk3kYHqGfNjExsZKGOKw72FS4VOGwQBAUOUcWNGPuWRIRPNaSYsnv\n97jJKArcIP+HSFCs2a27OtmBzWZ7YstY9GS6VGnrZE1iwJuChSvhJp9AhM+h\nSj6uZq9M9KyYAgDS4XDMmOY50YZVvzG6F82SEJMol62FllMlofgZp3m0SEZ7\nSCkOgdWql2HD4tZ0dLf/ksqG6ZgJBVze4neL5Noe21iKpZPuL70geAaRSGCX\n5Cqz\r\n=/gwQ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"e525a44ae67401224e06885b43f10017ae70f9af","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.08ca4d0ec.0","@material/theme":"8.0.0-canary.08ca4d0ec.0","@material/feature-targeting":"8.0.0-canary.08ca4d0ec.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.08ca4d0ec.0_1596649160443_0.4535574481472251","host":"s3://npm-registry-packages"}},"8.0.0-canary.08090126b.0":{"name":"@material/shape","version":"8.0.0-canary.08090126b.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.08090126b.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9aca25d8dfb93d0860afe25d28afaabec92a52af","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.08090126b.0.tgz","fileCount":14,"integrity":"sha512-IvXHP82JfNYG4sop/CoxlF+GSswT4XUbdlOiY3vG6CIniU++0ua4aXqMmjgOlio8DAPZofm31e6IJ3FVVO5IdQ==","signatures":[{"sig":"MEUCIEZ0yOA+vaPPrC1ZswZ1QBCnsTYI6RhqU7zixXyM/Vs1AiEA4hawkSa2TZsyYSLDdQllsCs9QXT7opwSWt22YKPiQNI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLFrSCRA9TVsSAnZWagAAwGwP/iArL7+H628SRj4x9daf\ndiFTge/byTekWJWRWKXnon4e9uL4YTdE3yap53r2reCoAF1ZMAANOr+IF5mx\n5sjbo261bBGsF9r5zJWaMhHiSWszaYSms1ANwcM5oOBnaAnfgS6aAokWZVaP\nmfQ0AwyDqYwhXtYcds4iOJ8srymWOwNlNbL06Ie1MIKf6SG8c6Sv5wp5BidH\nu2o3vLQfXaDputY2NtmJBKOlYCqJQaHaPdzMiU5m0aX4EoFQAcert0Pr8Y7s\n4fqhxUpotoHJRahfGviAZGrGTBxM7Et9+mB2kg9ZcPRfepzHkPl7TcPjVijJ\nuUI3l+Bt8/HlY9yjcOMuchEJBv1eoyNLpHscwLZgjjMEQgkeOtYkTVHRYPdO\nfAPBvOG8kTw7zmJ8T0mUOIBUZ60+tjq68PMfvX2qZVeV8BX3O47WOfVIyt4g\nI4WjYrYgHF+XrIc6pbo4e9I0PMNtz4wtT/sBXEB1BQTbpULUsJ/Vw3nzlwXE\nImnvSiFxIbkZYi6l99gnzTDq1bCA5WeEPbLYnEKin9JXnVsLVuA9qpInLDN9\nEStczMKBaP3poYZH3Ycu627zxAQunIsau4dJ6P405KBV4Yrit4ye2XFl7zF4\nu3NobS1YKE2XNHMsqv8cDRxwNAHppFhyuNqkGpg6g8osP8A8D+h9Udn1uhhO\n0N/G\r\n=o8nG\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"92703c0a9dad96887725176e28a4ac83640a3b34","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.08090126b.0","@material/theme":"8.0.0-canary.08090126b.0","@material/feature-targeting":"8.0.0-canary.08090126b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.08090126b.0_1596742354046_0.7934797574427961","host":"s3://npm-registry-packages"}},"8.0.0-canary.e8bf5b2ac.0":{"name":"@material/shape","version":"8.0.0-canary.e8bf5b2ac.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.e8bf5b2ac.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c106dade0f36502a5dddedaeace3b39d25307060","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.e8bf5b2ac.0.tgz","fileCount":14,"integrity":"sha512-zmv3amWb5cw+/DfWmF2Ov0AW11uOYI9L6gGsHFofN7XLgF3qeHBDbacuCzjgq/ERia79YnLuU1nlKUxIImE4hg==","signatures":[{"sig":"MEUCICiMMSbX2kw8+7JVLz29LzTaGGbGqTZ1Y2Mz3v92SEk1AiEAnzB/DtS/PL1ka8cV8IcB1lKfO8Sx90XnFj3WSn5Ck0o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLHsICRA9TVsSAnZWagAABrQP/j3SFYPyRSfFBFZ33pJ2\n+c2Mqdg+aXN66m4lP+hvaEyoBs+/JfJkbGzpH2UM9yGTsZpPN6CSz/V/HqWI\npp8bQxklZHwmbvG5zeKZ1NW+/pc2JbVS/x9nMZ9Rc9NV2iu1m2/1GyybkaJw\nwTT56xX3GbPnjaPjcp7qnyezFLh4c8urnxCXoxjbEl/AfT0g+ozhkypa8Dab\naK02OXrPY2FVdFi7oRPJ8hQ4nMjuqxOOVKZbHPjQl3ms5Qx6uS3SnIO5KgxM\n9PTUs0VF2g8+G73ltnqd3f5b1kZymJIlZ8HSObj8XLmiocoi8dQGROK2oKaf\ntqy3+aKFPNv7uifbjnOUXWVdj7Nb1OMc8OyV4Nwnh4hz5lyVA/WU4a0+Oz0q\nghPWFAYVlDfVRFbXTM/llBDD4PrfYPBuaqP5O825UXb54QL8N/99I3wWglnx\nrzKxSQvS4Nhzfnny5ITEMTuirnWHEw/TTm3AHETyUSpmRfmW2WoN9hX0jXJe\nnFuhgrxj+mMDJsSB6SIi0TzMSOn+DyWyPucamY6YgNe70EeD4ZMFEQugu6FA\nVQK+WRY/NcVEelvGA55sOfRxS8JOOevXtdxJ1V1+y0Dxy+29he3j/yrg+Nhq\nFHchCXZq8dSu8BtRyJhDRjQzjV9fEifPKooX8PJ26DwxgfrCxPH2pFCIINhf\nOA1w\r\n=mDun\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"d5fe47cd91dcff7cada8ca9b587eb8a924a211d3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.e8bf5b2ac.0","@material/theme":"8.0.0-canary.e8bf5b2ac.0","@material/feature-targeting":"8.0.0-canary.e8bf5b2ac.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.e8bf5b2ac.0_1596750599615_0.06029772553169943","host":"s3://npm-registry-packages"}},"8.0.0-canary.e3b746208.0":{"name":"@material/shape","version":"8.0.0-canary.e3b746208.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.e3b746208.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1a52decddefaf2a82311e22d0c5bdeae7d00a8bb","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.e3b746208.0.tgz","fileCount":14,"integrity":"sha512-HS9E4suqnUbecEgWH92MiHgXSl/QrbEN8J5rNoFzbXDfWFUVzGb9h9iyWnu9fcsNmFqUXa0kDrXLcuMxTjUetQ==","signatures":[{"sig":"MEQCIGjnPKeu42UzmbdoEcmZxku8kmB3yC5X6raSZrvLRQXDAiB5G8zWRTSRGU7zRIUs0Ior1Smy14Hl0+lrZ6a3bI97RA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLIOeCRA9TVsSAnZWagAARAIP/1xOamuNOKRFNwjStOYA\nG5Sl92rbHKAlMSxrcpKuYA5GXL64T9UFqjS0pRXfu+q1npAjNKjqQ6+NECyO\nnLb3Y6wO2mKBLlQrm657lKxksdS7GE+OAUIA/iJ1098FveyGTK/E76KK4pe9\nNSVY+B9u5f4niSBavixtPoLhhoWd8/3s+6g55yEJ1v7toxQyrPzOX4Xlz1df\nfr/ujQl85+vNF87Wu8EZvvwEUyd7ZFtMNVrmG3woAoXDZ7zTU6q3W8+GAio9\nceFmy1HBbIUC4tcadjy8tZoAivncr2tpf6zvlOQY9NVH2HeLAPqUIXrjDILy\njZfV2m7FrLRANiFalyDokPBKdmhogHJr5Z5dD/Ksiw2tpyVBnQIYBb591cPS\nT2EBsNh95vuEPlWaSOWjqcOBLuouj80dd0umW/Murc/6YPuGOPftcfv9lNE6\nxRdzFq5XPFz9gbBXc2XQjeyt4KtgcMQRrzjj9k8cfztyQVh++Ng67w8ZCh07\nRyj+zYtAtQ7nQbmV+TdJN4SBQvDM3E9dfaACG8mqE11B1b1BbXr6cpZsk7GE\n99H5euPajs1GCatKkwCYxG1sZF37T1VjzTarJ85fgq5GoLB2j0AlI7heknhu\nPWaboAs9u4CM2rUfSFqlHGDdh9LyKDNbKr35e57mB3jHu1uI4G8rj9zLF1Xp\nswL5\r\n=2dM8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"565f03445fdfa2cc653bce8f5c730176a406e5d5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.e3b746208.0","@material/theme":"8.0.0-canary.e3b746208.0","@material/feature-targeting":"8.0.0-canary.e3b746208.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.e3b746208.0_1596752797974_0.37367111188312907","host":"s3://npm-registry-packages"}},"8.0.0-canary.96a640534.0":{"name":"@material/shape","version":"8.0.0-canary.96a640534.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.96a640534.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d9898c7e20e65915d6ef2f3c534080a740878d60","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.96a640534.0.tgz","fileCount":14,"integrity":"sha512-MuYtDG7/hMIHmURty7QK00/Dave31dhlAVouV8k/up69BkLYtO33fdgLrJTYFgEXieDB0fO7arDXeCIxGhvxgw==","signatures":[{"sig":"MEYCIQC0YMdPefR85Z0UxhmI+zCmt3f3NtlOaPh3vUdWLBbYGwIhAPP3u/lr+zqxE7oK0f/1peHopmC/zueRGhq4Qq2SLxkk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLIcaCRA9TVsSAnZWagAASB0P/3O7InbC4WNhLpVq3Cp2\noqUa3PTOpwBJ9/DBhQNMsh2RfeanH5wMONF/GJGseNTT/cPlVVggeOFEryOE\npJMHoJgNgUouRVEz7aDmfNYFQJ0nlyU2mUMWLtMy8BeHK+Q+Liyb7GGjtSDb\nlRNqpJMNzFsN1/wqresqmYr2BeOB8Ye3+pO9k39ISU9oN5RQ6+VmXgf9eFcs\n7yHHQcZG2EaNvW/GDsUSLdJqgD56+xZ3TUUuyhlbPHRxwOCdHk3za4xB+AAe\nGVhxT3jSvO6XORoRi12smeprUymjCrSczmB+1H4m0qyCEiTg7xNzCw/4CLZu\nRv0wx3r3EigmL/eoJyxnpHjmEGK42j421OiHcZSWxY2R8KAdF0rPMTbnCzgj\nuaA5WPIQzDqiHAo3ermOCBY1/rMKJFsB6c9onY9ZPu6sYNtkkcVYcci01yuk\nRz20TydJVTbkWNkWEqyyRuDuVdsNfw3yDnbIomh9+WZxDkXgcybV6LkcJg0X\nU6q/SwxTtshu3pIbCu2iPIuKTWhu4HHhExTO6Y7bdPyeRSjs9mSr6viOgh0L\nMzHBdmnDRuivH1bBjZbthmpOZaGW0Hpd8BUg1ijaKuTmVTOWPAJAmmH6dkTi\nDPp3Y6c6IvpHYxamvry5r0QUnMOAuBC4QjobGgEPFVVx2aLQtFArQVG1Ou4h\n0S2I\r\n=dCiK\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"3363a6ead1437d646dec8eb21cb2d5c5323e8986","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.96a640534.0","@material/theme":"8.0.0-canary.96a640534.0","@material/feature-targeting":"8.0.0-canary.96a640534.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.96a640534.0_1596753690520_0.022117014624890796","host":"s3://npm-registry-packages"}},"8.0.0-canary.9f9aac825.0":{"name":"@material/shape","version":"8.0.0-canary.9f9aac825.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.9f9aac825.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"16849f8c0d572a8b4600cdd244aeeb9c55024f65","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.9f9aac825.0.tgz","fileCount":14,"integrity":"sha512-FxeF0nSLOgL0joZl+PkKbIy1UYhilIB7CdWnCA5ZvTAOkiX4/DcjaS3cqvcN8FQgj0/SZxZM9ce/7BDQB5szvQ==","signatures":[{"sig":"MEYCIQDQENHUCr5vBkVnKqrcFLazbTg2PleLh4t8o/aOk2GfiQIhAIaRl5uC//hE+3WKK5H+ua0HL9adByFRJSaxDLl3rbr9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLb7GCRA9TVsSAnZWagAAD+MP+wdsEzGb8YvGz+yEBTS5\nygWUNZCbAaX2AnQ/OArbP9TGB+V/uRaQu9X++8jRlTe3MDxB68Fwk2QZKC1d\nibCspd43+Hn/jle93xGJ1Y0euirvkYm3gltljouEyMG1qwCHtaQYtAwN7fLk\n2KQLnNUy9GdlyVGyk1ajGQvo7PqSerfh8S2wjPaCHi1oV3ez5S4Ed+Q0Lm1j\nvz52F219hJQKSABtWgGxRolk9TLmsSgacQKNcfD0QFvCMXlXCNfmrM37ijtb\nyVXKyjmOuokvgwunKP129NlQ52keCzOsGALor7LRPP+aJ03risPwMSFVZNOq\nPK0VKKZ76PP/4qkhH7zz2B2SGm1+W9jIQePvQJV8t3ThoRsKrCE1rVyPfQ2z\nldxe63sWQosK6luv3Uh9T8nBjb1mPYQhaoYpCi2FM5Mf55B7hTy54QIFNkKA\nbGgAMWeI7zBWCZkDGR+auEdIsv+EwVi3yLbaYj4sGR6r4j0h5ekmCAK7njfY\ngGSXJM/omBT1vRLNGYq5QIqYWDejjPhqGM68fgXvlmeYka7JYX18t39BGwHw\nwgP6J2uL1Y6mZ468gwL/LhV3tSWS7y17575rHdbOVsJ5PQMfL3CxWhPoQ0H7\nplg4NIpLDNJcB3bmmwvbRvrbazm+QZes54i7Bb/G6zWUIud+4Z8N5iGoCqMP\nUMZ/\r\n=fIkb\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"b417a722353dd60a63448761d24a06d325b83f7c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.9f9aac825.0","@material/theme":"8.0.0-canary.9f9aac825.0","@material/feature-targeting":"8.0.0-canary.9f9aac825.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.9f9aac825.0_1596833477770_0.36515298272283947","host":"s3://npm-registry-packages"}},"8.0.0-canary.fc65fd00b.0":{"name":"@material/shape","version":"8.0.0-canary.fc65fd00b.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.fc65fd00b.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c063a095f04ef30af5a30935d5e4a7907c7b1b1c","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.fc65fd00b.0.tgz","fileCount":14,"integrity":"sha512-K+RyK7SQJ2Pp5EovW/e6YkR07qEq/Cx9QHuqzvNA3XcbzfllcPnTsVc0L1b4KMakxFe/OVGgFpJd97HLyk8F7w==","signatures":[{"sig":"MEUCIQDNCGBswJqDcsNRuNkQfauW/7zBVIiAae0/PxocwR3aHAIgTifpOgge3RxukJEaHyJLj+pBi3u2yVvuvk9nJ+lDwAc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMWWxCRA9TVsSAnZWagAArT4P/1rGxT+tJGJmlUEzThqC\n16VGfiSNpr046qf8J4pi28upD1vITxdI+bNJRD7vBHjMwzSSYpA32OvW4+Fn\nMtgTA+0RtrBriCJGytzFrR3eT0IK58FKTPtZvdEqb8q+AXmFXNfBxXUnmFGJ\n5W6VXtV35Blqlhc576ApUb63rwEmh11MHG6mPm94R8CVfFLjIFtkxRpwRSyh\nyvtGeP0GuRjewrGMa4GCrzMV5O2bUa334RjSNjr2oleWq7rCE+YXTnLYoG+B\neiQ2V8XewN45EjwH+TRuPwF22NzpWPLaYxlrnhFQM1/Zad13l0rz9yscENft\n8ByuEVCd8dVH3w2StO19gXS1aCA3tlN+hBqJmn23Ov2j7QGQHBCy7r+4kU2K\n80HB2aksoKiG9c2R6DmiCmDnzM4qzCtjD9WEO8zuDAKe0r6tQNfb+3X7GRjs\njH6WFWBMERQdtGqT3eV7ANUgzSSADqLfJ1Pk2Ow52SHyL1UHPRP0BAMhhz6s\nwNCGY/o2FzPmDy7QfZ7aNJizr+Qfd931TQ12kXRVvQGR4+Ct+hGd3aeVC1S1\nX8Zdg+L4SF+iRE/QUiVldaeToN9MR8MtmqOkjXHz0ztmglKwmJ3TYQ7v/M7q\n1Xtjfw6ohfruDAjaOx2yzD6w48uKMBhb7SQ+dnTXj2hIAK66f/0cptgsVFoG\nsoke\r\n=EqeE\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"fa39d9d1e753796086537bc71b6fa2d2aa21a3c5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.fc65fd00b.0","@material/theme":"8.0.0-canary.fc65fd00b.0","@material/feature-targeting":"8.0.0-canary.fc65fd00b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.fc65fd00b.0_1597072816589_0.6544664817587291","host":"s3://npm-registry-packages"}},"8.0.0-canary.02e372c5f.0":{"name":"@material/shape","version":"8.0.0-canary.02e372c5f.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.02e372c5f.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"95ee1bc37b798cb0f7d344267c70ac1c408b33ee","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.02e372c5f.0.tgz","fileCount":14,"integrity":"sha512-X+uHGeIZl+xwmRBVfI3s5xUBuukPI7Ta00fXCInwfwK3KsSsNi0C9l1L6BRtk8jAMWvfkLsPjEoy7Zb5zemHZQ==","signatures":[{"sig":"MEUCIQCYA8Dc3jYq/wnRuKgBHPjfA1/9rFkYED9D5Hg7gO+gBQIgQhbo/Tqb4U6REVgoEQvCuDmkiyRQTu20TbAZJpw1kQg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMWxaCRA9TVsSAnZWagAAEVwP/287Kw5n696lOLGI/oXP\nj1ts5vGpWaXIQ4PIG2QlgAJJs53zIsQN7KpREIBD5YNEZSzlBizpD8b1TTjZ\nrGZYUWV0yRp/0M2ewC0hBbdrcrbGl2Kscz+VBHFLVN+8LuprOI1qqbsT+7dG\nkmNSuQKrDALVrgdsGalBh2g2uyLoFe0H4Sm/ZAyhXU+WaUH3WkdEY501ULmt\nxPoLyoYBC+HxsAD4GurJ6V5s8rMS6CptzB6nUCCictw0JCGpG1EtpnTDNrtU\nUQyfbKoSAQ+nLF/gFvVd9SoFgFCafG6Y29YPRZLRqPxg6t/WRi/8rtxn398y\n/ZagkLl7fWEv0XT0m6vTi6oNrAgIowHqtmnRnx4KGuvsvOhTT1EWpybATJPJ\nlKad/v8+DXQWR32AOiYNReJjecS+1XQmhP7gSqkCvHBInAeFu8X9rrYgsy/v\nKPAaQElU61fdzAvdMUyjUeDGYCj780QdjJV6naSAThM8d23w2Aquih61PYwQ\n7mwwfcb0auMHT0lbEb9OmsuEPaQ+KHd08V+B6FUDpglGEkoTStjpCUO4aDg8\nynpaiKmLIeEGGbg1UE3X/svUHcIcabYxSeyTvYEanxgXrodEsPsIuJ9+uFUb\n+qEngbQgGanYMQdlXIHZ8mI1yr+Rg02yLSijfOLUQhefXcCnX6lINn93tmmq\nFDbZ\r\n=rcUo\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"b765f8699fe12742bc2032a8df7cc23807ec94b9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.02e372c5f.0","@material/theme":"8.0.0-canary.02e372c5f.0","@material/feature-targeting":"8.0.0-canary.02e372c5f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.02e372c5f.0_1597074522023_0.264020963385591","host":"s3://npm-registry-packages"}},"8.0.0-canary.66669e3b6.0":{"name":"@material/shape","version":"8.0.0-canary.66669e3b6.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.66669e3b6.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"39b995967cd05a27d545df68d9935dc7b56e8c54","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.66669e3b6.0.tgz","fileCount":14,"integrity":"sha512-1mL2/4Fy0YcNiVIKS4olo86ODGmG8ukzcfMPRmDYn/FvMdfp5mgyoZ6ySqjB6jyhAzP9wnWXHKFE077LDff91w==","signatures":[{"sig":"MEUCIHjiIzGyHkEJuATCKb4W0hyH9XUJaV7NBZfkZOoSqR5tAiEAxPgbxedNaYL8mwPUaZNbUuQQB4OWMo9lo4ccgapIkMo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMW0+CRA9TVsSAnZWagAAlLQQAIbAlskLNds7sCdo5UbN\nLesspByeDwOByutzeLkZgft65dhrUu/10HHpVAjuyqs6ylEAEiRTsXHd6WoT\nLF86XcegpxN37oRF7riNF9o5axtMZr+l92dPffI/YBD7ONUSSNMdoKtMW6LB\nkJ9CbEM9yT42wSQ7IEMMYe3hOOTRhQhnN0HnuMqsUw5mOoTVlFhm29lyOptq\n/UTbTYFMRnM5U/jR26o8ZQtxdhyUO5kx524FALRtBdRvmFuBmBLThPlUDUhl\noRriTIxPjIl2pAW2V4xnJXpbe6M/hLplhO7f7k7N6gBckUjXdylvM0Fg857R\nS1SfrYJqq41TnJfeC53ijsMD55lUeC1HPZt7M1kKEzd7tvvPmMTv9Wz42wwo\nZoPP0CG9ZzDAQ5QNHXmS3D1RHyszyQfpiXWfdiUDWGiMcW42nnj2GhE7jJh6\nYuymb3OEWPYKU+dG0EZVsrgZUlzdD7CQKTTexmAt2AUw+xCDWToTtpUNVzUN\nPorFqQ06DoQ4ZXiIoZSyqPmxS8k7mjZk3eICCA6iOJxhAyRZfepOxwMWDrnt\nj+R2IJ+0aRBQAh5W3yoWdiWfl/EB8R6ZcfRjaQvrwYB9AOzqJwcI3IyeOVL2\n5r+HV5+punFFkJMyYx10YmhRyXhx4bj1aOAR+O2rHkJHYB6P+gDFOLCCF8s0\nIL7V\r\n=f/A4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"96a6a7d492075777ad5f7692328b3bd50153bd16","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.66669e3b6.0","@material/theme":"8.0.0-canary.66669e3b6.0","@material/feature-targeting":"8.0.0-canary.66669e3b6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.66669e3b6.0_1597074749764_0.35017183641573535","host":"s3://npm-registry-packages"}},"8.0.0-canary.6d1ea9761.0":{"name":"@material/shape","version":"8.0.0-canary.6d1ea9761.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.6d1ea9761.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bed32acd30f0fd1857ec0ef22a5f9c22659b4598","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.6d1ea9761.0.tgz","fileCount":14,"integrity":"sha512-K9x14aHzD0He0Kln5N1AP+r4cdIp5NiKjEOcRziQGlRQKRyz2UPMXcs1RRRQG2+L57FsPodq2HJoGpp0bzqbDg==","signatures":[{"sig":"MEYCIQCYQ3WtJuESMy4pN0uFF0lZIFKLLje8MT//bd+mzoenIwIhAK5EcOsUYOESFkwMAF6dKJSMUY0aLEaPIh7Wq5pjzkxJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMqueCRA9TVsSAnZWagAADDEP/1IiAMS99n+sId0qlUCk\nK4/sVNlscVAq1ZgMbseWVFmb8TJkCUakrxkqzxwZyUHBip1hP1GbPhjQAOxT\nN2NILvsfxjK+ut8Hqs8iDgXVefoVHcA23qrethEqlTbeNEQQaK9mWD1wK9Ql\nmb5WRTC0C4U+ZXIJTIq/g8a4Jy1QNNfA5D4EEzSdlG2mMt5zD2FxnHyUeg9N\nS9t8pL1EU/LHCjlmW3LCFuCt9FAhogkZP92mSzWMS9OV+CnnAUPEpU/+a+y3\nLY440W1mUDdTPdNgCjyDKQ/xhfdfNvpoFeJHc8OT2Yf2YDCzhzIkx2FEFNGh\nJOZh2iDNkA8ZCBUXhYrQY6d7u59VPuzhbSo6IM6SmIXdNrGpbK3wHBumrL0A\n+5mCyHbLDDcMIodzDW4hBdIVwYF4rQDdFqeD+/DKOhk4ds1VHxCaUiEoQpz1\nUTS3YPo17nkxEfGpJW1Qa2mTTJkde2LkBk99/q//VtDM7/bOEDox8rC5jf1b\nPzG6LRVexOROUCcwti2bMJ0y4Z0arvhr1x2pKyhQvRkYo+LXNHwB/ajNyGSN\n+o3twvQemw4eyiGPspJt+gBQIq7/0NIg5nkrrySYUb3s732saeQYiljLEVju\nMMXYa2PXxE71aWVKdFM45P11ZkydiC0o9ahOKNK8SAK87p63rMBk/34iUGEW\nM1Oe\r\n=mT/f\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"2539ff1cdb03aaa0365880e59b2705e6f6ff4229","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.6d1ea9761.0","@material/theme":"8.0.0-canary.6d1ea9761.0","@material/feature-targeting":"8.0.0-canary.6d1ea9761.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.6d1ea9761.0_1597156253910_0.8224056843689354","host":"s3://npm-registry-packages"}},"8.0.0-canary.79414bf9f.0":{"name":"@material/shape","version":"8.0.0-canary.79414bf9f.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.79414bf9f.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c040fa2ded742d40c1ef6775ed7dbc4ed689ef47","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.79414bf9f.0.tgz","fileCount":14,"integrity":"sha512-qkVSu1JonD+gP8QwpRObSVRY8U/6q97wYjmJMzbQTFRtm7GiczSR0OI0qiJbfz0Z5b/9J9FnAGSqEb3nh1jAgg==","signatures":[{"sig":"MEYCIQD5HnscZOEPy7nLyd3SmfY+MvpoHLtFWbq7xCFhVunCpwIhANrr467PE3gELaGlVqE4PkIzuQGWvtIUvA6jbRUCiWhC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMusgCRA9TVsSAnZWagAAc6oP/3YmErphh2XkSUQGp1+B\n8LGLfxH+zf+btRHQvr4H79IqhQ6ct3eM3L2ouLUUR2/YdRTeMehI8jgfm5sP\n9zPDwhQrNRnHSnkOTzahqkA8OVPrTcYK4ZrNPqz+iKRu9RCVqE2GVXKEfIMP\nw8GtmaqpSo9u4w6n8FN3soRzrURIOUtDFi9Xy9Tq7QY08VRVmskv4XruMoR4\nwm495FhmkcoDAxejJxP8x4odwfMynRRb3b3VZWSVBe6zSFZ6dB06rFanNadu\nRPdYoZfNnYBgyzjC+m/9o7qA6CQJBFeFbpIWWpW2w4FfvoRFWXhxx1UIlEdG\nSlShDqgrM2binCIf2b3rYrpsjp3j1UYeP6zJc7PbTaKx8J7lvfaX6OejcgyS\ncsSiUjK84C39yICb+1o6wlxTrOGyEZCO5YpLEE+RwrL3IRGCvFCIdwq7FUsf\nELnfxg9QvOvinIBQxyRrsQ8owWANfxha2ydlEGZG2B3mlzgyk1z+BY9YP26Y\ngczrtMRHz3e/8or19hEW8B7tpnb+b9PtNkJ5xx4DyJcq7/qxBIMbo15F6c7T\nxLWzCiyzUzWym6+gHGLcuG0JQqTaxJruT77JT2FO0E8NctLJ2jk1Lo6bm2yZ\nKIcoDJnaryv5gHctk9yJsM3WiRF0R+QjWYz1WQqkduKPmrxcXLEmAqI5MflP\nMkKp\r\n=QOdJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"3101c6ef84c1ef8d9afdb44b6b6b3067c2f5723c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.79414bf9f.0","@material/theme":"8.0.0-canary.79414bf9f.0","@material/feature-targeting":"8.0.0-canary.79414bf9f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.79414bf9f.0_1597172511835_0.7764060580074708","host":"s3://npm-registry-packages"}},"8.0.0-canary.85a5272df.0":{"name":"@material/shape","version":"8.0.0-canary.85a5272df.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.85a5272df.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b068874fa253879c740777b94b39ee274a18c3e5","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.85a5272df.0.tgz","fileCount":14,"integrity":"sha512-Gh21cHuQlbKBxNs5TisXvpsL/CI9W+4KAWfrA8Q+mEJfReqJCZOF/OOBPqyzZgqhPgyhi1ere/shOv63Nbq8sg==","signatures":[{"sig":"MEUCIAabG4KHHVKq/gz+I0uDkZLqTAMb6L0UYk6DMZxVPx/JAiEA0f9jrWr+YVmkFr6UmCDrgVLM1hgkBAaBxyYMHIYNUAM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMvqkCRA9TVsSAnZWagAAEW4P/RXbrBpNOOHbx6qt3zMv\nmT2A6jIdMChVPYivalxw6OZavy4O8RZjHfjrNj+zab219zyOSY6sZMNLX9G+\n3cTe+yVrVP+RZp4vz3IoZoIiM6usKUr7APS8dsvYFpkCi2MZ/x2gJVpQ4XRe\nf7OiS62WkjNMK8mpXDKt9EDffNexpqMFfDGPZTeXZU6XC38DrI1VIzvMhpAT\nBW4uEvyKZAICoavSqTeuFBkfPSdNs4HovDih7gau/e5O459uB+NZOabrwq8i\n5FrS9uiY7mhJh3gQl3msU3Xd8gX8SIuUsOJFxUA0nGJ5dOna68LS9q78t1G6\nidjQIetzEAdBfmvtuaujmOMYHpFfLkFfSlwCLMJDoWiEMQuCLElcg86APS0T\ntHv3ZeK9iioNhnS4pXEq1xYKUZc7XVR+KD6z860J5SBCgYyAi1eCedumxLcy\n8PRWx4P2AzxlnB+j1s/uD/fT/Q2sWlDgXmnxCEPi2ZmHp0riS08pS6B1jDAV\n4a0/gkqd+4NOna6lR9Z3HYUSbOjVfAT5itLJJMmM7aXIasWLU+5T1bwebUuT\nDWOHDEi7lK818IjCrV0xsqsrtFlKjK+VvfE4wYUH1O164i24Z4O/AKJJU14P\nLLxDMMW8HECV5l+eLwQkqtcTETX0Yj19tl6E7ZkbVjOhJgcj4QN9vxrN27hV\n+WW/\r\n=zPGx\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"070016d39c8d62feb1148d71182053d37bc35fc6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.85a5272df.0","@material/theme":"8.0.0-canary.85a5272df.0","@material/feature-targeting":"8.0.0-canary.85a5272df.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.85a5272df.0_1597176483923_0.2111855951484658","host":"s3://npm-registry-packages"}},"8.0.0-canary.fda053eb8.0":{"name":"@material/shape","version":"8.0.0-canary.fda053eb8.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.fda053eb8.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"624e02669f72be6005febb6a70d74d4a168619c3","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.fda053eb8.0.tgz","fileCount":14,"integrity":"sha512-QWlTFd7pH+eA8oeE4tf4TLl92FgkwFneevBmFZ13Z3d5r9SPfeksukEacunC1hjTRxdBt87XqwipwHgPcarPIw==","signatures":[{"sig":"MEUCIG+wnTTsBkNsdDWGU7DGT8ACL5qJ9f5ubCtnrsnAEky/AiEAg1UTneMJjY5QjeqI8IxjI21pz0Vymh3AtIcP5zZUALU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNEszCRA9TVsSAnZWagAA7X0QAIUQKwBuul7nvI8BdQJD\nqTwovmDdSnjt5SB/vR9eHXeivn4kK69MVEYbHCAWb24LGS4BlHtRKsy1yfSK\nJb0eZZ+hGROknaaEQ2iPoPqazTFvuAqfAoVM5JqPw+6b1wNfV1AKzOr4hO0F\n5f7fSUdA/p32bq0O/xo9f5l/LeqepKp06DvIwlj6YFZHJ+9g/FW0ERD+wO6W\nAGlkdkg5evfqY6LHdBRA0sK4oCVf1bQL+lq7gdzd55Rt0wL/mRkGgiRhanlX\nUY8fBhCE0MBIC80Jn86o7DQJ4V2cJsoEyNBCNWP0NaUM6jd9IWvCBv7Fqx5Z\ngHQfmfkAP+LKmSXoyTywxEKqnWoABmh8YfnhsHao98nKwklnISdLNlW5WPJe\nP3HP+tJPD2/iFNEZZULup1/0tv/PgQmyLptMMnky+13EqBnumTT8w0Gy1UgJ\nFPuaRXe2/2PvYcvKgLpWhjPylh6FxvZdXfVRWsQSdebSFpxqkiKKKIeM6b3J\nWJoAiNh+QdR8yFkLfcruPU3Dd2Exedrnh8qcp5c6u5I7GQhnqpsHq9cRZlW+\n/enINpm0IoTrMICHEaAjRGhIZf8pDY/YVuzSs3mzdefgEoKLp9OLY3biU8Ad\n39xe9w/3Ptd+CKUnD/zntkLucO0lTxBmznAeR1iKjFc7wwXjakQsVJBM4uef\nBQSx\r\n=WdfG\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"b92b594784940e2fbd248c33d60198f7f2e0ff71","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.fda053eb8.0","@material/theme":"8.0.0-canary.fda053eb8.0","@material/feature-targeting":"8.0.0-canary.fda053eb8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.fda053eb8.0_1597262642563_0.6738597020292458","host":"s3://npm-registry-packages"}},"8.0.0-canary.760873445.0":{"name":"@material/shape","version":"8.0.0-canary.760873445.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.760873445.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"570c47415e45e8e7d3af9426fc0baed9ed569998","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.760873445.0.tgz","fileCount":14,"integrity":"sha512-JzG8OHjmre5OsItryZfl1NaNpTmXCiASg+UU592ezCGv4Sjc1v/+qy1eXq+4CyGkfp2JijIPd4pMtlcXvBhP8Q==","signatures":[{"sig":"MEUCIEiw38eVhWD8u1lBRxTzNYoNCcJpQeEyE8guN6V2Ub63AiEAllFZgK5q+7ceglHNG1IF5oZK7ME+4PpEpdTX7MK49Vc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNGJuCRA9TVsSAnZWagAACI4QAJQ3JAYj5cHiotnw8fWs\n+68qKxpYVEbnVUH9kfBSva2OoUQhg7VJfqg5s7BXCjUu4luR1DIG9q8SFyHR\nhXDmBYdWuF2oYUSUoqC60JKrL17GFMFwrXxhViqzxBwoIR9eX9vxeIVOn9Tk\nT+E/v+CmdC0iDnTvRAfbqzSkDjnFHvyWR7H3hhj5hs77GluxJlNPYHaXWCPT\n6rhi1aaWH70PG4dF4TLXoxC3Est5Pj8HmYwIba4QJy12lAE2LVVf8iBMGkZ5\nWNkx+9Ey2msj/oZupZWF4gPyfcNoLk99K9TVGTSC4XmmGAb0SBIMFfsxSnW0\nh1m1Q5zUA7RUds4vlZOvV/L5BVCN8VF4cmbRK6kjms9BMKCAiJD13OevXgrn\nQqRqa0NLhsc1bM3Rv/oaXD5gJuQKfclezEoWd+G77cSrlkF2ynlC7aFdSisH\nkQsUNXVf2brU3GzsqajwAPB8tM68dxP+z7tITPZSZ+Y9bfGJTfaAeUtdYo0L\nVaDqoKtA1vHeMWs/PRju8gGkrKctZWmUbh9mKyabZ0AMv0ojhqXt57WDkmui\nC4CLZrwJhR8AaJ09tO/ubIA9c4AZMBQqLFsGLZXaa8P2Ti43VOymrSRHBdEb\nq7UapdLLBWqW031hdB8v4Kk24DRQL5jOWKbyyymLxSuZvp8ORsBVYoElayWt\nnndy\r\n=G/xl\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"a830629b92051950e9e15bdd288ad87238b7103e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.760873445.0","@material/theme":"8.0.0-canary.760873445.0","@material/feature-targeting":"8.0.0-canary.760873445.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.760873445.0_1597268589979_0.9206405495217433","host":"s3://npm-registry-packages"}},"8.0.0-canary.2f4711a30.0":{"name":"@material/shape","version":"8.0.0-canary.2f4711a30.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.2f4711a30.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a99ffa019112cd78d735f77c998a7a54829527c3","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.2f4711a30.0.tgz","fileCount":14,"integrity":"sha512-s3Md2BU9Uk6hRCBw3f5fe2AzYSt+oIZMMXKEeoVu4fCTdjxanH3Ea7qwJZxV+rqBkGTH3hZ/9X8SUuRTrs9+7A==","signatures":[{"sig":"MEYCIQCI/poxs8TlizcJ3yHlS01D3rJVvnRj+UjoRrMs7dzxawIhAKNUyrq9hiNll1lmcV39fly5hnxo+FNUOloBMvJYRfhC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNGTDCRA9TVsSAnZWagAAdwQP/i6Jmt/2JFxRIBVKw+kM\n+DB8ay6SbXDcN5WjOjHBfwxzWdjEOU3IOeBAnf0DHUT5c125fWmkE3Emcgb6\nLoMHdICmqP12/Ee0asRDOI4+0M+ATQqIGeEj7Bh0FziRag0Q/GuBHnckbvED\nVO8Pq0b89rntAF+9+aEQ9uZdk0CpXSgER2nk5IE5Hc7Ea3ekPvq9iL6cqu5G\nPC15J1FszAzW/2zAl6HsTTVPfTJwpgT2dJRXlzD4c/kAZJGFgh4g9g3rLIsu\nhH3MZ48uW+zc2xU7Mi72JPFG2Akcxb2pg/IZKF+QMCeEDIIYiqQ2Wvw3Fuwo\nd6Zrnjx5PKXsNr7qC6OKJjxfKq+IxKohRZ7zAxI223iuHPte7/5WBw1e4p/A\nWFyhRXyROyAvLbDwHVE01o0eUoL4GHbJz5rTactMo1md9fNzoXMMtvv5POul\nYDyeT9ErMkK68jzS1o90awwS0UN5eDyJDs0XWUDW6QRi8hMF0NwPnpFFR25k\nEc2nlvcC9b8pyLtJXotiCXE3WNQSS6mhykc+gOOMdR8dok+rLegOpu4z2bUU\nfiGrNSJm5XoHk5tkXcdnb4tjqj6tjOZzV0KNyoazFzGBkifcwWpXbCoPBX3F\no2LNcfMe7k5dl+7F9NvN7c7qKJ4tpxYXBTrGgIB7OBqpozz0MU1TUP0BW8lF\n1i5d\r\n=Hltj\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"1347e5c15ba848f3525dcbd08fd0b11061e94116","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.2f4711a30.0","@material/theme":"8.0.0-canary.2f4711a30.0","@material/feature-targeting":"8.0.0-canary.2f4711a30.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.2f4711a30.0_1597269186906_0.33015272824151487","host":"s3://npm-registry-packages"}},"8.0.0-canary.2d72f3659.0":{"name":"@material/shape","version":"8.0.0-canary.2d72f3659.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.2d72f3659.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6778b0fe123af0e2d8ff2a3345416e88254ae4c4","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.2d72f3659.0.tgz","fileCount":14,"integrity":"sha512-Z4ST47fDEAMWKqKr5YwtbAh5eV4S/Q0mI10zKgt/A15s15euFV3Shq1Zv37HCM9QVb76/W7vH4Tuuc5qL39I3w==","signatures":[{"sig":"MEQCIFySnRWLBR7fzxEtdOhhMIOomUoHliJmPJupZu7bizxmAiAJSRGLNafngwFBmfOcEo3ttnGSpkAIyHH2dzWUtM8auw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNGaOCRA9TVsSAnZWagAASkMP/3C7B05/s1OECv7IEp3x\n+y8E/Ac5LNWo7bctiC/UUbrcE5+19Zsjx76V4+ryNfiQmSzPQ+p4mBbxCtD0\nyeeBYCHiXG6TMTf7mzszkFjK2V2MYzMXuGcRDQ6lUB3C2FtzAajXdDsJysL7\niF2hgJ66OYmwZE3LF3b/RTkXm5evx5ahL1W5pKWpH1gzKyBIcSkTQKgJbsC2\n45DSavjeJ74yZhYjlyoxDyTjHfjLPGkFz2pbnawVg+0C1zXTWXaMDHwlkrjJ\nJQUfJ4y94wM/zWAMyMxr1il/PJ2cNuzBXV1bcXtvkDdIrYZN0gW47L/er7Fu\nNWCRiRiA60QvISrWBXSbVKshbEEzvYHgyKMAqwoVntdyZLOMAhOtKsgjsf09\nvTu+3R0yhzCfyqPMKMtBCL2l7VApi9Q/2mspXL2M6XYGzKyPpKGQJ/BF6pfS\nf8DrCTxNH9Yh9ymRBaMS6G8jtooQ01EKTlCXQIrkigNmvGeiqlUgYy/Hc/eQ\ntucCVqh6CrsPd6gPWqsC79HFNWtgHIHMNXdtCEzRI5f8NolnwJDBsyHXxSbQ\nQcQmVhK49rOEoa0Me0JODdoy9lFSKdEQb1UJoDNMlBFcy5Rfw+g+HlQOyIjn\nDVFgzMoAG867T5w5qfB4w6T09LvpvuL1yBcJx32tXDgZ0kix+L39c8W3HcwY\n/l9M\r\n=OGiu\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"de40c24a4d850a3bd4269dcebba821d972e01c19","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.2d72f3659.0","@material/theme":"8.0.0-canary.2d72f3659.0","@material/feature-targeting":"8.0.0-canary.2d72f3659.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.2d72f3659.0_1597269645840_0.7374693819739402","host":"s3://npm-registry-packages"}},"8.0.0-canary.1fee70a5e.0":{"name":"@material/shape","version":"8.0.0-canary.1fee70a5e.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.1fee70a5e.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6e038f32d2f3e3c2c3e4925fff0a602d3b76b5fe","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.1fee70a5e.0.tgz","fileCount":14,"integrity":"sha512-qx2aTre1OhPpR1qOzTNEKXsGBjLCkG7F9ia1vsySgmbHG2G/RiQnZYYl2KmJ7uDYL+sgWArGbMbUHYWKFR07HQ==","signatures":[{"sig":"MEUCICl9OIyb/naFZGOqyPAQRDCeRcrUf51ECziqds2crxtQAiEA2WbgVSHdkwr34SSsDtrNIq75Yq0KhSrw7XuRpA+V1so=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNHsjCRA9TVsSAnZWagAAf/wP/3X2ab7noJU+jU3c4tbI\ncjLoLU9JNyRdg9fBDw44KiLPTIDeJPXf2+lnEaERf9KT1qWSs3czgjtAz/Ey\nYUvjeHIv7pRtyI/lKWJVqUblqkaHGDmH5kpMFqAD3knw71Ujhctgnd8j3JpQ\nzC95Q1CHQsIcGBdgze0TvVRasUYCm9sj5jFRLHQ8i3v4zHfgt0nkr4FAzK10\nqjt7v0jDFzq4zx/OxuDN4atmu00GtLZGNwSlI6Ml/pIvtzBPvuFcGpcpWgo4\n8U1LhA5KTSnVjzrxaEcOEEdXYraVeIrnOyejeOCy8cTaPiD+qipa94/vDfdr\nE6+U1n7wyEwYbeVxjUapUzHGeY+lqdWXI8WSm6B0V6OG5XJz1JKFCtfvvJ51\nhYgIr8oRmxZKe4XmwXlYemfKPp2rTUPkzz3eaE2La1ryOBKNUAKPkuErIYv+\nIsjXqc75mA1rgfo/nGDhVsnF7d/+nhNSxLKvthVvLcMyeGQjrE7LdmPgr6Mz\n6TdcJn8YwsJ8DxDk5MtxkDhAmG+rSwbtN0FvJ8p74gMi+C3KmEijYgPSoWvu\nnzyaf3SJJupmk9chBg3vzEDq98nZ9enM+QHTFHtqRdmGBBhJ0YUnwqh7tsKO\n2FuJFJlSI92NLJVeLrdUrXv1EB1TLb7iIER5ZUdn6SDffdVaLutgpy6aIfms\nnUle\r\n=NVAP\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"2e5eed4b73395e9cae47d93ed6f34f0dc0467c28","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.1fee70a5e.0","@material/theme":"8.0.0-canary.1fee70a5e.0","@material/feature-targeting":"8.0.0-canary.1fee70a5e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.1fee70a5e.0_1597274914678_0.5052397179302497","host":"s3://npm-registry-packages"}},"8.0.0-canary.023f3fa34.0":{"name":"@material/shape","version":"8.0.0-canary.023f3fa34.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.023f3fa34.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a5784e575099e770a47e3e424698b2635ea36269","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.023f3fa34.0.tgz","fileCount":14,"integrity":"sha512-FwOlKPuDZd3l88hoHa08RLh/9dvrK0qCXin88gCp2hdC3WC4DkZ4xbOuBNnJMTPb+SzfMXHmPZmwC7PBiuth9g==","signatures":[{"sig":"MEUCIDgYw5f/Dm3Lm7vWPMSF8Z2Dsyv5mPjw5jLcBzoG1csCAiEA6R48PZWD+fCw9tXnCpIkjwkdEI4ygPozkRZ/vureyjg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNJNzCRA9TVsSAnZWagAA7WkQAJ0ioN7VGlXriCA/w0NG\n6BgoEoBF8185c1qBba/ntzSIgfQSY4Bj3DKY8tPc/mhluLfTx7KidONO9cBF\nkCSB29QAErN6tQHGhSXAeY3kymKp74IjGyfNleKw4hVM7h269q+XkijQhqwj\n91jrF9oRubutHzfnEyKhnRSXfhLkUqpdePChEur0OFkWIbH+Ulsp3+yrnb2B\nyEr7T9fuBM9xF8X06291Hecg2YXHBVtJ09gSb2ziWlP3/IeBgr/wafhKDiiY\ntgBtbPRemZObut4Of4Io4hpXaVvgc5FAeZAgcpSQ+0kneP8EHY4MhKbpL7CB\nXVcuFBYqAA05VOhzu/5MZkbijcPfTDO7Tup8mxrkNKrxxm97nJpHBxb30YMV\naysmWQxM1oz+i1IPf3TK7I/jwTCd46CkKbe6LhCDKEt2lH6oWsexGeU/pkXM\nOGsPYimfDsJMWGwqn99js8D48abl4Ka49t8OcXLDDJty/nFa2yJWSkRcebvF\nRAgviKYIOrueYlS2ZiLngWz/GRlF8R9BNewLcqQ4iSZ9tFABoh97io/OLye9\nzDQO3NPWvv1mWoAEH/ohiXOT8pjCO2aSWWcKvifiP7h5myOWTyz5wSRx2KhW\nxFjoBLqCYoL5qqB/4u+tPJbQKdIsAVxLUzcZBNr/Me5mGa8lEs8cy+fHTe9n\nvUdT\r\n=4gjX\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"1a6538d0b407fd8e7a7de8e39b4ed51bcefc560c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.023f3fa34.0","@material/theme":"8.0.0-canary.023f3fa34.0","@material/feature-targeting":"8.0.0-canary.023f3fa34.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.023f3fa34.0_1597281139138_0.913601552391581","host":"s3://npm-registry-packages"}},"8.0.0-canary.80f3a9e5d.0":{"name":"@material/shape","version":"8.0.0-canary.80f3a9e5d.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.80f3a9e5d.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fef0b5a9deea4900085bd755bd1a625d3718d2a4","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.80f3a9e5d.0.tgz","fileCount":14,"integrity":"sha512-JgGsJgh7JN/QqgfdI3PKSsrwsoD8wmAJkTZiE8JLBv1X3P+cgaDB1XSn2LlKxrL0tajDbgvalZSk1cMnWafiAw==","signatures":[{"sig":"MEUCIGFOSngXhf+O30DyeoyhOIKEjZW9ioR0KQZn4sz2ZpaEAiEA3pnV9I7L+k9RgsNzM00X5gSH8g+lHtUSt3txG7g35Us=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNJdgCRA9TVsSAnZWagAAA2wP/3JlChrGYzMeUnWb/iy3\nOYtDUTOQwb83vX+dPV7imKFzpRcB8hBBf2AKUs23ytbExD5wIhLGGyBTnSsq\nyeDJUDcNWB9XIZ4FaibpUGAgSptq22gWD1sKWabNLjAlb5NeIoA+XjT7Vhgv\nvau7JXz8/PGCFx3PdC1vf2TZJCfrPZljhK5rtKe9GlsLypfljNsJjdU7PaD3\noP1tbCFFggKmduY/kDVnT9kUq7GQQkpD2qhP4DsBE2zk70/p1Jc0JLa95zYw\n2BWX9zwSmp2LaeIOw3BIqgNSMVhErj9pdDISjo6D5fwRTvhm4tYoIWzZ1k/L\n1SIGA9onlwWzHjhdE59uB/oaqsfkkM/sv6LLsSxilJXvSOu2jpq00KcjMeAG\nG0Neu7Vpqfmsd3tBzerHTd8yrvDk1+vlKhHF6OZOHiMAG46b4TAQuLm+6z3L\nI4oo06ZzUNzb3Ls9mijjvQU+Czal+nDhWP+XA3QXatIAoPSJZ8kZdbUct+NX\nA1VH6F3tHzMHcbx6dIKfu0KK5RDs50D9iu2JLbdSbrEW+DdsBvnJJnT4zAHe\nEjBMs44CIMwYXY9dnNFXhrDv6nW+9VvfGS8H7EHyzqTHZ1RG3SDL1iPeVyJh\n3V1xbBwo1BXmiSs54exY8+YUIFa4h4w+O34hcpP89WWLAA170+0d8AgOvlJP\nSzTQ\r\n=g+oJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"e47018f239b51581a67186dcbea3f4167f5ea3f2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.80f3a9e5d.0","@material/theme":"8.0.0-canary.80f3a9e5d.0","@material/feature-targeting":"8.0.0-canary.80f3a9e5d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.80f3a9e5d.0_1597282143467_0.6939390320714198","host":"s3://npm-registry-packages"}},"8.0.0-canary.a1dcfe97c.0":{"name":"@material/shape","version":"8.0.0-canary.a1dcfe97c.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.a1dcfe97c.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f078dc893b761cea4ab1a983565043fabbc7f72e","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.a1dcfe97c.0.tgz","fileCount":14,"integrity":"sha512-19MMX5tp7OKNHWcROGjTTPbnqI+wkG5B4MxUGN9SridHpzdyoLZcogwEwBEe/Ab1oNAP9Yrpu7nC+CM6VbpZqg==","signatures":[{"sig":"MEQCIDDzbe2bEQgWDixWs0eZBAkwvzFSL2eNt6tAygtL7aZKAiAno+pYFrC5n0AMVu5bbuX8OXSWGSKeEbEjjea5jzM0iA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNP6uCRA9TVsSAnZWagAA4xQP/0bUDJi4qKvMsY6UDrdN\njCxgzikTh1sbEpWkZB9ofZNdR8XMrKttZ6z+o+wScDt0YFc4qT5Chud0Wd/D\ndNsJprW4PVZVs/Ejh40/WTosIRU01oTIS92MMGTHB9rSAesBN6dYERdstaBp\n3gqJKqXo/82Kv1GOBIZpdsJo4NVItN7C0aJU6yHP0zu/gFxjnGugK38MyLpT\nPsSRVME1Vs7uiuTdpQ6kdnVqso5lJorQtB5OFXjKqiXX1/JeL+RdcKCZ7e4I\nrO2NQlEuuTlHPitFk9Z+o0sKurRs0vAZV7UdVzToqpoP6tqpTSYXx1zj4yHc\nT6VEdjbQmFGDLwWmbRlG9zuZJfls83O4FZ6TxpSuKRswDiR0ks6fNQjQMlD9\nxUt/ioU6jXQPrlqDkUToG71I6LYy2VZNsPtbs3AyD3pPj3nQwVkNdndINEpP\nhx627TMXWkjA5FWHVKRQAPQ77heqDHGGB3mXoRwJQQWZMX04qYCPMhumpFhu\nj0r8v5cV0GcY1JaTSeFxoUgIMzifrdFjg8nTvT141qeUmURRm0gz1D8yB4Ca\nIx77OtXDpeBGdyYwYrMBCD4eyPWl2Tp87Y2o7MGbQ7tf7c32LtxGUkVtDAj2\nrD00Je8jhD7hbyemeUVl1Ci+MUkEdG8LCsYknWlnZTMshDojUTuzZkCFjrXS\n2gnd\r\n=0P9k\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"8ec1483dd23463f0239974be9a65ec22a6b54715","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.a1dcfe97c.0","@material/theme":"8.0.0-canary.a1dcfe97c.0","@material/feature-targeting":"8.0.0-canary.a1dcfe97c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.a1dcfe97c.0_1597308590387_0.9339888743780533","host":"s3://npm-registry-packages"}},"8.0.0-canary.af332d5be.0":{"name":"@material/shape","version":"8.0.0-canary.af332d5be.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.af332d5be.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3ef82e7cd8de50dce2c97ee7ecc13d0ef3ef918d","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.af332d5be.0.tgz","fileCount":14,"integrity":"sha512-6cCl5TMWAnPn4Ftasx4C8++bbdSxxlIPQQ6gSsj6XxP2kei0YkH1ySizX6gkXeSMrhr1jsIXIOC4s8uBbXSl4Q==","signatures":[{"sig":"MEUCIHpLxjuJkNQmRSVpivlD5SgOJimnvX98qj+74BvgFt9gAiEAtyJCM/1EXl6NeOCwrVdLQ0TmGvSOlv3zS3P0tzHzVzk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNa3aCRA9TVsSAnZWagAAmnwP/2ZlKgN6sGA1ztFsqTcg\n9U56pp7YDEjW3xYfhvasW4XkZhAI9vXWMPVjlefTAG4Ct5vnWi68KjJoFdBP\nNymqH9aIh+M7izLOPL1veT1FFzHQQT3dtjeOHfzkT8OR9eMn4MjpMy4yAATJ\n98j25LXHJaZHoniYp1s/f3BwYKAjUhf1IHxdiFlJa8Q7ZgpVfXWPLSpgTaAV\nVm/6AjY/Kr6XeQCF40XumieE+uBX4gv5BPFY7b7JE2hHWCgQSG8zaZa5RC36\nsYLUSMirFE6lGUEHp1YZ7hDfAGpTwKzcVriFZsdDFiqWSCZ1B9LDkqosCl13\nVyYeK/AFpiqV8nlscKvYhcaH+v7Uhhu3QKdwgonVzY6Wb9vppvcUqj6BIfZE\njDCSwoXLa8cpjmxkFNn1VVVv6nqUChbfWPOb57O0tkQzuOwxCvLpAoazNOZj\nBfrVEwHatz+faSKOXWsARDHXO2YDp4w3omuFNj74VKt/xt8xFBg9us+LTKma\nkTLBCJzGwYFgN4P3k3KOtFhT5YH/hfkVvDa0IuvXKL9fQ4cjXcZQjF9N3M3A\nG4AUT8vuSXmTIuQBQ+gptwZxxbRkmVB8KV5Us2Q2Aaou0ScT8WHlTFLAQh0D\n9lcS2WtGAb+7QRc6Wm3vUnB7BvLlpShteeXRGFktzfBp9nGJWc4dCJaF8UP9\npt9m\r\n=FTKw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"ecb675d071cb76738aea95a2d43ef88a134275be","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.af332d5be.0","@material/theme":"8.0.0-canary.af332d5be.0","@material/feature-targeting":"8.0.0-canary.af332d5be.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.af332d5be.0_1597353433990_0.5536369158846066","host":"s3://npm-registry-packages"}},"8.0.0-canary.7dd4567c4.0":{"name":"@material/shape","version":"8.0.0-canary.7dd4567c4.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.7dd4567c4.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"891379a0d417aaa976fc87bc8475eb13daa31a9b","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.7dd4567c4.0.tgz","fileCount":14,"integrity":"sha512-6yUNlAwxN+tLYOcynBlBSifIa0JioauGAe+w40Eo6bnzWvq/4GSRgQ1w0YX0WbQ7mYpCuoJq6/hC6zshoIuP2w==","signatures":[{"sig":"MEQCIDBPySXKEMpn1n2tfV6Ti6MW/RaL7lvr8QwPcJ5qSDRqAiAj4cw/v4ZvKKp2u7sn96tkIva7JXbLLep2N8pu7iQP2w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNd/qCRA9TVsSAnZWagAASPsP/007kJqQtSH0xDEi0qdf\ne7SVUMys/DeHF7nbmLGQMDpp0/rmnbvXkwVdZ0yFvoucA2QUJF6Xh3xjEZdZ\nwT9qbBW8eyKMwJCXUinhfHpZOsAdttAfA1Ld9mZPm9IYvAtE/lz3kxRNDVZX\nUbT84XY2CcOQQGZlpgiHFJ6nTFTQQ3ThfzQ/Y8Ylu2RlkOMBjfSg7FgvfOPj\nl9YUnOqxkvPi02OZz1YZWUIQXpNWaMHCxMLTRszmxEblSQKNfOEB9Y+invti\nVQc2rptCqIkzAvbae4JJbJclyLP/Vcz8YRaL1Dj5UoB26f2T5rxk4eolHAwV\nfqZlMZV/D+j7GyJREtbecTlj3U+Vv8Hsse25dtVJKq+gkJZLvNw89yihs2DO\nd7AmuuqFf0mEebqzss+WJpRpHXQK/6TQYYAbNYwf4EWIiZBi0Xby+7KqIGZR\nnpBEm3EJ05hn/ybW1C8EiXrESHrxu9dT3kNii3LHV9hvBneznCMVro7MJ6bM\n+NWNGkckU6maqJtBF+rnMqvqM6+Rms2e/0w8mzSpN0RJGhTPCsxv04b4jFGK\n83aMPmqtvqa4h7UCNSOSHvWmVsU5U1bHgv3jKAaKvdAkFa3ohT6tdah0+TGv\njhZoVR/Ho5dXRicZugLhjKijcjZzOsdXXK5Ck/tZuqctF9Aq18JxMFwNRYY6\nRBRB\r\n=nFeg\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"515ae143d426f0329f0a745e0ad35113761376e1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.7dd4567c4.0","@material/theme":"8.0.0-canary.7dd4567c4.0","@material/feature-targeting":"8.0.0-canary.7dd4567c4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.7dd4567c4.0_1597366250315_0.5165268580325575","host":"s3://npm-registry-packages"}},"8.0.0-canary.ff870005a.0":{"name":"@material/shape","version":"8.0.0-canary.ff870005a.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.ff870005a.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"08f70f484fe2405c6b345802f928b2ba67e98080","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.ff870005a.0.tgz","fileCount":14,"integrity":"sha512-3OAmRFP3z+K5vl6lVlvQHaA0DVyxAED8lP8lZvpx6DH8Nk/K96Ba0iP8cva2xI2RyM2URE58N/xBnk5n/qcV+g==","signatures":[{"sig":"MEYCIQCYpCBGhQljVbUId9ELcdZExnDM8Tlqt+H4YUfggeT/HgIhAJJjRhB47RUq2fQjz8TzOQ5eLc43xYpixSdvDfW4cR6c","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNeXVCRA9TVsSAnZWagAA/eMP/1nNJLxTkU2MGbKqyinZ\nNTOmkUVYI2T2h3yL1cKswzhOQme5q5HQkz+4rKsmA+8n8wu7CNwmp5pU9gOv\nx8alPcHMxHbg65OZOOPipJ4wQuP84F9G/s5WPNVjzHL7VzllDNO9BEXoCZnQ\nVVTT0UCwbIs69XgBgXREn689eGkfgbPkrfvCJfPyti8LDz5Ql2Or0aCLrsr4\nbE6VptveSdLWLgY9DjKvhxaHu+s3oUhgX8b9BI7OcfE5Ex+HgmMj+kSekkZS\ntbSmExOXNW+mGZAPrhuiBCAsu6W+snufa7TPu7yeE5RDezJBd6Za1OWl5QNY\net4A1bsCINMDOY8xYWgDBWXbmiNTHTCzP4wiBM5QAze/IKqZ0Orjh+aQ43D4\nR0AR4I/FiIoiPtm4ORTB7t+CBq6N3yCZtfp3aBlS/Yv5b+lbV66az6q2nDRU\nzwjlqxwB+RoM8QqFRlEKzYvh0fg5sdljQptGFCjhkMdSPPQxOC73aUPtBtrz\nmCJdWELiiTNFYR99g6W5xYCBth7dJXTubpC3pKBF+Cbxw845fOnQpZwh3gr9\nLpXLN8uO+ozD/UX7HY+DpwJdNPe7eM3fSJxMPIf8Khvm6TX7k4UOU4/RmAwM\nwolQUMqWmSJWSHavfX8nLmXHc/gIg14Sb+7dIrO19Px45HHjOmQgoF53iEUe\nKOp9\r\n=W2aA\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"885c1d5e1cf217db1bcb8176917a25d6c74575a5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.ff870005a.0","@material/theme":"8.0.0-canary.ff870005a.0","@material/feature-targeting":"8.0.0-canary.ff870005a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.ff870005a.0_1597367765297_0.17304303144815947","host":"s3://npm-registry-packages"}},"8.0.0-canary.150f427a0.0":{"name":"@material/shape","version":"8.0.0-canary.150f427a0.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.150f427a0.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f0dfde504d6d4b98afe77cf78a24d4a37fef8ba4","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.150f427a0.0.tgz","fileCount":14,"integrity":"sha512-/N1ZxekdAw5ZmdP0vnhGrsIlM3ckua0GT5nNV3OJK+R1neonhQyjgjhhkhVPsMtA0xzNPrq/aGVW0TBdSgg+hw==","signatures":[{"sig":"MEYCIQDgIyc3MyUkBjvUFSXUyDKJ1nMIhb202LL0uDKQJpejxQIhALW6a4WICz6vOFTlz+evqlyIXwo6gzgNUtt1OEgHsgpI","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNpHHCRA9TVsSAnZWagAAe7MP/jawg4xhw/ZNY5ZQdl/o\n/B40IS8/uEeQ/njP6yXoOeFgThepBelaFx8aMMl2++GQvHvtuo8l9Iv9vH38\nv6JY90G4zDNx2861trH4yJmiOhHxvGi4XADRKIJYomejNiP1aIehiwcf0+qI\naFuBXJKT6XvnaZc9V7RbSqtn5+B9uXR/EH8jelVEfDdTQ0bTcc1RuAsfXpfP\nL1pJseYmTulQ33yKgB1oZemHXfa0fx0eWr/IO1reQgu1ET/LLnWws4SaYweg\nyPrEQ/c9fzXi2Dl2e9LT6FIVYM1LMCXQ8pR0QEvIK3dhHqitW4aYJQPNdldq\nfKpGBEC1sWo51+ooguNMWD2pAS9ZOh9JSU2G2I8SsvpktX/6Y1XWmAgdQKRS\nNvwZ4f/JoF0aj1PQMuSGfk4m0WppVtT1HTPUw8gOVGDgl3tGTP3DHjirZcbp\n5XH5P4iV7UyRU/16lKNgHFgxriANRdLEVp3qe4+8DSGfYG9zOeFiIDeCHgzz\n1XfjxcNeEyxfAAcKfFxJ5n2fSO7HY6BSsWoLbSqzKtVz3yhRAjuzapDIPBAa\nngS/8CaXM0bC3PWRsp4U1ryaz9QQNkj+RIYAsioGP26ecoCwjLKph4jdYoHV\nIyLNxxV2VX6y5+scOKTXu5vf56Te4z3JB862ljMeL4saPV2ZxBpQAg5oYwIL\nMR36\r\n=+Nc2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"9250d38c39aaaa2210225133bd9fa4da3739df3e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.150f427a0.0","@material/theme":"8.0.0-canary.150f427a0.0","@material/feature-targeting":"8.0.0-canary.150f427a0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.150f427a0.0_1597411782492_0.28884748257618","host":"s3://npm-registry-packages"}},"8.0.0-canary.bcc58290a.0":{"name":"@material/shape","version":"8.0.0-canary.bcc58290a.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.bcc58290a.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"10dc8d465625976f0526a81e9e842ebf7d707120","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.bcc58290a.0.tgz","fileCount":14,"integrity":"sha512-pT2JezY+jbCMXyvicDinLuXVS6fg7gow3t6l6Ol5lLoZ0dNsSHRo5RXuCnW+50L2c+3lohQriVTOT2LJ7QI5IQ==","signatures":[{"sig":"MEYCIQDiklCIA41ZmOkAD3S683+YG3qFb+KrC5kvLgV3w+9IawIhAIHgTB8eI7s4apvnjInFhrmhzQ6S3jsFc+GNvHLTh8Q6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNxywCRA9TVsSAnZWagAAyGsP/24GbqYLoFyZSgrrwY3y\n1HadBAip8g9dtg4JiM9vYs7gzn+EexMtP+keWHBFe7LdTWMRyUZviBWExNFq\ntxyL/zL1C+NbD7D8PrIs+HbXMxNer5bNr/OerOOov+mqvIH6wxRVzj+U25Bq\nhs/W7acY2MnXCygDCUr3fcCErYn9kkkSLxqPg8M3Aki0o8uHz3212AaJaxeF\nZ4W5hJ88kTtmt7YnmNHR8dJUP2bfSHnoZLeoyjt7l+121mjpVacUz09PsK7H\nhlCimoiyP12nwlZf9bEF/qizrEOQA0w3zT+SqCsQHZypvksGqJkAfzmwGRl8\nqQP7zZOzsyLuO8rxMIySv9Kxcq44K0GwzGut8vVHq024ILU/IeFlHVW0iXOY\nvMvoKLP18TOp147OmsBwFv4b9WpVjkgFjuATlIx0wt7jjCao22LWQIpPzMVa\nkJdK0QkTDLCFkiBOgYp4v+P6muFcfGDdQ4hBnUawe0csUZwC4zZOaJCLQQtB\nUi2b9M0X2qKYdwSIdJKXLKiVthj33s116hBABgFtZ0D84wddWgPJFDMWva4o\nHd0UHs5Wyu+w4NuWkbUr8YUHnzbkN9iibUNcbpkjZgT47karCS6TxDGDBsXV\nK2oX4EIGxtlAX9RkPJuxBdOHCAgZApft3cV4CkhTGGmrwi/5un4Y9+2kteV0\nZkAJ\r\n=VsuL\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"ba12c8e781c26c6169e16b167798237b5ededb54","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.bcc58290a.0","@material/theme":"8.0.0-canary.bcc58290a.0","@material/feature-targeting":"8.0.0-canary.bcc58290a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.bcc58290a.0_1597447344300_0.31654969322670135","host":"s3://npm-registry-packages"}},"8.0.0-canary.4f55400bb.0":{"name":"@material/shape","version":"8.0.0-canary.4f55400bb.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.4f55400bb.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a65b5f55438fa53fef0a06e0db747fafb481d0d4","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.4f55400bb.0.tgz","fileCount":14,"integrity":"sha512-jjZAQb4fOiXlxKACsIZf7Rh7eMkj6qS2wC6m9vSFun2qH24NdViNh5XTVGRgKrbjoO8phT8GiW86XBHN77S+eA==","signatures":[{"sig":"MEQCIGUKcYNby5clNIO6FcEQfQ8GfoSe7TiOYoLI3B5QTGlsAiB4vUU6ugGTAgrqF0bRMqCRwEJDHevm+gybsPWlb4jmAQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOrKECRA9TVsSAnZWagAA3Z8P/1fM1kkv3GBC6NeB2MzK\n/ol9fmFW2CjJlKoacUFHYBEJ1hixsxSFy5IgBfXFt/G1CArZFYFiYZECmpmt\n1pKMkZ7//506MugOs0nUbkBtTvR7VEruVjCuF/JfWP5HI55PN/UcOMOeUB0z\ngf2PILK/hB8dBMLtWwiJ4KYSt1OwPdHaGQdvR53l8vLErChO7K7Y/9qt5nVI\nnxYMDTkge7dExeaqsijFmtqUE6OLJSVYh8ELgOId2D3gd1Sne9JxUYdFOIR2\nQpiIvsD+scMGnoPLL96ssPo7WUmqx8oWhPndb1M8eUPp3ifa4FpI+bYm04ge\nYpZoMq8PN+LB18NcKlm2rtbHwAKuoI9aO/oXjIITHzvxh736t9aV2yROKDPe\nhaZAZB8TRW3J+wZvSk6Q7KLEk1uNEBXjr2khJI44CP9REVzx0IhZwlDpgC7z\nPN7BCPc86k1SjklV4O/y7UbYdIctM6FYesV9ZhPA8OiuhJwiHTBymVVDChVE\n7SfwelYlYTsTgjKe6nHxMatMXaKyMfIrN4sOmVoePiSw/CtIocs95YfvAbvb\nqq5e++GqVC81gQVxODH2bsyCiRjd+6za04fGrkbXQWEM3wpTHHqj9IxzFH5a\nsRwRFC6AIUl8lWuegkONGTcAB4dcm0BOk1j9U8Bb6q2u5PSliX0KcJ5zbskp\nzYia\r\n=Vulx\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"a9eebd86aa2e631b994a71291827e602b842dc36","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.4f55400bb.0","@material/theme":"8.0.0-canary.4f55400bb.0","@material/feature-targeting":"8.0.0-canary.4f55400bb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.4f55400bb.0_1597682307775_0.8475193169916322","host":"s3://npm-registry-packages"}},"8.0.0-canary.000d64815.0":{"name":"@material/shape","version":"8.0.0-canary.000d64815.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.000d64815.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a53b2d5e952cf2c3425f74f246e0f4323a270699","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.000d64815.0.tgz","fileCount":14,"integrity":"sha512-NmgxbNRZJQIPpHKVG7cK/+Rcxjqr90/vkyI/FG4bSe405H6CUaD+6j9gIwU89gjcWRrhxWq9PIPwwQsQX0KTLA==","signatures":[{"sig":"MEUCIQDP9vCr8Exw6DmZcVWk9n/GKs0u1iACvqIOrc/V2IUUmgIgV8M3qG1cG1YniJbn5x4mZTW1pw5D/gTH1FK7E59BTOU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOriLCRA9TVsSAnZWagAA7E4P/155ZR4mHD3cWE+nDE1+\n7Mv3eIEqXSL8vG/jxh4MklDAlBgJwL3tyweTlGmaNnhK1hAul7sC/HrienDm\nsw9XbzcK8SavwYEL4ySZVVOdgvFmRi5G4v9YE7iyG8K7dHESSFpBJnB3mwEL\nqOn8VgfyPzDysWQjfu0MAEYDYCWK53SgdkRPhiA82NlbaA4vioKI3knYJnyJ\nFidd3oWAypD3J3+IsTCNP/hdkpxBrjDLATqv7CQAjkJaOO/WSlBT1ibQk+ld\nugqogVyY/ysVJVFrxB+JY/QiN4UCyu7oc5nLNYp7QwIihq19x87Qohf5wzx9\nRmpOOmHYfkF/TiLpSWrESjH/u+kTAJvo89NoC0Iqv1ep7JcJSXrkmv9XYZwv\nG/aTNuDzYoIAH3wvZ6+LZldarMrtpGZ6/QAO/Ku9DBkUUBaA2hlHsqBUxEsA\ngzC/cXaFQswP8oPi8MuqqQ4CPKdqCaGW8VDi0F/Hwp+hkjaeKVx34LQAtAJU\nqXAFpiNEA+uwXn/ny4ImflxmooFiq2c7vWouoF/toJ1/gwu5NGLq1sZLjjmV\nZc/gki/717yUHJA5L/R3oZpDR1LZqRl8tM4T5ju8hS2xx/RD5IJ6gpsCU8y9\n5bMYfr51ySEYJA8YFcxRW2i4KhgF+VqaENMpXubPzFemaLg8+FEnm/DNEiJk\nFegD\r\n=Bjoj\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"c8a69943d64e6f468c2edeaf1fc6204d372a9fed","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.000d64815.0","@material/theme":"8.0.0-canary.000d64815.0","@material/feature-targeting":"8.0.0-canary.000d64815.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.000d64815.0_1597683851430_0.2274566374632072","host":"s3://npm-registry-packages"}},"8.0.0-canary.defa599a8.0":{"name":"@material/shape","version":"8.0.0-canary.defa599a8.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.defa599a8.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"64e59b3244d8fd15941f48442da0120d084a89e4","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.defa599a8.0.tgz","fileCount":14,"integrity":"sha512-zK6AZ8Y2HHDIPfOiofYoxVYRwRKmQbbPHg36HLhf38uK+OB2jB3bAF8vWip3Icv4vIT0MkOsa82y0XZf6yE/kw==","signatures":[{"sig":"MEUCIFcdy6Yu/ry2D0vUIHaqRFLMtIugu+rKnq1B8vOwdy2sAiEAo/KObknePxyWUdd7dCBXCTxq7I2YC8sAKudSGqxD+6g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOukwCRA9TVsSAnZWagAAsDwP/j76o02dhE0DOe1DhEQT\nEmlLVtxzmMZXVNnwFZUayw/3cm+rutFJwVQ1VSqpy3ZHcxz1ixo+M9aH1mcy\nFFtWMt4ZEaUpxGyCh3Vx6/kgTEE9D+XPD8GND3YwFHq51ZwTxG1BMvjARdEQ\nGmSTbAUYwOF4QKjlVY3QBQVvC+6Vr4e+2rOxM3keqWljKsV5LNF+viIYKrO6\nCLtx8yqIb88ZAsXDqHCizCV8qNHuseo/fsg/6o68iM4pBfFar8PZ+a8xTAuu\nR8WNklGm7500wflIq8Tk9g46XBlVXCitaMr9PegyGJgKJNls2xezV9ulLRia\nx7d3PqQeMFRIAg6oy4icmx1hSKz+J445jszT4BOiEdDEoA5XW92bxLdctJS0\niowWM9iHh9P10H5Sj6w5HrhUDyyDTZ+sdB0okMIoO7D290nsDusoJU1cHGYL\nMG0JORny6QkfDVPNWQR8egtAxl5GlWis5Cx4777zsenPF4aJvltP/RbtD2Fx\ncCI+5tEbOjg9J3UHfoRP7qCjkBO/2K3154Zmuh9uvLIjFWLGcyv/DpKqSC1W\nbQDDIpoejnvfJP4on52tOXDQXmZ6IXBoRhZf6hQV74dFkgOpxc26Sr3dc+8d\nDu6uUPoj/xKKUlrupuX9czszeKJtSAknirjE5GDk6T294duywicMPuVS2EPz\niv6F\r\n=kebl\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"d3ddc8cf9af988fc4a02f26feee3e4ca0184dbec","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.defa599a8.0","@material/theme":"8.0.0-canary.defa599a8.0","@material/feature-targeting":"8.0.0-canary.defa599a8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.defa599a8.0_1597696304167_0.8891930737363476","host":"s3://npm-registry-packages"}},"8.0.0-canary.66b8ed7e6.0":{"name":"@material/shape","version":"8.0.0-canary.66b8ed7e6.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.66b8ed7e6.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3d119bfc352e4724d7a49b5b0f6bfb18d95ec319","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.66b8ed7e6.0.tgz","fileCount":14,"integrity":"sha512-PFAtizTQY45a6GpkLBDHvfM8dBW8NQvRUSVGPujuL/cCnqltPRsE2FCFwvxE85WiiDv+xVWt0vg3xgmrMcD0Dg==","signatures":[{"sig":"MEUCIDMJunqDM/PVIRD7G+OUa9vOb+ARHHoh/UuGhbmQI24RAiEAkSdwInYlWuq3/IcljJRkgyiDyfOK6pdnYMv0ZIAN8DM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPB+6CRA9TVsSAnZWagAA52MP/38AQIsl5UWBVr52EeBj\nYZjlvzmcciJhEms9t2duX17r6uNCXsdaXvI3AuTz0tjSdrUaqu/q3zrnfNlM\nk8V0qSJiRvz/FnQWjT9+YIudEH9G30Mb+GRpFFnx/HMS4fsV1hq9t6GQ/LQc\n6wy9q9u/0p5XcI0kBFw2pwcKGdxKTZcYam183ZIYWnhaFCQLbRAvFISz67MB\nTWFi27Ay+VCGGHgOTD/4vEKAW1jISP6Y2HuDb6ucJv538Cfxgr/vCIN8PEL3\n8YtLLXAt71/73d2TBlsSEgoYkPAIQVqlugs3VHywk1YkolVMnf8bt9IYiZue\nQSi0ZKLVr5FYrf90TyEXwSUiP4K31Dgnhjd3Pa6tBUAafufrBesEi0Dggb57\naLt7Ej1S8Ki7/YjYrHWwye1Jl3d5e6OBfoTjdxUJm1YSpY9eM6uqPvaFe3T6\nDOGMcl7nk/2h9HY8R27Znd60RM9KlqVJCJOfuv4wn/uasPZaFum/hmPbAyNQ\n7PPj5t++adlh0Ey0FnYhMZwvqt7lTczg2VnZ2dN1GF86uy69Ps/Y0vQh2eMU\nVrmHXyGe42W28isPI6NDqk49gj43Ho35tKRRBLdBNifMaV5Szn1PzEUDJIbz\nMk/Wiz94NJkHOTfJde2MEtPY906OcsOKcRF5ZhwoKQ4s2OwHMy9DJjkrRnQH\nNjYi\r\n=qYlc\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"c23c9dce18363cb6806c169d5a516da2a0fcf89f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.66b8ed7e6.0","@material/theme":"8.0.0-canary.66b8ed7e6.0","@material/feature-targeting":"8.0.0-canary.66b8ed7e6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.66b8ed7e6.0_1597775801852_0.905218160057768","host":"s3://npm-registry-packages"}},"8.0.0-canary.e2b1033df.0":{"name":"@material/shape","version":"8.0.0-canary.e2b1033df.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.e2b1033df.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f5531bce9229f1ac1d630efdcf13683556923416","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.e2b1033df.0.tgz","fileCount":14,"integrity":"sha512-UurM1YTxAnsVZpqzORCZ9/1ur2IwWV+sFszKD7VyYo9qOaxiaB1MDqMuC3hQWDP6g3FESApZ9XQnmU53gBCVxw==","signatures":[{"sig":"MEQCICi7AnsYekHl+FSExR5u91txS+jy3uQOgMdvfx7dKbCHAiADDD8vYHcS2wdjHGxujdUfL8VriFE+4fzw9+jUw4bIDQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPXJ4CRA9TVsSAnZWagAAOGEP/RUNvzmWqMcsosTrCmBl\nkp64ObODWFSVXx6kkY+esd/TB8fVl9Bt9dxifUhOQuqUNFpvVfTyBzloRdIt\nk6ZS0CfxX3S2WDhrCfgodpfXDe0llMaC459erZ+KReJEU6W2lshJJTMVaA/M\nqq7/hnmjmI2nX0IiK6VJLtsSd6pGrcU9pQ+O/+xxDdsj8Ib4Gpftjew/UUfG\neHoFWmJFeAmGXISYFfk/JE1rs8gitwHZ24Evo3tEKyWpTONS2pycvT31QTTr\n15IsHm6LmrpAs6Diz1OYkn72PneOm+NH5zC39pBrYDQKx8Pe2afldtMJJLfB\nRX1BshY5ty/BfxwMFIxRu9eZ4g8eE3ti0pWRFdOFsljqj6j4oh4PV2ezH2uO\nM46t1e91jluSN8ELLTgSw+r+CccXsYwDZ1hv2WZWGT0/ZZYxaCkC76PcK+J3\n2jcc6Og35kPVEHuDrYpJRggg4en7HOziVjYSmW2hxtZYvjm6NCl8Uyw0yMuu\nzCLWuJ4/3O8SkfH8UeiRu98I0TxZFOIqgPKHesZ2r6hlTMYoxE41oaS5CTUc\naiCJxkywa6BrsUoFsUdYlC15SHHWEaOC6x3gfJNacVwSbq18hBEsc6ergaw6\nP0Rz5agAQay2gQwM4tfL85qPYM7/rc9z7QJw+75TqKHIMecbdvVyJkO5xeJv\nbFRp\r\n=cY3f\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"763ba6b73959bf0639ed8d0c9656a53b18e30c1c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.e2b1033df.0","@material/theme":"8.0.0-canary.e2b1033df.0","@material/feature-targeting":"8.0.0-canary.e2b1033df.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.e2b1033df.0_1597862520227_0.10646514606189683","host":"s3://npm-registry-packages"}},"8.0.0-canary.2e8c3dd2e.0":{"name":"@material/shape","version":"8.0.0-canary.2e8c3dd2e.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.2e8c3dd2e.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8eea519c8327cbcd1a59b68450fb23cefcaac8fd","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.2e8c3dd2e.0.tgz","fileCount":14,"integrity":"sha512-C8uYYJPVXmO4eAED9JtqXwDCGCzz90IeRJX4ZXyDDO9mcK8Z4ldgGe2xvsAhDwb1LXGKJ5pMA+Hvu66bajsWGg==","signatures":[{"sig":"MEUCIQCK/Xnywsl3hytW7q/BZZwxaIrY2HAKFvSLtvakXuHIQAIgDnJ8jj+bNtiJTxrv9xCFuyLbNPUjWtANMlSeamG16gc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPXxECRA9TVsSAnZWagAA9tsQAIqRi9UamP/HMCOuoYD/\nc7xX47hassRXjaHjZrb3CQGmTvTEhWJ/esqI/Dff93V8qBcMzNGHYxpXcFIx\nznC1U4PirTPm6JdR2zTzWmaLqDv0jPM8fhBtg6pt2i6KnNJ7jSHHjoW9C/KV\nHaVFi5PcOpdAJbSryOaUj6P4rv8BAsVfRKv5zNjJZtMZagsEw0+NXxTf/gUf\nO38p5j3K10hCkGzkfZBsgB04sYs7xHgRGuQjp1h+yb+wpnumzUPXcgVEFuoz\nWd2mbKKI5rnAXjNlLD3gpnYukufD9dzd18ycLIrPG4RZozJC9Msm91ryKRAA\nZzD4pilVpUuLdpTHrCsEjit+cF3hrCeM8SJfJeCRajiIlQX6demIrHeG9Ffy\n1VZ6glB2ImNuiF7Ng3btbMXH6CfvxKqknEk/tucOTcf2sgAaT6Cg6TymEmk4\nSv+FtzCZGAmRlt5hqykyOcy0/y0cu0nTYoGPbBcd+R8TtpHJEai+9LHYvxbD\n8KI5PlY5+Nv7+Y7cFiM1DiT7LZdJdDrzfXbRG/n3cmdg912HNI9qLzaP9LQr\n5D7tj1qH4vjH+WNpvy/0OEfW4VRkuhB4oQw5xM3I0oS1Ja47FDfSrtBib9rL\nlQStcS2Mf8MM8X16/BOy4ayzz4rFJ2xpLLXiE7RpmypdcmjPkm6YkyWP81wt\nodQR\r\n=La3p\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"237ca1e061b4efa53d623ea5dc9c9d670d5c9da0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.2e8c3dd2e.0","@material/theme":"8.0.0-canary.2e8c3dd2e.0","@material/feature-targeting":"8.0.0-canary.2e8c3dd2e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.2e8c3dd2e.0_1597865027808_0.36120336605033443","host":"s3://npm-registry-packages"}},"8.0.0-canary.b2e80a5d9.0":{"name":"@material/shape","version":"8.0.0-canary.b2e80a5d9.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.b2e80a5d9.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ea3998eafab0ef2bc7ed7ccc26475dd9b9445806","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.b2e80a5d9.0.tgz","fileCount":14,"integrity":"sha512-HHFeTA76qZvZnaVDljTegRFkDnFeTaw0YShCBGwcO9UIshAGWXgIDbR91ag/zL8QDq1H8NLVLkVy48jHhBh1rg==","signatures":[{"sig":"MEUCIBU9nSASDn11XlubicXS3On3TfeSMOn16NNhJtqoBAwgAiEA1UXslB3r/DdB4B7pSJ6aoQsggapKghtvQv2Wq67YdSo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPaXCCRA9TVsSAnZWagAAGq4P/io0kug1lbshDh5rXfcu\n52btlPKWvbez5wKEpWAmmz1VW0Ibj/wxeoeXaULYbaMGzfpiAXF/zrYaBw9u\n2JGawynbeo243TUBM5IdTFD9nSWUOsZDY78dnk5486x0ifg9CfQyRgfGBw8L\nYogFDDQgnsQyiD4e7pIOyhLtxGD66+Us2k+3yzoUUxQ3PcxguCKD9LKVAbmE\n8fYUYA5u/NtjX/XE5CMCKNCSRCh/tj/4bbPVypVLPzd/zGZ1Nz5qbuWgqDyC\npWQ8U1Awga5kneaBBupzH4rHKsJVpo1xutUhCuk0rzjszIoQX7qc6ju5FoU/\nG1pLn5D/RKLiuxaICfshR5GxlbCdziXljuCQr/vMgBe9TYI0Ii5RzNp389mF\nJ/qWBx9gsYYHSbZNrzDRUUazkeQ0XOOJOEpT6RGRWQd2zP0hPInMNOkXfA0d\nT08Boc8NppURzmfCBCZc1JYJy4Zai1RW0y4nLVh507D1ASdCRLsNGHomm+AZ\ncm1yujlj/OhleIi6n9K0TwgivqQ+4dTRn0JBOqv+dpINN78X+oS/C8Ga/pwU\nWwl77YR62Rg154CXNRTECoVS8Ivio1TMlkUe9x8jxQF5FfyN+awEm3bsQwW1\nyijK10C8KpYFamPjtrZONWviImGZRLXZI1mLDCjTdov+iZYd3ajOhmWvgUQ+\n97vw\r\n=ytTN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"84085f6b072572fb6b09623a5f0b35bb95db6fca","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.b2e80a5d9.0","@material/theme":"8.0.0-canary.b2e80a5d9.0","@material/feature-targeting":"8.0.0-canary.b2e80a5d9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.b2e80a5d9.0_1597875649664_0.7566797759016293","host":"s3://npm-registry-packages"}},"8.0.0-canary.ff88df637.0":{"name":"@material/shape","version":"8.0.0-canary.ff88df637.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.ff88df637.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"69cec22d5352f40ff495b4b1d0c1f79c80b264a5","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.ff88df637.0.tgz","fileCount":14,"integrity":"sha512-dNVpBx8kGKvy/Z67/EeD3j5t2oUbYwSAYZGRZUR1qn0WzWBkyMNoivBi3cjQc9SJMpQiK/ftW1VdXo9wUSoIvQ==","signatures":[{"sig":"MEQCIAzldvkeNzhkx1ZYpd2cGOurSEF0F3UiXGu5QtIPuVp5AiA0KkEup5fE/7lXX/CJiHGsWa9vWBcS8hhB7RTetHnHZg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPaiUCRA9TVsSAnZWagAA0LsP/i4HKSq1obm5ytbtWZe4\n+2Qsb03fiyHLl3EHQuYT4MRGGIoISfpA1ro6ykWTjfor8BjFHeq37hk++ERd\nlwUttflqERvdneOEduPSQS/sCdxSoKuaD8DCi3dsNLDm4v512hlCczg1o8FE\ndM0jMWNr7mqmKf73hhq5uYqcszu456zd8VUBkeK4/mDnTIwVK4ThBar3vRCq\nJu9cw25Lz6WMn40gZyeKlkfOLLmJbvVh0pE3TPgFSWtuR6up9/E9CpYcyK+i\nIyT1uykkxynjlRffc5nJ01xupV5wWE+tj8MSceO5tv55zBLyOIFunkJYUkP3\n+A6PuOkjwANafxjl5y+9H28T4L6ZP81K5G30ve7L9QJ3sq2rV+52ZrKDfeSR\nMwmfal/8jpRqET1LAl37hYnto+jvdQc46mrZHx3XTosYloUdKuZu5deLLPaB\njLu9q01tfNz+UzpKGHayBaVkg1qVXzwVRwbqaG7DbQ94ErTGHxwQa+04bNSC\nl2h6A46yeldWrLj2ota2N/1ZmvLfJqlV7CW5pAVICvfuXQm/6YLgNayaHIzI\n+SgL8JbRB9I9kI+x9/1yAmdc65DwJf3iV5CkDtQbvT2wLLy4wg5WYxp+Mhi5\nXoYtsfjaYMdKDp2CoOLYiHnK1q0p7C1cfkqwl3jUov0kG3IzPq29sUdeHBO+\ngvv3\r\n=F+5m\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"36ba8daf061692c2f915513485e71707d8eae239","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.ff88df637.0","@material/theme":"8.0.0-canary.ff88df637.0","@material/feature-targeting":"8.0.0-canary.ff88df637.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.ff88df637.0_1597876370791_0.5977813476467408","host":"s3://npm-registry-packages"}},"8.0.0-canary.32fb314cd.0":{"name":"@material/shape","version":"8.0.0-canary.32fb314cd.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.32fb314cd.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c353deb8ee0d31d5e89e3743dcefcd92ba244fae","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.32fb314cd.0.tgz","fileCount":14,"integrity":"sha512-eoGR0ux6ut4FbQY3y0Kug85o/qVrM/tWnQ9XUqLcvwxF6i2Wm67jXFSihF+JQahHJzGh0m7AmU++NuOHdUcqKg==","signatures":[{"sig":"MEYCIQDL/aEGmQyp8am+rPdMI4+FWLBWT83lBxPYUpgWlobLMwIhAOVEcRLdCdXv9zePX563oa+BaDQhKsadI66c2/qaSUIu","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPlJmCRA9TVsSAnZWagAAhnsP/2PMmQ3fHVGOVPQhSsl3\npcbtNFUbGoQ5zu4bltL1LuTBVXNVQ8M5Tb92FcaGdnbY5jA0Bt8pnYuleVzx\nZk8NCuanVp9/fUDzJ/gAENXTCO560kUWqFkvWJV8dCjj0jhwg32Au/PhOU9U\nrjZ2Z5RoRlJozpJS4IG+VcvDqRQXebw91nFLetcXn1aIqNZF/KuwayU7onER\nQpZwWVvvTtFa9lGVQBy20q4Sci1H5RCxJ55mBfUxLdUtwcKlOPzlP3rndYxz\ntyd7YpNnHHo/asQE8k+kUbib/vMrwNJNB53qBJMwNEMqCmy3AgiLuey2QJLT\nfHaJK1SMp4U33jVFyYKnMerPajVKqSzHhIsYTVJmxRC8odycfnQNFwhsWu47\nKsQgUU5jWfb7Dp5fvmp4zsBSWi8mmtKbVtInQLZ29nebn9Yw3gE8OD3TLpSZ\n0DbuzeUJch4zQdpob2faE8bJfAGbeedfKKA6Dfey9ebgrDMlXDZjkwNenY72\nYZFS0aFWu+o6riAZ0j2xNrlmWC3KEjFZirVcYFdAc0AF+lkGCONqWHRG8qmL\n65Lzjz+mzhcgCQA8jCbgALYIyk2kEN6P5flnkaPxDJqL0XkTT/f20avV9AoA\n9xROJ/pqmYDXS6nbNXZbGXlRR9utRiREvx9duC8h8odIiLNgBJ0PTgtED7yL\npy/u\r\n=Kf+w\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"61108ecdbe311b101b1b87763e8f3283dbb9dd50","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.32fb314cd.0","@material/theme":"8.0.0-canary.32fb314cd.0","@material/feature-targeting":"8.0.0-canary.32fb314cd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.32fb314cd.0_1597919845853_0.05358359422163406","host":"s3://npm-registry-packages"}},"8.0.0-canary.546277d32.0":{"name":"@material/shape","version":"8.0.0-canary.546277d32.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.546277d32.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0ae82ca34b26f1a75275fbcaa94a96b527ba126e","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.546277d32.0.tgz","fileCount":14,"integrity":"sha512-hzOhIoDyuSL2WzLOa2nL8qUPj2TRZG6q2HtYBQPgdjzS4X72KOEBv0G8vb1BIlQ15foFtuHN8QKD/iP1UxKudg==","signatures":[{"sig":"MEUCIGon8r3cGsl+mKJYqvsN5L7PsU9satdrXinX3R9SA1c3AiEAqrSmpE6+tc+cOHuvSBib5m7X1rujXuzm97dOEeScEMY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPqgVCRA9TVsSAnZWagAA5IMP/ihbugZ7wKYBq9rUEvXQ\nWbfuRYuMO8Sb9bXc+UuLOHqYeug18d0dMXeFt0LT04HnpeUTUd9tBj1ycody\nzumpLCorUQIAgzZKk4a5w0ZyeD4nASKZgbQnspo1CYo/vfCb6FLlBHez05Jd\np+UctDiBAOzEOLb7hsa4FymVEgljKnFucuHbTn+P1mVaF9Al0u8s1/q3F8j0\n6nevHiheLdbHgsQnF00WV9zdjgVT70imrDVws5LJKRBvTEoTK4LOB/aJs43q\nofYdfOKveUd/UxXhLOVDx1OECmaEYWiV1scRAIoVQWArmU7iRAh+gcTg+OCb\nOkdbWWRl7AvLjnvQmhz4/qPjRVCtOER6jam2YPq7hIsSfC+EHJ+wyMpFmfr5\nhJYxJrVc6QD5UL4j5dir0IxwYYpqZfofwHJ2on4fd6SvO2Qo3V0orHe58wbG\n2F/Qi9CDMwxn6/d3/Ve81nAAI3S1siSoFMtj6tMMct1IQvOKq4raKCwTX6nR\nM8qcyaRymBl3tx/ReMsGvdmwyOX/07ilkWDQZN+vGdJyNLSqwWvEa3Z6vjUI\nMn4+ao25nQobNVuXGMSuqpFUXyQv7webnmnohCJG6kGMwPfYp9/1Ue97kZ0d\nTJkin15ZZ70qSFJBhcZaIs112jygl1ardOIGnGdKw4ldQWYNsOT+T/Dk2yB7\n12o3\r\n=Mjoa\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"1d97622107fec59bf3261ad4f1f3bbe21fb1ff62","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.546277d32.0","@material/theme":"8.0.0-canary.546277d32.0","@material/feature-targeting":"8.0.0-canary.546277d32.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.546277d32.0_1597941780948_0.03762304858704413","host":"s3://npm-registry-packages"}},"8.0.0-canary.da72839f4.0":{"name":"@material/shape","version":"8.0.0-canary.da72839f4.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.da72839f4.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"37b12289d0f222e8db26c39e7976c89db301cd22","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.da72839f4.0.tgz","fileCount":14,"integrity":"sha512-Tq9HvN+u6qRLILt+LLY3mwwXOgXSeFo08lh6dggEyBcYXMbxHGoeZ5x0206IgGUWc2HXPOuLIS67MnrELD6eiQ==","signatures":[{"sig":"MEQCIB7EPszsjP5+eDKkw6K8KsLnXD/KNWnqtgVxmIIAfTHcAiAhAAhM40LwvboFThLZPsA058uq0JgvO1gKXVl4Zic2eQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfProQCRA9TVsSAnZWagAAhH4P/RpC5DKFZMpukIhNJzWa\ncqJ+uoq51nGbf00fiNjXWaOAwfY1jVk0yRoOBfUQ5hQI09WDFhr3Tyom+82I\n4fRhvp36yPJ4ToeWRblULgDfYwUpezm/oHcaoKC08AIMsNteanNxMJ8Vtheh\nZGS4WJsXfvphQb2kRwDtuN5eELsySNSLLD/x8U1utZsSowZt8ZxS3sYfWcDU\ngbaZx9Q2OXVqqrdlag62jgjGSenh2oHqgRM19OWOpQxNZ+B3WEJtXthfngwb\nCbs6phJQ/0grlZtGS9AwICIuT2uvKqe6qhkXj0elSf0d9GQqC+1eC/Tum26Z\nT9umKdA8X6oKnDZv9o/fEImi1pM/mxZhxJZsZk8lNarZo0jS+/0z6MqJm+RR\nITurSVT41XULkiRGS4BYPMW9UGjqSzw+R3S/zv5IjTV8G5eShHyx16cGFQ0g\nYIVSZhnE4lK8hT9E9WUHauRE1gTvTomXsB4no4C4O2RDIQ7Am6ej5+AFXdpc\nCm8LAuKU/+YuH5ZEPRjCD5OjZQ3nHsFHtnPvA4HFzm8F4rPa+yF1A+abzCqD\n+cKuXGLI7Vrj2mESLyXbsDvWiqz5yKaIqWQGruVZ1iaI32sHDDN1pVJR5m/2\nkW0Xy4Iwy18H9S6DISFrxynhTCMa2Py/P1BN5ZNNWi4mE+F1+jf3Xi0hHBkO\nLnya\r\n=qCkU\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"1b42b69de51cf24aa95c09d0e08ae1e644c71335","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.da72839f4.0","@material/theme":"8.0.0-canary.da72839f4.0","@material/feature-targeting":"8.0.0-canary.da72839f4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.da72839f4.0_1597946383616_0.0944321027547732","host":"s3://npm-registry-packages"}},"8.0.0-canary.346069ccb.0":{"name":"@material/shape","version":"8.0.0-canary.346069ccb.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.346069ccb.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1c3f6f50f422b80df754d9561c426e8acbf98c58","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.346069ccb.0.tgz","fileCount":14,"integrity":"sha512-4VAUhaRLgAtHHaLNHVSVW7Jzvq7Y3ovTpZhO5GxZ/veUpDg2IWmmVftRBaES4ziYnWklgAEuyRD2bBRr4qP75w==","signatures":[{"sig":"MEUCIQDFQ47oZJlkKbxdDpN06cvUFZYstQ1pWrcPMMX/rWa2fQIgT2EF8OUte43KUrkjk/EA4m4IYIgJRx/0+3m/ATq2MnQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPr5yCRA9TVsSAnZWagAA19QP/RkrPkKlytlv1IcMGm9Z\nrdr+VjXNWXMFLYXe/N5nvCWRXflUjj8EABoi2dVqg8TVLPkuhD4CqsO3tOUD\nKQYfVCdyg70XlHz8AHr93M43+TJgM+VYDx5uOTJzDKR+eqdYGeDveuemv9Wr\nEdm/Ou2IYIzX6EUkcOlRAcTexfIlwJT/3+6e8R5g7lp/L93DSgHVaHPBV61k\nnVXHz5vl0JCnBq2oJdakRK732HadlczQ/itkc5TNlH5ur0eB2C7ki+t0iZhs\n4hAE/gQYRqQgY6OQ249KGsVhFGblwqGB/Ct0iJpJjTyP4tkKHwvwGqJoSAQL\nqr+gI4RD+srsQaTCopTjzogboPOplf2Uum1Den6SWjHJGCVQwaJ1CHFwTH1o\npFwzRBfOetbtVIUG7DqcF0coOmtyNdbQ9PvjnFnQlM6R0odebRMzJMVIn8QS\nY1WCv/GV5Y5F4nFDiYAYO/o7IoILMmT3d2HIT7Ve++PRLggEDk2YbPyYqxXv\n3YSjMW3qjDbs7nflTOTUQUOdrWN6pBHwK9LD1vxZBA5MWXzwNmAYge2iqfiO\nE6gGoCCu163Wsw/xRr/kyeSdu8/qTft4u8D222kaxHllwAaWLoHOoHVP4aYq\nDIvtuR35JJWHYTPDARsOBlyg8xCr20WVFRT+uJY4JTA9SWhxFxKslvlz0ppD\nt/5J\r\n=kdUq\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"cf298389e23ace16c7e4682ded1e492e489011be","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.346069ccb.0","@material/theme":"8.0.0-canary.346069ccb.0","@material/feature-targeting":"8.0.0-canary.346069ccb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.346069ccb.0_1597947505945_0.5259839962163435","host":"s3://npm-registry-packages"}},"8.0.0-canary.e27c5802f.0":{"name":"@material/shape","version":"8.0.0-canary.e27c5802f.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.e27c5802f.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"51d84fa8e31d2c73deb594343521bcf4a324bda0","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.e27c5802f.0.tgz","fileCount":14,"integrity":"sha512-ux0Y/dT98vLaAglQgTAP4AqPOSUc86aYagWYCZx8TCN6hSGBnG/UxKcVu97ygYGMkplY4Ik4YXiBD9aismYT/g==","signatures":[{"sig":"MEQCIAyy682zAp4waEcgJW2peLOCJOnTFX51NkKDi8u91JpeAiB1MY4CWOikELI1U0l5sLl94wFs4drxoN+GCVjJs660Ow==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPsu3CRA9TVsSAnZWagAArbwP/0wk5l9dsQdqQIMZQkW+\n7SQCuYErD7lJtJ3yqFApY4tjVVE/RJC09J+fpkEbdSTuLcBRlwohrVYwWu0Q\nR6nY/x6SD9k+zj1X/4T9Ce+UNyj8IWSDB2dSZopaInU/5FCJmYR3httb2cil\nMdzBnUX3odE9a+J6RvkMo8XqFHx5QriH0P2PBXeDbsmvAqV2PzfjtTCxVRq4\nG+1FltLI0IuNfZStJrpMrMWAolUVYAu94fRzF1FIZBUalQhyRjyzW7DOOb84\nNUBmw2qp/Ycg3Oz+YoCxEN1L+PLQghc/RAoNd0MQmWW81mbfIfBn7sKXT8ql\nMpXq9s7Sa6KhH2R7Tza5PrEmgXU50GLN1LX1gG7rK5jlNXkRZZVR2L5s3tEB\n5rMFHqoNzA2PBXCHvL8S5PMnjLB2GoKOh8lEYI2fxbECB0x9YdaoVWjFFKby\nGBqOg6HpEACJL84ioiK5YHyAHqs5Iaz89Qrk0tYrRTQsqNsvHA6WyMCrcrnX\n+IPxMdhToYAeD2EaPS4g0Z9foo/nH2b4NXBUbepy96YC6on1ytsme839gwty\n9kg3tEvT7/RikYrABloMmBdsql3EyPx7i07o4CeenV4bVMWTL9KO+KQKHFHV\nbDqZhptFpc8ZmusyeAelhh9nAmNrMnXBhMcLZrwD2H2yoEmRHHnvCeiQ8Pne\nbn1a\r\n=WRjO\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"2c9246ec446246e8fcad54982848f7cd5839f69f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.e27c5802f.0","@material/theme":"8.0.0-canary.e27c5802f.0","@material/feature-targeting":"8.0.0-canary.e27c5802f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.e27c5802f.0_1597950902788_0.9961822078146911","host":"s3://npm-registry-packages"}},"8.0.0-canary.f4532b9c8.0":{"name":"@material/shape","version":"8.0.0-canary.f4532b9c8.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.f4532b9c8.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"69e186525463a410fef8e467c691a94523ddc8a2","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.f4532b9c8.0.tgz","fileCount":14,"integrity":"sha512-ZG5OXVjVtu3mngr20BFDHIDCvhyZOCqH+PWgAr+iW8oWlT8TC4Ou0HGhlxEs/upDNG9Xjr3fBZSR24IaAgbjLg==","signatures":[{"sig":"MEUCIQC4fn3C0mJMreHTbPUNDyoQzr2tty/f2+GLgB5OC3Pv2wIgQ4dqjoCnnkPx523C6C44UMj1gtLsojvrUPFp5krSVd8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPtWzCRA9TVsSAnZWagAATkoP/1JY/N8yX0mSsj9JnqY/\ncZTY7OCT+0GIxH7bAthWQ0Xia4RAnMEEC392XAsmAjRp1GYImhSSuK8EsBVR\n7boZuh/SmgomKaBavkWGkmYYowtiQxvpWhSKH3G0G77BAE4RLOOgfH6Dazsg\ngSPFCN1aYqqaHqmfShCcchC0GdGCw5zYprOyiYL7nUUM7yU9hJ/5ZOJMSFWN\nBCIOlOBE/Za2SuyU6Z+pQo46iNHmagLPQcKxwdHiiJVV0anhlLziKdFlITXr\nkgmKsbNq41favUZe+Q+GfmKqSPZ1Sa4x9g9By7kkB02zMzlNxzqsgLH0vxTQ\nCLM5OI3UY3qQBp4HhQcAzabGDrBwd7p6RmEvQUdl5Wr04gxKc5tWjzAFkq/5\n5H2ULwEpmA/QIV+C3leffv/Hj+lGWYqIZJ3uX7z7j7nXLPkQlVTgT4fuUM0a\nWORO4ampetsJyWrXgoX/urcwmeewI7uLek9+AOTgkk7seYSRvemlX4w5nwYB\nRHkKc2fltAtvNVLgcMW4Wgra4Lcq4CATvCd5Z04X3FJrLda1EpDIPRR1Z7k+\nU5tM+REx9HwJOy6LDdmf7RdsxNZv0n9x1X6ANlf5CY6QmtVSFjvX6X8efqF0\nuXe0Xc1x8PZ52WlcBmOzTy0rLegN14UADR8zDoHgaKgyvHC8O/SNtqprfSIt\nveQl\r\n=/oWZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"be56493a06963f21f1f5343fc6db3accdc74216d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.f4532b9c8.0","@material/theme":"8.0.0-canary.f4532b9c8.0","@material/feature-targeting":"8.0.0-canary.f4532b9c8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.f4532b9c8.0_1597953459090_0.10425309653250237","host":"s3://npm-registry-packages"}},"8.0.0-canary.fbf73c2a6.0":{"name":"@material/shape","version":"8.0.0-canary.fbf73c2a6.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.fbf73c2a6.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c75eb6ab6f567e7ca01592b3e17777152dafbacd","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.fbf73c2a6.0.tgz","fileCount":14,"integrity":"sha512-xl1usdoH1rurbiSTFgYDufuHKBIYCdWG6rmX0hkXQCVYdDIgkTAKpwaqYJ6oiUJ4p2/DjNrQueNZPu+yGatW6Q==","signatures":[{"sig":"MEUCIQCUiCTezvwdplt9GrZu8Y4f7uVXGqaeUofZUovAYRuvIwIga3FEkYNHj0ajNs3UtajWvBty1Xz00POLF43ttUUeGuk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPuXICRA9TVsSAnZWagAAjoEP/0SV5Jwg21k+Oc9JlwoX\nUUtz+rRjKbVVUhjEpqfELaA4VFvdsiEAnls22s01d7W3erM6uJpoEhzJBVRv\njfYy2YmZbQ3cvcfG7LGizKpFsbXBMmc4n4NNMPcIUDQVSJ7wH6qys72ur3mH\nydVkkTiQ65VJpJVR9+S7VvR8d6TbZYNPbK3ggTXg+w4DP7KQlq/zL3sCoC4b\nZ5kKCIKI9QPD6gwSyR2tcjDZVxlrKv+IRySwU+5irzyYpcaN50J/JnteNeV7\nkh+FQqvitR0IzBHpav/jyWaL6jZhmYTzkbJYfR0hYBihrAhmrUaCHW9XowZk\n20WR56mkq2MELudLy6pO4xnj2I6fcYZfEONCtr2tTOgeak2E0oHfhZIe4inB\n88t5sD7sw1fxliZLCzUzl88Lpacj1NBqR4zii9bGNWE/pgGNY3UipFUcOPcz\nB/X3v8SETtvJiHDWZQayPJ7pef3/ES9s+ro79Nc1rXdjsdGcH+ktL1t0jbZJ\nvc00PrSb1XqvRIgXrP35WnorHhnrFhABVQjQSamaf0dqJWJMie4gab83jRV4\nvP9lpx9LmdlaWeU79N/dG75Glijc+OquUQjjTXhaSQWlwV49J/yOTQDSD+V+\n9VJGDxfQSOxXECxg0Ksk9IgCYfpgOLTBhz8roaN7fnI9s3yxTSUmZ/xf0p/a\ns0ZU\r\n=9NKY\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"64db59647b6d726098d0871993ac5c563d92be26","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.fbf73c2a6.0","@material/theme":"8.0.0-canary.fbf73c2a6.0","@material/feature-targeting":"8.0.0-canary.fbf73c2a6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.fbf73c2a6.0_1597957575987_0.6017792294955027","host":"s3://npm-registry-packages"}},"8.0.0-canary.cf800124f.0":{"name":"@material/shape","version":"8.0.0-canary.cf800124f.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.cf800124f.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b11f4acede4ba7e9de1c456660ed5c056f3007a5","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.cf800124f.0.tgz","fileCount":14,"integrity":"sha512-/W10MmjWRF7wqya4rOYHo7aeMwjczAHIOE4nHSNTObptYSVgZPhD/rjALsuwGqZheBeo1ov2MQgjCd2hlTKjhA==","signatures":[{"sig":"MEUCIQDcWHmLVJyMDPzJVS8yw5BmuspHeImB6KK9UgkytixhNgIgWNTqZO400ZL+3lTyYBraUnZcwUyX2R2AXAl6shFH5Ao=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPvCfCRA9TVsSAnZWagAArHwP/jeViE+4LecKL2sfV9Em\nf/GaMzY2vRll7Wtc0bHLzm3PZTqy/T7NNbvSvJLkecJ5PCdjR3LuXEeENj25\nHF3l1fbqhAMKRH4zMQ2C4Q23LiWXQv4HD4qA5De6ookblX5M7wjYIdEDFII5\nM+dxGErMzMch71ypmkmVcNc8tZ4qCuqB6rlzKeh85boxFubr1Y1v+AoEvWXD\n6RhQ6hzNmnWV+kEmiNfGpJUvhiAbz07XscywoODbOd+ybB25Gd4p40tu8zXV\nCNqzQM+Xm9vpfwlfPu1P/T2IVjyYz9piG8giKzegQNPfGUFahxE3FAmnVtWU\nQMVUXsTPAj8lPkOAWhh6s13NE+pFler0VSMBXjdaD2jkS+WzYor0Rx2Q7fqL\n+X+w9KSvjtQL2wHfSFFDR8Vzp8dSJ7lmcTL968ODC4bsZTpsAUivvkK7TwPk\neBewdQmBFJn2j4YMkxQ2wk0HfF73BIzS1G1PvjMHQufzWbPzRs15MwiwQcHb\nx08hQow+F//eqF1fPUQOs4SlXrGqiQcCudblnuzoHNCqODGlVCBnHKkLSlOZ\n1Mep6kG5tIqOdkmygmzytVkiXmd5aEYwVvMzHcymWUYygaQqoaelIIlTZ2SV\nLsJpUWDcKWxe8BvoiWSGiGigZNcplLfFnd7K/0McSfEi9j3LmxuQzk4OCeUg\nLyTB\r\n=BUZg\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"b15bab8ce97a47831c29a3b0acf1c34e0533b8e5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.cf800124f.0","@material/theme":"8.0.0-canary.cf800124f.0","@material/feature-targeting":"8.0.0-canary.cf800124f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.cf800124f.0_1597960350916_0.9700765152487898","host":"s3://npm-registry-packages"}},"8.0.0-canary.95e4eeea7.0":{"name":"@material/shape","version":"8.0.0-canary.95e4eeea7.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.95e4eeea7.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5019d934c2fd2bc5de21f03bc2f010af7d64ca7c","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.95e4eeea7.0.tgz","fileCount":14,"integrity":"sha512-eKNTi5ahEAxqcuQ0EI2kub+u675u+4JnTrTJZibrrLDgBVVhT0IC1DZo/hPJvtaJy07ekaEh7waWE6L97+oUFQ==","signatures":[{"sig":"MEUCIExp3J2O9vuosTY/iY5uWHIA3xph9GQEDVECyzxhe7t3AiEAt+dkEgq6ILPPCKtxErOYQJqKftyG/lUpDvLqRmYT+9s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPwctCRA9TVsSAnZWagAAlmMP/1XWaIUqwuGnzRpi9447\ng/qwfx54rTgCnY2+KVl9amoFD8oIY+rEMMNzqB65IgGr+dZ61nE/pfZoEfZc\nViteiAeGdN+vnN8y3JEANOmtUmxqLZET3SGElogk7bq4dWQ2wXVrsvjzfy24\nNotOe0IFTBTTh8PF6Ekn2BJcO65wnrL61kcU6lr63VfO6+rbU1osq3ysWgGB\nvnW/tWi0GMDpxd+swky+Nc3b8Cka8ES1UtN4ty/6ybIjCTXm+3P+EeKF90jb\nz5Ga9Iqw7d+U16OJhv06zuEUsvtbvtD5LqeZ36e7YNswEyJVetwEIK+KYoCG\n34/CJrcqmQTrYh3S6DWLKsxkJhru/kXBWV0ONJKcnq7xBFWrvbJaQRaOpB2/\ngkKZBpm2LD3WY2J7SBO0v3z1+p/sHVo++MRHu+0f3oqLDGm8h2BH9SNSw04i\n1kF2YdSPb8VcUyTgLkK0w9C5ssPgBgUx00Vs8agMygBeKaR38pq62A/RdIGv\nE09Q+gupnDuTrjgE9k3Zn1JDk6qsrcwDosgvT6ASIDo2+BZpYQ2u061NKQVQ\ndWRgK4sJWnLcs4zbsGgbWaRR6fVa7oXp3TBaWlIVCIMhMxgA5yU75fAXet9v\nYDIWXnR6fBTiYTMW5/Yi3aUBb/SmSdnMSgBUSJaLu2jzK2TGd4r73/ouDnxP\nV0+Z\r\n=UWlq\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"be1ca8dd4a02de91f796aff6f2a9fa745f02df13","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.95e4eeea7.0","@material/theme":"8.0.0-canary.95e4eeea7.0","@material/feature-targeting":"8.0.0-canary.95e4eeea7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.95e4eeea7.0_1597966124570_0.14831502189002155","host":"s3://npm-registry-packages"}},"8.0.0-canary.91ab1c62a.0":{"name":"@material/shape","version":"8.0.0-canary.91ab1c62a.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.91ab1c62a.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a4b03ba233c870b6100d9fb96f60c8a739c1ac8e","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.91ab1c62a.0.tgz","fileCount":14,"integrity":"sha512-zRkVSPW9gWQB33AUdTkia0Rfy5KcX9e6TzIbE7WSN6Yj3nwxj+bGJM7GHFgFARkogO8rjN80laMo7XQIUwXE5A==","signatures":[{"sig":"MEUCIGloYEtpWTNjQ+6nExBHebgfGp7INP78nTw2A5OpL7p8AiEAzPbA0j10qC4hvb2IPuBvQqoe8DA85RMGN+gJbJ2q9Ng=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfP+QrCRA9TVsSAnZWagAAeP8P/1d8xKLztmI4INX1ccg3\n7QxkKN4Jpj4SmDlQlW/011s2KabCWAVE2lvOvMiObqPd0uJxyENr7NJLmJp9\n/pC84pC5RnS0cBJ44RVFeDjKuv2Gd8tvVe9TgDKyLyEYiqAETldNtyZJLlYs\n3UAbEcI3hYQjQuj42uSmHnlI5evD+g+fdjuDL74g7L/9LM8yABZJwYyxEtFv\nDEFop2+0S+cfKGrfVNEPWwaBGs7Sp//8nqkv8XQGRjfe1wsz5z0v4WrBxIlz\n3TElC4T1nrRM5vNaAtWN8MNm6yk3gCHlEFa0scxrnqrryAfczKpoQfnAYMxs\ngFdhTSGoG5p4l0ZbiXe50N+liN25RPp8IM5Flhx28nN5Uk/qkDpdsuwwS00m\n1zpPtjavjdUsZhyWYfCj1rHBgcld+oHaXQRkhe1KF5eM3bSaqCMSOH2HEhNo\nCBWvFzAuhlRhDFhRqVr1ThwkeBAK9dnABgYstFuevlGqlJQtq1gjSqCEZNXf\n13ZKDyIzRHCVuVFYs7hijllb+sEkkki+Yabztg86N5ieOvC3W/wyLhpIex7i\nPKE0R7fxZouXfIJeUZrN7vTIU/1H/bV2wbpQWwtNuuOQ8aGqyPmdmyE+eHyj\ny4KrjDDIH1UDP9+7r6gd+l20mSia6SwqjvD6yciiNHF9aryhBkr9E0O5e2b0\nDLSc\r\n=oicN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"389b1e8f2b60ae90730087557ec80e133f0e0129","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.91ab1c62a.0","@material/theme":"8.0.0-canary.91ab1c62a.0","@material/feature-targeting":"8.0.0-canary.91ab1c62a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.91ab1c62a.0_1598022698847_0.07560973446026042","host":"s3://npm-registry-packages"}},"8.0.0-canary.58eaa9f02.0":{"name":"@material/shape","version":"8.0.0-canary.58eaa9f02.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.58eaa9f02.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"71c98ea2015a9ad957594715c1130b109150ca3d","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.58eaa9f02.0.tgz","fileCount":14,"integrity":"sha512-y4Yoj0AUsXeme74oAiE+3mml+W0WXnepNNuIGjO0zcHXvIFu1WhfDAAG7cg0dMcKoXY7b3MJpJlgW0bTi3hN5g==","signatures":[{"sig":"MEUCIGSK3SjaxrEClCs21s6GvYKs91cXiBArKNAvyC1GB46FAiEAwFBLeo/QpARQNuvAnP39+eqCKYK3CDTy49nl5XGsEb4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfQCfNCRA9TVsSAnZWagAAQrcP/1M7CPp1d5mjVrSBMDtf\nrKOHn3p1pTvnIU3HvZZU5MFGfNDytg2+CcszLE0NIY24ejMXLQgHNPmS80gR\nj394kHCyFSwPPbRYrzXCnAkldyFNwEvNnkcbW7hVPxO3XAi3oNqHIyZ6sROa\nKl4Ow58eFItVVlqcwCUcnXS6a3ouv3UezcTbTY0hp54Do4GVUdWoRwp2A5vI\n3D4ekZJga1UcESRNAsCNp996baAVYipyNWKBNbQ1BzIQ7jq5R4QSesmP7jC8\no7Xa9/RHbRJqZfaTgDVFiYTJxCc8Vq4mRNzTajpuYcK1RiQITSU5vJUJ0pTV\nWSLreDIfwWRHmal1leiQTYWZsCMMvysRzXVsMktCnDuR2lgU9F8WSbkVrFVA\nvNLe32vOONDSLI5kuzUChRhaVe1gZmY1xZHjb3VO3fQ+8dBkz5CYq/7yO4lR\neQ/t9VssWY9XfQ0DDoPRy9I39cEImt4TOi+VL0A8quvEzQ4NF9C4Qh+RnBPd\nKr+xotcwCZxOM44UNs0LY8FSR9+D/Gtazw63RSSbC8wZcX5xELOYNKXy9jeg\nZtX+XkfZFSGertQaYoR+1p9K2a+TM+74EXRTrfZrmGNdK8FDUYZryH7qQhdp\nVH1mlXFWPIeegpI1WCFkU2w/BgNApgW8OZ8UEH5x74lwCwS2ReOiNUrx4lc2\nwMdm\r\n=vNEb\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"9f3944d638392fa39379eeb30bd7348c9578f67b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.58eaa9f02.0","@material/theme":"8.0.0-canary.58eaa9f02.0","@material/feature-targeting":"8.0.0-canary.58eaa9f02.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.58eaa9f02.0_1598040013491_0.7663716786847377","host":"s3://npm-registry-packages"}},"8.0.0-canary.238216fc4.0":{"name":"@material/shape","version":"8.0.0-canary.238216fc4.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.238216fc4.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"11377ee952df855fb53423a2e23ff6c2fb67ec1f","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.238216fc4.0.tgz","fileCount":14,"integrity":"sha512-6hrxxDxl7U2V+90spnSwub2mEHpNcykVxPy5cAlvef89b4lf7iHdeywjyp2i0OvL6SRKcDpqfSJU2STuZeCp9w==","signatures":[{"sig":"MEYCIQCmzHXz+DmuuwRzP01Fqe43ZkoF0cmk8L7uljLJeB9OKwIhAPimg8ZPEgnYHDSdZcy2ytwYoLaVM8EnPQFfUiXLXoAw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfQ998CRA9TVsSAnZWagAAcwgP/1bwmZV/gSkYlhQze7pV\nDXKBwjVM6kS4HKuEtTxGkh6xGB+9V5Rrk9qRuTF574njUDmT5TEnva4gm0zE\nTEJh3CxPRTjUxeyeL0A2kAP/1/vl118ljcQHxuANWApTqvW0nCZJjv+F1lHg\n1wVeyhrgpl0NIUUbdKht9gS6Byd1SnmO9h9sSOuQtwHJUNmWfKSV4Hbb3KIr\nX2VaNUKpsa6ftZgWbv3VwKF6uWb53HPJIpcPbT6TWHM5cozYG45oXJNMPi+e\nZGY4wNk2pHBE8zmnhysKc5DprkDd71HuVQBzoHRDeek60FUU06VLdhp0OXtu\nL9cPbO11U66sOj5mKcqZk4VJ9pRmpY3OW2diO8m7XJByIQraVOtuzqWzmSxc\n/pPeYacK4l8uDMY21py6j5xtn/vHHzgMAADIc3UzRWHqyQFlCzD0spmj3Sts\naNoNAFNqqGP9YqHS0xwKzXXLwjsBjZIMDf/Zs+9231J3vViGy9GQqqbMxabF\nPUkCvdxQhV39VfQ/2h4C+0kKVWPFdEoJ5WLF4Oz3hFktMN6FcXAt4tZaHaaZ\npPGx47LJQ3rvwv7YcQngbUo0zzrOEOxjrJMAhFakAYU151orx4NQuUJ1BTBx\nugGWoZwqqdInHr9rMDhf2Tgj5vBk9j92HGQkubS6w2ZqBbcGVC36Q/lusUQv\nDIlE\r\n=ONi+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"e224b287e176f866661b15e2ee791e17fcc44aa3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.238216fc4.0","@material/theme":"8.0.0-canary.238216fc4.0","@material/feature-targeting":"8.0.0-canary.238216fc4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.238216fc4.0_1598283644084_0.8100598558428025","host":"s3://npm-registry-packages"}},"8.0.0-canary.a1c65593d.0":{"name":"@material/shape","version":"8.0.0-canary.a1c65593d.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.a1c65593d.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f9f16460bebafdd2fddb31f5c11f6783a950b840","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.a1c65593d.0.tgz","fileCount":14,"integrity":"sha512-fvrr+Pb2sGC4+v/eU9VaDcSBi9Ud/41SKbhS/dqC+cfZe4r7NScIETgCU08HjsvgSTl6IBUqnBjXtxsUiz5RUQ==","signatures":[{"sig":"MEUCIQCJwvlpEk3DnEh7Z2SzH5IoQ73OzMdfHg5cgDJ0CRv0mwIgZGgp8z8Z0uovyPhPalzeFtfurkhr9p08XelKwIHcsUg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRH+RCRA9TVsSAnZWagAA3MQQAKD0VPLd4P78kAk4/4BN\nGujQTvR6TPIXVPLXH5JDF55ZXSSBlJwVz+wYiFop8HwhDUFblCeeFjZ/p/CP\n8am4WiQawZ/EEcF+CbN2LMdKoQBO3HyIPwkxEKxed1D1r5SLUmGo96a1azuP\n2p8LjdV04avEr0N9hgUnCV2B4CQt5AOckRhTksUWz0sJZwsqVscJP5eHwHNA\ntt1uOMUISoEwDOsxIEBeKoxm2fQnYsIQaiMsL4blG+3PfIOFgPV20wJ70XDN\n5F94mjYRcrI/VjcY2Cp11CkmHRbNnMvSaEiT6sK0rtg4p0+R8QebwFsd/TAc\nDDXLKPLi7s0PNCAytRlNrwhb+NJmKyTDZX+Cpvhqex0JrIAb7Phl7OxODNxH\nKAfvPyJzcuPXaHvc53tNpIzs27SGOVyQbxLHDhKhfrGzc115Vbp0DrKgtuan\ns1QsSh2xXTJgLojgtoieO58+H71xPpZfGFxmIUmMLiMRSPI/AihnuWhdsLIB\nacgXir5/0FmgmlF0WJ1Zy59wRwXvqZhvGds6XGC+6/kLAgZsifqDCvLNxVXw\nfLVzw/3Icp4sJ10CweSekFfCXZNivnXmL34MAr6uQ65mGmwN9NHzE4JLbp0I\nimkqRvuhdSA170NSXqQdbFOda7qfrV74aCKP8Dyz1HmZNZcYc2dwfpY87QHV\nfaL4\r\n=yzAJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"71fc6b5e7b16ba7f6d37b724ad4982780c9c9932","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.a1c65593d.0","@material/theme":"8.0.0-canary.a1c65593d.0","@material/feature-targeting":"8.0.0-canary.a1c65593d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.a1c65593d.0_1598324624615_0.1049955437228629","host":"s3://npm-registry-packages"}},"8.0.0-canary.708cc09c4.0":{"name":"@material/shape","version":"8.0.0-canary.708cc09c4.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.708cc09c4.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a88d7c0532585411121039f758ef24d743cda975","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.708cc09c4.0.tgz","fileCount":14,"integrity":"sha512-ItM41GryDPbFFdXtmcUzEhOqQXgGZdro/wbD8MDfVqaFgEaIdaX3rX6Vk1OabxFEdTs7rno67coWBhIHtjBcUw==","signatures":[{"sig":"MEYCIQDjCz0Beo+0jj0qHhiHfSdt+I7iFNG/7qAH8b9LnWCVigIhANkBlB7dpwEtx5h1Lo9t80fFNcJy7uTvyE2eY1cCKmjS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRTSkCRA9TVsSAnZWagAAwdQP/0n3Vo3ls7KrbG0vobhF\nfB8so1LFSc6bSRx7f3C2p2FDpA7noQBshwcVlkbEF1rmdzvBVetW/B6QgH40\n+s7iJOVH2FMGfVJnKJcp1fQ0BWSQGVK7I+DdbuUCBrWInpfHLLKNR2IFvzn/\n+AbLos3cl/SvbswcY9D5pZR3ySRX9Jiw5g4926b5djYS4qVIfwe5VHdtwwDr\nTS8zIjoFW3cS2/m234FoeH5smBTj1ox7V5wYLQlwTK7QhoyhluyAgK/q2omL\nbzucWnTZntyMv5MQsvi9VEgmTWmxM5YLhC3SZ5kYokJiGXjqQSZOnyoD/1DD\nny+LAvoDrzvhf3y7x28E0x77dkkzi9df7s0cIW5vmTc80Acn1pGj7n1ulK2e\nA5i5f1YwXI3Y6Tc1eUFTZIbtaSebGYXxxwl0baclTOae1hcqhAkwF2ZPXk4i\ndpwv5EgQaBayiAg2e4w56kNX8E2csSHuTmL1rpWiwZmauUOk0sxk1ixiC0aM\n6YcSXXcE8HPNWmaEEN5dj8dt75ZzpkQW3zckv7rIgl+u3Wyymk/DyUaHVRb9\ntUrXginPaKtDtv1EruPOZMI5cXnmvDp4LUDcq+SFCQ1q/jBEREIfsDK1sN+S\nRENOOHmMgUgIefrnRx55fCi4WqaDbaCp51mmtwv/pXWaDkHRG3QnG76aP4eu\nJwy/\r\n=/a2k\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"41353a40a8a6a80ac6438fa702cff9ca690b897e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.708cc09c4.0","@material/theme":"8.0.0-canary.708cc09c4.0","@material/feature-targeting":"8.0.0-canary.708cc09c4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.708cc09c4.0_1598370979511_0.40462431371422714","host":"s3://npm-registry-packages"}},"8.0.0-canary.19bea2ad3.0":{"name":"@material/shape","version":"8.0.0-canary.19bea2ad3.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.19bea2ad3.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c9991a1634d8a2a08d5165eb3e2242867ad72ace","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.19bea2ad3.0.tgz","fileCount":14,"integrity":"sha512-Ij71t/7ORL1ryLgELmefhlBKtRObEf7UWPLBCwtuVeJVsLihv2EcstE1/JdUrDq4CNm6OA0fKS9AkW6zA23rUQ==","signatures":[{"sig":"MEUCIQCIYVDIph7E4Ji10QliG5luxJoIdpQS6dPsYkiYZmKbigIgHUTcFOVHH5GwR6GfVtL8gBmaSYb79WH6UyhVrtFoZb8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRq6mCRA9TVsSAnZWagAAzTsQAIjEAGQDTq+dQu/aBNAf\nQ2rvauASTAKcmwPa7hO+Baruup+UEmmkmPnNEGeZrt6VCA5b1N9tyMmjpgqh\nEneRXzRd620s1PEOJy63PGQjCcCbOn4d6yfrh6zB+/3yh8UgJnRIzfHGQsk8\nv66wPnODcneizrjJF4W+5fZsrGBcWZKvxp93H4G25mGnW/WOQ278gJblcM/a\nWxzSRhvnE4u7KdBRlp7wkjtQjllNNA2QJ6TIwuiMOzguKyJv1y3EREnLXU1u\nM3ejTeRABxtqrVzDW7KlaJAdv9XIT+scM3GDJH1WAzJajWMC1L/D+RLbGSR4\n17zEbvabTKKamb3cbnI/6xre2ySVBjXUSszKxJbWoDrH4IWCXbv4VGuqYQTo\njDgUbtPH07aH6d3MKUptoMF3BJ6J7n7LwU09Ukjeb3i2V+TzNoMJDRxcfPug\nN/dSAI0M89B8pLt5hPrqG7XphaO1u3cxZRfRAswgiIE7uMElD3yPPbbb6UiP\nWeSIeGqiuNUpFowfFDPiHoaN8GE+mheqDqD9D6whVFBXxGDxpB6UPjFy90BR\n/SRvjGbLW65RpSoTK2uEkcoij/8GYBYm1lXbEf+NrylPlJdF7g0MvH3IXb1j\nNXYXatfdchuJ3TFpRh/anmdKertrFF0dgw2K5AfPw1X4j9hD3cN8yZqDkx8g\nUE2E\r\n=Yg9j\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"4f1ed83b6a09dd3e7d24508d420cd99be9dd3893","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.19bea2ad3.0","@material/theme":"8.0.0-canary.19bea2ad3.0","@material/feature-targeting":"8.0.0-canary.19bea2ad3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.19bea2ad3.0_1598467750034_0.5071030054291008","host":"s3://npm-registry-packages"}},"8.0.0-canary.911014711.0":{"name":"@material/shape","version":"8.0.0-canary.911014711.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.911014711.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"92338f52f6a44f4d10e7bf3339c721a40325d13d","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.911014711.0.tgz","fileCount":14,"integrity":"sha512-bNoxfD9cNLUxeeZzW6ugjZJbfP33a2gR+L0sUA1O5wZPD2nwn1zGMN4c2YPqBkPWmvdgM9MqMKOwvy1OQUf0lw==","signatures":[{"sig":"MEUCIGVw7GXsLsCtLZKFYM6WVfMsZ2lut2M2oLe74PWyw/GLAiEAkhnjbtSYuHO28o4vf86J3JOEPS3iBSSc9mMKmk6bsko=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfR9pcCRA9TVsSAnZWagAAw7AP/RzVagml8DMhoE/WrWUC\nPOJKg7YocOh59Uzia2S16V3i5uWq6CPc0z3KmleTsbGA6nvgEPN8zf0uStak\nHztf9eubN91VXiNFz0vprPPHMJtNhbB/16YqO/G/3viFeEUsB+vNEaJL9yVk\n/f1cELhPmqe5ZRA5gJ+Y657+ew9xSLKF8gQaQ/kVjBeicW3zryzDMvFLrYWB\nj9Oa+Aj5ijP9CL7FQdhpE+DK+zDUnzpWKJAR88toNnACo3P2lw9Ts9WW0vDb\nAuNqLxWtMMSXJZLS6Q292YkobkpOjia6VBeR5QC1NceeE2ZR3c39z0Dvl50g\nTIZkSeuK0zyqbNxWSnQMDK0nspwiB1fMSnh5DTyPm9j+qj7khpOQcaOfJQUc\nJYTPujWLAqswkG/oC9Q8d+Yeyc3wyiP9uNDVIdT5SZaX6+L5BUbzlSieB9gC\n7/rcqeBot+E3St4V0JuWIz7JrDFfNFwINHFpnCavB62J5arx/Cq5KNKJvW//\nlYRecR1eMANn/xd6JW5pWL5pOu2oVBcFUdiH2SYlzPZrKjxaAL0auNQ2ieBg\nEt2+bfgRCFyJ6O+XLconr2LNlCdJFOxXOWNKrImUguaXlFoZV/NUsQOMGDCl\n5cytRap4VA248dvtsbQhChCoY5iEvjc5Nyv+T9vR4QadxvwJiBVWBfEvYwuh\nkYJM\r\n=mJrM\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"e0563b839594887804244d231bec5f415812fc4c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.911014711.0","@material/theme":"8.0.0-canary.911014711.0","@material/feature-targeting":"8.0.0-canary.911014711.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.911014711.0_1598544475699_0.03893172952859758","host":"s3://npm-registry-packages"}},"8.0.0-canary.d3387f54c.0":{"name":"@material/shape","version":"8.0.0-canary.d3387f54c.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.d3387f54c.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bfc08b21f2dc2ff571222b022a8790f009c67244","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.d3387f54c.0.tgz","fileCount":14,"integrity":"sha512-hiF1Zn79hkmSlzyGtLctFbVcORaLGH0fqFHNUrX305WLArOhVGgF7BUNWdbFgF1TbMtupcnQany13elRR+FPlg==","signatures":[{"sig":"MEQCIDR+ngYb+31bZzeZlcCWSSdMdNRyg+biwsynvCL/qt6XAiBxYE9Wol1akc6cNAsk2RAknmkQxLngbYpWi5njsw8S7Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUVguCRA9TVsSAnZWagAA0ocP/jplyJK2IJgLf8Hwivbl\nkrs4yCWS8ugrmITn5EBYhV+i6twqYbNONNZv0BbrYnflo21GW4B7HgTY/BF6\nXYvl94sBDCns/FoOZNvMy87LrxTidhD3zCnPVvkjHtFM3A4JW1N+cXl6kawl\n5fTHpDJf8xa95w9ARezeGc9C5sefbw0tsFdjJF13I/fiHDEPm35NnQgv57Al\ntaKnR/FaXGBwmT44pCMqMWGed2NLeDQEeLvg3pcuKhPwc/pXUHomLP196LH9\nwYrG57ELA/gGHvTP2rsFiCUqOhGy68vdLDmjQewRT/lE9zN6u/f8nV+ex4LO\nBzJg7BXoIWoPlsxKlhLDKf0C6GRa6mLJPIG8g2kzApQWWRWYf1f0o5vqKipW\na+3KL22XTXInvY4mNT5lGClYri9Qu3gf59hQUBqCmfmjc+II/FHSr/vBrw5A\nCHp3bOtcHH3Y2PLknMLDXYZXbhfDzaosGM+QQwXzj7rxb0lcxpM+fxDalhO8\nXPSoEryk9JUtH21QyKSBE4ePBMcC50sdm/MbzY9FRJhVph2gSg9PRlVubStY\nv+La2qoBImiqvql5K/HyKe8puZmo/qEaiUOgvTS2R1eCANP0lRjT3CmTXVj8\nv/wEYRQlvDoP6k6ey6K2bS00+m6I/GuFbc+ldUStQqvQ9pKP1/0scpVKWP/H\n8oAA\r\n=Jj7O\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"b8c159d735641688e2fc1631ac7a98134ac5fbc4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.d3387f54c.0","@material/theme":"8.0.0-canary.d3387f54c.0","@material/feature-targeting":"8.0.0-canary.d3387f54c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.d3387f54c.0_1599166510372_0.6973720544933735","host":"s3://npm-registry-packages"}},"8.0.0-canary.2ccf996cc.0":{"name":"@material/shape","version":"8.0.0-canary.2ccf996cc.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.2ccf996cc.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2d458c1b45386e4705d57fb4db31735d5e2977cd","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.2ccf996cc.0.tgz","fileCount":14,"integrity":"sha512-exzddSLJ+RRYEY9uRA1BEoxs0OLHK4GNMGx7OmSZd1umsn0vYeAKAtzma0+oSbUX2Qa6rPRCAO4XwKhzAzEK2w==","signatures":[{"sig":"MEUCIQCHAjhFwSnsxx3LIKy/y3i6KCxlPhYdoh237Yd/X3pjpAIgfhTb9uT48K7kw2BawgLT5XkfuawZl1E/6eA7MLVZD5Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUVhKCRA9TVsSAnZWagAA0woP/AjEvTizQOmKGont4Agl\ncQ2zZrqCOlbDjT43+lwcZOce75W1iYMP8Y1xI9LQ8Vjcwg4G0Lbw8LUbJ74W\nFIUZt8K9yyVr/pgXth3CCLqWanleIyhsA4+C8td/+5E+KCS6WPCkoDsm/1Ga\n98BaoQzYkjR/E3cceEsmLED9sXvZC4NfniAnbgWQ1MPBf4VOtY0GKuT1zO1x\nrYvtol5NTKAxZuusRxHhxTeb0j4GF8EYZ/B8XImS/ccEFSWLnK3tnE5L330y\nS7PVLohtfXHteKUDPWYR/sXquIkZ4ZKk16S+IriMr1xPUxQ3H2dMi5vASE5U\nAe5Jqu8p7Mw9rnRKRpEmWRM7oIPcHqFvRpCOSliVol+qCBjgrlMkgXe93MwS\njsLG+cnZ2juVz+N139keA5JtUWyVrJr2fzr0kqerlMtD32JE/d/eWbjYSNZU\nvh+hSyofoiVBXJmZeK7GOjP9vpeZY9uKegBfVfjp7gCfkBlp+eMSuteoEqzQ\nWZJOwGtBxBQv8+k+2xEQZXgggqCFw5Ub32sUeqScAsJB7P+b2xeEOX6C7pLC\nM34bwAAz6K3DKGLYGkrDPU3adxitNPJ6+0eMY43Uwsb6aHMIHU0gVj3b3v+j\nwaAYsZwzCCP4SbvcB+G4T+uNMUXUhHZAiHtaaBxDBxQIbDVAyBy7jurczYA3\nMksg\r\n=eGKe\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"b295adf5299f65a654963fa774da90dad3e39244","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.2ccf996cc.0","@material/theme":"8.0.0-canary.2ccf996cc.0","@material/feature-targeting":"8.0.0-canary.2ccf996cc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.2ccf996cc.0_1599166537723_0.9091905801016154","host":"s3://npm-registry-packages"}},"8.0.0-canary.744bfe5d8.0":{"name":"@material/shape","version":"8.0.0-canary.744bfe5d8.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.744bfe5d8.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fe3ed57226773a7724ad3509ede5ccdc093a96fe","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.744bfe5d8.0.tgz","fileCount":14,"integrity":"sha512-BZHI7IJ8qpVoXbK1onFbf87R5rE6vaYbxx1lbNKk3zk03zaSBYEuWMEE8FmvxiJsUQjdnCVASNEGpvZhNZFDSA==","signatures":[{"sig":"MEUCIGfXt33XVRmI+WO+zy773YTOYZIJJJEzSMqFKQCI4SxhAiEA4GsMKchE6caqOuWLebc2aLR0X1XmJJAe7+jItVwoW7c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUVh+CRA9TVsSAnZWagAA5/MP/jxAB+Px7lOUK63Lw3NG\n6WBdEwqBlO9ERWx2+onFEtMQZX5ZTOhTvZS4lNEiXeeinau2VFVN17+Cpfx0\noZZjYGU9g2oOlA/pxS4T92Lew7mmUMrEtcI7tyomPJFvzRPxzyli31mQ8VRf\noI/nWLMGF1yWVu4dyBnUg6uIRNwfwZZG+ad3Od3uqOTFUARWiTX8xttyX5kf\nAQ20DWdT5QpaDNs19Qkpq2wkT4mfhgzjmC20DuSmliDjGwwUjBDfr9JmJBzc\novNTEhh+pweeiLgVpMJDpWJl/soCa1nN8d5GLjc3dr46OYKq3yIXvpuQOlV4\nsQgx3QBLu62Rqdpi/+eTpJ+ZqkVwJ+fLbOB0eFmESNXLv9Qhxgt/4VytGwnh\nDWfGhSUybiHnQWWbfa/+jQaHz5yfD5kgrKtI4sJ+W0VRuLZawLdD9dcvRMsW\n72NFZT72mUSz5wg9/RjaZijeWxg+5/mvQfHyPqtdVE09yDx07c+4waQg0KqW\nvK5PQjA4sL/67TDGbqWOtKISPRRE7XZrm2dqHeifCzVTNFHkBgXjHTOAgO2U\nwDI+UuIbsQrVjnAFWygc7FhO8ALyZWZ09qKD0Bk/VljEtD/tUa2Uf+kDDS2X\ngKruB1+S44QVcpem2WBAb+Hur0gzp2wuVYRExggzFHdAsSF61lmEqv3KQj/4\nqsfs\r\n=f8nR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"e8e9d5605e05fdd50b88c6ce659dc2ddd8ba768d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.744bfe5d8.0","@material/theme":"8.0.0-canary.744bfe5d8.0","@material/feature-targeting":"8.0.0-canary.744bfe5d8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.744bfe5d8.0_1599166590358_0.9668258173752489","host":"s3://npm-registry-packages"}},"8.0.0-canary.78da96eaf.0":{"name":"@material/shape","version":"8.0.0-canary.78da96eaf.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.78da96eaf.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a87586c743a33192be1028f85bef91d4c9d1d855","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.78da96eaf.0.tgz","fileCount":14,"integrity":"sha512-hHln9fAskAvnIOK5o8OLthbfCx5Qcju9HKyx2HW3lZGQpGU01JRD80YDcNQQXRh2fs6z2U+1y4v1+6SK/mpGpw==","signatures":[{"sig":"MEUCIG7z4V4DPdFp9HaZ7PoWKJbVeqGnWfuK9xXgxZRytLY+AiEAtihoxK6sbn4pE3P/NUWqJ06r/qUZNycdrPfUzsx4J1Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfV9esCRA9TVsSAnZWagAAWUsP/jl4zwlfifVeQa6Pg4TD\nBuXoFM8xq2gWghX2BdrAv1ndfwjyZM0aWy3QLdQo7MsXqfqtR8IHi5nI1O9o\n2M7Ov6aCgeBSyzEHz0hWayTaA/P3TzORxxdaZoamsk7edCtV8mMcx5S5bXhE\nj/ql5UZFep5dsCoV+qRZ0zU3+W45z9aMdt0vHq1f2KgkdKyAcB64klnl9qXY\nC0uEtsoeSx3FWYta6+hD9aAML/TUJb2e946M5BVNRqq+a7lRxuMELurn4qJX\nVGCrYltK+tMe0Mqhx+yf7VVWFXv5kAaTegPnvk5NnZbbMAqOCwJYa7VbabK6\n/G8v10xcS18nCt83ICIzCR7wu5pgEPa9vkFlxAzgf9ChfuUDehS8yYK+mjbM\ngUTkM6Pt7A+u6QxQqbuQK/91+A1XYbgpcoiMBJ2RdRNjBsuDhHx3glvubQRn\nLyvvvGJ64Fa+t8sFzbMqElsV45iUoZxOc6OdfZOvGLiBd2IWHnkuP4IdYT4P\ny/qHYN2WvWQTa3ss5ucC3tO1BdNwXLheLQH++YGX5Fd3EbAb7MUs2XzKX3AW\nUAyaeIy2XU7QUl3tVkNOvV4do8gILcZu9LxCrwmkSFKYdCfdGdJbMeZqo4jU\ntaPTZYpbsjMXyaReDY9TU1pT3JQg8dpA32yqCeVaQMBliw1PbFqEgLpKVZWn\nkYX+\r\n=XE5T\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"e9750a8b0ebee9367eee7e514953a1b1ac6fef7f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.78da96eaf.0","@material/theme":"8.0.0-canary.78da96eaf.0","@material/feature-targeting":"8.0.0-canary.78da96eaf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.78da96eaf.0_1599592363937_0.3285820033392044","host":"s3://npm-registry-packages"}},"8.0.0-canary.b0ed593cc.0":{"name":"@material/shape","version":"8.0.0-canary.b0ed593cc.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.b0ed593cc.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3d7083b8f183fdfd00d7f143f9591b13502f57a5","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.b0ed593cc.0.tgz","fileCount":14,"integrity":"sha512-9JxUnzSr6umCfj1VyFcjFOhoO3UED+tUxI+EPXwHGyvaDOo5yt5jSfRA8PKTWheLlMj3erNuBDWI5cJW+7eP/w==","signatures":[{"sig":"MEUCIQCc4Lzxc1q7eKWhsAGLswrEa1fc8wEOeIJspkJ8xDdvEQIgJpAG70D7/DuG4ybP3SXhg8kYLhOGaUfH+LLhlokD6vE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWHMcCRA9TVsSAnZWagAAUtgP/2Eo8zyV9Ezgrw+POf6n\nOI9acXBq8MUrlrxz2/J+/L3/JsrG3OQajvXVawj8ZBKw6Z0bnshsKL14wqVm\nJ2YtnYatyrETtQtVxPAODd/xKALdHUmHK9oscfs58mG0A/DSwjWQrNAVMnH2\n+RIhSnayoyWowvIRUHwIHaFjFDmhREVRoM0XCFWPaQdzi5mlAeFqzvdPO/yj\nO5SJ86dq2a11TgdM6e+X3JAxc/R+dgrvctV3S9Ms/66uswEesMsWrVOv5lE8\nCcaBHHk6KkGWPUNxAwCjrX4Z6BYPkgmXbcPfwBq2tpupBYhqrOrPHT+k94my\neAChVbBDr+2KT3/GvstbidDPknAGpLqXVHc8mjJW3bfl+0Ce70+YyuHlSae7\nFOH6dlvVeMQSr+c/Q3b64wmIYWr2jz+L19n5+aLDaFiFW0KHRvHQceWuVwhR\n7yp2C1EfFj8c4M2ilFz4VcPSwkI/tMTY+utEQFaOX3Rl6PvUBw8FW0dYEsvy\nQ4bVqmAUEoTYZR25Xtw5XZRaH9gBQtpBFuKGE7mBHTF6betzNN9xcCl2AYN0\nJkdaxAPsN1N/D/4g3UDPfjdHhd/nmwxOmfmxUCNnWDz+2yOq8RyAzbwONqp+\nJC6mbV7mwN/iYY95Btn6Mzbr9MrgY7h+/iQOZQNyVqFmdZWFcHk8iUHGs3MU\nnMLf\r\n=V2vV\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"d4dd3b56db446c52c35f891f9a19896a2b762f0b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.b0ed593cc.0","@material/theme":"8.0.0-canary.b0ed593cc.0","@material/feature-targeting":"8.0.0-canary.b0ed593cc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.b0ed593cc.0_1599632156525_0.22722985098316428","host":"s3://npm-registry-packages"}},"8.0.0-canary.85a1fa9ea.0":{"name":"@material/shape","version":"8.0.0-canary.85a1fa9ea.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.85a1fa9ea.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"244ae1768c044b14730b5ed40241bf497576a562","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.85a1fa9ea.0.tgz","fileCount":14,"integrity":"sha512-Rl3vZbc9MyqjhGt0t60KAnTcvrCsLRCV0PZhZKi3ot6/0YsndRlsD14STZ/L5mp3XSBJNTabukt+HnLe4OLnuA==","signatures":[{"sig":"MEUCIDXPdQO49pPHfiy15FMHCOh5s1xsjeUZP6EG/6d7VtZxAiEA4uIzcnZhIpzXT5X5/oz7+6x/RQWiQi5JtPZFh7VqGbQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWpZJCRA9TVsSAnZWagAAeywP/2xBvSU/TKnKvLhB8UGu\nQTX3cKIjhuq9qyeAWe3WClSDNql2Jjhz3KV3cmpaacADqupmsNRqluOfciLr\nmB/F4+PT2NfPSx5vObTaONlxbRBJeyvW6OYtwBwwAK3LF7oVbwMgsYnTzXlN\ncycbAxk35cAtjk2eVmkqJyXJkdmh+udyMWRKBM3AINEqprRUA0ljW7pGhN4i\nMPuvyzjqkzpRQxRmYEh1U7Oc0EHKmwQPiGXbSIO15KLm40lzlZyNRGI0kDli\nnaWhD4N8vjrqxROI+95gWQFinp4P7Y30nyqueS/g4TTuZmKLfw98BgcTqD7I\njtm6cP8CEtozWM4NGZrKY40U+HVEsLu/KhjksjGCDiexc5crNUPRW36nqqVj\nsM9ud52pXFVst+xh1tZM3eO0to65PjC3OSopHfvtHUKwDgGcXlFHnZ/sujG/\nCqEcTzIp4xVfLP9FsN+4NEj5vXlMtZjKtSETwiuLw/KxdfxGhE5QCI+yTzYW\nEeBKbcPejy1Gl5SxFubg+h+FMb6VM5QWxY7Qipz0tDKJzVH+d9d/46GlHHm6\nR3yCjs44XNgIEOGC7ALKQupKZiiH0vZdYhudGchs4yPPssgV8MlXuM18CLda\nBXcXGyr2xhOnEshJcbmS7AWGRvU5n9yfNOg3kUhaqWkA3batmbUbrdfgR+WS\nmW3X\r\n=INzR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"96441cf0eac61122c48c43aebac2e249d5bf492d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.85a1fa9ea.0","@material/theme":"8.0.0-canary.85a1fa9ea.0","@material/feature-targeting":"8.0.0-canary.85a1fa9ea.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.85a1fa9ea.0_1599772233213_0.9196964084027617","host":"s3://npm-registry-packages"}},"8.0.0-canary.0bc41a9c7.0":{"name":"@material/shape","version":"8.0.0-canary.0bc41a9c7.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.0bc41a9c7.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"64dc1748f3196efdf961139f5b3488eb39d254ec","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.0bc41a9c7.0.tgz","fileCount":14,"integrity":"sha512-Sg2RvuPcpDbG0DSeIc7t0BGrHtV/rnK9rq5EJA4hlzm3WGMihc9BAVbAyan2rJRSgKoA/8I1uqwWeU70V55ASA==","signatures":[{"sig":"MEUCICKh3vwAoMZXiJI6UkQYU+p/VPa/kpsvF92JBFX4PXMQAiEAvT8vGYeB3aooYiDnW6sxiUOeBKLSVGudDLninATDATE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfW7iyCRA9TVsSAnZWagAA5R0QAIIBL0gAeQUW+A33riO/\nwMYn/iHwbTQLf8J8a7xfZAkOZOuKO2h2ciTManP/0xGEeJCuPCGPvOXh2AQ1\ntggZJk6hKDWqJmrNQ8GSCaZG7mm+Nmz8CtQKQu2Y+WYJ2kTAaAt17lbkCWWq\nsYSIj6GvFidQz8hlQymyqpzwtb+M2aGc9+GE9mbyYkl6InMgu7vaJHMmqshO\ndCtQSc5Xupe9QZaNi5UX1S2iTRovVWqFgMnXLs9DqVycVScT4RZwgD7I0HoM\n/nntRROJdSlfrx4xX1K9qawoUUi4GesdjJKfj9QnmxGwEtE4MvPxuLOgOdzn\nwVTPa6FkFB0FeIeDEG03gx2QwQ2/NNLYBkPPzy+oZoAv7RSTQMz6IzyGly6E\nxIf0aPsE03cea0VPGbltJlzBpsan7XkSCD37fHGFlyQIK1ofscM9L3qrdgVV\nZ8jgc1OG7FUeU4MfTEcpoOh+Hd6EkGAWFCQtpmK90lOUnP6ECsT17fT+5SjJ\nlF30ZlCIaeWwHo7SoAMZnBmW7JmUmxsWhgGXOGOmseBDXaS9tzDLnv4nsgVl\nicKUt0OaykHKxYMgKAhBo6suD1OZlCjeFIWBVY5CwfXDxrbvOgsQlGehZtA/\nb+BPWLgMdy6thanNNaPu/b2XXyUTU25XRTjlJqaNChrYbA/V9y+m7zuDFr7L\nnU7o\r\n=c49F\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"f9e2c4fbe617a115d220d49782884d15a0d9ff51","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.0bc41a9c7.0","@material/theme":"8.0.0-canary.0bc41a9c7.0","@material/feature-targeting":"8.0.0-canary.0bc41a9c7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.0bc41a9c7.0_1599846577749_0.44291093082651467","host":"s3://npm-registry-packages"}},"8.0.0-canary.fc0eb5013.0":{"name":"@material/shape","version":"8.0.0-canary.fc0eb5013.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.fc0eb5013.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"918945a5b028a1a7cd17475998a28cd4bdcf07f0","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.fc0eb5013.0.tgz","fileCount":14,"integrity":"sha512-k8fKrZpN0mFG4KxFxo+pWA/UhfoJiHSxvN4VLHsEXik3MkUEH4477ReLpGY/oOx+II5PcR7ItYIylUtn53cNKQ==","signatures":[{"sig":"MEUCIQCsyVgB7vMt99o5ajYYtTOlcbYkplos+QXF7rxrAw4htgIgLJD3LBg/Xx1XeAiF+0SDhr4pDEnNdDOqaSV+ydnfmEg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfW9Y4CRA9TVsSAnZWagAApBsP/RF5fRDivlXIwxVan29g\nybqaA+woBC/9EqXpCpbC/pbrbc4ebsOjOYoASiWOr/it8mTWU7lIWNPwWjdm\nsMPnM9YCt4SFl4IoSt2ZYm5ssr0rYaYwU9RCFAwAbX8Y0vIhYOwh+tvFIu5t\nU86BRLsjQn+1ZPleTxXXb+tercRpOgZWd5IH+ygNLWiIGCGjgULWnfUauN/9\n7hEqfUuCRsPves+nSd9IS6gVfoRqnOM1h6o7I8YAmzCG0I65TSl816FHaEtx\nI5iXOiBSEf+MmM8X8e44tKaspvcEdGhyUINn+le4Z+nWHyqeJORjztiO2nl4\nVdKPazylTTSmpnu0MblkpwZrTpUHvglLEkk7lWNtCZOU+bRzA4JByPmZi+an\ndrJ+jnna3H/B4EfKl3G2aE+VksJQ9c7d/K3c0bE88SHGYl2HU6oPwQ/rmaeb\nEQrB/CdyUENFHktLaio+FLCvQ+of/xJJvt4K4KpD7YfGmaDdSXq8ocxHYnIb\nFN2cpOTq7eZ4zh3COTiWeDj4ai6KUH6pZF0e1jY2CEoPHejHLVl87Cb9WpZN\nOIeofhpi9XHpYPYmCAF6w9VJeOepRXQd+ObARfqlcMQ586dzOsdL1fUSI5Om\nBq6QYjxuTwJh4XFnJbHhfcWBBHyGxj3Omd1hb4VoBzD5d9E98SWJTOk7hbGK\nSfKm\r\n=kFN6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"c6572140acfb45fa86b79570328d75e3869c40ef","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.fc0eb5013.0","@material/theme":"8.0.0-canary.fc0eb5013.0","@material/feature-targeting":"8.0.0-canary.fc0eb5013.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.fc0eb5013.0_1599854135915_0.7045329883877776","host":"s3://npm-registry-packages"}},"8.0.0-canary.319bf66de.0":{"name":"@material/shape","version":"8.0.0-canary.319bf66de.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.319bf66de.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1499e97644c0c0af12860fd1f588b4dc0ab57563","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.319bf66de.0.tgz","fileCount":14,"integrity":"sha512-l99Vq5fqomC5OS6/Q945IP1ap7hqZ/ODGpk9e1OcGd573qtvfhIU1QYelure2S79qFpxp6vi2hwGfUYoMYDmUw==","signatures":[{"sig":"MEYCIQD2NcC3H8FeJLyNQMFqGru7MNPhyRtejxXIV4jX/dE/nwIhAOtSKFeoRz7K21FMwr/uhq/t2rZy1VVVgnuzFwWCFBbQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfXAPNCRA9TVsSAnZWagAA+4MP/0ltpas7X/33lSZpq/bP\ntWfbZWOEh+Zfv/09or6XPOhoQYT0RBuBJ/VsO8TSccfUpg4k7HN18mnj6bqb\nWwjI/GR4SiboK8Bt/IDUVSIw07CuYiT4O8H+HVD0zThdekhhsUsi8Vop0xML\nUDwX9/qH8ccBYd1BnABgGjEtzFTKbF28ySGyjwjAhA17kRV/qNgJy3gkLRb3\nqgKXt0aWSquAJgPVSTwj1Hxs68Nrc1t6jHjhvtgjG+nOCwUP7w5cTb95hzcJ\nuVjd6cz/Ma9r1tEo0fZcG13fyBJ5lKD5hMyUEhJKPV4qj9aSPaIWgKiqTVlO\n52HucqgXE+6JisRTfENKfVsLMeUrgPMdEH07w7l1fupiIu5NER4UxDsdVEsO\nPOT731MmzrOhB+AKUJpqCfVhn48sjF+EmuTznDLvQUHp6bM+kKpg7KBD6zAu\nNMNeSqT9IQPJHmJX4b39R8UQ6HOb84scvsxpQlPWqhlft7KEYvlExQ12bn9U\nQpj9ylAzd7m1cerOb+VosGpLHk3TCJBL7Ghskz5W2hZLXT4wEdvJ5ZeNXElj\nFdfy4TqALjBF9I/Yj2sDDtPp+5R6QahlRcm+8cREHXDIAoW70eN7qcsMBWvv\nMV3xbTqBAiYetbcC/ZjuHKfspQafvJ5Ew1ypzOtZgS6vGCxF5diESX8ZHUy9\nv0RN\r\n=2NNA\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"ba4054064292bafde40e53fcc87405c8dcad24b2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.319bf66de.0","@material/theme":"8.0.0-canary.319bf66de.0","@material/feature-targeting":"8.0.0-canary.319bf66de.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.319bf66de.0_1599865805090_0.6180811313497365","host":"s3://npm-registry-packages"}},"8.0.0-canary.5bfc305ec.0":{"name":"@material/shape","version":"8.0.0-canary.5bfc305ec.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.5bfc305ec.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f4eb6a5bfcb646949ccd254074d341bf01ac6609","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.5bfc305ec.0.tgz","fileCount":14,"integrity":"sha512-GDpvMf8YT9L/zeIeTmMCCk8GI98L5GUoeBTHNK8EcNu7fdyUIN9CLJBYtTQk+i0TGzkp+jtnohmZ0Eu732XnaQ==","signatures":[{"sig":"MEYCIQDycz4gXXxfdxZhklB7WzCZdWhfSkutl4hCcKrSf3X4dgIhAKZjbbPXJowhK7EXeubMObClJdMlOkUFWoIyrfzWTstR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfXqR5CRA9TVsSAnZWagAAcCMP/0KA3+9QjY9JfHZ66shd\nlc4+avDawEsgzu3OTx+F4pD8JUGVhe52AvAhGyI5lKrJORBl7fZjQksxPbuc\nSQBm+uTFjkMedLgAmZ4mz6Chf1ETgmarUKgdFk27c1mnzddnjE3KeCaq/+CP\nCLq9NeoInq+CoNdd932h3YqeAegZmTvFpWNQ4PgtMCl1/BiAyBpXX8qh7hVm\nHIxOVf0XZfqlyE8cttixD2zPK/7fqh0U+A+t8SJ8NpK78GxRaSglvmv5S09j\nW3N/fFTTD+JLbAqcSxdmzKpzu2zBRWvVrMkDb8jSKj8+WTSz7RaOCijgTl01\nEvGQWPCS6INwUzpcelwohVLyp2/VNBMvzVLrvzIQ1v5+CR5NuDBKKq8yZdET\ngfrsoDAD2YCfL6lpkOCjqFjpGSc/MWrZgAMRMFOxggT3wCczvxaQymrka7a+\nz9UrHGQ6mRUoB2Xh2iB84GM3TXIv8O49r8IrZRSPDvPsy8it5RpJU9QBYwT0\nEhXPt5H9TwZGTs8+r9lzHOeQFP3U+iy/aWsjcUvtIjk2xCJ8vnsMNSZZJUqc\nfl2gXC2d+xivvebPncaaeECHScBQYf5GvxE8yOOkLtx77G478pqx9LPxM2LW\ni+Uw/xTnSS8BWktDug02wg/3FD0gSNFXoxsSGjPG4E4/C/qnBBpw6FtXviYt\nNTXp\r\n=N/jH\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"96c0c187c7fa544c1f5303e96ba3e85cba86e5c2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.5bfc305ec.0","@material/theme":"8.0.0-canary.5bfc305ec.0","@material/feature-targeting":"8.0.0-canary.5bfc305ec.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.5bfc305ec.0_1600038008549_0.8723999808514822","host":"s3://npm-registry-packages"}},"8.0.0-canary.83d83f131.0":{"name":"@material/shape","version":"8.0.0-canary.83d83f131.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.83d83f131.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b94050f4b167df773cbe29849f1a6cde1e9766e1","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.83d83f131.0.tgz","fileCount":14,"integrity":"sha512-ZGPS3+u6v5fsdvQqhqtMUFbB2p225i+/oCYtrzs+F00rXi5Rqu04Ox5NiijRCWn8njMpUdulTdqNUEPkdcoXWA==","signatures":[{"sig":"MEUCIQDSvu7Q6Q5IA55FXNa3mbyrqCcVqlZZs1gpakqhMSi+wAIgd7oniCgD7cIR94ltkXS/Q3sJJr3PKEI0u9XZQqOdcyc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfXrojCRA9TVsSAnZWagAAfMIQAJYZbpa7IO8zdJVE3Lew\nlg63zYAwOZMx0eOBL+IDNKJnj220/3rWj1YU5cRfShLPf8avAEe5LKYw/BTx\noKWmdJuG3bibY8GuHM3DCRPszp0zYxrmslFeoUeNchcvTBrRKVBCi0ZHVKOr\nhGbSPL0GIe7/5X40j35DJCtIGf8UlfxP1bvJsNHDtvVWGNuweYaE9tKvo0nR\nWeKfN1neYOhRNq6TK2ADHF4Vd7iWMTwEQ6AiwOrqbSIm5Gat22zc2hVQ1RR6\nvbrpWeTdM0R5XlkJcgGCttZh91sJfjqzjK/FLkx9Nok/CYbcfWyerI7dGihT\nM2BSNc9vjz1tNOfqGwj/1Ua18c8Llln1pG9VzA60NP06MkFyPxl4z8D/kESH\nV7sJhlK5hAEkZn1Z0eLmR963U3ULLaQwLZv6ASKxrtMHa/PzHWPhknkjxf2T\nZxM3PNjHnCStvgLIBxs2L6PBBk52LlBgzkgls7zfMseR4411zOJ7kOqKdTaE\nOVzxoTFjubE+QO4Ez4ETP0unzM2xqvYADtaagJ0meKEnrVGHZDAyff16T0NS\nAaMdNmRFcVUrt11IdEVLbgUw5PGWQ1asnL1IaaVId17KR6mm3kTwJnRdWyiP\nxl8kz6mdQYel81pqc7omZxx9VasuB92jkpfZvQ8Bo5+PUZM38bDCGFYtQX7n\ncnxv\r\n=oyXt\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"520e8b604c3cd3e7ce96b30f4315d576bcdad3e5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.83d83f131.0","@material/theme":"8.0.0-canary.83d83f131.0","@material/feature-targeting":"8.0.0-canary.83d83f131.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.83d83f131.0_1600043554708_0.9649009558938797","host":"s3://npm-registry-packages"}},"8.0.0-canary.40d8e4726.0":{"name":"@material/shape","version":"8.0.0-canary.40d8e4726.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.40d8e4726.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2a90b7005685bdca04ce9f4e5cad87c6917a6c5c","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.40d8e4726.0.tgz","fileCount":14,"integrity":"sha512-TIGvGEMY7GQwKZJkzfqrbaHoZo77jHZHRYnKn/sKtdnGuHGPBNRLgseZxcRxjBGMu5T4WOMsoKOdSACUfEXFxw==","signatures":[{"sig":"MEUCIA032BnGTWZr0WlLHNsjLSU7lC+q8sSCCKLe1P/ZNaa3AiEA7V+b/41rcC5L4wj8D0vDnkUOD2HOisTI3yew9iBV/jM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfX/z1CRA9TVsSAnZWagAAQ44P+wdXdr7g0eWIjfPpS3cu\nQ+1tlRsCWNER6NPbNTgU9cMkR+uu95OL6WQUt6SggFchJgEZIIVxD1Zwu0SB\n+8rFOJvNGacJr3ky4v2aDfIC433+bCpnyWzCWVacgDsiTTP8bbUJgfm75GMW\nrumMSFCtDWz1PNPDrO4+20Vi+A2/KBuIJQfdxixJDdtr071LIxfrnxVkO5uG\n4BrnWCtpy+4GoVeuKgblosQGPm4R0dMXqL1D2JTyjkGp8CU2zXuQk7ljsZj0\n+x7ZlYe9reVyrc4GWBX8xeaS0aOoNAYOqbh/KtZMklpDpKM34BunLeagNPnx\n7N8Ki1v8Og72cj1JFTiQRw1FkZI3IYNRVzqBV8TwY5vpqB0c2npwDqahKYm4\nL358s3Cw5cXt0e1+qD3RPtqhprnsJgV9HalItGyi1cercohd84whDs2c+87V\nTsyNjAG/I7HWUo5vP4761YpH6Y9xG9fFFInhJ5gSW+DkkW93YDbq1F8Holx0\n+cH4UfG5chDe9oXryK+1R9Fu60ficpDNJFxBkaI0lDyIR5nCKMP8nTW9JsKo\n4lkiCQwg/INUW9g6Zt2zwO1u+1DRWJjvcqsM5uRe7DQ83ebml9hL01J8dvKm\nRaqqykcki8PtbV5WvGpeVdsIshju4y4UOq5CM9sD6M20jlyQdv5hgo/X7ujI\nkPKR\r\n=FRIK\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"ba2736b8bb826dac383c6f8f237a6584247d5198","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.40d8e4726.0","@material/theme":"8.0.0-canary.40d8e4726.0","@material/feature-targeting":"8.0.0-canary.40d8e4726.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.40d8e4726.0_1600126196736_0.360479047384185","host":"s3://npm-registry-packages"}},"8.0.0-canary.c25d70a31.0":{"name":"@material/shape","version":"8.0.0-canary.c25d70a31.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.c25d70a31.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3197bfcac249c12533b644f11a24bfe5eaa4d8d0","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.c25d70a31.0.tgz","fileCount":14,"integrity":"sha512-IcL51j18Q08rZJPCxYGhE525pWhRQIIoRooNKajRF/yw5He69DyVPQ+UBVRl0Q9DCNa4809gYX6lNSWhDxvEdQ==","signatures":[{"sig":"MEQCIBP2RdDeMQPf8FdbbCkwN+LGbYuqgqXHNdLQo6m62G94AiBvSGJSezaWNIj0YIz3lrydjwA1FVRLlJAxw5o0yS+V3Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYCbbCRA9TVsSAnZWagAAeg8QAKG3ikKLpn+QXwn0BZn/\nlxLGuqc7FqvsDTqpFfhpHXvHE23exdSJDr7Bl+RCt1f3ZEuRJy8KhaGWuoTs\nxiEyIFqqMNi8pQ9z+l1wP7RHGE1X6e8fQMYAw8GVxvOVM+2uEwcZas2CJ2nA\nUy7hKrDMWdqz3alLUs0S8ItNXbH8j84SURz5bYDQv49z33+c71nHlAqnjVyD\nwIAwzpfmWL6pEshZImC+XA5FnkW9rPWKuyCVkOtuE9Ng3yGY6WWqqjK7KMjm\nF+KOxgs+s66OkhsyBxzkM4J5653BXGGGe17HkPw7YPFPK178KhML9+KE8ipi\nvq/Hg2PZH/VGuWEa9Bobb3/iYOwfZOz3vJHRd8fmtv+JV4XSTjsoapuFCQP6\nn9BbJGCM+Uwcso5Cl9NnCQgDD53eNdPBKW4IyrANq2IJ3k7NqlIg/gzFGuMh\n/Gz7FrdA/GmhsvnyjJRbJMOU8vCHlOLq4YemXHCeouoL5cM9Ya9dcOLh8MsD\ndd7myrAOOCrG3PkJJ14WBbrAh45QK3USIU7dtgVUjRFqbd5HKhgzFySQV1Ti\nmMNvGaYtrk8o260BIG6BPzuanoagstdeZYdYaYkyKYy4fhqLCkOaXt/NzDwa\n8zZL3VcyUq4iWjI2R7gX+bKGfaYxNbu5WMt9QvInvXaTxp983A+7fSsyIyom\nYlIS\r\n=pQoZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"23adc9426ee1c32d146e601987be4165e56c7934","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.c25d70a31.0","@material/theme":"8.0.0-canary.c25d70a31.0","@material/feature-targeting":"8.0.0-canary.c25d70a31.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.c25d70a31.0_1600136922874_0.3774321335486539","host":"s3://npm-registry-packages"}},"8.0.0-canary.d52b165b5.0":{"name":"@material/shape","version":"8.0.0-canary.d52b165b5.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.d52b165b5.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9f81d6a370dc50093a3f602b59478a591d4e5049","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.d52b165b5.0.tgz","fileCount":14,"integrity":"sha512-WE5muKmF++DwpI+VP6rZa9p+WpYUIJcbrgRt0twVY31rQHPW7SrYcCSEpCw5wkrphb6kxYsnTNC6epUUe/Vw0w==","signatures":[{"sig":"MEUCIAD9dgn8XgTJVvDOieBFjrEypGruUIDTybhwSPUsySpiAiEAsKkbfKnf4b+FpnO7CUwcAJ6bAem9mK9yZeHJzoMwS9U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYNWUCRA9TVsSAnZWagAAKyUP/Riw6XlyOg7IEAGJkTVb\nKJ2PMf6C7qBLWtBJadpRkqgwN2XVcT0b2pC9/KdEP8KgYDvGhVM+bWmCUFzR\n9hWIKOZrQJ8fpG3hXXKhPsaVCFPt/qJcujBYQ99GVpasU6h7OhdZyXRCw/Ng\nD57ttsXCK2HpEl9TPVdqi5Y+dPpa2+IQKf3ze7cJoj8RDm9hcxQuyw50xK5b\neklj2x1jhi9mdWsqr//8BxXsKGeSH74dtbNorGApWoMTom4SBcTj6U5ZDyTk\nKh/zTgX37MlTb/kJLqklQsYwDaQE1Cfq9JP7mzTe1ZyYcb+MeSUyQvMeMHvI\nACwKgEhLUMbmsrJz+A5OZTdmzBaXiso97JfMQDzbAGnP6gnVhkoeHJRaCdW/\n9sbXASFo8Z7Y4BXvJG7i5Eam0SNTSdYlQSybDsuhsPX03cwl1u6vmFbV8ZcT\nZHMkTT5n0d/biLFLArcg5MWr3rRM1HFUa8q4TmteQizauLk2Rxzge51SZBtn\nQpH8koyuCSapX5O4InAJm20dlVnjJOZy88FfXIYkWe2qOO/jAWuYna3vZJ1a\nxHdrr9UKUDg3AXRS3T7kCb3XvGuP7gHCtu0rPiQAzrioVKkkvj8R4KzQnu5l\nlNypm3isx9T4TcK2JhRCkRgsWoPXhIc5/4ZU7U6ymudwHKoOtdX6W6b+Q9k7\nePIK\r\n=HE55\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"19ac3399f14583da3b2ca5e37a0ce783539066ba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.d52b165b5.0","@material/theme":"8.0.0-canary.d52b165b5.0","@material/feature-targeting":"8.0.0-canary.d52b165b5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.d52b165b5.0_1600181652148_0.3538234090277994","host":"s3://npm-registry-packages"}},"8.0.0-canary.a831d4799.0":{"name":"@material/shape","version":"8.0.0-canary.a831d4799.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.a831d4799.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f928653ea5137ff27eb7dcf2fa7379b2cce0b2c7","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.a831d4799.0.tgz","fileCount":14,"integrity":"sha512-TMXC4nODAYCBErQiAcMsM28jXaAnfwEie7MWsHsgdl6OrkW+ue0GdS6YM3tuPQ+B8kF32U8h+YyF/WAaWMo2qw==","signatures":[{"sig":"MEUCIGv4lxwIAr2wF5PjEwd7KVsuoW7UO1+jGtCoWfgHn8n0AiEAiGPMRcrmnVWInWCneORaw7+i5imM3k4y9Vu3ZRIzir8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYP81CRA9TVsSAnZWagAAg38P/iC9NMRHktcLqXZvd+Oi\n7nwamkhf70bds1pG6ccnWXn3RGtC7+LUmUnIwlokxkHXK2EWsBmdDKBnKQ/K\nOkokZbeWfgfO/4N4ASijN9JwM9teLLsxAN3YqBGG3xsLTBPw+YhuLGH1s5+7\nIvjYenOJj6C7wo30qE2ZCiHx3Nu2J4aBDUoYIDecvbWfAOnJOGLzg7Xm1z3G\nrn1Hn0TidMhDY8j/JZX55pdgvGfsm5oUjQ1bTdFzYrgwngXIiwydSR5Xlo0g\nZS5gOk7b6V03wfKnDJc79HVkJ9WPBnqNVdaKs+xgvmnPR5JbKN8j33Ru2Sdb\nAxQMMB1tDKgJ1+nkrMMZaIl0zkI37QjHwUcF/BNwnp487PQVxb9YcPRNX1EI\nctr8TSQ9odKtcRPA38sciyGxWVFhe7PctJwSDfRSuF9RS99YNIsIFZ9I3PEv\nXuFbNRSZR3RHE/bsbVMKz9uRJRW2IJjOCW2IqPGufNLkas+nzAD5ol2e1Scq\nESt65TxlYlkYu7qAd4Qe5fqzEC9bXLwhsbDALybn30CKTBVhM9dUPlp81HLg\nE1z2N7i1rWd+sRR28mcH0Su3VPnecnCx+7jj/Q/mgHsSJI49MmmnFfgZayNJ\nWKpTw+TF/Kdtq/34pyFfSQS8suQX4hijIjojd1Nvo5XWy3m0sUMQeAX7jPtk\nQTHa\r\n=JQN4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"fa7f461e7963e1bdb73e7811d2f70b0a07acba16","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.a831d4799.0","@material/theme":"8.0.0-canary.a831d4799.0","@material/feature-targeting":"8.0.0-canary.a831d4799.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.a831d4799.0_1600192309498_0.6799719328487781","host":"s3://npm-registry-packages"}},"8.0.0-canary.a306aa488.0":{"name":"@material/shape","version":"8.0.0-canary.a306aa488.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.a306aa488.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e6965c58f0dc49cdabe5c38f9e4b2822cea818cc","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.a306aa488.0.tgz","fileCount":14,"integrity":"sha512-zuPkSLexsaa7jHsKQcxsIjItKVJ/SD/TTPscndAwE1i5q8rC4gOMxzSIceQVE1AzCEIElG4KsI7PrecDtCIxkA==","signatures":[{"sig":"MEUCIAYFwwwroBLya0EaVDKYdog9OFfgUF/eNQfEAYdcQxnvAiEAo03k3PsuV0VCTFsofcqdnD1k9MpjP+s6BtAokk2t5tI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYrS8CRA9TVsSAnZWagAA/nwP+wYL8GjRVR284DcySwD5\nl38CMy8zaM+zF95i+alrT1ujXMeXf040dLngingP66D68sh9c7zXWXn+yFHJ\n6zCiejUg1/GNwp48ymRngxpgp94t5/KVKAQYjzqbi2l6JC+Htr+hP6guDTGr\nY9A343mg8fU/HniJ4IgFaxDilPwUTXlL18pKlpQY7bam7nujIEKardDVoQqc\n6EWro8nAqpiuJmR6M8hA44UsD9Q9K2zdGKa09rPzGxqbvzMRweEsNqgmKYjz\n4h0O9g/kniIDSzMnix6sR97aXATxi3d+TIu8HBX335Vg6V/Pjft0ZRVFSDKx\n7rThmEAY1vKHKipVqSkVMOYnq8cMGNMjOkpSMYpF55S+r0g/Mh65sRoADtcu\n3z4ss3+iL8i4mA6H1DL73QsgJu2zAaeGC4zorsNNV1QgfuFsIUn8uG1p3GWB\nRAMUvIBedVYTM83SzLsvbDGdd0j/in1vn7ZTRMX5W6Kk76IBZmG6mgGc+CaE\nSXZcvDmBEVWvGKushAUsKAvlh8uZHreiJAMjUEWDT18THVjorPxT1vIPoITD\nhxutwh15ZUyLGOqgvsyv4KwqQkXlCssFrWCcKICanQFS5UakNDLQ23zttLzQ\njqLS1GSc9Pi7nhFMvvvq1ojQVtbNRoA2QB7mjWgzujg/lAT2LoX7J6H0jOwu\nfMsp\r\n=SLbx\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"c6addec60d43eb106ac774211ca2af4b04d40f1d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.a306aa488.0","@material/theme":"8.0.0-canary.a306aa488.0","@material/feature-targeting":"8.0.0-canary.a306aa488.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.a306aa488.0_1600304316079_0.297571145890865","host":"s3://npm-registry-packages"}},"8.0.0-canary.fd608ff66.0":{"name":"@material/shape","version":"8.0.0-canary.fd608ff66.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.fd608ff66.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6d08f27e13d1ef422d1f475ce6e2ce1bedb512e9","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.fd608ff66.0.tgz","fileCount":14,"integrity":"sha512-SInkxE9LW60cnO99AbTwqCSMDwzTYl7qt5gVLyYBoREh9ud7twfHznGhtMF7WczOlczdymOkhnwu5B1qIfw7bw==","signatures":[{"sig":"MEQCIATBaWNwChZv5Ag9KaYBuFR07pW0pQJNYBLRmucwI1hYAiAb73RoH59rCH6Zr8Vxs3/LO638RgDe8vSIWmaPXPjfGA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfY3HqCRA9TVsSAnZWagAA6VMP/1NxbZaSZGbn1cEP9+/0\nXPybQKqg+pOGMgrTL2mQ6kKp4H8rad8ffseuiyEDOLP/vDq6vHJ4QYk5PJ0q\n3zBrfOCI57612xQ/oyhgXhOOMIKotSBIuzj2sCMSDkvrL8+JZkHlFyRxKJok\n5GQZZVZGe62QixYQJf3Hn2+vb2brxKykwufJEMGaZf5rDp4SOIIjREX3MeLJ\nnOcMxTzlZ3524TzoPGoBp1lBNtt1IMqyR7B74OdZmxOKJ5H01XUq3Xrx1AtR\nRYZ/WrUa0p0HEYs0u7WTd8WfL8MisgNYc1dDZQXcsE1iPKmsdHe/UGZU6inH\nPXZQ8HTp5VjEgTqEUe7mDzrjpfihSMPI5jY/utiJBQnDM5bmuI9VAZ5zvpZt\nt5JAdCt0yY8pFNzm2sgSr6PcTEj0y6oUI1DChKz/Uyy3GYYcWtusJ/B/TDoM\nqNeOL+dzYUsnbwaimNfxnF2YusE0ciHhoPDlviOXecL7VcQ+i6FKvmoSj6qb\nAF/lkIWvGwBgTUaOEKpBGiw2JQj1S6QIwXfT4lB5tv5rjnLzxM2h1DiF4Rll\nqyqxEdHZfnQmGSLcfHdah7QMoaxhu7FwLiidSEFnC5FMoNGm1OSESmaSH+w9\nB/XdM1JHinXVl1Hc9X6JoXwng+Zz+nNH0Rm5wku7G5ZJE4Ipg0W3+oIdFxDf\nN2+i\r\n=Lz3s\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"03ec88b3967ad97da4309b1dee0b9764edcf89e1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.fd608ff66.0","@material/theme":"8.0.0-canary.fd608ff66.0","@material/feature-targeting":"8.0.0-canary.fd608ff66.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.fd608ff66.0_1600352745614_0.2250460552037179","host":"s3://npm-registry-packages"}},"8.0.0-canary.3e435ba57.0":{"name":"@material/shape","version":"8.0.0-canary.3e435ba57.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.3e435ba57.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"db9060d085a5cb6c33f4e871d11bc271604534d4","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.3e435ba57.0.tgz","fileCount":14,"integrity":"sha512-Ut4VgcXLvBSjVCDQxE4yx2z6YGhGqJLliJKj26v9HPXlGdreupnXq75zzvnPOw1ahctSXxF1j2dFXJm6QNONew==","signatures":[{"sig":"MEYCIQCAC5BZ2loLnt1tt5zx+O+68lNxWaCdDzVGnoO7vNEUHwIhAO40NKennIQjZLQAyKTnzxC4JSZyosmtiQkHO5j9OY4+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfY3XvCRA9TVsSAnZWagAAEw8QAJVKV4+Z8uFh91oj2VOy\nq72JTeLbKInv5NsuXLYpTvZVf6oNZKJCgVb+RxqWjA4rDZk/n/ll/w2JxmUG\n3uhbiDgVtm/I9aeSXC4hyZeaf6qyROfA86rTqnixyVZunStOffp6k6XdjLSQ\nYKx6sEZxN7HJDNLCUZcCu5gfUBi7sBBtpqDykIpytwaU/jWD7eJP6gVb4DSR\nfCidBSBzGjnhdJCoH1jaQ/3yzhC9MrZlLifAVUADe6+6K7yojvZ4lml1iu/R\n0+rOSm7+KCEj//67bP6iKWHqoa+7WoO4BT3X+bXRLWd1wUhg1U16aud0ygA0\n39qJ6Wq5LxwHHlvoCLOUFgMfGYBgcYld5d5DzqNbwUAYFThGL0a752yNvXtu\n6w263JtSKPfdsBrgy71U2hGe7NCJ5vAws60yD04Y60KesTgNMs3M4YLY9UIH\nkcMZaYiUSsYrhGyCrA3EYf2JdRQQsgnTSR7dBSdN/K7tFOj3jtk5doygaPoa\ncBcnBn0831d/sA0XzizDJXIetOr8PewgdOu+sxrfR+K2q84juGfBU6jaMQOA\nCkk2+YggEbB/1hQDgNGAse+cGcrFVxhU8KChppItfWDo4Oov6hMz0/nwtWkT\nJ0eBO9RXBtobW0wIg4uTZjhkxo9b4UHjs+BCt5sN7G67SZK/feBHUlnqQRQT\n2tQu\r\n=PZQV\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"15ff2ccef4cf94fbadfb06cb750ee6de035cdd19","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.3e435ba57.0","@material/theme":"8.0.0-canary.3e435ba57.0","@material/feature-targeting":"8.0.0-canary.3e435ba57.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.3e435ba57.0_1600353774640_0.38384170836119114","host":"s3://npm-registry-packages"}},"8.0.0-canary.c250ec52a.0":{"name":"@material/shape","version":"8.0.0-canary.c250ec52a.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.c250ec52a.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"15d657f18c42996e63f1f9cee0517846919ef274","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.c250ec52a.0.tgz","fileCount":14,"integrity":"sha512-kZ6Zpb1/pl8v0eyJQ9do0RsLqPIAZWkm0HgIV8pZYtAzD+MINNCvN9UfCnqbyu/mqm5gd77bGZEBFyZVdHx/KQ==","signatures":[{"sig":"MEYCIQDvf3Cyz67467zqhoq5JNHb8n5vlfUS1g/k2endoGpfJQIhANLGCMR/mMTH0hrarrdXu22W6kc0YFTVvr0elunEubTG","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfY8K0CRA9TVsSAnZWagAAagEQAI2QMfumV3WfAKHoi+YA\nnE7m2jcGO7Kr7afd+fk2eesj3IKQf0GjVEElvuygl2Pzh4MSGDmQ0Nt6wxI5\nVtghEEilPI5/TyZLb5JsiFJt5t3++nT1J0P163xwWZXT5YWKLInFEg0JnXIm\nLmxfauwdNMY89DUtQHWmPHIPxGqQR8mFCgAt80Ky93MB28nloR3LbL0RCx59\nv3HRa2MoCwJ+PvZUU0jISB50MK5YzKDRQ/6o2AVBC0tZOXXysIuW/aiozAtd\nvOvRLSEY4MIi9flDQm7y8teLO7S4buQCWivVs10UQ8iHip24vDM2ksdWZPDy\nBRGTg0XBFDktuzCovOaLiTntt0R/piAwZbt73gH8I5Uj0sUMxiieb4oxU+K8\nmBmRtqliAv+6qAH6QqX3CnQt/sM9FmbPsoituwerX3uLFJzfETteCE7Ijiao\nKHSslCDq63sUCvrVu/ZVyjYlRa54BiUc7g1vqS6JJ6lr2/KC42oD90/ooldU\ntnRZijYPsSmFGSrItAn/x7WrX7QO24XpF9ClWhxGRiEyJm4VWJ7kBJ6RTcWV\nYB/qE0pZu5mRUvPQJU9DK2r0BcgFXUmclDGvAhxZr4vGHEMJqrezz5buzb25\nZrhD1airTYGTn9w6I8euW+5rcwGdRookiaIR5N45oQkC42l9FExvCg3rMgig\n2RKy\r\n=5tlk\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"e214ca7cd3c1a65ab89d2fe2b4fc899aca418adc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.c250ec52a.0","@material/theme":"8.0.0-canary.c250ec52a.0","@material/feature-targeting":"8.0.0-canary.c250ec52a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.c250ec52a.0_1600373428382_0.501580186930169","host":"s3://npm-registry-packages"}},"8.0.0-canary.e34e411b1.0":{"name":"@material/shape","version":"8.0.0-canary.e34e411b1.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.e34e411b1.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"293814cc26336a829abea4b1e3b4c25eb789a49c","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.e34e411b1.0.tgz","fileCount":14,"integrity":"sha512-G08VZ2PShhNcNpXzMdh2miMroRbQrr0n5+dQ7a7+/+1H/QNT0UTZlf6FgPMuBWVfzUBWPZF2RKuXgDlVsPPTtQ==","signatures":[{"sig":"MEQCIEKe2elbK2INwARw8IrME01U2/ubdaHYyouM3EE5XXzEAiBJyZy4KxJR+cBJfYRrUbXyJ/e+Y0eChGrdTNzuzf6tgw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfY8RuCRA9TVsSAnZWagAAojoP/2FRDA4+1LxwIJkZZaeX\ndjHWrV3UJHxMw7sMmtUaBCMfhwsK699qjiYiNQqZXDkf8rh03uSB2Q84I2zn\nYwdNKn52mHoY9g965ezYSP5/PrlBSon4Odmt0utly9LerX5JeXdTT8FtImrT\nbbphM8l3jAuRsUu46Fso+1w//xq9LD6AL0YZdi/yuJNeHF3f0WR3Ure0zM1S\nhba3aqPXVMzeyZQB0LOU4+DH0NzwD/0elUSXQw/o4siJIsQ7rs1gWeb8TOEr\nmpLL/wQLWIS8TX3qJMnZcvTx5iL3j9+8WeYe6X1QKPO002DWe6iesNL1rZCN\nd4l16EIbrvYxYFKZA11lqjDZN3NkazLHkmhK3RB9VGHUW8Ce6w1vMX77ITkv\nQfaMRnjrBMn+ER6A7UI9vvzsxD0rXH0TSSzccFdsRY1Rqu4QMv374cs/ICTq\nYU0ACd2niEqaJRjVlJ5fXAYjgasHlyBDoUiq9kJQg6Ez06MEh7qY3uMhcD4Z\n3AenojONHU1Plsnt/R/tFbRi+O3k4xMyd0EMYEX5YyE5LT+/8Tm/f8+NkK01\nx9oB5Gv60Owu0d8AUCuy9f1HOFbaVlUMp4GzOZH3FzsCzviV55+eQLty6INh\nkM8xbAaakHZ3Q+BRxV2RWdSWxTTFQW/29m66aCJSgcExjwxad01LklVONOe6\ndqAt\r\n=z+Nq\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"460337b237852aa88d59152c38df2b32b73792a0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.e34e411b1.0","@material/theme":"8.0.0-canary.e34e411b1.0","@material/feature-targeting":"8.0.0-canary.e34e411b1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.e34e411b1.0_1600373869883_0.9486581586152758","host":"s3://npm-registry-packages"}},"8.0.0-canary.4e9343929.0":{"name":"@material/shape","version":"8.0.0-canary.4e9343929.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.4e9343929.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"11c7253049a5b87b1c571f1f5c3cb217ee380145","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.4e9343929.0.tgz","fileCount":14,"integrity":"sha512-zzzCcn2uD4Ve+gYHiZcnNMQquFuVJM2Ue5pTMnphlreJoYBS5O9hEE6TVKIgN5H5Z4I006c5dxolPVb5Lnupog==","signatures":[{"sig":"MEUCIBxflo7eZFL8GAvPTJcAWJPFf/lDoaX731UAj6ZjrLLpAiEAiJbvknXNP1DZHI7a8sOemzydHPT0c+gv+2IRVF/BONI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfY8pkCRA9TVsSAnZWagAAVfEP/iXK9d4So5FtrPLcfM33\nvybdSkk2o8vMgJZwqw0OElv9VlOMUPb0mAhZYwZSRlSEZPWw7qnWjrF1Z04d\nPVchr+Tgs2sqwSJ9fvnP2rZaTEnLqYUATcVD8d3F1vVLabAQXl3n16wGIthI\nmr7kSZPFlf3bhNTDphuMsOHxTH6bano7Xg4RjtyjQWm5Ps7Yp1shPGXJe2zv\n+2caHKX5vI5X397wosM+AxOk9vMhNsxl6B4vtGK97kMvVld8gQuqoZ/ZiYYD\nGOeR1KuIaLM2sscKaiyT5/8ejDyfF7p7A85BYEjLMXV2MxtRBLcAWM0JhNIT\nRUc3lRlS9vGfrlCWGXqbT9gQxdA4qeNCriIb1uU58hl0UgrMCqhMvBGNQ33z\n+Oh0QxbB8Rp5mSgCW/GTMhfXkI7lWcOVIObG2h/Ix3wIktiXv/eQABjiGmUI\nfmWYoQrlDezRv8FNHUe1SOxSwSobcsGI70VC64B91BO2RJ5ioOWNvLqxGczn\nNrJ+XVJeP2KBWk5IrTQuYMSRbxpqtsnrwRTX0GGWSLTzgFYpADmcT33Uk2dc\n5OnipF+O51nJ54Zrpg5hz6zsZo75SW2AyAKwY6JFflnkG4tz389SC4+Dmqbr\nu8YrUnFPeBW/9fFErUWLV09JQuqZmo2UiVXVe7IB3ZyidHs39jY5MY+fNdmn\nCd1V\r\n=0pog\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"7bab75a521cc7f81a2f78587d2146ac140e3cfc1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.4e9343929.0","@material/theme":"8.0.0-canary.4e9343929.0","@material/feature-targeting":"8.0.0-canary.4e9343929.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.4e9343929.0_1600375396108_0.6883168311957577","host":"s3://npm-registry-packages"}},"8.0.0-canary.4e5c350c2.0":{"name":"@material/shape","version":"8.0.0-canary.4e5c350c2.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.4e5c350c2.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3f47d6955c6af06d4440ad88b16555d886b1b923","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.4e5c350c2.0.tgz","fileCount":14,"integrity":"sha512-3pX7kuXnnOYEYuWWFzZlMBT3XvT6BSgjY/pJLe6VwDwaBSlTOimidI8vwm0cDZbCcVCJSFqkKPe/Kvfo1XnoAQ==","signatures":[{"sig":"MEUCIFErl8/ooL4TzojM209UiwAXTwPmGzMM82JudIFPImCsAiEAhvDPMqOWHh7vHnQyTSHCfq5D873UXjBbIEty31zL+Gc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfaRebCRA9TVsSAnZWagAAIX4P/1VHj7U2SqGgQrdQv378\nBiJgSxbOiWLi/4n7HmFUuxT1lf8l4yy8rKGabArjUb0WgZpiYWxijWZ495wt\nCwmEElj19giCY5/Tb+oYSrEelCAaxwo54EkhMbks+e+thgACrho4TUs1aKoY\nq4BiHI6X5tUBn3Mz6ydtVqz3NRBplSfbapWK94G4KIXKr7Rt7Vanovk4FS9j\nOV7X+3AuFE8iJ0bE8UqIi54gbkq3AmFH7Cg5mFRL01RKCl6kLaO0O8e5SfdD\nDA4grSNCqIQokecIaVsklbKnkc8NudSaldeJegqjdF2DhsBxJ8iA2qtVHubL\ni6ksWSBnz7tiM2/LH9npKbEDNX3Bb+pKFVIdLZJyvRtMyuEwhOzMu6Gekagg\n9BhUiGgAbwMnbc4I6IdBwanLUJRl5fdDAVTjYDolQuQkrt704r29+KQ+7WdP\nwxYfJbIIec3B0R2EyQgLwclae37KCKDWrhqxkueOb+3+KFaea/GdtKXgPlWK\nVSzqxZUiuHC1RxM2AyevKU4xkOS84ioc4O7R3KrJlgbtFCYBcDXM6x2L64Km\nLvX8h1+S+KQbLjDTwWgetSw/j2kMM+2Uk8il3RlyoJac3dJPHXKzIkNm0iC1\n7Bs83YZTSdrV+Of3aPE8d7wqyHDbyAOEwo267ZRIUSJBVjF3L0l8AZj6wkxw\nBmNO\r\n=JRRl\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"c753481bcbad808064a366112868670fca5381f5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.4e5c350c2.0","@material/theme":"8.0.0-canary.4e5c350c2.0","@material/feature-targeting":"8.0.0-canary.4e5c350c2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.4e5c350c2.0_1600722843437_0.31731598064496125","host":"s3://npm-registry-packages"}},"8.0.0-canary.16c563ef7.0":{"name":"@material/shape","version":"8.0.0-canary.16c563ef7.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.16c563ef7.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b00b15558dac1b852253e55cb2e3354c390e95b7","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.16c563ef7.0.tgz","fileCount":14,"integrity":"sha512-n2sTcrWpUV3EKwA0LzOhWUsb0uHE4W06tcZSe62V4R8zAmOeBqrhWeaNsLaVWvozt3GoPcG6dl7DEGw5rwowNQ==","signatures":[{"sig":"MEQCIBt/+/nZZ+9DtuWNzXSGOujdwtcgSRJYBHWy0pMeVKtiAiBokrwMrGA6M8n/rWg7MAHXHbZ6ByRKbnnt+7rf72TH/A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfalSACRA9TVsSAnZWagAAyW8P/32baFrfRtJedlr6W0L9\nKQcdBypTZXagajl2g7n/7ZBvaw4cAvRh37L4AfcdYohwfCNBOAyGbIyPiwoy\n4896jMeeVBS5XODLutvKhnOXeHv2FIf6W+hpkL/VdyXhvFttoheaxGJNHJhw\nA9Puv+e9VgJYfR6ppgLbJRO109Xm+K7k8nec/O9kAqaUuOa15CRfwEQz/It9\n/nKzUYsho1d0DykNbhEDUkf2heSd6snGHhl35Z5PRY4liYKaJOArxKD0Eh6s\nN2uJo/NeKn4mIU2kl0e+q8GnhkPfZxRoX0Nqz+zfLoblWDiYGoo1gY1qaCg6\nqOxCrTKGTSEh3g6ZsQNzDuf+7KVf900KLNgoRiagmqBZE19BqtF7mhD9vtc+\nwdift0jsw1Tysqh2+odAm7oMzS8l2EH56UnECsPkmzdEmzPuqxXeVHeXHARL\n7rexSH/1yhK9uvVM8gLkC1uPpA0R/K/Or7Ra4rqoj6CQ+m7CVRvetN/O7pGu\nEHqEkwqCHuS4k4LMPbWvS/sQ7XCsVUrPKdu6Cbx/gsBQn4ps8WpuX/R6hWt5\n5w7lnmhoeZyKEL2cLPxcbpw/gkIORwnXPPdbiBxHxUazxt1FghM3J32mPgvi\nNNiWG0mesjLvTYbpS4aqi3avrWovW/WTFzou0lS5acyFVRUwTTOgkl4qi99v\nAuBU\r\n=P6yj\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"e3abdb235aa76184bd5171f68c237f58b8541f7a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.16c563ef7.0","@material/theme":"8.0.0-canary.16c563ef7.0","@material/feature-targeting":"8.0.0-canary.16c563ef7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.16c563ef7.0_1600803967687_0.47807891091391563","host":"s3://npm-registry-packages"}},"8.0.0-canary.fd8af3d43.0":{"name":"@material/shape","version":"8.0.0-canary.fd8af3d43.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.fd8af3d43.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"408979e59ae8b9e54e68d8ac1bff461c633fb95c","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.fd8af3d43.0.tgz","fileCount":14,"integrity":"sha512-Hw1ox+wLMGLdFfszrKHB4G80YE8pr/98E3O2JY48rQGlN0R/pAw+kPwoSCCIaMAXbgdtbQkq1luzkXkmpQ+yUA==","signatures":[{"sig":"MEQCIFQWGCDxC76aqTCALH2pheysGnzf3rn4nduSkgE+vmmHAiA1458YVM5u02p57H4qO2N5eKVsyweC1HPiv1lX+35QKA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfa6K8CRA9TVsSAnZWagAAVEkP/1dgsdx71wGcuBO1Jehg\nkBMPs4g3MlR37kQfbW9G7h9UPCQTMjsimeaIoY4UZHjLGsjOEiD/Cdt1ZS6v\nS9M8hAKGS66LjV6EO33P4GUI0C+tF2hz0jCCwnZFQnugWnoC1AUMV9GYwQUw\nRkiqgrMjeUQ88y/gvH2DHiXW3Ep6t8+4iJqeT0kP1kURySsneHJdqL5Op6RD\n1a25ApYgAU68CzeYRTtVlNurM8llmAQ2yuc0VvUM7dx51zPB9XNgOqYUzJfV\nHDmJN1KBdIR2exJjhAy7ju+KxwELRFFvyoDG3FQDLLmDo1FIW3d+b0X1ux8x\nadqT3ULM9Ym7Ht3tgBzyS8XxW84LFuOBj2FCGFgRtBCls5RZxcRWU/VWHnvH\n09sWzN6TASFuKfQrn3HCRy4YwbjZMwqzJAjdLWd5Ll3NbOKcu8MhT44FjxB4\na8ZpxhwEKkQ9Xw2C15O8vCAgW2gnR0eGZESCNMr2cmmMaSGeI3fuJC14RC+c\nNYskBYUo2e+HxJW2Cdh23XJyMWAvzApwEj7qQ7EsCjALcHyR5ThBzKY4Ro/n\nLTOBMrG0Ihvh1RVswRjN+xOPbuYaXsVEvDSlm8JNdeTEPMBkusj6Zljg7+38\nE1Hrd5UV/U+obbBKMYi1ZwpK3ywwiDSc1p9x9m7ogUU8WY4umfHk7bMRb9ZA\nRzR/\r\n=h4si\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"0f295a5eb9518e726dc271a945985bba278bf9e2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.fd8af3d43.0","@material/theme":"8.0.0-canary.fd8af3d43.0","@material/feature-targeting":"8.0.0-canary.fd8af3d43.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.fd8af3d43.0_1600889531402_0.506968365105485","host":"s3://npm-registry-packages"}},"8.0.0-canary.d4cd83a85.0":{"name":"@material/shape","version":"8.0.0-canary.d4cd83a85.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.d4cd83a85.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aad65a5a6b636d6ffbd464647a8423f5ffc1d64f","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.d4cd83a85.0.tgz","fileCount":14,"integrity":"sha512-IUCx3B84iOxp1G06M5MRpzOzzPrLxEzC/ZY4We8iHwnvuxw1h4j026rfnqUTMCsPi8WJrDHTiQwmCIf9sqU1pQ==","signatures":[{"sig":"MEQCIBenkNpcOYKmKmQfNyfQIOMaplksPqW6+UEGhZrDE/YTAiBdI+qrrtM7lpmNpFb6UuiSGMtOpk5dvO9N7BCQomcfBg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfbTtXCRA9TVsSAnZWagAAnMoP/2jP4cB6w4t+jRQeR3Pc\ndzoR0nfAhoZt0tig1GdDIxvSP80KQgaEfz0ukYndIG5LESPAFz2EAs6DGflE\nLB86+tvviKfGAVdR8M7dwvQlce5bdfNV8tMSIZZiwa+nS7ATggLIWzZwOWCA\nFkKaqW14cJOSgU4ZfRb/2OGyLckXe6paCgb3A6R4BKIJSyw1Af249S8DXShs\nWNcj3/hY2OBJzuf3yK9pLA851MDA/VCXmh0m158nEMAhr8q/Iv1nAlG+nvmT\nQ5v5EuoDur/tJv5+XBebL+lQuwrznMg7S5ZKO2NU0OPGkOIzJsAd09L1dNe5\nD/CqUfRElw3dlWVocUJDkCyz6bSfRYMHtxm8moZas1mdBpMPi2yB+5QakVsl\nM+AprP9cYVcazg+ystBEXtOEMupjnAxjX1Np7W9UdAxqqpADb3AhXauJPXqW\nNsmwI3tS9fEOEjLLXFBNLFuGruceGbK3d85Uil3oJFz3K6U1pewyAqB7BKNq\n27qCxxMZfeN0tg10XwOyunYf9pkPHEab7EBxtYjz5WsgICB46b1KLCP0Lird\nnLVTRzemRcHY8mJG1b3Ko4phKpQQDmiE2xvgDLf2FOoEzEc7Eu0738zR+071\nXrSYO+a49IlFeoUR2k+q01q+LYA78yquYVgS9uehr0RoUc8Tc1KEmsUir84F\nYOIx\r\n=qfM4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"80cc7639dca83570a37de4bcf4d7501246ee8eee","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/rtl":"8.0.0-canary.d4cd83a85.0","@material/theme":"8.0.0-canary.d4cd83a85.0","@material/feature-targeting":"8.0.0-canary.d4cd83a85.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.d4cd83a85.0_1600994134526_0.594689756336044","host":"s3://npm-registry-packages"}},"8.0.0-canary.199aecdfb.0":{"name":"@material/shape","version":"8.0.0-canary.199aecdfb.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.199aecdfb.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f32cb1aa5d047e707c6ece133e26a3d908ae242a","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.199aecdfb.0.tgz","fileCount":14,"integrity":"sha512-S1r6QpyGpgriRk1GnXHD1ohgyDGy9JySHFc7JDW9XGyQvdvaxS2+nCtCQFntiUktaBHhMGf8c3QLPlcZt0KozA==","signatures":[{"sig":"MEQCIE9iH7/HCipYcF5l3gRSMWBRYdx//mp61EfNBk02ry2DAiAdpie7IATOg9GMIbPOePjMLgvVJxeEhoM+mxKqVghIqg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfbhH6CRA9TVsSAnZWagAAwV4P/1yDmvi2ZwjREw8xSsxh\nQYg/33ouF4uEFuM7eqf/2Yb2aE5hd1SO7dv6g5esWnUO0PdN32UTGPibFsla\nBo2lPGn2GXUGkAS/Rw/7qs5/gGbDQDFW+PmQWlU4w0dWMWCgUVE/TaRmiS+U\niUSEsE6tYvq9HUKh/qUSjKm3IqIFlrGK3RVyxnw9WDC2ZQqzzPdISMVdqFzM\ngaOGFb1fbOQxua0nme3h/8Vowxcr6vpKH44bQV1SplHJm6wIiGFf7kbpRGOW\nxeleLiS3hJbQxhiStldnGFxCd8/fn86ZjxPAc7ub71D1v7pThSMHqhffB5YI\nAn+j2CwL6sLt4V4h1mt3b5dxP1QZESrmHqVkhFg341rIrZtM1vgQa8xzhm4x\n4TBsuNvTNfRJ5Weumd5ioof6rCjZdHK2xdHWWJ/8cRFKShCtHQg1luheTOX+\nPxiidFPpKsFFqCT85KJa4gVeAt+eRN0oKMMbrXG4RZ1Et/dYZVU/7zqRoCgL\nSp3+NPs/DEzwAQTr/6TWebdciWo9vhf/9YI7yl/5IviJMFsTS2aObjy1M6Km\nwPDxIkUT2vcDoYWo3X3anXn1Quf5yyKXXBsLFAKy52imvgkI3AR57FNq16fF\nJxg/9GL7AdloFxYCqskevGo309BA4/3V2ZM3GzKiPSSRMkJcpR5E4l3aCHOy\nIBF0\r\n=ADtV\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"2ced06dc0aac728f58cce508c7393aec959895d6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/rtl":"8.0.0-canary.199aecdfb.0","@material/theme":"8.0.0-canary.199aecdfb.0","@material/feature-targeting":"8.0.0-canary.199aecdfb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.199aecdfb.0_1601049082089_0.13758124312468545","host":"s3://npm-registry-packages"}},"8.0.0-canary.38ef4501f.0":{"name":"@material/shape","version":"8.0.0-canary.38ef4501f.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.38ef4501f.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5b717cacc015b0456bb8c00cb138b66ba027be48","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.38ef4501f.0.tgz","fileCount":14,"integrity":"sha512-BdiCvaJMNF6h59wkGOlRbH8OIOyz/zTwp2T8nlypaDJu5Zu5LersaKXoC0F0VkvTy6KU9boT4RZljQmojTQ+bA==","signatures":[{"sig":"MEQCIA0gQtylEwy2BaHTj5mRQTj0jGPHHRVBPhSiTRcOKxyLAiA9q9+L6KrYGIbsrrCkHxq6RjMqD92059DN3E5NT9gmBA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdM1WCRA9TVsSAnZWagAAxOcQAJDXTW4pteWHXz0/tJyL\nRX5zAZJ9N+bg6vk3cYxciyd/lFUyx030QE6JFMfhJ/b/0X2zC/W2QxRxzC76\n7ds0iOUpz327vy/qlh7ig4DJ5AR/5eZRP+VCEjY3kghhTaIhLcGqHgjgBaB/\nKr3UWcQBo/G1W01wwHH6WhRLmNKkBeZ6sKThFxF5Fxp63bIP0Pg9PPeQ2LOh\nRXtXU5+D3usGbccn78giSWrwmCqnaBeSERWLUP1rDS2ZJM9uh9UmyYnn50PP\n+e9uhZRkvBH3fRcqz1tmDVE3wlvNbjsexVkwbsf2/5cCtUe6rs3mokOgD29M\nfgNf5hCOs46RFhe57NkaXfnW0fNUdGy7hVv7Cn8Nw/4xf+r4DZK5mRh3PUXv\n00CHJPV584s/Cnpg4X8/OVTOm0gDllZ2wytURP330ImpW6DuIuuOiuFkQy3m\n1vyVNQWTSkEZrc7FRiTLtqNjvNA4bOps2Y2nhZHKfLucHckHC3cXoaNR6vOX\n/5X6U2nQWoSmgsXqoVOuV1IunUwfAMCdiMImJX0hIWQ8jtyYtD9ZOJSnEBOK\nslmowGaHzmAek3upXvy0JozqNhg6fXJO84wLZ6Ktu/Ob/Y5YWHf9XYfCh47h\nWrqgrjVu/uFaBWIB/LrqqYAivnGf/dI83ayATMnVa8fCu3Cty4VJ+4+e8LnY\nHn95\r\n=QFR0\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"bace3094edebc680b12a257aebfe6170928076ab","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/rtl":"8.0.0-canary.38ef4501f.0","@material/theme":"8.0.0-canary.38ef4501f.0","@material/feature-targeting":"8.0.0-canary.38ef4501f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.38ef4501f.0_1601490262102_0.9208164962795979","host":"s3://npm-registry-packages"}},"8.0.0-canary.774dcfc8e.0":{"name":"@material/shape","version":"8.0.0-canary.774dcfc8e.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.774dcfc8e.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8cac13b35f0478bbb6dcbcaedc0793f49b55fff6","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.774dcfc8e.0.tgz","fileCount":14,"integrity":"sha512-7+omcfOX2WmcOIju8NE/5Xj2bqf5H/YoucxpjsYl4mHzgrEwwYmaJC8FesTyt+5TGOXnow8v7pzJ1YIxCNrdVA==","signatures":[{"sig":"MEQCIEOXdGOL8kUD7VhibbdiW/BDTx+dAOLlZFSZXAN+VZMFAiAoN8hrUyhkmqr9Mg/oKVNI67HWKCWC0HX6fgIawhgHVw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdadICRA9TVsSAnZWagAAemMP/2721cHFIeg817QbUj8z\nPLDr98eG7RFcdDBtZFDAmJ0e2+LDZJSi4riSzeLbpiAocRrOBMM4KgFr5uqO\n7lHXAquarJSbQ/RCLhpTBjSJOo0wGh3LiLzkH8EaorK1fAH0STASOQGJ+VHa\nin9v241eHRl3rgNl76YHQZU1LCSz/ULj7kG/rq2+h2kblV7UMKOJ4GoffPxl\nuX2d494H/euCMHdCuzWriZmOw1qGeC4ZEOqYHjdWI85aGCBRQoideTb0JMjq\nhmkRiPr+ifOPoyYM9LZMLh2vQ9fdkUoN7eCgnHrUDdSA3hKY5ojhi8GFul8u\nGAwaUJis/wBTS8nd/MwN6TPqkqmk/f3LjXPveKmBO4QsBuf/bgRzVs4IMhEB\nF4Pg1btajBCacGHgr3evEl9JQ1H4rmIZVFeaAQwpnwI3ucOeILZacDEi4vtW\nWdh4Rzc3ezAzg62dEyj/emRYvMubpr/9o1k0Ksnr6A6GQuQPMgngIpjUBaEn\nsOYJApvZcKJpU9nojHuJ0P7ISHognd0/0jHC0Q81hGu4dRXBU0sU/zxMs31W\nqBT4H/Toskwna8YqalM4IZ/siO7ZmvDvuQ1APNaoMlwCswoPIzQ9p3Q+bvVe\n1WwgMszIRD/No/W+C5jpyirx4xiuu6VwHmvpNsYhKSxySkjWiCMkO0yKbnir\nk3an\r\n=RUzQ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"6c37b80b059fbd4c815253f3a3868578afcc1afd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/rtl":"8.0.0-canary.774dcfc8e.0","@material/theme":"8.0.0-canary.774dcfc8e.0","@material/feature-targeting":"8.0.0-canary.774dcfc8e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.774dcfc8e.0_1601546056474_0.23169560630727237","host":"s3://npm-registry-packages"}},"8.0.0-canary.0f60323a8.0":{"name":"@material/shape","version":"8.0.0-canary.0f60323a8.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.0f60323a8.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f11450cb78618efd4faf55c3f2be2dc8c62b0267","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.0f60323a8.0.tgz","fileCount":14,"integrity":"sha512-CPqz3E0T2Lwp67Wq+4ea0PkxBSioNjIaDgkKNjkD+YiUhRpZ4sNx4C2v+yvZWOW/hQ5x0ue+WVImPgTe5Ow1Dw==","signatures":[{"sig":"MEUCIGu618c9dg63qmjc3tWTiFHRp2tORLCdhWYAtVSJnyS/AiEAjqk7TQlKgVtNcmDfmnNS8B8Gyzrqi8NVcTg9QTRA0hY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22478,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJff4AoCRA9TVsSAnZWagAAcDMP/A4w99A4BrS7PQ9iWQ9u\n4hzIdDN+IRxkFOY2TA6PHqpkrSfgJD7AfMEs8BGpjX9VXE+UHPwvwWh7Cn5K\nrDKveaBgpqbKrv3wAPCV2+Ts2DXOD6F47stKYS4MkoqrRad8kyjo19gHGzfQ\n69HVm1ErHmCqorxEEc7/O+9mSy8joGksgsk+UwqJisNutltPZriz+porpVhs\ndlYjLM0PKKep0f88NCMsd/GM9r2LhOibeVnkG3TsMdLYJayjfHQsSGEltU1Q\nWfE/0bKwmMU30hpg/s//HuGvXa+cKqUlb6RJFjUa40ZSd9RFbEj57d+TqOL2\n4fYCwhPKKH3tfbiqzcJmHIbfYj8y5DNebQQKE1P2LjkFVIpQohjkxlU3h4Xq\nr2V5r/1aK9ymPxhxarAxiHJd0RP6m9F2pcWpEkRHKnVfurLazGl/xP4LFh9a\n3q/zPmxGBtnlJC/r0kBcHfJpWev4V/aTwZGh6fMo36f47ME9l8Whq5/4/3I7\nN7Yg6iDWelNvMxwrVmllGJjjNZqvt4m/WrIQxkKJeWfG1Tai30LAuAjxEJm3\nsNJggzTE1pYmM6hpNNofpdDU0yfT0MpvgLO2SfQod0GSjZWZBSTUGbJ27V/D\nyAlVkZFy5HrBo9/XAcvjQ7520m9DX4ZnLiQ1V3ksBevxR91UEMNyu025E55R\nQaT8\r\n=pZuz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"edfdb55487a31cd5f5130aad32b3fa8f369e6d0b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/rtl":"8.0.0-canary.0f60323a8.0","@material/theme":"8.0.0-canary.0f60323a8.0","@material/feature-targeting":"8.0.0-canary.0f60323a8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.0f60323a8.0_1602191400416_0.8469671529975111","host":"s3://npm-registry-packages"}},"8.0.0-canary.d71622574.0":{"name":"@material/shape","version":"8.0.0-canary.d71622574.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.d71622574.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"db51b1e0f8eedc1c7d26932288356e2d6f820428","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.d71622574.0.tgz","fileCount":14,"integrity":"sha512-IgseTyOR8yW/ea+Pj3wLZ0N903vQzU472LN6W9WfS80vL6QlT34HUU1RlCfkne6hu2kPoEX9KMpRt2QkcZK1iw==","signatures":[{"sig":"MEUCIQDLWe8NwMI2O5lxQY1gebgpQxzhI2SiexKU03fpVgdX9QIgF5JmLCbcwReNEwiZhFstk0CO//EFXb6KzkYp3cPl7MQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22478,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfgJB5CRA9TVsSAnZWagAAFGcP/jCFz01cR8qlBLsu4PFD\nHW9fpacI9d8eWntBgtT5AEOZYFcTwQl84WZ8SvuryR3tXpnRNzLHvmADlMln\nMJyk3ZkDfcy5N1rLyhXr494d1ArxlhjtM1fm3ZKkt0w3ljio+AkvdspEM3fe\nBwyqji8pXXGQVNnJJCHumX2LlQ3viGy9XZhZN2B/FDEJ6cIpuxD591zZA90X\n6cI43JfMs0HYj2QrIRmFWucGDF58D3uV3D5Xw81UvdRHZ9+gUnjiGhU3+uAJ\nXkSKquy+izPAB3ioEOEYucV2I3XWdEM6tFK/gBoVqO8p/aXxbLNy5JCX3BSV\nQ+xh0uKvUFCpcxpsVx45fWBEdUNcpOV2eAIkNb/2EkE5Un9noyuNRt6G6Yut\nnHdUbNirS/hyGjQ/Zv42MuUNMILsXe/QrudRX+CJh+jtFzPX+UMQz2V3BKFF\n3wNr5lm+JZHuml+ldpzf3dnSlWo+pX2ARZJsuvPdKT8pRFJIDBPtjgqol9aH\nh++Z67QnGsoDov46hqFAqZY/3AmtGZZDpbAedlN5+sdNcsvI91VXQ5XDLU4F\n4JTfVi/CePfda+/bmlLcpGUzMbqccHyZmKwdWDNCdFHGmAX5IWETRPWBdiYH\nb1VwDGcsL3dYaoJ/vVOw/h1OyHejQkLvOmymBW7JY5v0GhS8238GR8eJ4/v2\nQRLJ\r\n=09ZT\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"19a45f4824305f22d61cbf9deea0fef067dea3e6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/rtl":"8.0.0-canary.d71622574.0","@material/theme":"8.0.0-canary.d71622574.0","@material/feature-targeting":"8.0.0-canary.d71622574.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.d71622574.0_1602261113513_0.3160037146030952","host":"s3://npm-registry-packages"}},"8.0.0-canary.7a9afaf4b.0":{"name":"@material/shape","version":"8.0.0-canary.7a9afaf4b.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.7a9afaf4b.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4afceeee370f29124ac8526b082d9e23d433439b","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.7a9afaf4b.0.tgz","fileCount":14,"integrity":"sha512-8A2KuZQVseSzi23CEogyp3IWGh/EvNTAu5CgqGOOjtxckRxPm3+THd1mOnwDJXosMcp5IrM77sNWftYc2uKp0w==","signatures":[{"sig":"MEUCIAo0b1BDBdW6Lh9ZlC44kD5YCI3PeSsvMpc8rVE6RDD3AiEArAuyBirPQTr7MY87Lju7yoiY2f70wGBRyS3nNPA6g9c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22478,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfgOoLCRA9TVsSAnZWagAAXskP/2IZXYnZdGxYBop4+xWP\nQgxxY3VcmlS7+62vHCj1Ao4cO85+oTOTV2yc5ni7F+4Mee0RPKYQhxrpiMRT\nBVRkJNTPm9gFkZE+yoSqVXMwl+4VypFdR0auFy1t40xvNW6X0JhsibebtkLR\n8a1KtP1RqPrOdUC5jsPGTmyRd2McQs+3eKPT5b5ytivitF6f+OjPdrRTLpZV\nX/jSHyY5h6PluEGWTTkeO3+DyN5pgufeM2C8yjgj9nY716M0c3rcVI8WguwD\n+vg8jDqi8NSXQVWk9/qUh0FDcrIRXW9kO2BEYY/nweuAzfZ+dyiZP5fotA0Q\nEV8Fc22OFCmCrE7xM5/Ic2KVd74L3V5AhMsBiKG6U0y1Rge70TjJqkrbHKrg\nxplnVMXPgwAQtegKxjDU2bEmvb83sojQem1wIerBfk2ewonfaXpJFT8E4RnL\nfZyWjtTn7fzAYFHDEwgA8Ew8AUEAK8K0ZBWatT2kdnRTEqvtfIWOmjAIUx+X\nzy5pZNxXDND6CDAErN6B176zRrZ4OEcX6J7sLDo1xIrnJrh6CFRJyu2qKK3Z\n1r+03D2tPfpFG8sW4113q13arwoh/0i3+N/MUTWTOXYIcfIpvhc1b1QXnmTE\nfR1hcv8QIeV8+D0kfFOCfK7bShp4mcC9cuMMWIs/fY94Aep6fxaLMyd7pb6n\n0aCs\r\n=gT+d\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"137d6fb8ed93c50312981c75fb37199ad460dcf2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/rtl":"8.0.0-canary.7a9afaf4b.0","@material/theme":"8.0.0-canary.7a9afaf4b.0","@material/feature-targeting":"8.0.0-canary.7a9afaf4b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.7a9afaf4b.0_1602284042700_0.1819769405130116","host":"s3://npm-registry-packages"}},"8.0.0-canary.8a39352c8.0":{"name":"@material/shape","version":"8.0.0-canary.8a39352c8.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.8a39352c8.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2bd48f17c0dfde12570bd4b67557af7ef95bb5b6","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.8a39352c8.0.tgz","fileCount":14,"integrity":"sha512-7wzD4Y2gGrsMAqTc2fsWMcZIxc4iyZxs5i6ki1Ki2hi7toFX8IaBsb6LFrNJ5NmsAmTB8gEQtpd0DCP0aSzNjg==","signatures":[{"sig":"MEYCIQC58orM0W4NI8afZdbOUv2/GCaNT0P5W/4gJ6UuZEqZKQIhAMs3+kBfnHIfiRcBfx/8RzD74m3Y7reGuDv0HRxibbTU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22478,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhJZqCRA9TVsSAnZWagAAFuEP/1H8a52bqEHbcDryP481\njRbg1dA2X5InwmH1Oh7BsVjDLTLGWmihgagpMK/UdL4tB09tKeQXb9Z1846Y\nymtmcTyB6ivHO7m3GTGApT5AN+S0biQlMp7tLUHn1Uobt3qbDNZEXbDohEjU\nOvCE+JsG1DaLyyxMrbHL5Mz87bhMpD1GwKuBSAHCBEpZIsWsPyLtAa0zjb7t\njgYF1xwhUpLq3bClD66V2zKqVbBqhvrmzs8npVcG9LyVTKee6CbmFbWZqH9F\nO9YfzUWSWyskC6KoJH0X9JD7p5EGFzRX6aLfNxi4kBa786RNeyw8+WtsTwVg\nn50hfdSg2SNef1DIVOOj3omoFdKlSlr1iu++72ns77dtwy6bNCgFlXPI72hm\ndtI93rsLtgmsZ62Wc3cH+JooB7A/AK5eXC2ks3sjONOi4ku4zpukwa/lIg6A\nAWL6pwAwGaLyo11UzRYO1QHXclM1Vmvfro0wU6Uglvb/DvIXFks3nfjsOuSH\nbX3j6L6wGzia6kFx0JMErwujLWHHo1lJ2FbYfVk00DEwwOAO0P4gRQoQyD+f\n4qOChe4s8ZSBjfsgbdXQ+xKxp+5wa4B0vQz7ajHS0uaXUalaaTgoJAxJnV5M\nwkPzQG5FIW24bfVZmzQhYWm8Zh4/YNsgMAru72Eu/oJKABt/kXkgZy9FqDri\nt8Nq\r\n=tSgv\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"cedb8cd906516b8d460c813039351e951b960c50","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/rtl":"8.0.0-canary.8a39352c8.0","@material/theme":"8.0.0-canary.8a39352c8.0","@material/feature-targeting":"8.0.0-canary.8a39352c8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.8a39352c8.0_1602524778218_0.8683941314413064","host":"s3://npm-registry-packages"}},"8.0.0-canary.790ca85fd.0":{"name":"@material/shape","version":"8.0.0-canary.790ca85fd.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.790ca85fd.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ac55d3f60b4d6433c3917c37590dbf39de1c53b1","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.790ca85fd.0.tgz","fileCount":14,"integrity":"sha512-Y2KCQrFUMv1p5pklbyQMM3AeSXFSlKj/IvsQ8mzFqqUgwyslldGVTg0vo2vWt16mA8lPOdDFHEuauiH+7GdX+A==","signatures":[{"sig":"MEQCIApoMDW3UTs1iyE/cPtYd+9CqqRCuZ/8ZKJEzkfagBgAAiAg2NDnuEXjWpWfuS6hcC9RUNXwNl6I6gC//yWzZUOv/g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22478,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhNEaCRA9TVsSAnZWagAAFJUP+wd76wR9eh7UexC52X7j\nTnCCpT4LHScTp1Dvz+bdO/oYlUsg6FjpHgNt+1PKy5SQ4fKvvXYATqDw2BDK\nowJVMeg0GrV3IbDQDC8Epen8oSWoSFKCOsFgZ3u/7WPL4UCRPoDQ6NCjGfsA\nG0M4TFUMqyER6G/CUtZ2/HbnCx3XiJ7n9r6jQfDdDk/BYJywnOO7mCbzr1Ij\nlP1Z/XJRW3MZAFGNRxkQlhutEYYrvDl0ViRK7M+Gf2tYZz06fKEMxGgMFR40\nhklt79gqAXRXR1MuwzRxWj+hj5KzvcRduYeddx4iwoUwNNIJtZr1yOJDH4tW\nksyzmVRU8NtGEXx5Fy79eH4XoAf8WVMfyEf0TDXvH6/aArPlNwJdc7yd0ope\n1fn/afm8YLybeuNax4ndfzwr4FmyDZzGpVqFyu4NPCzYMYVR0SLn7NWQc4OJ\nHAZPvQY9GVxTUmibEgpjlzhjO2l25Zby9+E3Fo0BYEQsoay7PsESNRPQ9vrA\noRT6Cm23nYKnjwJ53HcwjSQX3oiviKobJNAz9lrFpBASi/4rl5/q4+i95iTx\njp81My9F+bf34yvN/gsPfJlJvtmmtwKwyf9G8Ev4bxQcDSJ3djiamy+6J+q6\nI+b0N8KeEY9ftD+vXpWeEEFYVo8lCUfw1ifg9jpJWXUWxitsmCNJi7NPGqhT\ns5Px\r\n=M7x0\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"8971e891898c4a8ca082beda756a7b93097f858e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/rtl":"8.0.0-canary.790ca85fd.0","@material/theme":"8.0.0-canary.790ca85fd.0","@material/feature-targeting":"8.0.0-canary.790ca85fd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.790ca85fd.0_1602539802400_0.13163976984199222","host":"s3://npm-registry-packages"}},"8.0.0-canary.174c0becf.0":{"name":"@material/shape","version":"8.0.0-canary.174c0becf.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.174c0becf.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"46d17ca126a7b50e494fd3cfb23470b3469c3e67","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.174c0becf.0.tgz","fileCount":14,"integrity":"sha512-TxBS78o64+au136o6vFh9cXjI9B4oJCgYuZu+hXZu8XShvbcf3aehBc2dXl8kVqAmD5foNLXaT0JX9zvcB3KKA==","signatures":[{"sig":"MEYCIQCYZ+rcir9ZjWiUZ3gH03cO9TSzYWoGyqHcS3o5e7mi6AIhANZtgFDZqj9vCVBLxLZRhtFKMyUenndb+Jxk347aFeXc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22478,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhl9PCRA9TVsSAnZWagAA8J0P/1AiK29nhIx8VDmVi74J\nVcj369UzGmUn34L4ivuOd0pdadxEkTvFLEv03NkSyQmbf7iZRv7z2L6CEIgz\nWLmcRZo7wzSv076G9sUuOVhn7wIrzHqpsAC8ORaw4Gwqu4QQklwV4BMRAr3u\nLIp8mmXiVGyK78+YqWOM8Na8TPoJG/kzqZkPImtUFIPgtb6f3/UeYGpM6oPT\nSYfpyk0ICAICPXkil6rXt989POSfOvhwHIINxwm0umfVJnmKjW389zueeebE\nOrDdRAPAhxdWV6YP3RopT6VdYOcH/74Cyg4L0d4ER2EZYP286CPIZfmx9smx\nVNoht+F325mQta0acth6/m616+cPhHNb4xv37lTRwRSxbenrg17FAXp0InUZ\n4lLNbXS8Qff26rjXxZmPqBFnGslyP6WYzAYOZTFzp1fkojLZcgy3pf08zvgb\npqGr0oAwH+UPnWWBPFdy3SfLE+d27bk7HWBbCAfoSrqExwmcV+jwlpCqLrnD\nh8WtuhK+bzD5OJPrJC4S+7HJZ9roTHoYt449kmRdy8QS9kSATjadDP4Nhkdo\nWiFXHEeN/y7hVg39q9eKQd2L/76yzTuBQoNaMYfZut3wX8/ea4X6daO11Elp\np/i83X5eqDZo59DgND3y+X+j4is9PtJEkK8+OXndz6WLk/EdOZzzImNbtSKt\nZaGR\r\n=F6lX\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"6dc7561b8695889178b3e884e84f5d9c3d59e100","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/rtl":"8.0.0-canary.174c0becf.0","@material/theme":"8.0.0-canary.174c0becf.0","@material/feature-targeting":"8.0.0-canary.174c0becf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.174c0becf.0_1602641742569_0.7337549623323267","host":"s3://npm-registry-packages"}},"8.0.0-canary.c71ebfa02.0":{"name":"@material/shape","version":"8.0.0-canary.c71ebfa02.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.c71ebfa02.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"211c798aeacae83708bf75ddb8de0a4cf3d5670e","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.c71ebfa02.0.tgz","fileCount":14,"integrity":"sha512-yKtyme7m5Vub7RBwcOySJjmU0FY1QiK86R1x286Dg2Kp7FH/us0+/tdbz48w/7A3ZJiGIUa6wR3Mbz1sV2LO5g==","signatures":[{"sig":"MEUCICTsIW4NwGaw8k6sVboDB+PIjmX7DfRkGV0f5E/ShCjHAiEAgRakqrItisoG2psnjhogR7snbwB/aOZoy7SyWREDtYA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22478,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhnvnCRA9TVsSAnZWagAASYMP/jEh/Yjk/x4wiaa8eOsn\nJofp1O58e6PO9DYOBW0k1/ov/n4pOa7a0OzcyMBEKTTWy7UmC6zB048/jdAE\nQqLWdKXpfMMT8NzeuqhYlWyUnlf3J9wC6kRUcxrTQswKl0wVlf5T0qlgSOK/\nnp6UIEKtOl+QnhwYodr6vEIAD0u+hA/QM7KR+9T3bXJ6x88/Hrzf2WL+mpZR\nGxb4hedwoI4FRGwB2NnV1hUnRqiSvC5X0RIgTjWvdn29bOZy9lvFkj/5Ysuc\nMeVSSM0T9ahWm/JZVB/zyWq6bpTXg53EEsV3Z1o99MaLUpLI9Xe1mb6LkVBA\nYdfQYqFpSehpf6LWkFFQRjHJjV8Z6n5uo8beJsyDPawIhuRIuEdrjhz/pLki\nYj7+Q0WmgTu0tvftheuMCPI5a4IaewM/dBsuLTG1N9QGBkcJlVGkSe0Pw1YO\nVoylzKI4oPylbCeic1yicDZxEZHvaoaCJHyTgXSA+2mz2ZlUxqO4qEa+hxrX\nGDeLTw7wnfJwpS2ly05G77mwgLyXyBBTOoomRvv0G/a3Nu5iHOVP7sqWfK4K\niCSr7P7VMBba0BmAonFPn/1Cg96xjyThFuM06fYo0EsuGtGsK9u6x2F2zaJU\nlnjE3AcsP/ACHIG81SzvuWevwJ+/6xWNPysUB3EELPRwHAk3YhY6PGNORvug\nIKM5\r\n=2QpR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"d1158a184d234471c81501e838b409c54f591268","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/rtl":"8.0.0-canary.c71ebfa02.0","@material/theme":"8.0.0-canary.c71ebfa02.0","@material/feature-targeting":"8.0.0-canary.c71ebfa02.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.c71ebfa02.0_1602649062672_0.06921950406656574","host":"s3://npm-registry-packages"}},"8.0.0-canary.2ab716cbd.0":{"name":"@material/shape","version":"8.0.0-canary.2ab716cbd.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.2ab716cbd.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f9710097304be9f9b6746b03df7ae55ebbdf66f6","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.2ab716cbd.0.tgz","fileCount":14,"integrity":"sha512-8fQtbYiND/sEM8HP5Z8YjAotPFC7+A+SHuTkm/PftmExgQyrsBw9BJ5PkEW8OuGODHsg1WREmc8jDaBxqCwt7Q==","signatures":[{"sig":"MEQCIDmq7SBsYAIIWaS/w03lr0JGIPZ7fGuKVRMjOWoryDehAiBhPkmr47isrIMzbsqolC38mnJ54lOKnpLhSmS4cwP8cA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22478,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfiON/CRA9TVsSAnZWagAA1aYP/jaSS+6OY3ndAW8D9jBL\nZJlYSXkHNC77ZWtBHCj5OQ7M+CMa6fft217nMl539f/2dNdrXqNDwC+mSNty\nK0Xc/Vj/beF4aVdcNxVOk/KzvZRHZ5GheOqsjLHqNkGMBJGKqUA4BpiV3Ha5\n8pmstcVI5diTgqrYSH1Pda/gWCZ8KCDVsy+lVPmwu047S0g2iZ1TD+c5nQ7o\nRHv2vLdXvkri+GPKFD11r/8R7lxQIFrsJIJJKi3RmLxsp8JVXEwU0i/LJO3m\nU7T3RIqGHqHxrgVvpGRJlunb/WL3/BiPHZHGiB8YoxZzmHXqNJLoqvK1BU/0\nV/qph2flmIw2qxempOHN0U4+dM0DfRl80Cwh3PRbbw7VrCzatgziyuJAcOBg\n64nba7R1MtFzgoN9AAxiqGaCOFPJaY+Eu+lklPBq10KWNDRYYo4xuARVi/lR\nbH4AfHixWsjPnxS8YiCWix+37BUUREERyUoliDhhrtXlXYLcwHxHWmy19tbu\nhEDgGbiSS05p6lcOOHOBmg992W9RyZpIXFDohe5C1rsPFXb9If4/Wsetn32O\n5BE6OwG5I/rZJSg3H2vV2DUxGJzMlhV9IIiRZPdi9reWmvNuDy472lqDipS6\nJF1zgxr63vdsIL25mU4EnpQrXBYJdPSvRIZvbZYFi5xHYmxXcUWnXjI5gWmi\nLjbv\r\n=M1NI\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"a3f41127e9d90f7e393ee6fa5e01829e52160131","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/rtl":"8.0.0-canary.2ab716cbd.0","@material/theme":"8.0.0-canary.2ab716cbd.0","@material/feature-targeting":"8.0.0-canary.2ab716cbd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.2ab716cbd.0_1602806655316_0.9767798888629775","host":"s3://npm-registry-packages"}},"8.0.0-canary.43c1c5e2f.0":{"name":"@material/shape","version":"8.0.0-canary.43c1c5e2f.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.43c1c5e2f.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"65fa1f09200591d65b36a1f73728e99345396de9","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.43c1c5e2f.0.tgz","fileCount":14,"integrity":"sha512-t+PmGID6algX12YBsAvvrVJFHti6iLAbxNgWEd0aMRgg75eIWD7AB1iaYKsxPswMyfwAp2KiIFcKuUm30Ny1dA==","signatures":[{"sig":"MEQCIEZkISCFPs/LFY/Cb/sUUYBI9nYqEzrEX7qiEQjMMriNAiAT9cpCwTXsJpJiUVlIjViwqZO+pzdt9vjpXtiey34Jag==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22478,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfjZ3ACRA9TVsSAnZWagAAUG4P/2RBHVcFf5A2eFOvS35+\nP0nNnn5k4RL8TuhAkDOj9yRFPfYZtZnHDcrPMy08OoNqKiVBv6g71er53P+e\nt8kyoP5SUL2zAYtIrtuEQGoaCDNoxCNoLFJGZBQsI4LuDCAXm8onkbDBkiQc\njJbYD7eCPZCZ8XxzGKfaov7wM96cYtUV1/rKEOJ7CQCsqnDTeZgt0bRPvPi5\noYuayeXs9TZgn1q6N/t1HMFnhVWjIE4KP2LOHpJrBlJpZ4AyGynrEtsS3ryH\nZP0HlvckPG4w31H5OLtVKgB/HQdbIpt6ZaUXY+ZfPF9fJMGy5dOhIlTXzKPK\nmmCl3goVaAw9dBQCm3TPqeH1H2utnb1Gi07NPo1JYx5QqSxBdae9RHyr1qzb\nMl3Ncp2Yv2fKI7yWUMaB5j1tY5aPgFbUAksc4th2UetkHZPtaDf4CbRNrRZ6\nrCvvibE587xnZq98P2gCHwum1AWNZ7rMOQU7HvV1wfVaWsZIRuL21QTLPJjA\nnpAoxYpUoqRTinwEYWoOvGWbpgwAj1DyNfhmGya3qjHo8YSfe4SrdWoI9Y4K\nrvrPxC9RlIcyFiIM+jmJdITUgvhjia4m195ueqNVMFFACn+Sc3hHdluihHhO\nRUCAECO5uo8WHcvOnvEtmuj/EWU+B7UVfJ7wTwKvzVtBm5k3QV8szK3HRMSt\nsG65\r\n=FXXU\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"bae89543d5336b4583fd1519cb63078d2a5c39f5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/rtl":"8.0.0-canary.43c1c5e2f.0","@material/theme":"8.0.0-canary.43c1c5e2f.0","@material/feature-targeting":"8.0.0-canary.43c1c5e2f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.43c1c5e2f.0_1603116479900_0.37334918312296406","host":"s3://npm-registry-packages"}},"8.0.0-canary.ccc64eea3.0":{"name":"@material/shape","version":"8.0.0-canary.ccc64eea3.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.ccc64eea3.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"49b1ac353f1199445b2010b06b02878ca5179444","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.ccc64eea3.0.tgz","fileCount":14,"integrity":"sha512-9vSSaOcYnRvTbu3qMGJogTyVus5XWe0QrfPD4ZaNrMzkVOSzR17BIkWLNPggZNhWTRTJYCzlOnF7EsT1CcpU1A==","signatures":[{"sig":"MEYCIQCdD0QMAOruxDamKcMWWIgRcIsW0cXSbO4ESe/xwH4usgIhAMxW8SvNkL12lzt80i3hB/mSoaKOtwHzUdRHzDmSlYU/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22478,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfl1L1CRA9TVsSAnZWagAALqcP/A40LEtnSZuQ0OGmu3jY\nizloBpl463p4NPMSyZbmwHgr/iVh+Z7ixw3G+c4Ee54aK4GbOqxlJ3I0Y4Rx\n9s51ka5QM+wxdd/HJSXJ/0DeF+sZx4+oOTZwS7kxETo9z5to03LXUeayZHCO\nHRuzZUylgy2LeCCS91bF4soo9l0li+yuk8Njb403RX1+OmnqETxGNQKNdXxi\n+IQQS/4KvoAFOptFUvLSAD5Tkip4hFkH/qZ14eD8qvsOfyXkK+OxinsxOQPP\nb6EuQ6eemw0ffVaGx7AkjLrBwXiMSgySPl4mFB3gd8qyWVaGSHMtuHkLoUnr\n7ILn+wucUfTGf790bh7S9zY9a59aUCHvCNIsoSSqfcdVC84tFQDkcLAH9lWq\ncY6W2SHOig39okHBWb5UNfT0GxWzEVfYJlH7gAZFdIvOUZDadzYcc3kAb33b\nA1uaigaBsOpWzpC9yJ2zke6cb8xU0kaPYAsI+cFsSHRdpKWF9obLSoz8qhWf\n1JZ2XLkkGOzHyh4QXsXUCPC4+a631ulwi2HZ3pm/FfDK4MIJZ3hL6bBX6ZrE\njxvhUEejBj3AackaB5BMYbpauMswB3lFpkyY27RkpEU1Vu8nOsn/0YteyPPK\nZK0DUAtqn+4pgT3PGJTfP39Xo2j6dNOhQjwPUbfAufeQlq87VPRY5Y9nW9UD\n02Tz\r\n=A7f/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"26df299f75c86dada6da463cae5df1b0277d5c7f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/rtl":"8.0.0-canary.ccc64eea3.0","@material/theme":"8.0.0-canary.ccc64eea3.0","@material/feature-targeting":"8.0.0-canary.ccc64eea3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.ccc64eea3.0_1603752692674_0.7015648198369575","host":"s3://npm-registry-packages"}},"8.0.0-canary.a79cdd019.0":{"name":"@material/shape","version":"8.0.0-canary.a79cdd019.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.a79cdd019.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6a4201d2df582ad2917169aa772ad1e5713c9ddb","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.a79cdd019.0.tgz","fileCount":14,"integrity":"sha512-8hmmTdouweE3YT8K6jw/fbd8vETLE3/0yKn11nmXrBdw97tEYIsWK2oPFpJUWfCjIcJAhisKtt4yONxqrwG+FA==","signatures":[{"sig":"MEQCIAUWU0WAuRheWkoSKGzwQPz7sljb6ry4betSTLFi+ga0AiBsblHNraRaK469AuhXHNBzUKvRiuo6yAt3X3WZNtdFzA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22478,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmEtNCRA9TVsSAnZWagAAG3QP/1gQIX7rj0sMwz9KtcxI\nKkYDHu7XM7fsBxTBNvCiSLEh/3+eFFoiZAlEezCLktmwB6u9efeFkL0bPgUE\nGxpx0gDyUMhlWd0IFukGnQgIT0Lpcl8vZur2KvncheQ/KoAOga1StE8KFoof\nDGQuqMqt1r5o80v5HLWolnT0oYUXi5T9fX1vMNZJHHVYm4me7+44OQ8VlQFj\nXc25485vmPg8lIGJrFGjbTINxk+OSIxFvXkZFOrm81Pkck6vCNdrHBgDhOYI\nONZW3553vJgkoKTdXVw+1apISkFQc1Cv7RZ/chz30gqVIHVDsQsMWSCPzVgI\nSzjLgypO7Mz3byDbvBVzj4m8OAdBJvL7Co3/2b8w6nQj/bLKX2HSfMiFFlZS\nsGoQL+K/thyy8bSXIwf9SE+N7BBT1BA4jlZAJeDnbQ3T6Gq/ZX49Kzs0Vdxk\nWj4lF1dELycp+a99l41LqB+a30hQFqrseeayyRyGW6U0wYEZnZkDHM7HZjop\nZrbuinIP+qhYNE4MH0vvNZEsmakFh6A/AaTJ2rp9MrglB6/ZDWGjQ9kKnVb+\n6LWAQ9jTY47zJet24owKK5AMNRpcgEHqTxKUfEAH+f7fEp9q26Z5iup2O0dP\nWg8KsUdas3etk1fOyDu4LkGXLhgLh1lXSP1K1pkXKtFacrhMfSbJsozjtU5G\nGaii\r\n=QI5I\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"c54ccf71e4018e84948fec32678595d974f80c67","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/rtl":"8.0.0-canary.a79cdd019.0","@material/theme":"8.0.0-canary.a79cdd019.0","@material/feature-targeting":"8.0.0-canary.a79cdd019.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.a79cdd019.0_1603816269010_0.5017198701323953","host":"s3://npm-registry-packages"}},"8.0.0-canary.596e98424.0":{"name":"@material/shape","version":"8.0.0-canary.596e98424.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.596e98424.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d915e216eb6e9207c9a70b8e6636996429a43fe9","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.596e98424.0.tgz","fileCount":14,"integrity":"sha512-w8ogCGi+IYfV8CW+/01dW7JFnzUrJAQsBz8DEK7E7LuA92KRtLkZXSBr7eWyRYXU9wa+JyotQ+RkxXHpr3+xcA==","signatures":[{"sig":"MEQCIEtPDSZm+iU+zLSvEvHlZr4tCMP/OEkA3szeKgknkpY/AiAIfnUnXPEG+OGbe1bK4GjXRVACe40aryENxp6OGK0DrQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22478,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmZZdCRA9TVsSAnZWagAAewYP/0K2hTUkLIw9IaY5G0Tz\nqnE5j0d9CFTpIlyBjMLBln9Xcn+3j+SkenQAbWHCk8PsBDxTtiA4xaFH0P9V\nQOfNUHKAOI1XYIi68cQWsYgkRuRaijlOCqNKmZHg9oMT0AyG1ImjajFYlGwy\nVIalwBKfcYZIj+hD02x8hxyulPayp9pqGglgAJ0U4Bk32tVsEN/qd3fIpggz\nqiyHbALdS0kiF87qutDLQx5/RQ99RVfKIRI+6j0irHELUymtKRPZp9U39WYS\nWerTyAiOheetilqUkO1wJhPXYGa4EGxPqEYbs/B/x/vW0t9VMo9uRxPF3o4i\nVXkcYIqkV7ZKQWahy0tS3a0OH8/uO27yzdws/QM3bu2efbjUCa6LWbyOBxRZ\nyn+gE99Ugxk2QkGKMvFA7e9cdJEjvmbVTEmkjND41xMr+ICLisc7SvPrFZIc\nf+bBA/dXboKlzlKGiXP9+TWYleTfNIsuJu1AU7p336PuB+dqwUKdbYlIyBce\nbZLSnQdq5HZqL0kmHWhjwi9l6BN3QfUYEJoM1fNtTARwB3p7ZtZj+TF/YIhQ\n90HgW/oMx0y4B4z7oa+9bBdmaWO6KV5Dp7SNnURPHGbAAIN75wfq2C0QXLnI\n1fnxBXHcx7J1mmvEv2Fntu3uZ04TJpAKrYHi+fmJBEkbWsT0wMyKybZrPWD9\nxWLZ\r\n=BNXc\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"8fdc1f444b4540a876847c7c3fb4a934e75fee2c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/rtl":"8.0.0-canary.596e98424.0","@material/theme":"8.0.0-canary.596e98424.0","@material/feature-targeting":"8.0.0-canary.596e98424.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.596e98424.0_1603901021065_0.2912726282619802","host":"s3://npm-registry-packages"}},"8.0.0-canary.05d5facc2.0":{"name":"@material/shape","version":"8.0.0-canary.05d5facc2.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.05d5facc2.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b55b4418cd02807211cc708e0e768e10a326279c","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.05d5facc2.0.tgz","fileCount":14,"integrity":"sha512-yFct5KFj9TIggCK+382OL9z3dohGLc4PddkQ06nHw6e97nHMitR+e9QrDjaOJhaBDRRXaoHa1+RaxiVIwCr82g==","signatures":[{"sig":"MEQCIEuPWj1Isri/UUDbUrxV2phNUsuHvRrNMMei17jimBW5AiBBp9iBbQft1RD9ElfrBLzc/M+X4LQohokyLhpcqHLPKg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22478,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmZhcCRA9TVsSAnZWagAAh4YP/00Pp519bcAnKb4L8hpY\nH9suOvnqkk8uEtyguXu00scER1gB3tZmmEQAk1Q8yb8zxYOBL0xEzuB92Ubn\nW4+rb000wNB8YHE2ad4YEEjXRhu1uuGP2DeaUfGkLnDvRDP+jdb3m8w8wqjp\nEZy7NHyK20fkDmJ4vOBnNbAbKa877BDBoT9AlDyoRYItYgNqjXOFQQ7yEXIU\nOeg+V+oYVCTuOmERrgpghq1BikfQxk2ylfN16su2uIWbl4rtM5qfyDQL30nH\nu21quPtXN+6wH7RA84kORVeDliIj1jJMaFp6rxfEaNYDNNJGLv+is5Z4TdNo\nPf+x6YFWJC8lymN6Itlikj9u+GtgSpeDdUatXCTyMzZ8bKjtuVPdDOI4eZYR\nK64HtYBCndRqTS1yJkSuS68IraKObOaZFvWJF24oKi0LxevWdVZerTeY401D\nbHMU30i8Cb+HkoQohi5xj+dLhJWTXD9Kb5+2BMnwfnd1Ic+GiAydItBNjVol\nF8DhMme/qCT9Nt5NJFbALqwpJKpx2FlJQlm6Zx+e2zfrhvz9YxM3HwoEsGpm\nCyJmUFUUwKpSuOKCCt10NFPg7iBgZZSm4GhfHIgZpq1JoCIdnXuqqBMC0W4L\n7RiG0vn8jnCElZl1W8ODmfILvLrwscWghVaodac8fgAv13v5k1m8gQdkKZG+\nVDBU\r\n=f8sp\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"db17092b19dabd6628edec5bf226f0b6a48e4f95","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/rtl":"8.0.0-canary.05d5facc2.0","@material/theme":"8.0.0-canary.05d5facc2.0","@material/feature-targeting":"8.0.0-canary.05d5facc2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.05d5facc2.0_1603901531913_0.0492137482874484","host":"s3://npm-registry-packages"}},"8.0.0-canary.291b3553d.0":{"name":"@material/shape","version":"8.0.0-canary.291b3553d.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.291b3553d.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bea3d424e145ab08e7af4fc3f2f5da0727110db6","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.291b3553d.0.tgz","fileCount":14,"integrity":"sha512-/FNLn2Uv6y0LT4lrmPqVym753tHXsXpzymrUQ1x106jo591mhQ00yFxjMamjfog2g1pi5cPGrmU8Y7OHzaHJew==","signatures":[{"sig":"MEUCIQC9LXTJEyxAMYivuRG5WhpHI1/MA7cyx3amIpNcUC5DJgIgVBOmBflpuQO8qyDeMIdrgtkVQa/rbBfYbAT987iTBrs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22478,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfma4aCRA9TVsSAnZWagAAxAYP/ilq4VEKLhRoHGcRIPYY\nS/FAAZcdoKBLY8D4WkeKzwp7SbAyPB54zYdHG1zsTMJ35GqubLTdLJc7zomf\n92NxmhtJ0MlmrM2pgcmjul16kWOUFF27XhjHNlSPk9JNhLjBZHPIVCEUoQFT\nhy0o9RHGeDzYl0KusvxIaDBKk7NKSjM8Fuq+Zxe2gs5U4ayu80Pm5XWVosAR\n1XWPi2gkCBMUjH4EFz2NqogmNsvelO0f0JUOkI/416XaReARJi40OdesB7L+\nkrLhzJV5JrckTsuXb2pGG2LQnWBvKZ5VJtCTLkn6sw+378oxS1rtVyP51jrj\nWlA3Wz9Hd1fDhdBWsKrxZYgTaVBzrQC0mmxjXvKkdqMymmU7Od84hhBn1nZJ\nkxitR4OL8QHzmALTrWSP+vIk+43ugRdbJAiRKWimZB1ZtwQUj03sxgFiv+Oh\nJbuZ1gDhSVIJB0tdwBD/f9GjJs+5s/W5cdcfvSkkrGbRhCOfZhlQopkjLIEE\n7f9h8VHYs2RBW5DweB4CXHxfKjfNyQHT37NpjvsSszyo/w6tnHD/k7c3eWyJ\nzeJdkbAsu+YxEmlfPwCMQ9m7XdMmbC5vhuaxCin5vd7kvRIa7w/9+tVzzE2Y\nhYvpOEuKBlk8EV5uBBhigZFGYa2bwaGpFaPTbPtjrATENGfOTp/R6vi0jvxm\nz93E\r\n=iUfU\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"bbd141e6c5168a84cdf50ef1302c9f705f0eb283","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/rtl":"8.0.0-canary.291b3553d.0","@material/theme":"8.0.0-canary.291b3553d.0","@material/feature-targeting":"8.0.0-canary.291b3553d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.291b3553d.0_1603907097617_0.23617961879483618","host":"s3://npm-registry-packages"}},"8.0.0-canary.dbc449b09.0":{"name":"@material/shape","version":"8.0.0-canary.dbc449b09.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.dbc449b09.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"884c553ea6e2725398ee50b69aa95715cacb3ab9","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.dbc449b09.0.tgz","fileCount":14,"integrity":"sha512-uhO3MOGN54yoroctj0IU7dVqNgqbcyPfDXzEbkFc8nl0B8VMgH0Z3JzgHV4E92xfqZ0/XgOuSnOduVrG2by7Sw==","signatures":[{"sig":"MEQCICR80oc/UapSEZOeKHcCHZ3NuunOpRzuCHRvvX19IPHjAiAhZ1NUeTB9FF/ijWBjzHGcXzKvmPHpGd1P3ZTOlGKvBA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22478,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmbSaCRA9TVsSAnZWagAAxZEQAJfjmKWIzD67bYdLTcYc\ni1NZaYCeNQU5SJaT/6MAkRH6vpDAiyQRflktvCg/65HQAO6KuCd0MheghzIT\njM4F6u3CrxwH3mD2N94tg1OlUDToSQm+vmUIMgumq1Xtk61okvo2Xc1JnNHX\nX5tNspQwnW0fLkJYjKzAWek+tqmnjD48ffHM5rUf+jylD1dhxoweFTI5CYxN\nRfK6Gq1lX4XGwqycDIkcx3bmXeC8q1a9NiJAQlS2jfS4YyK0KTrFH9xh9ICb\ncgxQ0ySdZHlGXCdE6sHy7x5tE49ogqN0QYSPDveKNmf5xYFKc4syOduHe34u\nsaWlxOk8jxSRFc+ewA3B4WAa953NDGlScbMOYzR+w/qFqq9DuyvcLCkg17US\nZGZVncMwFImA9HJVdLMrAVdNqeJeQRyLRmnU2TGnPLJ7YKAqVceFviS3ZeC0\nHuZHZ84GcfS7029rcNDNJJLjG/zcWOKemodz4Sqq5fnGGA0HDYVlJgAWgQ+l\n8P18dMDpe1DFGbtNNQ388VY2JDiyuOTYK6d/fp+Mu2QVCWSGLe7FoJ1ZOUeK\ncnTDha5DRjlXjhoPoli1gYxMfFguCe+QRKUaVuxAaOK7ggLZsMXouJHHZKPs\nVzOA7MVI7nS+n5KWmXSl59silwu90OgigXOPH4mVawu8//6sc4tMnssZQFiL\nRikH\r\n=nB3U\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"7888f3b13baccffea8b2b02ef5c25e264ae321e4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/rtl":"8.0.0-canary.dbc449b09.0","@material/theme":"8.0.0-canary.dbc449b09.0","@material/feature-targeting":"8.0.0-canary.dbc449b09.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.dbc449b09.0_1603908761460_0.18940672445886508","host":"s3://npm-registry-packages"}},"8.0.0-canary.4794b25da.0":{"name":"@material/shape","version":"8.0.0-canary.4794b25da.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.4794b25da.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"962d599cefd8ef455d4d0ffe4918edafe9efc56a","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.4794b25da.0.tgz","fileCount":14,"integrity":"sha512-6Rfco9emrEUAY24qeksCB2SGBLYAtkVVoBdn9SBbhR4EdgaVjbdEIkRkgpIRDwXF37cUVcIajhjgSHmiQ9Z2Qw==","signatures":[{"sig":"MEUCIFTs0BxGo3+GpBpV+K1n/+Gfz6SQbos25dVtpP3p31IbAiEAmxZfjU/RDHb9BPUtClbrk6MUdN9NIN5dSh3992Yf7zo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22478,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmbtQCRA9TVsSAnZWagAA8toP/0nhNJaU4Q0iZrm7uBpl\nKIrV0M0LlnV0j1MJLODYLRN+OwwoQD2guiIgpdVtYJeiswTZ2oTUggkilzRq\nCjsxZ90exi26O2JAxYlTA/LAUZ2UScu4bjM4H7nrVoK87RQdj+wTJodwHT4d\nzffmh4Ohn2rq/CB7ahoPIgRD1ukq+rT4FSTNkhFTRKSZRHmvNFtZ0XdupKqb\nlDoFMPSIo47zpxywUWdm0QNYQqYAx+mgR7EU6C7ugd43CFJ3NHRh9gS5DdPT\nZFim5VP6Gg7HHjlCDxzRiSKEraTmoG88Z/wCeRp58T3g1G2e38kIQ3+YN7ze\ncTsqvfYUqDODsY3DNgy+QWV45dOb5uLoTu19lOSNzhfXE9DBJ2C+6IAhjoKY\nRf65WbPOl+hIvzFlRETKLKewcOTxuxyKZ/g13slymPo9Q4M52x8esCINbrhB\n+PJ+TnbIcdlmtT3RNQyoCUksj88tCYQlcnUMgN+MwoH9pjPZwK4SNAvXdpd8\nlyoUjvf5Y0+bdtadmxnA36fYmZSqmmBwP/qg7U/Vto18zba0LhyWPEmjzrzM\nf5UKx8LtM9dZuZ4plQ29nHeMRPXsG8ajVv5Ge1HT1a2qaJUrrdIQNilJUSXc\nBwFcmgek5Dnl5+NAUNC3dn0TZ3zTYSJmurbGWPRCyQqJZNHgMWiL4YxpuUBI\nCqLi\r\n=NwXT\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"0c2eec6be7b76adae9376847043bcde093f59d3d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/rtl":"8.0.0-canary.4794b25da.0","@material/theme":"8.0.0-canary.4794b25da.0","@material/feature-targeting":"8.0.0-canary.4794b25da.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.4794b25da.0_1603910480478_0.9029569135591189","host":"s3://npm-registry-packages"}},"8.0.0-canary.c61db90a5.0":{"name":"@material/shape","version":"8.0.0-canary.c61db90a5.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.c61db90a5.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"799cb2c1f45c1e13df886f73da762651f4d48f7c","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.c61db90a5.0.tgz","fileCount":14,"integrity":"sha512-4qsLu2Ho5d/idhenjH2psAXoy5rli++4ID0xtm88u1KbSL/7/ZR+VWwqOwN9w1yGxYTN0n0N7YRcQnAyhSUayQ==","signatures":[{"sig":"MEUCIQCrjNTYNUGGmY1kNQbLcEZLfQKO3cSn6r0r///ziT0+BQIgVHjfs8K0CfhMJLsITuQiXiKOd8ML05i/RV/T51pb1Ww=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22478,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmb+cCRA9TVsSAnZWagAAsTEQAJ3z4xrRWR2qgIF1bB5A\nsMfs9BwquSaMhJ1YY2KVly01yKrqswDeNNkY4BZ9LNjie44yOEJDcQRA6JgW\naFqs81u1nmw49VAOk7CsDA5DxFtgj/AHIS2OVIMtzcX7q/TRG7JRML6p5r7J\nP5F3ii7Uqv7y1LUUliv1lsHH8n+/wCqfCixJZ7MJjL/DS4X/3vSMsLv+mjuH\ndTe6P8aKBvsJcYn46nekxe1LsWA8WmFfa+EMkBe4ndyZlar/MhsX7fUALlFk\nELQzCXo/pQWs/tf3PiT55cYdI27+U63Q+w4vyz0zBaWm+39PtOQtHHN0p9EG\n5lj9ZOYe5sV7mNxy8m+wIjvjCz1mpoEsxA/oIGKT1/3/Kff0XG6vwS9gGO8I\nrxXq8sj/hLQfv47/XPQmXLZaTlMl9jF+zwTDmOJIllLel2Gl1qLio/UFthm7\nW9l2CHqDcO0Kw6BPmIw66W6fDPCCbebeHfv3fyewUj553456kxCCwCJ2lyAY\npQCoTOsl+bPWcs7Go04Mvw3j0Qi6NSmpbr7grWzUn90QGQl91gDbpXRoftcE\nyWOg9Bot/iHGirl/PkKuJhK252CQQViexI5dsxRjso/A6JIKK4yGzVGzOTr7\ncqKgpZBDefg1o+AeO1j/MzKvBWg4yUvMfG3K6NT4ZJCFWy2B49euV6gIGekE\ncFf0\r\n=v8E/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"695570eb7478c283510b9174ac7c4911866e0868","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/rtl":"8.0.0-canary.c61db90a5.0","@material/theme":"8.0.0-canary.c61db90a5.0","@material/feature-targeting":"8.0.0-canary.c61db90a5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.c61db90a5.0_1603911580111_0.8747589745449829","host":"s3://npm-registry-packages"}},"8.0.0-canary.6d9648ab2.0":{"name":"@material/shape","version":"8.0.0-canary.6d9648ab2.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.6d9648ab2.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f13ccc8a0187f326b5136f6e4b188f4e0ef11fb4","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.6d9648ab2.0.tgz","fileCount":14,"integrity":"sha512-VFjPvIL4R/BTjvCS8pcXcQPCWJK0e0xQIcsIY578gq1DH9YRI36wo+utTEK5NMNKeLfLUpTycHCoQpFr1o8b6g==","signatures":[{"sig":"MEUCIFGcxWajLAsbcrxip24ExOIoy3EhJ30/YsK/MyqL3g7vAiEArXJmEmCVWlmcVfuTZOfXEWVIdkZi6/00HHV2aM2h+pY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22478,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmybaCRA9TVsSAnZWagAAl6sP/00ARLDfbuUPiE9Xy1VP\ng6kuR5cLDboQJF2jM9CWOE81Ejzx6l0OzLsJ/VHBsp9vE8YTUYLW1ir6Ob/J\ngP96xNttax5+eSLm60YjetSCwD6Ggub6TPW/QdR1HMQUnnkglyuQo4Gbmjag\nfRZRyfS1BkLArwMrN4pybGOHqQAHq2rvL2fi1BVx3KCNk1XRu5HE/ubSfihC\nQV0qtX7oVvfnf7k+FraftHuCYuPOaAfbhcwqQLYw2+STlO/pI1kjmXVvfbTO\nkGQ6crWp35qrxDHxAJe6onzdKYgjsfULAxtDbYUnJEJn3SB53bRiQpc4RW08\n+Ll/r+KzK0NLql1a4qPduHR2K1r8UB1dizX+xt9waL4Frw8ld/2WB39XNM3U\nf6qV2f1u6/m2wpch8Dh8XiwVOr8JYAITSGBSr0ACJvVhJKP75p+STCDY3+0X\nnCpRIhx4z7m6G2UQqUqWpOAlz5IzxK2wsEY5aJYb+ilrEzqiRQq/5qvq66bP\nl3QrCGRlBahYxQXYEXzFA3hyroQN+G4UVNucuqWaCG1VUMiPdVMVKyGI8bdi\nEoskK8y7otAWp0OQczNHZdRWsiaWJATd43ElVhjO8IvKxCdIYt9JilSsMy6W\nPgQc74/ZcdVN9+Dus0qigpDfZ6GLDfVZVzhboEMOokJ2qaXXAUSLWZkgOUAs\nJ9FU\r\n=GdLV\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"5de6a39d4b70a98beb71cf8243a219f454b11aa3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/rtl":"8.0.0-canary.6d9648ab2.0","@material/theme":"8.0.0-canary.6d9648ab2.0","@material/feature-targeting":"8.0.0-canary.6d9648ab2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.6d9648ab2.0_1604003545655_0.19078650880732573","host":"s3://npm-registry-packages"}},"8.0.0-canary.5511c5254.0":{"name":"@material/shape","version":"8.0.0-canary.5511c5254.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.5511c5254.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e95876974e73422dd60c51e563bbcf70573fbec5","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.5511c5254.0.tgz","fileCount":14,"integrity":"sha512-vYZM+elHOyd8sY3aSIbnDfV6tUT7PeUSxN3Xnp6lQ7TV+5VdlVGz+yhSGkDJeioh84x4BY1Oc7Zo68osv0WCXw==","signatures":[{"sig":"MEYCIQDbXlcy7tNKE8mFFRN7FITjyXTISDdl3209yBhoGBYGnAIhAOVLjKh7NhgNtQ396IyZ5yEuzMnhrv7E07uf12Oh65hj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22478,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfnFSsCRA9TVsSAnZWagAA1iYP+gN+BkjPI8sm8Gy94O+V\nDKvNuCT0yy6WF+ixuEth9gqgclC2dwYKD93xuuhafuln5aigqfqP+u7KACnv\nW73Z7dSCqR5yecUMEh+OcLIBgJgrlzip8Tj9zSskMVw8JN8h1Gfe2vNcX6Db\n4DFziJW5Q8HctVwEVsWOlLDtBcpxM+cOKvc2022Fv1YtxTXmK7tOfPkeUf7J\nKDJofcRjX5gvaOxmqt0EAQ+W1/2DOeUWMHgCOwB1LGw4v49o3CYmotoDznzT\nnL4k9ha5Km9k6qGuNSEDTsLamG2Uw1qcDZ1ssFkwbcTfZnWTBsMklxYnjheX\n9TxvGao7Oh6md4YWhyewjQWMEHPMmAS0KSeQpnB4i9dPdNDFA4OnoR5pHN5e\nzjhh9nieoolnWX7/T5XG3RODJgm6BNhVc/bZ4KPGlbLVy0Z7OgJDXBYlESl/\nSsixvKT+q+mF9M268uzCIQoXW0TBMolzCLDFDkBdXkVEnwYdjAet/5KzpWIJ\nB7bIiWx6EHQsXy1bP2nL3VDJfr51ZMC97McP4Y+kM40eqU8ImJFM5v+v1/NA\nmJDXhtiQ1GlW+Zl8wKf4AwfzQcxRMj5rHyUwHwxsgqYevkeQQZu//vnVP/OX\nIKZ7nA6HHjH1/DqD9RRf5T1YvaJjX/4p+BcWmIX0oRBYTSdIRQ4nqVsBjm2/\nYuHZ\r\n=fUKR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"e847a627e044cecc475be1f0140e17a4e2a68dbc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/rtl":"8.0.0-canary.5511c5254.0","@material/theme":"8.0.0-canary.5511c5254.0","@material/feature-targeting":"8.0.0-canary.5511c5254.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.5511c5254.0_1604080811883_0.2867849299344414","host":"s3://npm-registry-packages"}},"8.0.0-canary.bd6e302a4.0":{"name":"@material/shape","version":"8.0.0-canary.bd6e302a4.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0-canary.bd6e302a4.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1c52bad99e54cd49dfadede113c74cc5c05f7100","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0-canary.bd6e302a4.0.tgz","fileCount":14,"integrity":"sha512-n/WRA/6A1I6rLlkebBiik6Iopvkpqw/K1QazmRRc2y+QyEFCU7pCIsJ1BaPur9MzCoAWKpJyUktNtrt8bCGwNg==","signatures":[{"sig":"MEYCIQCrvDBKIKJjuENY4aiOLBnwgMk8RgNYqmzHllZreR0mbAIhAOEBvlfI3kxoy0RnQJnn8G6rm9J6a6heZS1yIADBZ2Xa","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22478,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoDwxCRA9TVsSAnZWagAAVPUP/2W7OXYwsyRdxN4rUx5D\nhGIBDIe7zprszdCvzGF6dM6Mp2oa7+mdS27VPH/HVE0K+G+N5whaVWA4pQbX\ndSMpyCsjNVobYnQ/nzVuO7SHnBAN6FmgjzZFzlIDiheDdV+hxBnWS78Nxj0p\nPwmtQSo/fh95pDKLN4TErpExS/g5MsAW0ViDbRZh23hJpj8F77bbdiz8vkgD\naMbGioOLW0NtGZ4s2k0HaZ1h5pkiZ5P5q8Q9zRUqhwHSurkvwjBPWpj3BM4y\nVwfRjVDsYZuyGf5loWL7B9Lk2LbiVKaVGoZLe81fFxTuABFgzFY8bklzPRfS\nhvGdrCIWcHaPwjIBX0KwPFn/asuNmyP7XD8I2w4Ro3X+DNGe9hWbuPMJP1wk\nSQxCIkTNEn792wAXo20jocf707judAZGribzKm9JbhrTqY+Y7L/rVHpezPuB\nBu/1311GoaMAwmBU7mpQbgWdXuMIuty4tqhJPz2kC9BOgvos5NL6fEQuTLnA\nWdM/IAU/FsOq2cwA+2OPEs1YC0Lh1SQDg6k4GqG+oMWGbm4oqMJ68mupGfNK\nPP5exeJJs5xzT5RG6HTVCZrGtFk0zZhJgNTag+PtHKV9MNWWXE570RDkltBi\n1F/yRJ/8eRA4j9bhJSz36s0M4QKtB89MR0M3/lP4WR7FNP33qQmHxFzAcJCS\nUN0/\r\n=h+IZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"b48f791b92804fe77eeba96f057b1baa89c48e3f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/rtl":"8.0.0-canary.bd6e302a4.0","@material/theme":"8.0.0-canary.bd6e302a4.0","@material/feature-targeting":"8.0.0-canary.bd6e302a4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0-canary.bd6e302a4.0_1604336689134_0.48712367899048603","host":"s3://npm-registry-packages"}},"9.0.0-canary.d6b5cd418.0":{"name":"@material/shape","version":"9.0.0-canary.d6b5cd418.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@9.0.0-canary.d6b5cd418.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9829eefe5fbd21890fbf7ddd17a993f127b977ec","tarball":"https://registry.npmjs.org/@material/shape/-/shape-9.0.0-canary.d6b5cd418.0.tgz","fileCount":14,"integrity":"sha512-T9qKmHC5/U3Y9CWC3KqoCKqhhUa/qCziNLnSpPsjIFX9AzOUSqoR+SPYVO3/nh2uiLkkX2ozfR4tq/i/gpxm7w==","signatures":[{"sig":"MEYCIQDjKudUcmuKMn+HdRSqEIQfxYsz8mkSEVMAYXOUDS7ixgIhALtHCz6UmLcwGtmkrC/XlYQOMMZjb1J1ABPsCifZPRqs","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22478,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoI80CRA9TVsSAnZWagAAQ7oP/3HTlcw8o+uOqDk5xC3w\nHCF8bkPsAFwSG+aa75wbc0zWOmZHFWVkWRlPhFWIjKolC8YpOU7WrzSyXDNG\nfkJeXMU40aiSS2g9JBs7GAtwBFw9usrOkfk2XfEdQt7fSTFQjxOFszd64Jy2\ngSChUp9bWOmFMLbsrusfIKUW2+RmyuyWsaF1wMD8TjdcqGeRaQ7vmh4IUSEb\nTkxN1Nqvlla1h9ukyWVEqMaArlyAAVWQOuZ9tx4UZLEoJPxEKBDwfuz2iQAi\nI6ySt44HJ9ujcYNahDGKNeN+AfXxixl8/Pu3DZNXgIyZZVtuHdGUA7xiEnW9\nLjVtVpFcFPOBNrC/pLd6vELAZzpbvjyKaSyNbcPH2UbiZ4QrNgmPcsQ23wyR\n+PNC529p+7NA5mjLwPvLiUZO//H7xv8vbWox9AmsoFEwX4XMOSlUN1cx+nPF\n3DiHp9MveTR6K+912WeeWJzRkNSAvalTkZAAA5dRheAo8DrafHd3zF1TZwXG\nd11J+zf1XO6YhegtMMleBGURfHjd5V2VS+dgCDK5sj0Mfz0KFT4GInVEpu9U\nfUEN8fJu1TE69jRxlWEiKq7cxnlia9MBLp359gfpoY5ftC9KbKgu0dPm9Jzf\naQ/ONFryjOy3sYIQWjqQq7v+CZMvb68XYr3iWcQYFdR6yYkT6ZfX2psPYTJo\n6rGz\r\n=IKY0\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"4fd5e4f9dda92417995fcc822b1d02016642b511","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/rtl":"9.0.0-canary.d6b5cd418.0","@material/theme":"9.0.0-canary.d6b5cd418.0","@material/feature-targeting":"9.0.0-canary.d6b5cd418.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_9.0.0-canary.d6b5cd418.0_1604357939751_0.455977792905375","host":"s3://npm-registry-packages"}},"8.0.0":{"name":"@material/shape","version":"8.0.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@8.0.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aad7ccf3760e1f0e3dfe96904a8d5f1aa114a4ef","tarball":"https://registry.npmjs.org/@material/shape/-/shape-8.0.0.tgz","fileCount":13,"integrity":"sha512-VX8QtZkzC6bViTw9krDRgXaMQ+TVdSJSRs2W24V6G7FbYyVQqBreTkp8knAWJPWj68MsGVp1kRRvR6U8tB4GDg==","signatures":[{"sig":"MEQCIC8veOJYb9qbvz8N63pLgVCqR9GkkFxUJNiUIXb6SWncAiAnY1YdcqB1SUutAQeJpxRstFnZYGvWaiR5UUDi4AUMrg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":21720,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoI9MCRA9TVsSAnZWagAA//oP/iAIgCJ2DwEAJmfe/kT8\n+wWay/TWfSxFYdASZn7nqKQl1uXPvzN4kCpyuioFQDopi/sHvhPVPOhaQu3/\nSKa4k1vX2i5iPc4FruCtdWkAJ4CULRdRCCLhCMjsyCQtf35BZVc+xU3MvSLY\nx8Vb+13Dj+67tqHQ3oYcJpo77jZp0QVT1wuHv/Wi6URWKeFF+tTHHIWuGQbM\n/GACp1u7TF0h727J5cbnWRcHEB8AavRvH68w3Z10LOFChy/jYNvn4PsbhrG7\nmDDk6Kr9W5Zm0aKHP95qnmGFrH0S9gq6+INn9Qxeb0cHngJqAu1hNV8aHyUE\n4lrozTL6o4STTZUgvZTLO4j3N2/bufdkGwTtYUrpLe6NnviDk490xyg+5HUH\nX5mT3ZQLyum6DVkJx+7gTHyyn96701oabuI93kXa+W3W40mOY2h3nrUeIEYs\ni/qFHVGW7kUv5kj+5hiycmbVf7Uv39aWtPqSsGJC2hJxRwVGNuIzqz6lO8YU\n6u53uNk+5M4ZrvMmVVSKYkb32C90sKIh7wizj87OCPfub6DGxwZj2wZ71FgM\nJndIKFOY8bDFjMWjuZShbQOJXmUFhMV4XXCmqonlAwQe7FQ0SSM+IMvQONVh\nGyOiUGhr4Uf9wYVEEoo5aXFndr1zB7Gl7l/M4ICk9sDpV4Mk41T8bPZifEQt\nzqRP\r\n=LBrn\r\n-----END PGP SIGNATURE-----\r\n"},"gitHead":"d6b5cd4181d0bf11b598b5ca142343fbc87976b9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/rtl":"^8.0.0","@material/theme":"^8.0.0","@material/feature-targeting":"^8.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/shape_8.0.0_1604357963924_0.02935092766813674","host":"s3://npm-registry-packages"}},"9.0.0-canary.fdf9a2634.0":{"name":"@material/shape","version":"9.0.0-canary.fdf9a2634.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@9.0.0-canary.fdf9a2634.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e362f16c57d92f3c36251e10a395a360d3b77cb9","tarball":"https://registry.npmjs.org/@material/shape/-/shape-9.0.0-canary.fdf9a2634.0.tgz","fileCount":14,"integrity":"sha512-BJlkOnbp6H1nFa3VlDILjPRJpY73QzjXdTfm0N9p5J7lwqJCdmbdLrm9t9FMQGS7kQyJhbs79kv3dfwno+6dsg==","signatures":[{"sig":"MEQCIGn/RAJcE1RSv0eKwlAonA+R8Or32VHFYW6r8kXnOI6kAiB22ffY19NcH0YzSyX3lzt4hupHwMRDa+BIvu8YiQ2E1g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22166,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoeYBCRA9TVsSAnZWagAAhhAQAJhvfHjcohOOm8F6q5Bz\nfC5B3vW2HZwBLE1mXPhcpfp5pYobutrgHszLIkHyqEHqFlUj4z7GBIx8Bmtk\nPWN/OJmInoGj0E/KoCviMBpYu0j8WE5GgAMxsj64Q5UF2xBvAoDfSTJCPIOQ\nG5MHF5RiNT2SNQAxOK0plephB3Zi6c2ADxJ0+Knad6FnEPYJWuEo2h0X8YHy\nsHccqlkUr0NfT6d0HohI3UNPLkaJjJnKsTNwh4xbPRobjrlyJFwxIrhxaWpu\nH6C415qs+LfeF48SdnM8LsrTFZEiHC6niCwb+v5/5ZUpAMwBsSfOEdX351Go\nMCOuIhHIiR8Pvw2rDNqYwtMvsUsrAGQi17IkylthLzuZssfjiR4i8uPvrgtA\nlKGs3UbnEdpA1SP4ISRtngdTd45475+1yjSrbLQEdllpTu0SLmMckYO82JKD\nCAOQhG41RwDHC0lBGht4zks38D9h5NfY1hx2zOr3MbdHLicWIWw8pdFi9fw7\nVXvep6ceyTodzmOoBEQrQ+aoGJrIPNxpfmKOFZm8dhxDXxHIGRr59VnYIzpz\nIadV+cOjbm4srHrnIUfP0zLreKJyQbJl7eQX815+xh9s1X4HBoG4t0P8Z8l6\nM1KwB/F0KM8ASBVL34VWbJ9vlxf4e5GuJAJ+ZUOcbRiYpY2WFZX2x3yTALsS\nweLt\r\n=LKm2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"7d38b3b1a677a24d709697b68fb697f1367fb5d0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/rtl":"9.0.0-canary.fdf9a2634.0","@material/theme":"9.0.0-canary.fdf9a2634.0","@material/feature-targeting":"9.0.0-canary.fdf9a2634.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_9.0.0-canary.fdf9a2634.0_1604445697024_0.5719857306228269","host":"s3://npm-registry-packages"}},"9.0.0-canary.4a86f30a0.0":{"name":"@material/shape","version":"9.0.0-canary.4a86f30a0.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@9.0.0-canary.4a86f30a0.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3f7d7b17b49b9f8bb25ba665b44a18a9faef75b2","tarball":"https://registry.npmjs.org/@material/shape/-/shape-9.0.0-canary.4a86f30a0.0.tgz","fileCount":14,"integrity":"sha512-E6nwAUYPGVfgxr10yqy3ApSGIXt9NYPFTmrNfM4sJ90UAn/MiebDr1fYdubFHhMXz/EAQztB+wx2QVaq0RtSAQ==","signatures":[{"sig":"MEQCIFz7ERXPuTKpYOqDERqA4r958bV31F1cT9/JXSmgEtITAiBTYqa0jSxfq8l3luKqfzQvBwttzqBTJr7uliUMb/289Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22166,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoeeBCRA9TVsSAnZWagAAOSQP/21TAjqo79P20/sCMzKk\nRVXAO5TASvWRCIjeMOseqGVQfY1y3Xj62xBdP+MO2NW1/f96hOijBiIf/pEn\naExiVGLj0I4ovsoTWSMHlxrXppyNn2SbzldiDhRR4nYy6fCk4y+H4ZCssTCM\nx5/2SH3e7dlxNMUy8Txzc4sc6Zog7O9KA21X/tXnKQyMENCpG2WWxVRziATI\nczYheF7g5qvJoU/dTVgyFUbXsXtSmP2u2jo94QUElAQw3EdKfhHFl1AclILd\nNn8pOR2NaXc0+KeyibQjOycSbI1vTjls23QHXovYSvK+X5tNtoy9lcDjJ9EO\nywCXRZu4pW1FPrimUkBa2mKaoO7m6bu/PYeF70dF5MfobCKgZEvv2tviAGXH\n0ZcStntm5iYSjrcnOFZTKlsXZFySZdmCFfVnXY/fw0KLymJXDudZTAEacTtc\ny5A7frsbL2UVaTx3jI9Tg4MBRfCgZX741C54tHSXIrSXSJKYxxzoT4hJgYp8\nNLJcjpRA9wsnF4ZqmYj5+XvXg0ohk8xaMTBZtFLCGiXm7tk/1aX7rlkyAGwP\nx3jRwJi6cnN9aSeGTb0LXD1Bp/RxVJau9RKXiItvuGdc7e4wXPD0lG1XP9yh\njTYtH2N59QM92/QTJTOfMcxnbxaLR+wEDqBxn0HSDo7HdRMkE20XfF34736o\naGka\r\n=EUak\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"ae1cc15cda11f90ef629a1f536e69a9648db906a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/rtl":"9.0.0-canary.4a86f30a0.0","@material/theme":"9.0.0-canary.4a86f30a0.0","@material/feature-targeting":"9.0.0-canary.4a86f30a0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_9.0.0-canary.4a86f30a0.0_1604446081085_0.0450929196619998","host":"s3://npm-registry-packages"}},"9.0.0-canary.fc8b045f1.0":{"name":"@material/shape","version":"9.0.0-canary.fc8b045f1.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@9.0.0-canary.fc8b045f1.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"26cef4f8e18db2b747c0860d57101f125a11ac9b","tarball":"https://registry.npmjs.org/@material/shape/-/shape-9.0.0-canary.fc8b045f1.0.tgz","fileCount":14,"integrity":"sha512-UBjMx6Y1OZafg1NZLzg41Wy1c0mfxJRTO6Mz/sWcaRHchzlFKdfzWxXnwTIsopp7jjw1ZuMTrbal67/9T+s1sQ==","signatures":[{"sig":"MEYCIQDjPumvEbY67XvT59INfmZO6oIbQc/21sxic3Hnc9pM9wIhAKNABP2uSXXDtvDYkT+4LnMYVe2mK9nNO15YmsTVhoSB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22166,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoemiCRA9TVsSAnZWagAA1sIP/0nOuHOOX6/AGIKXohSm\nwObUyFa3OPWAOcqEXcYS1VtnoF9tiEV1WM6HVDlYAMxK81ZVhF7jgfv1XeYk\nBvwj2kKu0p4TLbTfTP/jfYulBbND0chxU5OIZzwo7x0WxXAtpmFOv0MjEamP\nVHjopaSqSrrqVfuWYSpYbqkhd7qyoIj3k1VQzvG9eP0wLIJQstEPkEZbdJWi\nhgPyYWHge1QBLIdSycC7YEcDOtFMErR+iT8FdxILMfFUXuLfB7hi06xMVo5M\nrXtqHi52t1TfLcAqfnZePw1aaw/JZJ6UuKIEwzitwHhTXNGAC4DN+u6Bj4+9\n06zRYb2X+46r/CB4/ROLNguaDBPAjGdwviCCe1naFrM37U9OYsVFXssTvAId\n/eQr7oO7NNCepq8JywSsr5RKPKxTDxGXRWhwSHTH1YznAiwXvL2mASFgJcTY\nBOuA+rF6jDllADWRPGbuFqm0SVSe8wSRnbOgVE1hT60LFpt+vkmYe5WWoU7j\nPahO00yTRpEvp66ZH7Eydq61exiFidkcQ57ClhUS6aBaHVhLIzIfVhMvsfDX\nzAzFDwc5WI1FGuOkInbtbXCaZr18iOvXfaZ+9Jj2uO5PUhbBqqFAEIYuUA3v\n0m1Jbl3ONwbyp4GVew56xX6zIeoywLQ+oWPkhqFnCnOApqtLhLosVCTQvYBo\nLjoD\r\n=mPpO\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"7df7659dcee84f0af6a1e7d8617abb4056acceb2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/rtl":"9.0.0-canary.fc8b045f1.0","@material/theme":"9.0.0-canary.fc8b045f1.0","@material/feature-targeting":"9.0.0-canary.fc8b045f1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_9.0.0-canary.fc8b045f1.0_1604446626365_0.9143588126070721","host":"s3://npm-registry-packages"}},"9.0.0-canary.a0b2db26b.0":{"name":"@material/shape","version":"9.0.0-canary.a0b2db26b.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@9.0.0-canary.a0b2db26b.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d35d9c0ff65f898bb7e4250ff0a39939f42b2b27","tarball":"https://registry.npmjs.org/@material/shape/-/shape-9.0.0-canary.a0b2db26b.0.tgz","fileCount":14,"integrity":"sha512-USrT/vnUIUoAT9ZLetY9NOt6AJ+gm03pV3YsPjspoLbgZb3Rpw52k8K8ROC7uujtabRDGEU5MiVq1N/lPS5ELA==","signatures":[{"sig":"MEUCICk5RwW1mCJpIp2ND5Kdop2IuTvHBu1OWUG7SCZBIRmWAiEAwB0HGwsAadwqzmQSSRuF5w+mKq3v4kfkg+PMb4bdOXA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22166,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfofEnCRA9TVsSAnZWagAAL5AP/1PG0pKTg/Osk7dO+7QU\nB3ZyXdDtrwLC4Q7fg3c3LzpdrXCYv5A+jHjF104fmrx3KJ6LxVPn+u6G6rKd\n4HyPVjoGrSMvo09KzSYLoTkd5SOdA9H2cI5NNNv7gnlGyYww47Ii1QD5ORE2\nfKB+0N+BcT5sa7jibeCvBASHcOsyJq+DlJhEzq0642sfcMTxujM/KgLS6af2\n/ZoDi+SF4Ikmqohd8dtEjlkJv79/eRss1C9WxGVLYjRz68LsVypNPdH4uRHc\nN7hbAgLg371Fno+G6elNt8x9HEeIuBUYEGhBnexIdh4NUxuha5ENfqXKjUmC\nXyUskRaa5qZg2pEg7JCfaBE8xkEZ0QTxNVMEtUNbGAAYlfHG7HuhTjCCJwv8\n+I0BAv7n2N10HwjH3qRR4ppFB5vVXZWIcwmgxWjcMcnyputle5ECeveuSrXS\neWaG320ztJ0mZmylmXva5GLB/mox6HA1xeoRk3kWCt0pDLoKfnx6HMETSpvO\nT3rgyfZ+Oh5d/26gfz4KHoKLHjHsRwnASqJqriBzvxE4DbOSOnarxLd5QOOH\nrQra3VPQzHRnKXLAGCnq+l0O8rZSn5+4oJas/n0XYjT5ggwfXvQNwtwtwvGQ\nxsDh019amMzQdaPaZn+8bzm4KGzStq0V6bIeQ3txg5GWT/YVvyfcnUZSU0Hw\nrhm2\r\n=4ZGr\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"885abc8ece3b0c3cab58996fab25be733f65b5c2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/rtl":"9.0.0-canary.a0b2db26b.0","@material/theme":"9.0.0-canary.a0b2db26b.0","@material/feature-targeting":"9.0.0-canary.a0b2db26b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_9.0.0-canary.a0b2db26b.0_1604448551216_0.026707018148930395","host":"s3://npm-registry-packages"}},"9.0.0-canary.419e03572.0":{"name":"@material/shape","version":"9.0.0-canary.419e03572.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@9.0.0-canary.419e03572.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c03e93cba2a9829c2323d6db8fb8ac9fd70a65c6","tarball":"https://registry.npmjs.org/@material/shape/-/shape-9.0.0-canary.419e03572.0.tgz","fileCount":14,"integrity":"sha512-7foJBb0ryU35nbRFZvpgpeupkfkN46dgvH1VtmupJSvhtgyCddGtVRpEWYtKDUVViqmGvCH2wbj9Ysx8dCBWiw==","signatures":[{"sig":"MEQCIA4zKVVcaBX9Ux6uY5DxXEpBXz0Q6bV6NzFwhP8IUV+sAiBrs4t4AJbBfZQtkR+eirVOGAwvV+6Bcwj9S/vIcy+obw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22166,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfogTNCRA9TVsSAnZWagAA4cEQAIo61RiatIo6g28Vis9D\nst8+MAONiEc1fN6JLDPOvno/mw8JWaDkh2gUDegOesAtiTwUj4B+CudNuL3Z\n/b/YV1Q7GluPaqqAjk9RC3MLD/8mKVfrOI8E+uFxT0kAKISOqXoRDXlrxtoS\nJERY+6TlHmPwEywr2PF9rNctDbYvuMJKsIkMLn2s5XsecdtVkwK0dqkE0iZU\n8dE3FbiNI4WhULK4P7gDp4M2qJbyGsepajNNwqV01I+z0c3hIgz/OaVMm/K9\nJuUiPDTYuIcrbRYh9MKlSIyDzrZrV1jZyuOHg0eSDq2hSpWeJgY+VPBBijlo\nfeAcpCpgqlLXsavshg/ijzhhzeYRbl1BgL7AIfof37sZx6ZO2hmJ7zbrhGX4\ngj+pPi795186UWag2xd1hDF6ZwIR9bxV3FFu5TA9y12cmxYguzZbbcZAkhSS\nYVhbN2T+Zrwt3D1//nKllji1zgcFeZaGwd6/KS4XMfyMZcFQz/uLrosoMdBb\nd7u9kX+N8LWU4TV51SSYLNSomc5WlD4BOqd8f3P5ggwv0BrA/RPfK+eoxkaB\nCW16jJ+9IFXzrr7gq8qnOwNy5/rBweOBZ4JKbcw0w1UfwObSNmafqOmU3lZ0\n4EMT2qlsJE4taCNLRd19xx9joLaQGkaGzUEVYXOupn5Yrpp0J9/h/ii9Xv0E\nvvy4\r\n=+PmL\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"c9528e0a61f88c4fa2a5bcc6a5e406ccf027d7d4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/rtl":"9.0.0-canary.419e03572.0","@material/theme":"9.0.0-canary.419e03572.0","@material/feature-targeting":"9.0.0-canary.419e03572.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_9.0.0-canary.419e03572.0_1604453581022_0.6993197736741548","host":"s3://npm-registry-packages"}},"9.0.0-canary.a432ad542.0":{"name":"@material/shape","version":"9.0.0-canary.a432ad542.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@9.0.0-canary.a432ad542.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9cc83d1d48e632a8e666d7c2e456534aa587c36c","tarball":"https://registry.npmjs.org/@material/shape/-/shape-9.0.0-canary.a432ad542.0.tgz","fileCount":14,"integrity":"sha512-AiQRuSgefdFW5h4lisnp37ndd8DtMCCDDRW9zM8OEIATyQjCpP1AeNnKsV7mA68hYtUGnUB64mQdC/hQc9cO4w==","signatures":[{"sig":"MEQCIE0rkDdzAAdNjUjIwi6UtX/nJQJvOyegUOMr5nSmoAENAiBDmHG7ePt70UwrJcNwGO/vOWxkwG0Zel4d7Ydhi/6yJg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22166,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpKrQCRA9TVsSAnZWagAA1n4P/2gLbBJPvi9zCvEBZayB\n6XLDbioAnEdQ4khF+snqm2lDM/pBKVtSDFR2Qa9+ouBzleGDiKKkc0+XZMCn\n7TfbhEQPb/r3YuSv7P7Lnlk+O2ifqnHPrVMaB0ynV6fm1YApoaNptWjDBDtw\nqv7b++tigbxREeWf54KDfh8VmQSa1sG/cB735YkpcovbxDoX+VGTbRGBBE+I\nI9HkddGIgR4C3T4znl9SBKy/1utwU7RubfTQ2his12bLT1ilzNJYE6IVja2P\nY2r3vvccfnOkiqvxfEN3aMuron93EPkpUkZGCX7wKPobMrNZnVkPCEJAeOr2\nXH/z67bogy9TWYpZSx2lFM7gplofWKgSE2MUit0s6GYiL43d9y71IMUigRh2\nOJzMnxf5ua9i9/mN7pxpYkYkbLpSjUdwWsD1iWWPvtIM+yKL+u7r8OxVhDz0\n3EHLLhIFQOwEExjtp5ysVeTUOzwb9MKkq2oIwUjUz9OIqqJkw3iKvYFvlL46\nAFWlhLrKOoPxiXDth8HRLfsg8q4ApHloIw+mNxCi3ZdIE6nGlpOkeXZomN+D\nG2DF7hRvlJMc+ThxhOSQzJ4RmDbarpP6uil/O4ubS6kBTDj0C07Mo3/fHao5\na/ho4jWErl7tr5xQ82B0B4zGezo6R8q7ccxlUJaf6/Rd054J7TtGNbWL3El+\nJuau\r\n=Lc4a\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"b873a7878b871d2ced45e7f04055b3d4ef0c7af1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/rtl":"9.0.0-canary.a432ad542.0","@material/theme":"9.0.0-canary.a432ad542.0","@material/feature-targeting":"9.0.0-canary.a432ad542.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_9.0.0-canary.a432ad542.0_1604627151429_0.3714716903516968","host":"s3://npm-registry-packages"}},"9.0.0-canary.e2e8aef1e.0":{"name":"@material/shape","version":"9.0.0-canary.e2e8aef1e.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@9.0.0-canary.e2e8aef1e.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0607be1023970347bdc1252c89f87fded77bf83c","tarball":"https://registry.npmjs.org/@material/shape/-/shape-9.0.0-canary.e2e8aef1e.0.tgz","fileCount":14,"integrity":"sha512-YBhrs6bq9mWvAKebE6Z4PMwbz6qATsl1Xo6+WNQdSWualPis7+Eisptw2WHFLV8dgDGmrA1wKdtBlYtMs/QjVw==","signatures":[{"sig":"MEUCIGngRdi5Fu6EXwuVgJYSU5lStzdX17FlGRuFCC184UiqAiEAstxO8OsLbmJQuPwAYwqJF3MrwyJ/s1woSTdqtVRGNCg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22166,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpK9dCRA9TVsSAnZWagAAw4gP/0ta4h8DPYNr0LIyaqi1\nDfDvrPAgmHmyOKOTatP/mClHHUqz3sc2J2QU2q0UOQcZUohzbMKMvvwka7BL\nwnX4IBxENVWutwu5hm/vrBc3twnkQt9FTTrAaLfWW0NDt0DY17GarvWFkGwh\nNtri1gf5fgz/lGB3h7enDRByZQTQJ2FYzjrDPMtoD3V4XIlc8S+wXhieqkhA\nDUwkVSa5KZH6AaZFYiKNych+ezgoPslZW5nz4JR7gvTU53rU/e7I5gbpovlp\nvPGLNty3cLh4gyupGmLDeyJlqEYrp9QUKNM8fPApUByu5G4aSxXwQt1Sac/f\nql7IazQJvN7P8A1hkLfkm8h5iqDGbuHJYgs+9GrDIKdvOn9dFSnf+XntphRP\n9tH0/xtQ2RkGawrcpwj6hST/JLrAT/CsqToogxdHw9EpIA74ppmmtfY1X/d8\nWNy5peptju1U7Exrhk7bMQkYAsyMZu+r9mEa1X0AzBokLORtASTzxO8Np/9b\nX3mSnzrqAzgTWiNGoUTxrTkpQ60aJgo5HBtrC9hQNCdZ7+/jt/hipl9ZEPWt\nO5rsY3nwZXMIV2DX3VdtmuPUQBjq7R0cnKdXJobeXel55I2Flg/X2z+QoqL0\nf/VOSOHzvUZf9Sa0AtZ3J6/0kqqXS82MOgn/Lzl8XoiRqketyhXO3IjvxfRn\nWt2t\r\n=Cwc6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"59b208be2f946b47ab6905d82c0135e81316f2a3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/rtl":"9.0.0-canary.e2e8aef1e.0","@material/theme":"9.0.0-canary.e2e8aef1e.0","@material/feature-targeting":"9.0.0-canary.e2e8aef1e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_9.0.0-canary.e2e8aef1e.0_1604628317027_0.25985049359289136","host":"s3://npm-registry-packages"}},"9.0.0-canary.ec6b68b34.0":{"name":"@material/shape","version":"9.0.0-canary.ec6b68b34.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@9.0.0-canary.ec6b68b34.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9753c2af765e237c0560bf0ebfaa0bce6fd7b8ca","tarball":"https://registry.npmjs.org/@material/shape/-/shape-9.0.0-canary.ec6b68b34.0.tgz","fileCount":14,"integrity":"sha512-1VbZL7dILnM9wixhZCujZg60SycqPA+U8HCbc2ZkGbTXrzjwlvXLf5W2YkhDtQ1jA4xvDlL89vMPfpx9gvtEeQ==","signatures":[{"sig":"MEYCIQDSkaulX9LJ78Am6MDxTfeltPyeTbtEIDy7r0N4yAeY5gIhAMbtTLjg2tLAFcjYT40/E6goWqhSG2R26GiIWyLmF/ta","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22166,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpZxoCRA9TVsSAnZWagAA6DUP/idehjyAv5vikJ1ew6AQ\niRhGg33auNKWya/tnr8ASjCpALPgbNxplDHGXTKeBmKhRxruOOD65vThyC3e\nnb+Bt04a5RvaYXuxLtFQa94whC/2zuLL0HPf5EBMilRIywjgYKFeMmKMXUXG\na3qY1BSHJvO3cy3I7Tnm++t1BUiJvDjr8YbywhQzbSDYfLyiB8Cub+gN1Lyn\n1Vn2sUyubRhDxbHOXTiZNPP+SVE0XFNHB+2tISPf5bQCEdhKHbOjvc/Hx+uD\nc/sTtxJJJ8WtUm10Jbv0kXkmSibDt9sv+7ULsUVtadxRSVWWbtLiNE3NLq4n\nJRpw2SBQKVR9t49ORWiK22CGhM0L6wD6LW1cYdXbc/HESvFtFpHorDhE9IA0\nwxRzB/1u689MXKRUwiiQlYewWze7N/4HFkilhnmLF73x+V1usccWhlODgT65\nYyNzITfBhHS6jmCpzefv3iNJ9OHCpOzeUXUdB03sJFepwd43TwvVMFuqAjO5\nW5PlH1rNdQt2foQvXGcIdV521xJ7uaZGCDnoi4JzerLYgkV2EKXl1yRt5ydu\n7Qs2h3I0UKjmNcSLx81n47NmlHGS/4/r0Uxe2GrKtB7EHzNjyFZ8hPhtObx/\nurpIHLZF95KQDRfNLfmE353WhaDVz+PKZsSNURvoij9+hXPJxFGJfvdy1TLj\ntXp3\r\n=rONO\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"a5005840630991931dd5d6aed79aa4986773a5a4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/rtl":"9.0.0-canary.ec6b68b34.0","@material/theme":"9.0.0-canary.ec6b68b34.0","@material/feature-targeting":"9.0.0-canary.ec6b68b34.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_9.0.0-canary.ec6b68b34.0_1604689000125_0.2866586348837943","host":"s3://npm-registry-packages"}},"9.0.0-canary.b39094d14.0":{"name":"@material/shape","version":"9.0.0-canary.b39094d14.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@9.0.0-canary.b39094d14.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"39a1b73628d332da61b6ff50b06fac0c2da38aa6","tarball":"https://registry.npmjs.org/@material/shape/-/shape-9.0.0-canary.b39094d14.0.tgz","fileCount":14,"integrity":"sha512-ng8HRM6TSPJnogCgBALbI3vckxDhzFjwBLd/7msSGyLZ5uPZBnaXL+Y7M+zXYnGRTFumEyE1t0BEd0yVVYUurQ==","signatures":[{"sig":"MEUCIQDyoI0YfcmGUL92HQ1sWAYwe86txodA9GORO93qM8dElAIgeugY/nD4R4yHGVGUp+V6adjlSeruJZXBylGqQEu9NVo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22166,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpb0PCRA9TVsSAnZWagAAf/UP/jWKue/9HQV35wRphaRY\nTKTaylGZeZ8sGvm3KLn9j2zmK6i2+DgocFyiJbac/9qHachfZql8nvG0Qo0E\njW3/hiLUnv4H1cWyXQjPTWycn+PgJBM/1WMNNxjMJFdJKfAfz0BH8V7od0qV\n0MdffZgMzkFNrv4XKH1RYfgyp74K0ewVZeHRhbUpQVgJht9fuRTtRY6Nknms\n0jol/eYYaIKBzEnmO9vXc6NBV6d+okjxcXe9NeHkEotDDpk19bYmUSCTZIPf\nSpsVwdCifJkKBg7Ponq9QiBsftCWgMo9DAj5tL1hN+G5y56jevLtOPNTK/gw\nndJ8qjSHeTxopJ+7TBJAW4v6wPn8019WPbC1awAyypWk+15wOes2Boii4uvm\najLG4XDC/vKFTPQ8ukzi2YzxSsI/ANW0hbvW4GK+pINtmSYus3qiHnIP4lYN\nGBUV6QxmWvoYTNHOSycszdaGDrp+wRFiYoO7heKEd87LMcE20v2GPxa/ayrO\np/7n9ZDimjD5uVFGNyGVObOD9zmt5WC/i+akdtCAT2uT2cj83JKxKhKA92DX\nr8eGKgQbD5xnL6Tuo9IEthsnR2OqKhOHlUJdAJNcF97GUPs87fdlm5ALtigF\npJmaVNXfvQXwQ9zL41mTkJXw9cM8XWoApulWcRN06LPM5zlgqhLD8fe6vxZL\n3Vsl\r\n=HGmd\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"f8c5ef7d8cee2d0a63421ee4afe42e4e9260cd47","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/rtl":"9.0.0-canary.b39094d14.0","@material/theme":"9.0.0-canary.b39094d14.0","@material/feature-targeting":"9.0.0-canary.b39094d14.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_9.0.0-canary.b39094d14.0_1604697358790_0.6242002716761794","host":"s3://npm-registry-packages"}},"9.0.0-canary.8648b8258.0":{"name":"@material/shape","version":"9.0.0-canary.8648b8258.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@9.0.0-canary.8648b8258.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e0cace9546c13604573a4de77bbfaaeb2c6fd165","tarball":"https://registry.npmjs.org/@material/shape/-/shape-9.0.0-canary.8648b8258.0.tgz","fileCount":14,"integrity":"sha512-R4X9fchTaO6iCJFonZ1a7goBwvipkTZrO4xHdlcZzPdS2aqJy4prZMNbdKbjTr4A7Bi2LuYLJxFXOj6U0CJQzA==","signatures":[{"sig":"MEYCIQDnBOq0hjo32i6xuBorVSRDPlt2rYRMWhef5UR2HIfcegIhAKQb9x9Xx1gSv9/lwI9t1BDqWs6G4uD739c9lo/P8q5D","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22166,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrRIdCRA9TVsSAnZWagAAk20P/366Tl2v8yOz3RluTWhz\ncCcVsi2014uexKLgHKcteRLXOIZGT9LhnH8iDFs8TDKipUTTxrItZbgoMzui\nlNqual9Z3z5U1GxupAebg7HCGHu6SPlsyw78x3ufunTYwI+EHbCFLcADE/8V\nnQP7z8HlVvcDN3/ZlVbs8XfFlX1sgfSZ7xWq+oXO39w19RXDdM73Xh1gG0jH\nsy8YOIOFDALAMB/2cw0RLViWotnz9bjOWxxD3KtlPntoGPgRFZhR4P0LrpSX\nxP4Iaad1MW1+4BNVY16kJhjBnDbPUvlIMEG7O77H00yrjMr71vUNan4AipZf\nFms8SQMEA2661XH30LwVsuYe7CUH/2aOF42BzVIEQgcs4XcTeFfbGvCBHbZV\n9EWO9PeBnh5TOr9rHdvJgK/CsCGeH0dIEzfpbzCs+GYfJXBv1uSVI0NXp4N7\nu+eo50KndlWEZ5n/pnOm0EXHe+5kaiyb3ZoWNaxaKOKneuh9x34tMG8C+v31\n+sQjBIaXR2Vi1lqgg1p13aFaFlAokWpkwuR7BU15ZLUcAaEMhDqxF6wugMvv\nda8GgHprLcDAE1aIXK0kdURqz+Eno90FZATBg9YyTXZ3RRd9+sMr0179TbqP\nIfuSpuxxamO0u5ncsI8uGWGrA3ycpgH7yljSCEk4kvm5UbbdCKv+Q0E3uqLo\ndT5o\r\n=nL7H\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"d98de60dd3d91dc14a84abb664678188ae936030","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/rtl":"9.0.0-canary.8648b8258.0","@material/theme":"9.0.0-canary.8648b8258.0","@material/feature-targeting":"9.0.0-canary.8648b8258.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_9.0.0-canary.8648b8258.0_1605177885158_0.1587132081509819","host":"s3://npm-registry-packages"}},"9.0.0-canary.240c5f74f.0":{"name":"@material/shape","version":"9.0.0-canary.240c5f74f.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@9.0.0-canary.240c5f74f.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eb8b23ae84de0d3f629da20e2f8ba2f2d61764ae","tarball":"https://registry.npmjs.org/@material/shape/-/shape-9.0.0-canary.240c5f74f.0.tgz","fileCount":14,"integrity":"sha512-yB3WOej3hwzATxwfOWMB6oovmm6vDKCE7N/EPvTwhxDUCpUC2WwOHZImuksh8Z/2YkqEYLMAO4ip9P5WhskaHQ==","signatures":[{"sig":"MEQCIDrPG8yPLbOTXqGH11R7FYnZd4jFFOL2esKWCzUAg/3kAiB0ruodI8l9xupeHyjaLGdlkDJvlOABrOItX0vgMi/4rA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22166,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrZkeCRA9TVsSAnZWagAAV/kP/2BwY+tmSDr6NEXQ/xds\n1nPGaYt0COxwRtu12IFd1H/uW9gmiMEOylqpOAfhfp+yCu+1YNN/7N3wnf3q\n+BQl9fGDH3SvyonNmXn8BnUIC5vL371slZSyfXzbNt95gO5RwaM1sDuBeUUc\ngVAQ3qc5h8ULRO9mqIa9rNLug1m8hICtfmV9y9CkXaTO/ixFlIh3g5ug7jfd\nbfQOgXyQqDdYnsTZmjGahtdhihcchRYTi8rPnw2z1y2RPsHwTx6nGg8O/RI9\nbNnK525oan5HKOZH1j6b+MNv1hNqYSuvh1bE6kye3zKdcbgI8/QcM+ur0uhD\nXLUQiOqXcfubAVYFF7410QfWM/HGDQs6AKqlvzfWioZnTqeEQuw0qrsNheIj\nKIv3Bsb2/dVP7y0d2oTSHwSd2hS8xvN6/1ZzC0hs1uydEaPl/BblGxCCdD4E\nelx4g3IF/2PSBBbq0l6Bzl1bQJftghBuTPMIstdIgBUUwHXMhmhp/GD/ZTLQ\nn35gZGcF5a2KMb5nMfC64F/QqIJNiRtFvkmZxxc0NgDlInG8LauUXOlZFvLC\naf8LVwuGhnnjynzObMz+RDGXRARgSiBIgJPGoT1uvF/+mlumWVvoEwHPWBwv\nz19nYmJS4Ra2gSD8fXeUsWBe9hLDNnmuiGRcuZHQBRo0Q4aFEiy4zaA9YFo8\n+9/I\r\n=h8Fm\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"33b77622681b24909d892ec906f608e75f5e9809","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/rtl":"9.0.0-canary.240c5f74f.0","@material/theme":"9.0.0-canary.240c5f74f.0","@material/feature-targeting":"9.0.0-canary.240c5f74f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_9.0.0-canary.240c5f74f.0_1605212445850_0.29835316829222314","host":"s3://npm-registry-packages"}},"9.0.0-canary.6cf6ba4f4.0":{"name":"@material/shape","version":"9.0.0-canary.6cf6ba4f4.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@9.0.0-canary.6cf6ba4f4.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"02e3d059609064260f93df2313873eccfcc6daf5","tarball":"https://registry.npmjs.org/@material/shape/-/shape-9.0.0-canary.6cf6ba4f4.0.tgz","fileCount":14,"integrity":"sha512-cQdlrderiPU5U6vCWNwYPM1GjUfZkUSbErTYOmqzwox1e74/qUZkWiIRjbiZQJLVG7BjNTkWhUsNpnm3NXwhgA==","signatures":[{"sig":"MEQCIFIWDNp/YwtVRAYIO3F5LdFIZrXnLeZ2e6O+SeAyvFyTAiBCTMlH5WfttjJYetZ6q7/3jeH2NyH2sz3IOI8HIrvnRQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22166,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfssnSCRA9TVsSAnZWagAAke4P/0RMbbDD/bDEv6oNInbY\nG2Orgz5RdB5msrNsm9Gn8x5wsUaUSWDKj93aWqn++R0g+ILusSPiT/8s/V35\nuXQUgqVFYSFN41zvxh+MZFpulhfnRqR63fdzmpkGJ7FQGwWNWy7fNO+9IgsH\nvQrD0oNpTWBPJh7cpU2WzoLWK1kUf7N7/Yn3o0l7qMocq6zS6kBt+tsTAMK8\ngKQ66+GgDQiW9L3IPer16SgnqLNYpAEemFizBk4qCz5eiKPir5LOS22eTvTT\nHo79sj26VpKFf8kV2wY1Hw1tk3TREO4nFgpXz3ekDi+yKl8wOgBAxErIsvp5\nw1dhqhCKQUFEv18ef3LYexpjZg+UKf35PlXRh6wZUGGn0YjCIM6QSHOK/Sk2\nxuet1QgqzNh8niHzttFzHiQAgcW3id8dEBgdM7lhijbt/9Vr5+yG6wj7uYne\nnfvWI1Lj9SWNSoTSnKWQgWzeml2F+jdT0qbadJ5ICK10bWV5zcPX8iPjdnUG\niAQHStpw4U3JhpIXZueasy+yDM/XWFNnqQCq7Gha65O8JD+SiV52kGTfNfQj\nykz8mYXJZ2hHWy8eWbF/4Fqi50cvREnFmhxBL1CP1bTA4iQN/8KOpvIZuvsv\nN8jCW6xH2aUCniHWs5gA5QiwoXSj2Z7vYEJPFxuDXi60KcDL2Wd/D9OJMfVW\n0DRP\r\n=XksP\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"d2d4890ac5812ec797b5f621137f4e8a077c3c0c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/rtl":"9.0.0-canary.6cf6ba4f4.0","@material/theme":"9.0.0-canary.6cf6ba4f4.0","@material/feature-targeting":"9.0.0-canary.6cf6ba4f4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_9.0.0-canary.6cf6ba4f4.0_1605552593843_0.30203688994701694","host":"s3://npm-registry-packages"}},"9.0.0-canary.07f3e01b7.0":{"name":"@material/shape","version":"9.0.0-canary.07f3e01b7.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@9.0.0-canary.07f3e01b7.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"582af1066826030c1c39846c0d3df92c30b1b904","tarball":"https://registry.npmjs.org/@material/shape/-/shape-9.0.0-canary.07f3e01b7.0.tgz","fileCount":14,"integrity":"sha512-B9k8MVBuCNjPkl60wxFZT43A+/w1Yy6qXOPSajf8N+svsfNcDm4rKKQikYCIH4Y9kz347rNDAKeVrKINJqtm+Q==","signatures":[{"sig":"MEUCIQDHP0fHBXSiFt7ETboD35li9YC9fN2U2jDkZM3FAU8edQIgTrSV1OCJXM9v2dZ8JhR63yyCoai0Q5EqUU+hC143BPw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22166,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfsvMCCRA9TVsSAnZWagAASxgP/iO5cGMUOXSKACiYxtHQ\n1eC3Qzys2yBFxNyOX+1tQiJOHmrwqb6wkQyrFp/72OgFWVB1ugTMoUbILM24\n4dSEpcgeJbQGUeGiLAA5+kuI4TeHc33uNN7pis52xzsY6m8q/+tg/tJnSFXj\n17HOpVrYkKWF8G3yOHwJGgVsYN8I3i+m2T7a3kocVqRCGMpI5avcQjrgPfNl\nJdTibYSK5rQiAkiQM0Mhw1P1HLAEHx7afSiy0URqQdEqO/gIH/VP094Ulk5Q\nT6AYtf+PdJTHgEUBxlAluGTUHNBRe7LyUba/OMRx1xmEmXmUVS66E/WjTEFq\nBiVLxBQU5b0BIlF84cRZR6EvOpgY/U3bXgao/++4ZDYIOEX2syPqNS+e1I4s\nZvmcYfwQlNV4znkzXt8860s6kFiOiU561ZfpjQgZoB75q8E5X4TO0r43AyW3\n3p7SA6v8D5W7i9I5phhk9CtEWAXvTlwznRVPBcMywpmLf5Xs4r419wy0ryYy\n2nfHwYonXN0qantYo8VPwgwdPmiMEXE1Y9kYuYxLvpvfmHdIAVh6q5I2WLod\nU1zXIkeaUMf6PfcSjqwpiDp9iz/a6II7hVhMQvXPH2Al8w9iZ4PSg63hcQRR\neM/7TRXyega03L8/sn7XJmXlohJbY/6lDkhKKlczDy+g6P8cW4h3sz7Gkf9m\nIy07\r\n=5B6J\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"39f1e043d0db0c6881d84b3d7b54423f64cc8c0b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/rtl":"9.0.0-canary.07f3e01b7.0","@material/theme":"9.0.0-canary.07f3e01b7.0","@material/feature-targeting":"9.0.0-canary.07f3e01b7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_9.0.0-canary.07f3e01b7.0_1605563138359_0.000800914788089413","host":"s3://npm-registry-packages"}},"9.0.0-canary.23491cf85.0":{"name":"@material/shape","version":"9.0.0-canary.23491cf85.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@9.0.0-canary.23491cf85.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"065daa8fcf3530bb6a400307d7b16835e28792ee","tarball":"https://registry.npmjs.org/@material/shape/-/shape-9.0.0-canary.23491cf85.0.tgz","fileCount":14,"integrity":"sha512-+hkEtdWsiVnfFYbCh5Smm84j6Y7cZmwFq8dudKVnoMhNcRKUh5AWHjs99FYy0hA75XPsTJ5gN1MicOUgmmZ0XA==","signatures":[{"sig":"MEUCIQDq+7bVgttvNzLEqgL2iF3sBxjm+dqGWcjSOW2W/e1/swIgF/CgmlcMmEmzdka3IN8flwr4u6QVI+7AU2z/BWm6JNI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22166,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfsxaJCRA9TVsSAnZWagAA4H0P/1wigITfexI//AfQjFp8\nbKtryuMVoSV8/+NoCCKYF6bKKc04l5RpMTCVCEWGBtVcOD4oZvWE7i3yvrHa\nzxgEgDr1eaOn7BzkWWkoXVN3/3CbdqV/Q3MULmYnI6zx/7t6J7rEnOr9dHYn\nhlOwLPpwj/GNAErladiTtrI1uoYjH/liNEzUi4OZv6OBKFdCIF4GpY/gQRTm\n6DXJ4uPFVTJwSzJthbK7W6obvKDX8uX5JyOiVn1uTvBnGTNk2sNjQUvR3fcb\no3evP9VK74SEF+rh84g1Mip4Fxcz+nnpXIzJuWdZFLtzymUYyx/XF6WpP580\nB+VpEem/Ujxln/Flf/lkI2dl7Iw+NymQZCV6NMVBocMA0QloboADY3ke+Coy\nQbeSR2ytJ4+DgdonAB8LI5E5td5fkVHFbDCfFxi+8QXWTi+m2RWQLUhouClB\n9NQbNIB+HLcMr+anNE7wVmuGgH7Dtoiz3rqwwTXWeLN1xVV+n4G7YeDvcS+v\n4f4Fsgu141HTM9roph/9t29MfmxtGP4ahKH3pzfOYEvCTtjO8Txl2iw/2oYg\nsHRuAhw+TguV5+NxMuq9Rv8mfmuAohvOZhJV4T90hgaKaRDazhhiblnQUNlz\nEmZj6ANOtzz3tCcEGEMbSPYk/PmudQI1fiWu4bifEN0CRCZ9+p+ujpEpSiBd\naXTg\r\n=l+S3\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"cc2535ba5f66f73426d236b8a85291d7395ce589","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/rtl":"9.0.0-canary.23491cf85.0","@material/theme":"9.0.0-canary.23491cf85.0","@material/feature-targeting":"9.0.0-canary.23491cf85.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_9.0.0-canary.23491cf85.0_1605572233537_0.5726521601741452","host":"s3://npm-registry-packages"}},"9.0.0-canary.b659d4fc3.0":{"name":"@material/shape","version":"9.0.0-canary.b659d4fc3.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@9.0.0-canary.b659d4fc3.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"62a2ad3b5d74dbbd7efa29b6e0ab0a231233488a","tarball":"https://registry.npmjs.org/@material/shape/-/shape-9.0.0-canary.b659d4fc3.0.tgz","fileCount":14,"integrity":"sha512-J63SBBmNv7iyO8Ds0oC+VTVn1N1OTJ9PA3qc57wse7dm1YyOZUs2A3JYi54ANFwwGbIPN0RIkmx1nHdPdcwRiw==","signatures":[{"sig":"MEYCIQDn3oZyvyPow78ncsaGZjzTuDPx4yJfmyQQPQiKrxIz5AIhAKOyOt5Ac4l4ImyHGmXjMROEo6lfqxjSnyt7VsIFz1jt","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22166,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfsxhgCRA9TVsSAnZWagAAAAUP/jdVbt5VVyAZivpeqggL\nifylWIZR2bb4qWnqSocjn9C/DGIJEJWI645x4PzdJr+pxXTMubCaDJf1meO2\nJRieu4ZzmA5iF2itZ3MDhIF7Czseb2TBqE+br51wCl4dSUvD51CwC9w1s773\nEU4/71uh1woWubb1XBVRclGa3uBCkW0sqEM+dg1gHenXIpaKf/o+tmAq0vg/\nbPcGwsTgHO5H62IKfBLDb3rVIxy7TRtsWa058JCoLex5shdst65kjSrr7O39\nE1caulfSrIrLCV5EKSrxq/wN3rtzXe/wsfQTsEnMYCYgo97Cw5a7SGATO1U+\nQQ8J+osVBxJ0sL85NWTYV3f8aIdVPBCnXkHWOhkvPzaTGzTcDVCnvjs3blkR\neCqYB8JCk7g490gA8Z76mslt0YxOFu2r92UbGlVgoEESRyRi26YHTWAZEyjl\nmkhxKzBxtIx6DWYPCo6bINObCYHYPnXoR5VoJJOvbr8eOzBo3btxIT9DjyWN\nVs59jLEh5ek2HBxAJ0FlYe++cDz8PilhD2mPRGNvi6LaJ8w/ZzcyEsGDIt2U\nfAA20Bflvlm1ONhZE05shXpA/ryw48SFH7lqx2BcimW/D0tPYwtvljVJnxvo\nAil/K1BDdQxQuH0ZhUMN+pF2brfgDwpaELEG/67dQQ4yzAkklha0UcrcsDPQ\nrCgJ\r\n=wahS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"da948526208886bd05bb015d249db8d19d4b3f05","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/rtl":"9.0.0-canary.b659d4fc3.0","@material/theme":"9.0.0-canary.b659d4fc3.0","@material/feature-targeting":"9.0.0-canary.b659d4fc3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_9.0.0-canary.b659d4fc3.0_1605572704408_0.7013969194674237","host":"s3://npm-registry-packages"}},"9.0.0-canary.d8a3aed67.0":{"name":"@material/shape","version":"9.0.0-canary.d8a3aed67.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@9.0.0-canary.d8a3aed67.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f8579ed1d8c0067feea92a01ae13d1656157eca6","tarball":"https://registry.npmjs.org/@material/shape/-/shape-9.0.0-canary.d8a3aed67.0.tgz","fileCount":14,"integrity":"sha512-B588zleKOO/3ct/ytoXY2FKqTXry5xHZA/TYV8WviYKY3/nsBI9kGvr7CdQJLSq+KnFlqAeDwEGaGrQyoeMq8w==","signatures":[{"sig":"MEQCIDOHARkqEN+yhEQDslqiOepnKCri82gRR0AiHREuobgAAiAY8Ib3e5FfANRnkNbS6WSNLmJXcZGsh4MouCEOdI4AKw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22166,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfs+vbCRA9TVsSAnZWagAAv6YP/ijFe/rN0DbpoOGPw2cK\nojGTM99n5owUWrB4JT6k5VnrObhPHxp4XYIP54JpUuVv3w/I+Kcqmzdqs+Lj\nXjhCDte53f97PTwSF/XCZvAr4o3riqrCV79Aa4xsFkQM63Tj1sSyLZYCtnw0\neLWwiahzJhI2KY7v2bTJW88K5zgQ1Mb1NqbXmzODsXqUHnJVm8rHVvikIwh4\nIkTQwcb3HT/JTBSSWqa7rhqsmT7k6TCgO0n7cgnwUn0lpMiML1+Aj9/SH4xy\nSS6Q4EYoclnZgTO+BLye+IMBYjDW9JwOjBzjWhKfE862C6MPqv9Kh5KpCza1\n7ClAcpZeihBQwR9Ffc/SjwCzylb1o//oLqUz5gk9b5/17KVgsP+E5Ig4ohvz\nXTxMLvwAJGg+o5ru9zixlWXVWbuMLgwhIuOneXjFmOKzqt7sFXyU+C6xh133\naf8w4u5QwmUDTBpRWJRt2jamz2h52YTrZrrOFrWn1EtGOEJXOLzCM6UvQXUk\n2BOo6uaqDec2PNgkffjgnbCsduFBygnaYGbFk5WeW+nJfVzWetkS7wHVoJoj\nJZAXrdtnQKt+SZUwLlVgCf5ks6yKsYuohp9V/vuWwDoI+dKwuOmF45Y6l84l\nys3xlpcq8X6eHVU51hwwuy/QSJFfEx9Ia8xSbHDcL2K1HcWJ18oZue2sxWKw\nZwEz\r\n=yPlg\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"e70765503f122fcb3d748ffd41882655d9d4035e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/rtl":"9.0.0-canary.d8a3aed67.0","@material/theme":"9.0.0-canary.d8a3aed67.0","@material/feature-targeting":"9.0.0-canary.d8a3aed67.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_9.0.0-canary.d8a3aed67.0_1605626843165_0.6748278941973893","host":"s3://npm-registry-packages"}},"9.0.0-canary.482ff9091.0":{"name":"@material/shape","version":"9.0.0-canary.482ff9091.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@9.0.0-canary.482ff9091.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3af33e5c5e6800fa61d1a86a991095773c6657fa","tarball":"https://registry.npmjs.org/@material/shape/-/shape-9.0.0-canary.482ff9091.0.tgz","fileCount":14,"integrity":"sha512-rtPHVOrNxbXr8xaw0KtH1BM9+pOE8+gWnSs5NmGXIUMsowDlA1lR3i69il/wjG7g56Ue02bygBCD1mLRkITs/w==","signatures":[{"sig":"MEUCIH4Yvv5ExiiMVAsSAPGkBYbfVaeXlmReab/DHYoxuH7JAiEA6rSfkUPWQ7PhiouGi7/9n1pQOFcF8zgw4iSZVFOaE6A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22166,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftA8pCRA9TVsSAnZWagAAPpIQAJjz6fqTvvZJHe9tuRsK\n0rwDltFBsu7FNpCEM2xogepMyBkurIGaNRBc89rGFkMdSfNXXIDFPTB2ptGc\nEDdE6XoRkip7m4/gQiQDwTZU4bgkYwyP+ZH2tkCzxV1/DpD56jJhlfdpZLlM\nJbBpiW8h7AG3TZpLQl/iFDea/eo5TJBjcYa/8pYl6G2Nfo/pdlO8NzT+cxXc\n0PIq0LQ6WNLNgDbtO3kUcvWqLVS25pT6xD629UYez/eVsrxGblpj9TbaiQ8W\nYADha8rVefZQzi1ZEvCmCj5rnNjH5RH0mriRpSnM2mGVEFROBe4EAKwwF0nJ\nwdFqWIgfAmUSW+2wO8XghKM1UJmBwpYQpGtzd/G63+ny6qJUHpal55PuizWM\nO7mEzaJzTMdGEch/m5cnxBVwGoypFel6qAMRZwbrgKEBs3E4zCAvva8ax0oQ\nFStI2i3IkKcOChouwuiVq0J6eUrf9PNTHWkQsTO3tLKTNBGxzj7CPaXDFDE3\n9/MRhsXf7cpr4lUBpMpJbSKNAHRqsTnWHZweScke3Wb6rWdMuAjF2dUFHCPX\nIioBrx1g657HMS2SjH5BpS4BxKoymUa++H5TVNB7pbQ0mtBFuNYX08ga6dBc\n8TQkanW6QpcRCYrB8/6DrhLVKQkV3DB8Xnh3+HqaNkgKx+qrIvorD4+uvmz+\nbOi8\r\n=frTC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"5b4b306ef0e5d1d3654252169bb9fb9d75490dc1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/rtl":"9.0.0-canary.482ff9091.0","@material/theme":"9.0.0-canary.482ff9091.0","@material/feature-targeting":"9.0.0-canary.482ff9091.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_9.0.0-canary.482ff9091.0_1605635880666_0.541726136216333","host":"s3://npm-registry-packages"}},"9.0.0-canary.99cfb6bd5.0":{"name":"@material/shape","version":"9.0.0-canary.99cfb6bd5.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@9.0.0-canary.99cfb6bd5.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"933b9c940f41fec87ff970f6aab4cd4ea3a9a365","tarball":"https://registry.npmjs.org/@material/shape/-/shape-9.0.0-canary.99cfb6bd5.0.tgz","fileCount":14,"integrity":"sha512-nR2jjdInZDLCyraL88JOyEuW536Cdu1ktB/VVz7qGBlbOZrOl16jQLaPN/hcjUC3OiKsLqtWh0z/9I8ryKjpTA==","signatures":[{"sig":"MEUCIQCNDTrFDcuIYud1eOGMmS4dQWBRShIcLaH37vAPL5ZxhAIgCPcVzsXMAxtJ36PEa5ZcA7fNXmsOVg/T1w03jE9N1q0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22166,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftWtvCRA9TVsSAnZWagAAO10P/RkPs+YeEQ6LxBnzgqRC\nR/mKffIIjcP//oH4XP+j4P/4S0XGcRVR695QhPV9a/rs51ydSiwoAP0iS/aw\n3PKsSSCWFzf6HPGsaGxTrvai2n3FyE6kd5+IZd9kCxojg2eZt/wm0XFlaq9A\ndfWP7bepXad1RfZrH+9bc69i7pchp2iCY+zRXkFE0PPnbIzVfEW7Pbwm1IYk\n/SYBpP3vi7qRoxK27X4C38WW951Z18ZjaI6UDrmf8rt3mgNiCP7qUtdYBYko\n1G1FLpkvC4YgKp+KINfssX51GhN/VseGpJHrzOKQDeD0tKvyULosYPoZM6ZZ\nfeDGK4Ey4lP4Qu4OO8oNe4LE/es4XCpLVBwEm2DtHeRyJXjM8/ljddnagOJq\nIYvPyHZClbzgMKYf/5cocsMW+Q19nO4d6066yyVxY/HSJDSwI+YO7ClsY23D\ngkrz+SYMMUcMbOLxZvQgb0uqy4I53sxgD1ih7noNtTlBMon3NszwVKH2jjs/\ntp+0qhaDsthxGJvn/Ceu8d5q9AjSKIhQfeL8NaCaX+0c3N1Pm31n98Y1uCKa\nPN1iT1csHcyWckSBW4TdBXhP63w+U+ykIRN/wEsaNQIOqVZbEp1uMaMVcO59\n1Yvsf8qfWItyrffE/238hAU7rGdiqpHr9VAbq3heLlOmMymenRoADPbeswas\nOYSJ\r\n=4VIG\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"97b5b434f189a370838c9b867dfe1b766ae52fde","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/rtl":"9.0.0-canary.99cfb6bd5.0","@material/theme":"9.0.0-canary.99cfb6bd5.0","@material/feature-targeting":"9.0.0-canary.99cfb6bd5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_9.0.0-canary.99cfb6bd5.0_1605725038565_0.799481897719633","host":"s3://npm-registry-packages"}},"9.0.0-canary.b98d15d90.0":{"name":"@material/shape","version":"9.0.0-canary.b98d15d90.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@9.0.0-canary.b98d15d90.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"34090b781b5d137ec680f68e83df6cd8d7c61f38","tarball":"https://registry.npmjs.org/@material/shape/-/shape-9.0.0-canary.b98d15d90.0.tgz","fileCount":14,"integrity":"sha512-sjWoNeNu+qjSS8Fxb/1l/AZTXyZjepFCSIDhP8hgVtucuSHpCPKsCaSxQY0EbaELd6QnIKtiah6IRWfoQkn3Ew==","signatures":[{"sig":"MEQCIGBz/4KPiN4OWGIMZtRGCVDYqG4ApQ0B+rzgXVuZePCrAiBBNx/EuCAOY4dqMb2P70VUfaEqF60JvbBaEGDW5kGHsA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22166,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftaGICRA9TVsSAnZWagAAohkP/A2PIs40B6FoKYmnozx+\nLnEwMF9JCJ0y60L63hU1+z1I2okz8LUCvWNNp5q+eFsigWhNCWFsjALCIEGP\nOl7TG5MKM+8qcBAgUIdbnXt/iENCPpIGPhDlQ7AbUEiLahFVLU1WxTqH8Xjm\nPRPUTelsbjaGjK3KiQ9HWMRlWV9fyRuIQeKErifXYcpd8a7c9phd6g+ZrIqB\nziWRXsN6vPIPgMa4IpmaeVnpqTyniyfwosa1aRFjweZVHp6PaxrDNV8PiX4B\naxwv1pW1MCVEWDZXpP20Z54tVMEpKwfFncL+x0/g4g+rbLkvxk3J5pBZhyQv\no0NKXkRljD7Di2bQyeULAU+AGHkdzBmE9J8YQo6VYEUVgCVGWe5PaTY/nRpS\nf4QULdT59jxqqoAA6BWUdUuKrvgL0Mkg0WhKHkImGZVXOqvA4fI/aZ9QD6Rb\nunbhhz50P/AE2uGa4ypX7nOIGATRl4I/BiFHzgj7FFKpYLYbTloVKU0+6M97\nrTX1w/h94YL9Oex4JIv6TOkQEYfULJOvNYCDeCVY6wJs2MrCW+M9gMbdsuEF\nY5qLmikDwYzBKbHmK85PIueBaWj79wco8VmWuLJYJLfqP2tHcxC9+lr/GOH0\np8GlD+mHvG599BAFj/FBtitEhHCvtRxQ7qQ+t0oV9dx5zgYpv5f05N8sN7oF\nxhG7\r\n=4nBK\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"abbd2c5bad9fedd634d7a0c98bb8e4a8b0bf3439","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/rtl":"9.0.0-canary.b98d15d90.0","@material/theme":"9.0.0-canary.b98d15d90.0","@material/feature-targeting":"9.0.0-canary.b98d15d90.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_9.0.0-canary.b98d15d90.0_1605738888459_0.10773779430271624","host":"s3://npm-registry-packages"}},"9.0.0-canary.30c11bfc2.0":{"name":"@material/shape","version":"9.0.0-canary.30c11bfc2.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@9.0.0-canary.30c11bfc2.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"597147060302279d1cb242b4ef2c9fc8e2249269","tarball":"https://registry.npmjs.org/@material/shape/-/shape-9.0.0-canary.30c11bfc2.0.tgz","fileCount":14,"integrity":"sha512-44r6DyMK/z5DK6P1zQaX/w8Oyg1CQpjJwcmF/iMh6sL2LpR/J/6D4W1VRKd0Cta1unYZUiSdqZNUNGZyNUA0Aw==","signatures":[{"sig":"MEUCIQCpW0veYixC7bTS41BfXkVcbWCNuZxmVn9WT8fNHZoGGwIgEYZlSEbKsaBRY/7XTKl1s1i8FwYdl8n3VGZzanjNQxs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22166,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftcmlCRA9TVsSAnZWagAA+5sP/jsIHHwNAUSLuKqyxoTt\nqWTIPR6Sixj17rwzBLvN8qxKfStUH0hLdFlVb68EJV5lebgNPWn+20q2YxOw\n2bYr14pzFDGE/80E6FCY1ODHo8RXjeZZXvm3f88t3hlB5BC9SzjGJErFsjsI\nSizwMDLwuzQV5XauK77kXHjQk/JzIgNSdGmCYwzcYRuND73wW8lL8SuCu5sG\njyC08UnRQn1Bnz8qG8iiN7WMjK6EeesQiBGv7gUkRROB5ME3zDohytSncCyG\nK1fpyfrDhDohr7mAS3wQgczmldaUGdVzRMOcDo4jORyfTrrD+/+IxZYIrDJv\nB7nUC4hPLfi5swQzBQydWLTzCjaaGArpz7dZ6btYZALtsVQmw9xLAWSKwG3V\nwD+zfbx+gIdWk4QpLJVbjdknAzL1pLR+n4D4IxRqBSTBjCGPQhPj9A1rGIb8\n4KtCuYVrX3ZiHUitV45I+C+sdPl4hustcvvhjVHpPmuRH0wkU2OhO27X3Hup\nSUYBzXouuNpAM/7CewOmohdzYFydmdAvjWVE7y7hnMN8NrrdEC1QLWusBRXb\ni0rBq9KUCltTfI6F6Fc3XZuaHE9PC9YGKhAyzCbWo+FVR/mIl2zu5oeEas6L\nky6L/zNH3KZURUZ8N/MN35JsKGhE8KSZdYU7b0Ayo88jFsviyZa8ZOfCeavw\niFU/\r\n=dtEa\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"bde404a844a4528a097cb2c90d03c4ce8bba9d74","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/rtl":"9.0.0-canary.30c11bfc2.0","@material/theme":"9.0.0-canary.30c11bfc2.0","@material/feature-targeting":"9.0.0-canary.30c11bfc2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_9.0.0-canary.30c11bfc2.0_1605749156876_0.36244660238713444","host":"s3://npm-registry-packages"}},"9.0.0-canary.1b731d51b.0":{"name":"@material/shape","version":"9.0.0-canary.1b731d51b.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@9.0.0-canary.1b731d51b.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dc313f259f0d351fb4ee58d85ce6608d1ee8d0e8","tarball":"https://registry.npmjs.org/@material/shape/-/shape-9.0.0-canary.1b731d51b.0.tgz","fileCount":14,"integrity":"sha512-KPZX/EfWsP6mS0CS2Yv9bUu67mI838o5Fmvh/2heqYJHKmSAaT7eGt3XcPeYO/gdGxipBNXk60HfWVDO7P22AQ==","signatures":[{"sig":"MEUCIQCCYao0IO7z3qY85hYfcyBQ4ref0iozjhqJXgB9P+kIaAIgQ606J+EQnqwoX6vE7rtj71Fxl0k82lxXZJqBv+NDeJY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22166,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftr7hCRA9TVsSAnZWagAAttQP/2JX2VpiZuMj3IQ8xrUZ\nODdsX47MdA0Lghhh7uUg6weEnSIx7eqh7g2umYDav2KyqobcFUjnACZmGmie\nd4Sh8PNub4AztY6Rqs7OJV6tzXFYEyb+cvtpnOxucMVUSvcXZWNvZZ0KTSmH\nAYVW2fbtCFnNtvJPYEegNbDqlbq7//Gb0vi0i7VEGeINhYbfvzdh3V0wyyWX\nx2FfxiFAnbAKuvW6UBrIaeR3i6KOdGVtXVH9JwE6UA7kqXetkbca+k8yM2TX\nB+9bH8vHPYDWGSjJDavqxGYGJaadS/tHr0H847QeOvQrs2i+MKyk7oh/4V4n\nOy5GqMbKTW4UsXefIVcpEy6vzQOv1mcjnLazIa3KcSMvs6gHBA+jWMAJO27h\ndt2oJxqt6KmNKN6n72AfLzks6HCRAfYy51XNvXOqXIWte5MSaL9uJRbH3mR7\nfSxjckeni1oEoizO24y749rHuU5LHpVPQk4jXkByHlgduEzZgTKinjUUKV2e\nqrc8Q+Dk+mjMBZISHZJg+w+J7gJsHDWudSHFUsIpg8L76bh6pQPYzJurPw/g\n9Dr6eKlOgmob0ueiQpMaMJ7y08H5/Iwx/srBEQS2WHuEybMI46oOzljqaA8m\nQ0PRQHRxY6xViArDKiyl3tVlbPSed+kwK0M4YAt33u4C9HvWPT4rgde9gG40\nxqcX\r\n=pMAi\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"22fd036a79b754fbad742c64041cedbac73ce410","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/rtl":"9.0.0-canary.1b731d51b.0","@material/theme":"9.0.0-canary.1b731d51b.0","@material/feature-targeting":"9.0.0-canary.1b731d51b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_9.0.0-canary.1b731d51b.0_1605811937332_0.528477979490358","host":"s3://npm-registry-packages"}},"9.0.0-canary.4ae94ff78.0":{"name":"@material/shape","version":"9.0.0-canary.4ae94ff78.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@9.0.0-canary.4ae94ff78.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bb2a60d29e9046f839f7fb575873ed0046c83d6d","tarball":"https://registry.npmjs.org/@material/shape/-/shape-9.0.0-canary.4ae94ff78.0.tgz","fileCount":14,"integrity":"sha512-3rpUAJmAewd2t29ObSzUNSi+Q40sGDcHXN6c1lJz3PrWlqGoOKthBEfenIActVCyYaoTbyKuNzpyCOfCnuNlHw==","signatures":[{"sig":"MEYCIQDRKvEDFFkazNtdEtPGrtMy8+OjJuAaCoa8cnfH9FMfJQIhAMaOeQu6M+u4GYhN0g3HM18kPaGq0daVyiPl/pkv18LL","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22166,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftr+dCRA9TVsSAnZWagAARAYP/jisXXMBVD1iEDL3YUyX\n/U2oShl4kyQC1bMLUV2IOJqMMYihAsABA130nYdwGc07aL1o8nuMWx/5SXLu\nWj5HqpyKtFkYe64BQ3sZm2czBTEwtq4B9/sOOaioG9oj8gMNb5vtauqjKdTf\ndAktQzb6qD5ieQKxrQwOwiwEyVcdyNB3EYqic8Z9A4GLw6IoQKy8Kde6hxTl\nAHR0zrSWPL1xzds2ZsX57oTV02oE1/ddrwHen7Qb26x8MKXHJIn2Mei7QYy+\np/BjSnEWKo4FhTVWo1G+yj3PGjSmOx700tn6zet1R7eoZLFm0g+dAJYM8KPB\nYIwYvdwhu8FfhgRK8hwWcRCTG9m5SLbz7KfDJrYyQqTe1puPpHhqMDhfcBAm\nKW0LKRUEF/VUl7Iorjd1WluOL30hFFCR8/f+AkMmfAxaENqjypbOsvMCGxmQ\nAvaviai9fiDaYuagh+B/mvW3RmAVTI+hcZosT3DA26fnKzudZxaOuQh16uJL\nbUJ+5z65gotrNrLPw4y47YA/QlHqunSPG66UoFHRdDMYydKjsSAqmintyi1H\nKJsItHj30X8OSKunRqETqFrLxfsG9xIUt300ba8nNLLJiXBcCzu8meShH54X\nF22P8KwFxIlu5uFvIoH/LafmCeQ6SgcQn6UH3ppK4KDRrhA+Y4doz7FInMG+\nMzEk\r\n=70IW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"34c69ebecd44026cff9ea0d681fc2be3de9900b2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/rtl":"9.0.0-canary.4ae94ff78.0","@material/theme":"9.0.0-canary.4ae94ff78.0","@material/feature-targeting":"9.0.0-canary.4ae94ff78.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_9.0.0-canary.4ae94ff78.0_1605812124664_0.16558654233666226","host":"s3://npm-registry-packages"}},"9.0.0-canary.7ad038e1d.0":{"name":"@material/shape","version":"9.0.0-canary.7ad038e1d.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@9.0.0-canary.7ad038e1d.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"868c277215413569556ad210f9823a9c3b94ea6d","tarball":"https://registry.npmjs.org/@material/shape/-/shape-9.0.0-canary.7ad038e1d.0.tgz","fileCount":14,"integrity":"sha512-TyLDBK548UX7rfJ9YXPYSPdYuEukCkvHt4AhecNbpk6lf2khqXSQuXgjmzFyGsp4DPmr4f0S3wyE0EiFE+okNg==","signatures":[{"sig":"MEUCIFAlgvIIfEASp9DAVBgCRjFe/P+T+am46eCMd/R2XRbxAiEAkSz28nN8Mg5rSkNTBE97quVRGRen84cckzP3wdDV1qc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22166,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftsUECRA9TVsSAnZWagAAgRoP/3k+G08+6Siukkkq5Gnz\nmat6cqLvY+n2EgkbsqKHfTtany42otCUETRz5++J+6yLJ6b1Mf05UtR8ehN8\nsLe7gLAxweB2OH/VZ+xSGf1hXUVx3YnLsJAv47WKi+70tZfP7o+s0xshaItk\nHwSf3iiBWKcR6t+v5L6UEP1zjg0Ym6HcbufaHEGJ5b6ZQC3SSGzg2NHW7e5B\nAUa8r8bsxCWMuwWVk2WPmwODcz3JK5o0d+b2fdjX+Y2GL/hsLavmlqHRm03X\noWh+WNxv5PulNxUqLo2kK2FbtIFs+y5CXoQjjPjoulXyZD9VJ9wz4UWc04s/\nCwYTCwGcuRXWEehrXqo4ZL8DF6JSupbn0eJUx75oBrSvukzj7lBVPOm+i21l\nOXgPhHUEcCtE/aNrk+jRxhFVWE6BLWB1aELsnBJPupZ32IoDxnmwbw3HzwXk\nqZOQHgPxhls2EbZb3fMC27ppx3yvlFk2YddUQcHMyJxpAjsx0/Q68kaaTHQp\n606nU1DI3CKXd8wSG28ljixe/UL44flEGWiZDsL48/BXHcpntrCsYThxpenx\nzsj9w6jXNx+2p/4LUjTkpo9WVKF7WWmjVAg83kuRPdKuSGKkdkiOYtNfM/VS\n+TglZEmxioTjNPhTGD1SzJ643Uhb0gtSOGmMP5tsP/tI4dnbeX6wPtG6cwo2\naDeW\r\n=sdsU\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"ae5e88e00f948f916eeb8f578dc80b6aa2084116","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/rtl":"9.0.0-canary.7ad038e1d.0","@material/theme":"9.0.0-canary.7ad038e1d.0","@material/feature-targeting":"9.0.0-canary.7ad038e1d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_9.0.0-canary.7ad038e1d.0_1605813508443_0.5672625333509","host":"s3://npm-registry-packages"}},"9.0.0-canary.a41527604.0":{"name":"@material/shape","version":"9.0.0-canary.a41527604.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@9.0.0-canary.a41527604.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ccf476f33496664252d743c12cee89e398b927d9","tarball":"https://registry.npmjs.org/@material/shape/-/shape-9.0.0-canary.a41527604.0.tgz","fileCount":14,"integrity":"sha512-df/Z19HuE18E6sPBoOVqRPW09vxkJvuCRNuSje2izwqy1QAWbCZ19jWz2+Za3OYcagaeZJ1SxoAS8Tt0HwMxcw==","signatures":[{"sig":"MEUCIGx7VhBj0uYVwwTxEas2KMQhm2CfzSYDW9hNJQT5YRq4AiEA6Pysb9TExmnFNzmxobNjPf/q7NdbZc3Onr6uEW3O2Y4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22166,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfts7ECRA9TVsSAnZWagAAnEoP/0vzVQ6Ij3/SqcGs4ztj\nTCDZ3rIVYmLRtkrOTtBRC18glsaiL2ucCVIOlbks2imh7LIBLxxV+7ko8nZ6\naOEbeADqOJy+t0Abot+7yzoLIzlLxG6Gu9VssACFNvpiKDB0+f5RZmr99Mm3\nKP05b0ApIvWBkswX2BAeMCK7oD9YjWUBKd7Du9nJij0+/iSKg5MbFpyiH9Do\nN6sG8Xe+4BG3wy5nDLFykaUcSEMrTpLXCBB76CSmIDMKwywoYDbYY2rXf2Ev\nXjAxNVf2lULh/FEWgOdn0GR5535PKhabezG6D59s/aoHc6qtxhboMWu5cCVa\nFBNPKo5XcHm9oVx7cWqJkrOb119vr2zmkAaBCUF1Ysu6vt0pE49EeBCtbxQF\n3rweIGSqnqYtXVG18vosGL6YLy3hUboPnFecGnWTmEOazti6/3a6ryS1jbaw\nolZn3Y9A1ZddKwajJk1FtvRuZ0XY7dTs838Y25kLWHE/KmasoqZK03syMNhe\nYztcVYqQRENLCeP8gaR/O26iaHX5l5Bs4TTDHIomh+JFDrNC+HtiTLHl5F5U\n7S5m+KgKFcagVUisiIn5W7BfLeXMo+un303XiyGgbVj+URrBaTlsSpNqjx1V\nlCPthKF40eyzAIII1NyIQnAF1Sc4PVOqVdbGO/xMi/CGTZ9gU56wXceOfOEs\nGWMg\r\n=m4V2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"4419897c2a5ae382f471047e38ac619bef815058","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/rtl":"9.0.0-canary.a41527604.0","@material/theme":"9.0.0-canary.a41527604.0","@material/feature-targeting":"9.0.0-canary.a41527604.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_9.0.0-canary.a41527604.0_1605816003899_0.5685942447705701","host":"s3://npm-registry-packages"}},"9.0.0-canary.7b0e2b377.0":{"name":"@material/shape","version":"9.0.0-canary.7b0e2b377.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@9.0.0-canary.7b0e2b377.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2951af0e7b348daca85b9faa7aa8450fbc0dd1e3","tarball":"https://registry.npmjs.org/@material/shape/-/shape-9.0.0-canary.7b0e2b377.0.tgz","fileCount":14,"integrity":"sha512-eBwskWbM21Mo7od81HxJTIyytHXCAkKhI0ucTQCWHnCLgm8Id2WtWsQHdPIg1B3K+pt2qwP4a6ihJqW7ms1E9g==","signatures":[{"sig":"MEUCIFocBPg/9vttSueYbTmkOQajWL6x0+SJvWI7AW/w8qxhAiEA76B20oLT1PrqALV03QIZocWuMiIlr56ZJ+0JulMKszc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22166,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfuEljCRA9TVsSAnZWagAAGJ4P/3LG7hCQ9+cEEWlELmx8\nqUwjk0GVKC73z/aao2z1UR6r/04GCFkFafS43GlAMGcc+ThY4c2isF4XkEWL\nQ9sTgNCIKi14+Qvqh9TRNdv1eSNvKDHBxyWCq6/3EcMK9VQ1JrPyuVYUInUr\nLAlyrOelw1fugJQTX8lFWG7sk1/GpLcP48rTZ6zJGheVZADGuYs3kFPCJwkF\nlY+kjhNO6OVUHkEHzAb8CfJ1ylhMoJKkq5HKNsCvT1C5XUiOG7j176hgCNEK\nClrIwuVOvylypFKuXA4K7Cy9dB1ZnN2J0IGqaW7kP1lCpZImR3vhEA2l/tU+\nvL90y99gwdI/jnlsT/u6h0ylLtj9dEz2M3cp2yE1KbiDnhV6p5iZU1dHqzHI\nUyYT0t3z6NKIycLib0ewkTRhzCFiIe5d6AMV5UsuloutmTewRF22ysoi89jv\n5LYfacb+rrCCn6yOReTaGIFHHyGm45vRiZCiq/CrbDne4RcVlqSE97ZVkjND\nSR8p1axu34HofnbaOBcxM4Bcw+NXsWHEZFHw+c17zjsOeN44qFoLNrEvqnhM\nREmL9MMcczXShpKm1bj51zgF/32s0Zobarlqx4T3dLHs+xSwVowf771WO4vQ\nLFa7C+I6lIlEMXbigSAfZ1r2Q9Y57b9ybEkfc/qEa64W60o4qthdMxmN34qu\nGR8L\r\n=RpE0\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"51086f360a63319c786c7b166e515a34aa76c112","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/rtl":"9.0.0-canary.7b0e2b377.0","@material/theme":"9.0.0-canary.7b0e2b377.0","@material/feature-targeting":"9.0.0-canary.7b0e2b377.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_9.0.0-canary.7b0e2b377.0_1605912931075_0.01882201524593685","host":"s3://npm-registry-packages"}},"9.0.0-canary.c927a5d05.0":{"name":"@material/shape","version":"9.0.0-canary.c927a5d05.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@9.0.0-canary.c927a5d05.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6fc8f463da69a1f1f93ad042a1053b902950ca8a","tarball":"https://registry.npmjs.org/@material/shape/-/shape-9.0.0-canary.c927a5d05.0.tgz","fileCount":14,"integrity":"sha512-KUdt1KJ10gjbvFdS4q5bG09r5EdN9ozlIRD1/qXyfwFFoFzHIztST93TepUEqAxTvwMdlws2VZoWUQYvE9DLag==","signatures":[{"sig":"MEQCIBq2wkblbGkUDFHGLRUh174PGM/GUSLS933rbn2e39tPAiA4N8YRhVkapAzoEh6TWr7CYvjM5lZXigb2VpMEcJA4sw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22166,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvBHUCRA9TVsSAnZWagAA6ogP+wbJWf/VpwiEaMnrHDAW\n0bKxUEGDK6HcOKkWXP7GxFPrWcOefN8LltST5RFH0fG2bwsFhGDdoRb78AfV\nahDqZJNJ7fmcTY3nfDxqZe7TdQosB7mNtrQNHUo3BZnd92CpcpaJjaWTlBtn\nLHFFuvXc7ZsHj6g2NpC5e3ioh4719+36irjUMnTXe9IWFpASxCXdULj1ATn5\n5rF6UW5CrVvbsYOCpjAwKGQ/o+HmQ0etlGIoS6DilDbU65tCjHDOvDVbtDZC\nTZnupNzHPiao+4RtoFF69+ecTPpwGXr37ldwWAC4RTl7Bsv9Yfq+FziPgN6d\nhwxJSYkC3au+WEMenA4TmbbUvfRXmJS3NrCHY6EXWiV6fLgErEJ7J2k5nkET\n5rLucqyr3NlaKgaZCs7AKVC1GAD4KvsBD758ZdILqeSeWFrmGydCNSGT47oI\n2W9GL3ity1RdN3pwmn8JhprybGOiBVm0G+iKohe9l1ZBa/pCuKnx7bcatT9e\nDEno/MPULbsCjgc7CRkut6dwDxqO9A1q5zcVudZ7vEXc5jOVkP0ipwasZ+V7\nkXPCMezkc0uJgCd2cvSjZF4TqN2Nxi8eQngUgnG+wS7fRdscwtlet7Gc9tuf\n2R+9s3mMdlHwyUKryxuX/dEUTVVcGzKp9y2XYl9LoDZBL9CIcE6O4/gNRmVR\nLQuX\r\n=kuV7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"1e41eddb7d951c0eeca983e08e3fbb7b21cc3776","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/rtl":"9.0.0-canary.c927a5d05.0","@material/theme":"9.0.0-canary.c927a5d05.0","@material/feature-targeting":"9.0.0-canary.c927a5d05.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_9.0.0-canary.c927a5d05.0_1606160851808_0.3085688591182567","host":"s3://npm-registry-packages"}},"9.0.0-canary.b349b5185.0":{"name":"@material/shape","version":"9.0.0-canary.b349b5185.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@9.0.0-canary.b349b5185.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"64104c74d0246d9b33d0f33bdf51d5a18ed0aab4","tarball":"https://registry.npmjs.org/@material/shape/-/shape-9.0.0-canary.b349b5185.0.tgz","fileCount":14,"integrity":"sha512-Z4xcMLItRSSJO+ThSodGPCTJx+NxD258v/nG8zrQi2i+qKvO/F9jXXaUizIpoYQdaq9lxvwwQryKb8fBjn3V7g==","signatures":[{"sig":"MEYCIQDV19rsWNLUmOaRvRju4Qtv8OV46YgJGr//nFoXHyAxsQIhALHDNuK99Zdov8j1aKJyFyIgDoFjVO3y+h5JSXheGN2u","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22166,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvT4qCRA9TVsSAnZWagAAbZAP/igQyUwOguGXmnu1d26f\n+8rKXKwXkG7gJlNYvSX/RrLOhZrznIaXuisfBrXt9hmsv9SPqpP1iycWu2Rn\nkBPl2WVSRwO8QbSq3io64FvNGA0BMdNLSwxeRIbsfxbjbP0olzAytaaIK44U\n5V1+7aGZeE6c862HYxzkywDLpNaazpNwTCh84nPfm6IoAd2VqZhIi+o0ZBF4\nbVFwWKiF2+m3qH+dbHKG0g57rdZsKv2+6vz+eJFqIFNW4DL+g3/i8QPSS4ib\nWnlkNKthyz/haFU3E1A2kubBVwshv9sKb2UaIHRhR9JjYHEnHJblEe9zMGS4\nBr1tHAmLn3NqsZYfbI5jVSR6E039WUqU8pmzD4TFu59dxL3ij098eo9mmzRB\nLSdl+AhuCHXglrnc18zrdMq8evCE54kXnDbkmyE3Ph8bRY1nQW7mCwM9Ybw6\nSbVGC10CAO+GumI93dFwVYRDhsMxpCGctsJOby6tRwYJ19n7BcKPd/VFX57m\n9XMYWIbrHBjKAZygZB2dbagGTbC6tSR//h+L09WI+R8Gb5xLFx+v0QAXjSqC\ncHKPUoHtysGAeBDy+PfykpDhKf0i8Z62V98WEnFXVPY0VdHxnnPtj92YXNGD\nzlBwlsEBTDooyGrf496Qgm2IHVfZPqeGSs/P4S2RaxcPwcaDMKlnGY0KQplM\njYkn\r\n=wAQ0\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"92e0cccba580778200706f15aef4e667fc007066","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/rtl":"9.0.0-canary.b349b5185.0","@material/theme":"9.0.0-canary.b349b5185.0","@material/feature-targeting":"9.0.0-canary.b349b5185.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_9.0.0-canary.b349b5185.0_1606237738222_0.9048250563929972","host":"s3://npm-registry-packages"}},"9.0.0-canary.9083b7d61.0":{"name":"@material/shape","version":"9.0.0-canary.9083b7d61.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@9.0.0-canary.9083b7d61.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"53a0ef5b19d55c9a0751b56e7b7b3558fba4ee03","tarball":"https://registry.npmjs.org/@material/shape/-/shape-9.0.0-canary.9083b7d61.0.tgz","fileCount":14,"integrity":"sha512-0l93zfPjOsgIPv4Pd2Vrl4CcUYYHLXPxJWN4j6q2LJphbgB07cmR1j5bKucuCwg9giLgfCvLPd0cKkZ5GULMkQ==","signatures":[{"sig":"MEQCIAoYxdyBq4LwVZO+DlUYbWJrn6Yzuxf9cC8t3TH3ybUKAiADvcfHmh2iREGc8KalE2Kfh1KKKF1pPOb5QRzmKkXwEQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22166,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvXfzCRA9TVsSAnZWagAAhCAP/0tu0h43O9KIIv6o6LxH\nc5BNja2dX8bUa4809ewK27iIXnXJG9HlmN6TWN3OIaYFIUZ+q5cYj0YsGGrl\nkJ1CdUIlpKUFouySpo+3p4J5zO0RRl2AixD7g3UkDo2FSerz0KSAkqTnkcPM\ny8ibT9ZN0Rtl5uCz6tSanfML6E3lJtGlDKv3D4epxrceKg+KvAkVtXl1v1ws\nO4yvhaxODVbYCzFEr7g69xUkoBmj7KNc1uw/y3MWt28eRrwBcPtXPjF68fRW\nEnBgJOXliSUWo1/pn5Z1SBCwJKJaL5+fZovu7T/I3CaP9Hhs9lJCN91thcj1\nFtG90xrAhvMEXC87B0pl7BbCKsOywoV6JiJuFqkIEAW9HU4KRH14siADablM\nhKcv3Ze+jrox+u3UvcPqgoPPOx2pThnK/R6HBd0KeZl2LGjm2HFrOdUPBBw0\n0/FdRia+JL6CW9CcfaqlOE4UbPvXzWJuGBTJN3+itUKKZToQjY10S/4cqOrx\nRjS4WOMzml7KqmW1XGcIWqXuqrTArvF4qXKpIysAnotCnS6dr6/+3BklVuYS\nL2nbD8eo3M+6eYQ0TCF0jJUnGFPSyUy8ckhwSyHKXWhmVCmG0XwAkI7vE9V/\ny2sH2Tq3T2lSawMUCu8uzfeEVQwobpVoGRe53ABshhkQd8PKYFRGX/qdMTLM\nXdlh\r\n=rffW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"c6192773b6d2ce6a74a5b464d7df3e9b57b238d4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/rtl":"9.0.0-canary.9083b7d61.0","@material/theme":"9.0.0-canary.9083b7d61.0","@material/feature-targeting":"9.0.0-canary.9083b7d61.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_9.0.0-canary.9083b7d61.0_1606252530723_0.05775769232794836","host":"s3://npm-registry-packages"}},"9.0.0-canary.eff7b46ac.0":{"name":"@material/shape","version":"9.0.0-canary.eff7b46ac.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@9.0.0-canary.eff7b46ac.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2347a448f7a9ccde10fd34cb7514ff4058b5ef34","tarball":"https://registry.npmjs.org/@material/shape/-/shape-9.0.0-canary.eff7b46ac.0.tgz","fileCount":14,"integrity":"sha512-6YaTePJN4fPcUFmaWUnXURFdmYPrKfxEBRW/458yV1lPOZd2/OSSVJAGOycdRgE3qKkuwdSGlESnuLLV+nDl1Q==","signatures":[{"sig":"MEQCIE/qzRXRp7Pz45D1xZ+mTcuYYSQoamB5bkaKV0rBL8/TAiBketmegCSs7NCBgZJov3uoXlq9Wh8CU4k045tbo2gKxQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22166,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvZe5CRA9TVsSAnZWagAA6MgP/iJEX2yYUfvrk9MjSK5B\nkACm0UAtYGCaRJYRHh69lSuuYfINAoH6hvDUp6vScjzjt/XQm0DWwRRmzs0Y\n+G7bFUS7e7O4EQEgBOZofbISiILo3tsA9QL9HV48tZaUCWKY01D/8QnRpGVQ\nA0YRILfj5Y5+cP3F8TvsPwbVJOTS5rhn/mWdbdduoz6jMoum0imLGhk5RF2V\nFNCMkC6P136RYG724PEIICDYV6qEXRekS4fHHZRhJLuC4XZrCSLXCuaKmeS8\nJUxE+vPs/9+VUkIvECuLBRuUdbRbNyhTGIE+R1GEBn/ds6zSptsP4CfvYqnO\nui+iASgzcIXIcArk5uXhjHeojEW5WsmT7vQGEHA6ZFL6LrIPg0i3WY2EvUoO\nHEk4ZbPoBGEaxMVJhZgByAlLJay2nw7jhfq3vXTLAVGq+YTUiFVY+QFH8ZSv\np8ZBDMc33wVHdljOwnYlLEiuYUMEvxmPRZ8jYHhViVxrOCBvD/shBzt+vCR8\njey628UWvI1eimcvQQUYfy0znQ0vigsIZzia5ysjL5ZxFIbBH5Fc89gNwVq0\n13p1EFbJGurVBWraC149JQAZy++B9RljJuzLymNdjJOFXQmOhoGMjb6UUS6V\nIbE58W3BLlNsFx7EwC1JqoaZDlbntiNeUKwjDZo/Rjo3I5EhwIllRXIKovkd\nRHN0\r\n=61le\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"b8790bb41654e5c7f7a7725e8e58c9dd08551129","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/rtl":"9.0.0-canary.eff7b46ac.0","@material/theme":"9.0.0-canary.eff7b46ac.0","@material/feature-targeting":"9.0.0-canary.eff7b46ac.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_9.0.0-canary.eff7b46ac.0_1606260664496_0.04334842226994873","host":"s3://npm-registry-packages"}},"9.0.0-canary.ae27b44b0.0":{"name":"@material/shape","version":"9.0.0-canary.ae27b44b0.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@9.0.0-canary.ae27b44b0.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8a0112975fe057f650ece1bce3c6a86a59a2354f","tarball":"https://registry.npmjs.org/@material/shape/-/shape-9.0.0-canary.ae27b44b0.0.tgz","fileCount":14,"integrity":"sha512-uXiHDIBNlmeWmsci9pp1IOXWdKj0zlwqWp8tZ/EW1nypoD5gTq2idJ/IAyldfJw3tLIp/8IJATS8UyMiju+ziQ==","signatures":[{"sig":"MEUCIDpAHqvs/7O/wsi1dwHNFPThrotH9BuKuj/OEKm47DQNAiEA7COrpFJeMPLVBoFLnyH14RZp2IhAKKN+GYfaQdi3W0Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22166,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvnkhCRA9TVsSAnZWagAAZ1wP/3aRvxqaIgV/8wZIwbJ6\nGZjN8vWlhKMuRbeKOELL12CRCOD7TBpqmuNgevcEgj/UgGPwBg7eiyIWe2zc\npAmMLj7sEp7tPI82LHAXPbOt0iu3mKHdiV34Op8d8CBlG1f+cc+lV9VtVLPz\nr1ScJqm5PjKsbmaxHSVIGC8g/mqqOMmGqrWPawK/KXiFMn8LfJ5Lir/vU/GI\nPYuUi/hxvuihHJqlU7SVBBImoO9uWN5zJqQsGGZJqA4gfXPZNueZtvhcBedz\naZzNU20wb0RxfuGFvniRrZlLkT+ZWOeti9GKhVMhE7ivPhlesclc0JSANx+0\necC1QpLU5T/xZmEUdYBJwWZO+KNAazUe4fSYhMhQJDQHiOxIzkBrEFue4CM3\ngJ5LtpKkDPtNaIww9Zv0v0PyUkmPvuCqf5NWoovkkqQ4zt/ik1/KnouIpS24\nKIrenN+yXetWgyzycKgqnKflYntJ9vO1znpSywcrmojOzHDw2xKJb+vc3g1s\n2dp55+dxg1Jl9UXpuK/CwHE47iQg8ZI2Dxu4r2fBKe9h+gCvMuQiHTZ1VjTJ\nB21VAAAgE/62h16416j1jNcRJ9fM7o11gfUaQycHAN5q4GWjlPvLk5UO3DyT\nDGRN9YkqWpuMK8xPnIMsak+A3gkkQqEo6Na2ij0Ag/Pdy9Wj7XSubeeG7VDy\nV7QE\r\n=7Bm4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"eb690fa0e9558b61ded00dc6e4b467cbeaed4c4b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/rtl":"9.0.0-canary.ae27b44b0.0","@material/theme":"9.0.0-canary.ae27b44b0.0","@material/feature-targeting":"9.0.0-canary.ae27b44b0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_9.0.0-canary.ae27b44b0.0_1606318368870_0.5167857518469667","host":"s3://npm-registry-packages"}},"9.0.0-canary.2fbba2554.0":{"name":"@material/shape","version":"9.0.0-canary.2fbba2554.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@9.0.0-canary.2fbba2554.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"05e39a12a444d36fc0987fb72d370f3c0bf6a4cd","tarball":"https://registry.npmjs.org/@material/shape/-/shape-9.0.0-canary.2fbba2554.0.tgz","fileCount":14,"integrity":"sha512-pEFhsVJ7NFCbybBS6CocFJC3khW/zqzBbe6IFbis553On7yYK69xHkotnIyD2mL9IF8yVCbgt0lFUU0n0/Tyfg==","signatures":[{"sig":"MEYCIQCurRV84AOaZPOPLSdCbRPMW4g3ZDOMlMe/vMRCf1JEqgIhALe7q3+CkfeKjpM0uez5yj0SofjVQZwNjMSjPnbc9zVN","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22166,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxS5/CRA9TVsSAnZWagAAMf4P/iOdKl4R4jpMhVI9gO4D\ng8+s4OvrDGxVgr3qNc4OE2AQDBxShrlJl3lWcBLKx8o9hOfCqa/6SIaEIwZD\ntwpkk2ULB72qHvX4M34j/Jw+IxsPsRORjFr1HscqY7HAcSgfDA4s1zl1ze+N\nbfR0oK/7Dpf0h/ZwpgLl2i8nOpkHGvRoi+H7016bnIA3I9fOJaNwztnm01Jh\nkFznjEsbQi3Ih3jHv0kK1NVX215KY8ZUZoGkF22jfW+LenrRe1VIkXxuXjzk\nGlO572U5RZncaqgPgz4zbGp7EFQ0GIIAoErlXwISq3JSY0VIgv0EpKRl0N/5\n6sRS+SIfYDz2IQoBtpYfOQ6fwPGPOc5fe1X18XxeIPW7t5/sMpsq2ch6n/sc\nHdJdW5fDAGInjmYcLwg4gpG6VBMKVheYYkQcvA2Nk3Ch0FT9PJH0tvlgovbF\nUO2Gsk6hnppic2vt6SC3jC+th8h1zCqiG/Bz6iyV9KMq9Q7tNxYh5r1JDZdP\nx9H8shM2Mfpy2PFECmVsN57VmNEk2KAhUkZoJjyiaOAKhnfkMfofzjuVBSRz\nKD6GUNVz+dSN2Cxv4NYTXTTgL2SL9Tr2CrWoGYc2sIdcQxMi1f6ots0y2ep3\nLnrzufnH7fCx9pAyL0jTNX+mQZVeLa2fIX8chXicNGtZ2P+0oo0abeUZkAXm\nHpyH\r\n=btWP\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"93356628825eb23bea706adfd527933f0c5e430d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/rtl":"9.0.0-canary.2fbba2554.0","@material/theme":"9.0.0-canary.2fbba2554.0","@material/feature-targeting":"9.0.0-canary.2fbba2554.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_9.0.0-canary.2fbba2554.0_1606758015285_0.7399719676304422","host":"s3://npm-registry-packages"}},"9.0.0-canary.6d8574fe1.0":{"name":"@material/shape","version":"9.0.0-canary.6d8574fe1.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@9.0.0-canary.6d8574fe1.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"04ea95b4dd776c02940423337898499d08ab53b3","tarball":"https://registry.npmjs.org/@material/shape/-/shape-9.0.0-canary.6d8574fe1.0.tgz","fileCount":14,"integrity":"sha512-qe8BmKh/7E/qQk6XN9n+nGHjefv9nqyshmBA2xX84kqx+2j/oCu3rV8VW4bT5cbwzlZnCZzXFz+V1bAONAgFwg==","signatures":[{"sig":"MEUCIBy9trv+xU4IVipb1gyip0h8aYZ5NNQNxc9VmxEI7J//AiEA7s2tbWrFWUXK6ogMj11H+dqBeIJys/jetGYmHvAQhmk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22166,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxTEXCRA9TVsSAnZWagAACvIP/jkj0MU6kCWJNP3I9T3m\nTuNudsYkIxvK2YhQVHJPIy+ySFe9TqeOp/0RfgWPqaWONC5Cw2RJQA8p69Au\nGos1C1+V9bXrtY4ynZWkL0wAyySTO0snBG/mblQbERloCDagUOi56HveuwPY\nTitTGu2yo7ixqqehGkkvNk8QNAQ+M8Psq+UWkD9uhn/6rFXfuRTPc72fRvgn\nIzQdMjCcA6+Ih9fVKCsVY9WGxJiLZIHotBkPR/9Is0uN2FOd3yH20dOn/0NM\ndEoaVnWAyKH9J/oT0Eta0pU6kvAlij1yy9lqMYtq/P06vqa7WKiuAFqJtU/p\nb70pbvbBVxSU8QZSzanLkFrHuMjllp+tSRqgvB2LSEchLQRrn6/54pH4tcMK\neTk14QzkfR1EKN/0grtUfMxMd/cXfE3D96InxGmgJu2oimY4+FFLStD+RbgM\n5vUeigWsc6GuHAVetMLLxq51VUJbosb5/zWkQeLDplDKZnSYA9xn5wgDbgDp\nbJSg9oaIQy91Izu0HxvNgw7/vUEf44y8Noyc8Ak4C4oE8k9rMjhLhWeC6T97\n0/qxRVWeNDaSOprU4PoOcIVXDY8VUvgAZd2/Ao7LZO90wHykLMrsaKE+/YS9\nmVR5k06yUEfjH5JQ8Z01gCuY9iZ9FxIu3yDy4mI6I3+aRembdoLu8dNG72TF\nJqMR\r\n=spwH\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"b98a165c81d2497f6c0e8e5652743d71d87029e3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/rtl":"9.0.0-canary.6d8574fe1.0","@material/theme":"9.0.0-canary.6d8574fe1.0","@material/feature-targeting":"9.0.0-canary.6d8574fe1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_9.0.0-canary.6d8574fe1.0_1606758678911_0.5511221922480902","host":"s3://npm-registry-packages"}},"9.0.0-canary.fd22355f7.0":{"name":"@material/shape","version":"9.0.0-canary.fd22355f7.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@9.0.0-canary.fd22355f7.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c88e6deb9eb9e675c53629adab08eb02cd6f8f4d","tarball":"https://registry.npmjs.org/@material/shape/-/shape-9.0.0-canary.fd22355f7.0.tgz","fileCount":14,"integrity":"sha512-tWAmGP3RlYX4q4FK/lDJJ3qTHLZZ6Sbdby8H3EKeR2MOxd1vHONonbWa7y7jNJJMiwDdUEZiO5siH54hzOiEVw==","signatures":[{"sig":"MEYCIQCvTu6KYbmmblu5rtZxDzG9k9XDJA0wQuXVVMZ3u2DAtwIhAMPHIc1xkGmigpheSmju9qV05iNmRf2iFyRf7EhVFxfq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22166,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxXlPCRA9TVsSAnZWagAA0VEQAJduRv02YEkJGPluNawj\nWXPeo4j2alPJZ95Sj1ZPCPNmR6FehUWVlbom2mANGyWjSeRK0VOQ1dH6wQs2\ndM6llcHMfxUYi8VBGd83eieWGphsIR0YiNf0nZSglvg1fHhPksiItb4Xoj+L\nDCG/5+DlNKe8tSG5LcgJfjRTgPHiybr77m7oFBMs162Xx390IBF6Vr6hVOw7\ncP24JS/e353EZBEpLJQLAjbCapt16wwUzTieaE7aQ5E1aRS85R+7/XUhWdeq\n5JmpGcL5aBBIZTzDKEf3ETtEsOvGpvJjBrweegMqeBSSlShY9VQSAt0rQ2kP\nXn1NYIXOJINt7qJn62l8IZffOKYDssfcs2AUA5eEweFemtQ+jGkEAacTXyI3\nPnq6yjMNIlayQfqxaEiTnFGj27a9mGvBYOxIoRrX+T7xyg+xhXRO/yFjr2ok\nZp8wvtUPudSo+x7+UGpB66FPJlEWgmZyRl6XDcuAfVcnoc8ZutVxl20cFGRr\nrhpQ46wgKTKMP3dWzy1dzgvo7rOc7QZg9RUATKvH+jIQmnrZwnRVisB4prPd\n0mmseFxKLexFk0iXM8j1OUtGO6RyPhvXwjGfK+eEYaKoC/bPOgLET2BSNVzB\nLApwf4HLej6p8qTP9t23uUTdpef72RKfTYrRWpjNhuYfpFJN2K5SlIc0wYPg\n6mKL\r\n=hZk8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"86a40292baea3adb58a6c26ed8c68a9a425cef18","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/rtl":"9.0.0-canary.fd22355f7.0","@material/theme":"9.0.0-canary.fd22355f7.0","@material/feature-targeting":"9.0.0-canary.fd22355f7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_9.0.0-canary.fd22355f7.0_1606777166715_0.9639207832587366","host":"s3://npm-registry-packages"}},"9.0.0-canary.c4ab98722.0":{"name":"@material/shape","version":"9.0.0-canary.c4ab98722.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@9.0.0-canary.c4ab98722.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f9127d593568f5e8600793e324a9239750d14bbe","tarball":"https://registry.npmjs.org/@material/shape/-/shape-9.0.0-canary.c4ab98722.0.tgz","fileCount":14,"integrity":"sha512-bQe8d3w4odgjPSx62d5jr6O+QYQCFzW5fdO0DSKiBVHET0uUhEUhFWd8174OTE7XfTDhQhxqKctiaQQkWfEdyg==","signatures":[{"sig":"MEQCIEPFRaB4ZryF3XzrKkYW1s46ZgjBOvuqlWwdggM0cV0bAiBS9Pt04E+sxS/hWPyb3REv48LCUZwe4sCrOVEQPpzAqg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22166,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxuY/CRA9TVsSAnZWagAAl+8P/3uCD6FM//P49g8tnV7w\noL/8ZOwABgd2y6LxoqrcTJPE6HJWVFR/++BBYzusojykPtX4BvaPf7+LUeU/\nZVIf2EQScE0DfCFVMblO6vqF2oARN/iW7XvnnH6vvXSeVZ7I+6Us4vd19jTB\nvR3eh75tA2pP7/nOad63JHuBmukRTWegHjn8VyAIRwlzsIhhWf95Ej9mI3MZ\nGqMnGigbJbAc+WIBrNC/0rSrqMbvLQwPQqShE2LpQTFP6GmNYaC5eJa6A1+g\nC6mt/fCmmmPIvsTDYVE/lfn93KSxy8dY1Bc1D3CJXDU/hmemmbS5/3VvBAkH\nQPI8jIeFAAgaiw94mnGjxVygbRMXGpe5GLMhXfS6PeI6g/g4orue6vtfis8R\nlvPFKAoS03yzQ1FTXLOkWAqRfZa5xy4DRf2LEOmV9I7cM0pb01azvs2aGEWn\n11IwCTy0yneZsdGwfyXgmlSmxzwBME9b0xQuOVc2/4Ip6MyR+DpGfg47sbIL\nQ2OOOvKmc2/pyxUuyLAf+Ha83CGi5dt/TneydSjzU8HiIA9iQLy4wTDBQrKF\ninfOAIJsTUe7LYyEaXJ9cW50iALJqR5iPNqoGKCktlDrfkeTHI1eOpt5X3P3\nWKIagC2eLyLhWGZtcnfx3yP4rQTXM0w/Qlr+a6VPI1i9MpWNc9h3C2kaqKoL\nz2+n\r\n=tftL\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"e6187eb74996c124e1abdcea72dfb697bdb1820f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/rtl":"9.0.0-canary.c4ab98722.0","@material/theme":"9.0.0-canary.c4ab98722.0","@material/feature-targeting":"9.0.0-canary.c4ab98722.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_9.0.0-canary.c4ab98722.0_1606870590613_0.9544814006948374","host":"s3://npm-registry-packages"}},"9.0.0-canary.977585650.0":{"name":"@material/shape","version":"9.0.0-canary.977585650.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@9.0.0-canary.977585650.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"617a246c36bfd4f2e51d96a0db2a8d420ba65be4","tarball":"https://registry.npmjs.org/@material/shape/-/shape-9.0.0-canary.977585650.0.tgz","fileCount":14,"integrity":"sha512-Cdk2m9l6YUYIozYXKHJcy9A/Pz/l74fqD3r1zn5GuJqr6SoMCAlOEvzFUEudygHG4zeB4WUfxIaA5D+SaW0KKw==","signatures":[{"sig":"MEUCIFEqbqRdlPbzSu4gpsvZoB1pgbHLCVohOMmEAgt2YC9yAiEA/Zt5f+Z58bfWR7QXTpTsmG9EUz/NFUdAAj0zQykfPHE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22166,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfx6ezCRA9TVsSAnZWagAAmbcP/AklU4YZLcGzkyyHm2Qj\nEAqeBI7SEPuu+DyDRZgEjZXdLpDaIMYrWMPhSZxpJcsoZtAwKYOOwQ21vx4l\nAv604ztvoKtXMr10PbbQ64dy883umtfhc8yk0afU3PuAOvvpskHFcWjNasQX\nScvXvUCsA9Cc+3yQl5O0CNUQaGhfNKYVYB6U6gTf9yfQi0ctd1cmtH08E+62\nfyg6MDiCWIgNH+fkT09m0ox/OwvczZ5lttplLd5AuYEIlsiGti3sdokq9Gvr\nj4hTFlLr/I/kLFyax+VvIz4I3na1naBnVXpVAF94OxBBCE6CSrLgkEG5Scpx\neEz5/XmPod12a5EZyypECGDP3skhKBRtZC/wLCJ3gWp8Ez9QV1szMdYUg9eo\nkBc+m7JC6uYCve7NdBTDsAkdF57ZgytHAWPcgdahHhGdkz0FAQibZpVsQhXZ\nCQrkti7tfh6T5jNmDmDd8Wkv1wjj96LzxX51SLO/gIhYJ5O1wT06rCURa8lQ\n65Yv1sJoGVTOJNF9OxBZtFshaKmgPev10zqlAtsAsmud0gNxa6XYxG5Y8FTX\nwerePbCezwic4LmDIMmH5gfVnAKJdu20a3auVam8Sid78nTpvYYQ6UQA+7UU\n5jU3ONNwxZmVuvg2QLf66BmJRpDNN3C+uatztyFPQXEYSJp6KCK9lF0TrshL\nxfko\r\n=+kBv\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"b008ede8c0d581314d3b967bd295990ca8eee38e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/rtl":"9.0.0-canary.977585650.0","@material/theme":"9.0.0-canary.977585650.0","@material/feature-targeting":"9.0.0-canary.977585650.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_9.0.0-canary.977585650.0_1606920114756_0.015435306163992246","host":"s3://npm-registry-packages"}},"9.0.0-canary.c7edfc7b6.0":{"name":"@material/shape","version":"9.0.0-canary.c7edfc7b6.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@9.0.0-canary.c7edfc7b6.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8ab6aca12698d53e9c79ba2b45af79952e099489","tarball":"https://registry.npmjs.org/@material/shape/-/shape-9.0.0-canary.c7edfc7b6.0.tgz","fileCount":14,"integrity":"sha512-vtqoX1CwyizjaSYPngls6ROJkWY2csYD8BHWcj6HqbCSE0HVF0U6KX3WFUn2Vd1X0cFECt/Fb+kJBKem4SyUWQ==","signatures":[{"sig":"MEYCIQDeF+uYduQhzcJ1AFesQGJlK0i13gniku0JBuCY2LmDRwIhAIZg7/jlgWWIfB4MDDs7eXv1RiIdYUReUZwbTPq+L8um","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22166,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfx6l+CRA9TVsSAnZWagAAp6MP/3tF6cVp8sReTdlYG6i8\n8cK2hMuVbkchH6QVDBNp6+NhbNq5C8ywVqJrCcdpXRrmqmGiSBJ6waaq6ujb\nMh8kUvNjFV1eB104TjgJ46ccXjTk/ChvMuuJ+7LION47FyzdfFNpUDbdUVee\n2OV+t0ysCwoOqZTEGGHui9PD/mPkFRYz9augwX/tJhKg8XFDxCaFb+z89jha\nluB8CVdbGMWHXT+vMhF5GW5buxHUiMirLm3de2WCrLDZzufc3HwJ2IyV8LK0\nb0u9KXXmkhjUmLgHDFXsd/tS6+/bCdTYet+9yJb86VP0Ng8M2vBhaF9VDGoT\nde57fUe/GTVbu8UcXB2mWPK2GNtHHsg30zUUSWb+CNL/wzrTN0LVAyUgXTqU\nPTdV77Hp+BfqNEMJbS97yaVYoe8uM3PdmeCVx1DLaujHsypF2iL2G8LmWpgB\nDnN0KfCnCIKEiFqGXIlGjOKp4c5qoAvYoEhh6mKOAnaY5AjFq1YugBWrdzwu\n5R+OLSZr5iU0rnypy0VMLSD8KhjOkt8QwkxSJIFlBhninFEAgQiY5T6ZRN3a\nYblc/PZgRqnZCs1Og2CWU6jHikc6tdMxf8Pi1u/hZwQV6vE5Fzzp9x7EBhnL\nfaZWx/ry396NPjasXRpSy6U9ng/Tt3iwZB0BlmEp5EYSqRpyVavnB1RJtZDT\nS/1N\r\n=MhBN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"791973660a1d63a77aa10d2bd0df7c0e6ea94698","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/rtl":"9.0.0-canary.c7edfc7b6.0","@material/theme":"9.0.0-canary.c7edfc7b6.0","@material/feature-targeting":"9.0.0-canary.c7edfc7b6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_9.0.0-canary.c7edfc7b6.0_1606920574009_0.74733069985699","host":"s3://npm-registry-packages"}},"9.0.0-canary.4f3347306.0":{"name":"@material/shape","version":"9.0.0-canary.4f3347306.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@9.0.0-canary.4f3347306.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"17e9973ac8e956795c518928788234f6d10afd78","tarball":"https://registry.npmjs.org/@material/shape/-/shape-9.0.0-canary.4f3347306.0.tgz","fileCount":14,"integrity":"sha512-vr/+BAloLMsn51oRfsmg/k+6KYZ8dOt6fF6hzsw/S/zENN2TJAOhR4EWVz/DdNN0nCaEa/KGhXhHYmQXxVyv2g==","signatures":[{"sig":"MEUCIQCO9hdQjbvUAIJjNF6qmAjmLL9PPaNhWBkefLk35mxzxwIgNrjeIqMHNscbzBNxpjitOxtq4Agx2rYtv9P9FJ/R+78=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22166,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfx62uCRA9TVsSAnZWagAAtGQP/14Nwgp1irsVok4bUCce\no4+D9BVVvuNkdzHG6VZlKc9dDXstiywymCVHcj51V3BX7U3Ck55KibbztTsS\nt3T91RbVnBZBUoeTPxLErDF23eVHD1U0AlPXQQ3NlZmLx2B7uWMCbe6RfGzl\n9vyoQ7bMA8RyPSlX1Dkg1wE8+hNTVjSEt/kuoLFVc3o5SyMGkXCPiJt7Sv5u\naygQpBHUOOMh7Qb6TpdB+ADNMdFy/ZPqttmwWm+i+bB+/Ts5CC4ZV359mDwG\nJ6BXrW7tZg3w1zUMfub7yeCsIZZBfbX/EN/ZJpHRf9BL6JVePAlpHzxFcPZC\nGxtnSjVK0aCv7N5NNOFFgmU4CvLqK+sh43vXojdiaavRWTLe2+vZnWGwzAZA\nWV+2RXKsNESyz5OyVpMrNExoDvh6H0z7cklEk26K8IKdFdl7v9ZwJAknYKkC\nLDtu3EW2ZYQRZWKMuMKmDMsDDWASpWgNmoyduHZqSavYqZSpYcBs/cjR1ryD\nxk9TJqz0fYeOjgEX5p/De1lurZiWbAqZ9M5zXD/fB+EkLt9w3kAT/M2+75Rb\no0cEczEfoGP8vycfGteOzzqk8IC7XmUDTgaLbquwYs2rqWBiVt9G1EmbrjUH\nxa5k8mFi+2iKsSXVsy6PMZpEUNwCksyPDtmln/QgUQSWUtGzxbQhJnwZ54kN\nJG5H\r\n=Fzf9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"31d08595c0470096709a4d5518ba7444313882e7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/rtl":"9.0.0-canary.4f3347306.0","@material/theme":"9.0.0-canary.4f3347306.0","@material/feature-targeting":"9.0.0-canary.4f3347306.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_9.0.0-canary.4f3347306.0_1606921646354_0.6045143447500059","host":"s3://npm-registry-packages"}},"9.0.0-canary.37fbae10d.0":{"name":"@material/shape","version":"9.0.0-canary.37fbae10d.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@9.0.0-canary.37fbae10d.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"11361aa8822f448a3d83d9c933849e70d6a037a6","tarball":"https://registry.npmjs.org/@material/shape/-/shape-9.0.0-canary.37fbae10d.0.tgz","fileCount":14,"integrity":"sha512-xARjxKY6HbBjn41ilGJ/YKw6p7qGR9RPxIVhD4t9bTIw9mJhiMUfP170ombZ6lS2WA85k6jiV+KgyecTy59SOg==","signatures":[{"sig":"MEQCIFzIsPG45EL8hD8C9dEzfcwgQcWoOrrANOgDadFQtqq0AiBGrwVjDIRkKUnD8Aoqjp2k4MzUBQ522CrDcRvIQ+FAGg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22166,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfx9n0CRA9TVsSAnZWagAAo+YP/3sNw77mH2NCcnnAxBTU\n0J3RntBMOopBAiFrsmVQFB3mK7Fibi2s5XqMEYAzKbckTJIwhySZSPC8N/9Y\nkS6v303NZkxxNI5/JUthkkvfkDcqeOfUH55BaBo53qFOaMQQDmaJBDRULgw9\nyI33MRynnLGqyT1tS6Nba4AFWJWw4CJ7VVIz785Pc9833Fk44cCzBAJU2IuM\nDCVA702LBsKrHLJ2FlzP2duDGqJyNTUqOzIQ5XQPscErNY419geu0pT0ZcKu\nwOzDLKOyjtt3ClhWgOMlBux6lAqvjA1mC4I92yq2UcWWM3zhB3cWN+lk89Yk\nx3Ieupuza5skTRBceF80VIGVNjzvCPM3nrSGmpdU0aGFEZeN2pfJhOe4qdEH\nlSjCZaEOVwHCX0/XN0PS0OmqwW498UCxomkIyf7+Bsfx4A2Iw03TN/CNtQ29\nFt05X6riWKI+NvIakMa98bLG7z8cVHJCdDK+cqdIE+WrfrAenEkd7hzJ+Ujb\nFVduSW7XmtTq6M3RC2WisvP8PR+sxwpnV+WYjgMoaLdiJhq7XcysVE1izUJe\nqkh2sRKyeulDwm9OuJ3+6ZPSwk7PhtrbwKTSlW6SFWP1avh+X2f3WEA61dFs\nv9Cz37C2CH73SShvJIJIrq3f3cb0jdg3I9j/2in32wjG5DaUoBUBc6fQvKiy\nsK1d\r\n=i7bD\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"104ddf5dd99e7bc09a57e2cae74614b7726fa235","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/rtl":"9.0.0-canary.37fbae10d.0","@material/theme":"9.0.0-canary.37fbae10d.0","@material/feature-targeting":"9.0.0-canary.37fbae10d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_9.0.0-canary.37fbae10d.0_1606932979744_0.9762170961446965","host":"s3://npm-registry-packages"}},"9.0.0-canary.11da3c0db.0":{"name":"@material/shape","version":"9.0.0-canary.11da3c0db.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@9.0.0-canary.11da3c0db.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f5f8aea61c01a8b9a8c9aef651872a6403b11b15","tarball":"https://registry.npmjs.org/@material/shape/-/shape-9.0.0-canary.11da3c0db.0.tgz","fileCount":14,"integrity":"sha512-o1g+YPo+H1G5cp6mn17vhK+p91twsvORuDpxgAljSePXFMmQ4x1pQfVjETByTVz567cw2o8RgSCpXxuRip85+g==","signatures":[{"sig":"MEYCIQCoP7TS9mcC50XMOmTHOhSaBuuHttT4zvWV8xzqaGyfbwIhAOGH4QRtR5jYpLOjyodHt2smqzqWWYzosUyb1T9sY2y7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22166,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfx/d7CRA9TVsSAnZWagAAxcoQAJreSYhnSIjQmDdupThm\nlZET9j7AvQT1HU3rDdIQM4Oimou7Z2p2+bf1vugPaIkWyR4O2QtKokrFXkKz\ndkdOZDuy0vzlfP7UQyQp/Lrqfr5AssXeHttDMI+gb8Q2DdJpZLkmDncCnOUa\n55r6dcZuGpmpAgq6xJbD3w2Pwj7I2AjQYPhUZYQHM1wBXjTfrhS69E4rmXZE\n8He3gFC28WlLfddWq9ipqonZV05hBgYRuTzQluBCP0ognIf+na6j30sEbEBw\n2Y+XFrwx/++R9LQJXrnvfma0NDrQEA3oYPT3O3cUDYjWTOi4nK+HMUmxWiYG\nuzYJ/hQwd7wXTKPVHuOP/LZKCxJ0mEjF1IdQ2eBElzUwQF00ZAh6RCSMQwS2\nLoCd0RM+eu4Js6TtGTViUbqjXnfwbLe/BSYe4WmYNOV63klCxuQdx9Zh0u6W\nIfX8k/atxMsiaINxTIvs//rb1OBY9LmXZ+gzHmGr8DK8yVdocaNnRFi/DCo3\nmlluYFGxtzS6mJtgDS5vw+22NfNfZz4WwzhcA3d7QI45FYNXODX7WcXvCr+5\nzCr4eAUtEwaHsF/XJkFuPdtpVuZ+FfYznonyfY/p5wcR0NQP4txogz/TnFPC\nZ/zLF1p7jNJd9rTLyrjrKmOQpxWstj0fZFYK37jQkqQTY4psfqICRmscTe44\n4wVM\r\n=lLJ+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"db8b5af79bc8221682000a74eab75c30395590f1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/rtl":"9.0.0-canary.11da3c0db.0","@material/theme":"9.0.0-canary.11da3c0db.0","@material/feature-targeting":"9.0.0-canary.11da3c0db.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_9.0.0-canary.11da3c0db.0_1606940539025_0.16795255015415012","host":"s3://npm-registry-packages"}},"9.0.0-canary.489d4c219.0":{"name":"@material/shape","version":"9.0.0-canary.489d4c219.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@9.0.0-canary.489d4c219.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bb27e91b1615d49a89aae61a97210f22953502bb","tarball":"https://registry.npmjs.org/@material/shape/-/shape-9.0.0-canary.489d4c219.0.tgz","fileCount":14,"integrity":"sha512-l/bIXvfOiaIiES1E5eEhYqpRabhJG46UwTYKb0JTBenPSS9wJ5jBRmsJcMzyKUua8B/GN5WDu8c9uAOlRSbBKg==","signatures":[{"sig":"MEUCIQDj2WcHC3QHBZFWJ8k/ASfQU8F6BONTDE+SF1rKjIgsCwIgZGtYanaOQhsafiHamaUPmPg0Ut2UL5FgKCDaMlUwwNw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22166,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyQRdCRA9TVsSAnZWagAAHOQQAJuUbWl7+MtBvJCRhbsG\nEj7ei1Ow5EgRbSVLicLFZAHFK0tJjemKCXUP5sZ9Fs30zekxq20XG7dSQEw1\nkMuECVFighbUUMHL0CtznTcCJ6NDgM9AVqfNl6J+n9Pjj6n5k/mcUd55qR5i\nUn2+88wmuYCfdg4ifAwm8c1HZEUscgw8CxR8AsBr6u7E7SRVOZl9XG6IjNtq\nQ6jHDiRDxtew2AcqwqMkZaikFz+0ArmUMagFsiBHGH099r8LD5qnxsqxYKAI\nAQCN1qRmRqvzKEcXZxQTjksw1eedexMrJxr0HGX2FpmU7SWaFGbYgy8sIHUr\n07l56kjGrpjOSdx+DThI3nykbDadDtrwLQM6OYxIx4e+gA+XLhiXTLtqYk1J\niLlg2CtKsAYpGb54DJSeeRbbAPXG7TtNDCmxnyiozjiOiZejguB6J7P9y03W\nA1IY56nT4mUVZwVUu8d8KxAb3Nv5NgqgBq+Ldl2RAe5vaFaSf14n4WAWPCaW\nS6ZbhUbJPFj3gAfrZZLhvEKN9QwC7UnG3DCUI56M5UCNHUqsEAf/FsAdQPXm\njsIBFlIv6ruRk5Jbyf7QQ/mjYe+iLVom9tevIqlEFoZzef1UV4k6Zp2ujKOi\nSxZv5YG3Su4XvKruyeCCAm0jldNw346Ldxx6s4AGen/WVkHEKpshVLnqCzrh\nSgXB\r\n=uu1L\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"b1c4ecae655bd87a48f6065e7c292d4b30cda43b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/rtl":"9.0.0-canary.489d4c219.0","@material/theme":"9.0.0-canary.489d4c219.0","@material/feature-targeting":"9.0.0-canary.489d4c219.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_9.0.0-canary.489d4c219.0_1607009373035_0.9118304155252748","host":"s3://npm-registry-packages"}},"9.0.0-canary.6557a69d9.0":{"name":"@material/shape","version":"9.0.0-canary.6557a69d9.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@9.0.0-canary.6557a69d9.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bb7f8524325847cbc9f7d6f54ce484e8e4bee9fb","tarball":"https://registry.npmjs.org/@material/shape/-/shape-9.0.0-canary.6557a69d9.0.tgz","fileCount":14,"integrity":"sha512-bd+qXN6iF8YekxHKk2qzS5UepAUZ2jEPM3Nc2eDIGu2YFBYXK0GBA2WiDFZG0LLu1PT4ImI91iAZZ2YmFmA6Xw==","signatures":[{"sig":"MEYCIQCv0dI4ikcJQNrjMeKnjgDBtOJAiXbmscUS/rKjk1AZUgIhANcm0451sNqXIaQHSWBOCIoOXmsIea2uAJRbYy1+z2Cn","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22166,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyQcmCRA9TVsSAnZWagAAsagP/2D0bdahQcqUYKjMqEwt\nAMFLFqAxuC9awoZfNo52B9Ml5BB577B77OYPBkzJ19HJuFo5E2EAIzvMJ+zo\nACTubjqLgbQvvB4DZ0KvbRsz6+UnJVxqfVuaGlI4KM0JmR8vjfnWWQEh7+Tn\npzYD2ZNIi0YoFTuLarbyrO2nnKRNw7HGdW7ydI5qnfcBCuATx2TikeqvL/M/\nrGutu7AVmjSiA6+sZqalVMzFDUMpKxM1Y0WWtfq+ReOTzmddfnEPk+iaA+ou\nCT30NYb1+72ISjiO0o3XMBRfsToViaDut1NvIysjg0rsDa+XHUmYDm4l0S8M\nYU3TWv9zl0Pl8KU53cef+Nzq6W66m5DDYUbARJ/oZFrAWOH+psJlNvuRrXSd\n7y54qC0IQUEpwlfnMvK8uu1nueOUFMPAcsDE4TzAm7PI/pqwU6j1PCcUw5ER\nfuaYmkg9mJJyfcy3aV/mVs40ZcKCElN0P1zIHyNJcrqzw27M9xi2Jni1OPnD\nSvWGQUCT77f52LLW2Cynj5ixvYY8n2gxNZDGzpkVEneMCwR9p0gY6ZpHKRx2\nbetsJOIrGUkIAb4fetw5RKwwj80aZCm8D1fVGgpJ8RcC0QGtn1siGugarnIq\n5KJ0ehijV0YE4GcpDdKEapuPxu76mHa0GerMdvOpwZ41n/q2FkeMMK1jaVSN\nOUxe\r\n=7/ce\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"55ff05f1fcd2efe299d07cfd81279127a6fcaa5f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/rtl":"9.0.0-canary.6557a69d9.0","@material/theme":"9.0.0-canary.6557a69d9.0","@material/feature-targeting":"9.0.0-canary.6557a69d9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_9.0.0-canary.6557a69d9.0_1607010085811_0.6569903534605834","host":"s3://npm-registry-packages"}},"9.0.0-canary.4ea1b7c69.0":{"name":"@material/shape","version":"9.0.0-canary.4ea1b7c69.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@9.0.0-canary.4ea1b7c69.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c78a9f45bd4565eebffaff1af3ffae6a1e4a695a","tarball":"https://registry.npmjs.org/@material/shape/-/shape-9.0.0-canary.4ea1b7c69.0.tgz","fileCount":14,"integrity":"sha512-TMxu/Tno6+cL5RzBYCt68xyMQ9Y+QnG2Hu7brwotFXWhWhwUWG4JOiHaDerMuzLXpfRAzWtbi3zWitWARTr0Aw==","signatures":[{"sig":"MEUCIQCQqPR+JbT9Rc5jW5DBrZfgsdzVEJOoQuZensz6rZKPBgIgeJtfXtH2FK39vkWIB7cg8wrArTlybhnP5U6uIEqp07E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22166,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyQsLCRA9TVsSAnZWagAA5aYQAIroX1CsTZfz5wdP+snc\nr1lIiG3WBWuo5YUToMZSK2RFkiOXu5mOfhTtQGQ/cPgrEg4ttePOvctFPuOJ\nKOivn79Ib//YXE4yKtvHivdqI78KELZVvQmEwRPTtkHYLF8Ds7t+6J7iHmCG\ntoeaq4YHyqONlL7p60NAuJ2B3zP3r8w/Ap56W7ZDu9y0OWhr6CBZf0aJwB4X\nDYbQtVdN/UGG7KOVp+f6f95VadDo6uVNWmba229wWdOhvEfwxxXZ/r76F09C\nXKcr9T0nytqsvHuABL1NLhzsgoxQlCXLcBm6JugyAXKGvGfnYg9D6RrsjTUd\nZLE0HK7Eo2qb4laY9VGPQNrHem6Cnn2B0+fWM783t6vyqQYE3UQF3dBsgqPK\nhi+qr6VCH4YMeomFTifVI3iBwq6b++8bKqsAtuOud0PSHGEMRyqu6aqjPZk1\nYlnEEV6ic5GiOxyqeN73cqqGu7msGfzSW86owPiTkFSUkWSa6fKnS96B6gFr\nlj9ub6CLyFlPB3iNQZc5MukXLHeJ1ZiIYQP28F3Bjw0b9kdNg7Hl67bp2Mgp\naAHIlBvOgTtO1KRbQb1XJu7TQS0tsQYFjQ6YvCQCgGnGTTiwGQPf/1UGbPYP\nxYGf+jDWYUQlnzZu/R1VsD2iOwx2yfLTAkg4N51jCJk/ekMp2cjMiWR+ZyNR\nX3He\r\n=xbgu\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"d7307ed831dded5d9e22a8faf595a7411258793f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/rtl":"9.0.0-canary.4ea1b7c69.0","@material/theme":"9.0.0-canary.4ea1b7c69.0","@material/feature-targeting":"9.0.0-canary.4ea1b7c69.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_9.0.0-canary.4ea1b7c69.0_1607011083332_0.03628260079968815","host":"s3://npm-registry-packages"}},"9.0.0-canary.eaeb78ce3.0":{"name":"@material/shape","version":"9.0.0-canary.eaeb78ce3.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@9.0.0-canary.eaeb78ce3.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3dcaf66961e094cf36c98bd97abd924206c87a48","tarball":"https://registry.npmjs.org/@material/shape/-/shape-9.0.0-canary.eaeb78ce3.0.tgz","fileCount":14,"integrity":"sha512-DZNLMCtmyUJ52m+HFemQw//Pyks7mikO9PH5qpvdAV2bv/T9UL5dSwhsgCHz1E1GaMVB2IkyO2AbZwQa4/1Jww==","signatures":[{"sig":"MEQCIAeBZLIor2Ki/lovKcZozQgkdHZUK2mcWCM85FbpGGxTAiACNmkUBx5IWN3z+fnwCCYKKv6hBFhttC0HWdEcZbYHDw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22166,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyRncCRA9TVsSAnZWagAAbIAP/0qoig5mbxngwAINGGsZ\nSVMP71ymOJaV8/bmvK9zVmWktiJqLPXglNGED6yBULgcrCJz2xcNp5BHt2FJ\nP9tAXGjyEnjNBrVKATxyLlSPbpLbmk7X+ImvRyTv6BnGkwSCrBkxioLrxGf/\nh3aGb7qNWC/gprPfpaA3yAmm1bhVK9SGCWFH/5o1BGZo2PtlVTh+d6J0blAa\n/CihmPdOE+9VMsnzdCnsia3huA24+0LDwVjM1WLKwXcUowmvIoZ3atgEV9wa\nIx3I/lPEWxPWH0ZFPVgeDhQrgLgipbD83QaCnk5r0Sq1DTbQX15MYqqM0R1I\nu69GERZC9JuPYYI0fQmLi3aJ/UsiKuluXGGbSVZhSRm0aG1CgTPrTYhRRi0D\nLXP4t6uvgQTseoul2Jo0ddnR0ukSRSc0gYvYUY13/kNr1xEai0QbxQ5Xxmkv\njfXXcF/S7rdJYVayCfArvAXNmXmvdvQu+JVD/5RA1FOkED2ROrBnMzURYubO\nZSRWpnxE9nknWW4VU61HQDgyOHlC3qbPG84IRsb58djfbVEvonF2xqSJ8yfx\nPjm8xO+OwvFg64VUyqAGxZWQZNfbLGXib7Tz2gljL1Q4jW2T4AjDwtFO/QwK\ncINhSIClUwe8PM++iFv/76oOOg2m9Wyxm/+V9idQ8LaF9QHUYX9j+elW/wmZ\neYM2\r\n=8Sql\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"9902fe5ed18fabe2d289f92e75dbf17abebe5a80","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/rtl":"9.0.0-canary.eaeb78ce3.0","@material/theme":"9.0.0-canary.eaeb78ce3.0","@material/feature-targeting":"9.0.0-canary.eaeb78ce3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_9.0.0-canary.eaeb78ce3.0_1607014875367_0.9433550349162356","host":"s3://npm-registry-packages"}},"9.0.0-canary.1c156d69d.0":{"name":"@material/shape","version":"9.0.0-canary.1c156d69d.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@9.0.0-canary.1c156d69d.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6d42d7004ed09b4493abf3f732bb855d3c3996ed","tarball":"https://registry.npmjs.org/@material/shape/-/shape-9.0.0-canary.1c156d69d.0.tgz","fileCount":14,"integrity":"sha512-3NPm+LNFfY4xsiwy/jo+kY3WIFDwlVyJhq+eimjZ9vpG7STBPyzi1LpiPKvsrk0rmvsy3M0c1alM8E+BQ5+UAg==","signatures":[{"sig":"MEUCIQCQcar590WC0WhcWxtT4DPvFN09HDisRW4fsKNJDOCgPwIgHmwpMqLM3na/BOaIalMYRAczQ3bAHMuDxbx/NQBLJ08=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22166,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyU44CRA9TVsSAnZWagAAO+AP/jpAXGgxEVBZZXCQUSLi\nq0Pd8CW+fT3gTLUZnEW8ZboOFXITErC0rQ1xdVXN2wOQ2o99YfDbrCdOBJ53\nUWWY6Mhz9Bu2dq6ZE+zeCDd6G1ljacoZLxXWx7sPcpH+kZXZ7COhDmLYrvA+\nfJ4tkMLzF40ep8bis2IK5wHp6dCD2CnN7pS5ABThVhTYjn7yGfnq0KOzpejx\nOSohufOcRD6LN0K+0/1SODlEnTW2fJTdiSXvbjD3k0BqDxgLD5O6odSjS6Gg\nFNEo3DUvZvwvvL3mCGVBPZfmI/7cuBh/J9OTKJOETD+UTJnz72po1bcOjSQD\nbCc3PdJRFzTH6kxgy5zDbsEIZ4/oKHVqbHeAMAkILG/2bNeW3JKEX/XJWekt\nw6m59oUfvBiuHUsqh6eDOr5mDHqL2oc6VRezXLYmp9I7BV6/rvjw/y3eT+/i\nM6NOVSa3Tc+WqtiV0OGRMFaqZ7MLcVeDFxv/aCZ+Xc6DvS7Uw9qDX1Dkenc6\nAo6nQ/4nRpFPvrh1rBZAeKY25dp0EHRKCub/yT+LjJ4HHI7KPn6WOeGMifCd\ngl+3Z1jf56QWxxiY1GPjN3kDZQLnHHeefmwg6g/W7nsOPCty+mNZDP6EgPGK\nKdD4D0IrlG55CXf9qqyNVLZJKobDy1DfCGC5EtKRUBY3TOP+nfqZdQXXA0wI\nr9o6\r\n=RY/j\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"2239befcb4baad98eef5bd67444b0f759e58a812","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/rtl":"9.0.0-canary.1c156d69d.0","@material/theme":"9.0.0-canary.1c156d69d.0","@material/feature-targeting":"9.0.0-canary.1c156d69d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_9.0.0-canary.1c156d69d.0_1607028279827_0.18666156734184702","host":"s3://npm-registry-packages"}},"9.0.0-canary.832668d33.0":{"name":"@material/shape","version":"9.0.0-canary.832668d33.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@9.0.0-canary.832668d33.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1cc3d6047f3761c17384c1c5f397648895b9b36f","tarball":"https://registry.npmjs.org/@material/shape/-/shape-9.0.0-canary.832668d33.0.tgz","fileCount":14,"integrity":"sha512-Tq9683kqR8aKFZRTsCpUOyUgh5/2GIXwevPwQTi6XRYM7g9VY7ze6ynpIewhSduRbBUgBhh1SeTzwWrDARbC5A==","signatures":[{"sig":"MEYCIQCGnnODpFTjWh194b4SBBAlOW+U0hBr10m0TYCfdlfVOgIhAMG0Y3uFnNBtl2rXjXPsuqracWfN1oOqtwlg+INf3x+g","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22166,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfynp+CRA9TVsSAnZWagAAR1IQAIVqbKKLQTWcVv0SPE64\nBu8gjArbQ4AmwDp3fa//967nPNS9rEsXZsjfKybmB7WiXI0W4STel13t35SZ\nSEHyZUTc1BfhkczyrtA8QFqYb4GbJoofRJzB9SGVjUqEDan8YbljTsAMXWp8\nrJmwxbR5w18KjBPNCKWnrKUZ07Mf33j83wZXhagjshMwu/KNKkNx4B+bFIJ9\nSVkXtLq3SEdQGFeU9sl1Fo/FK9gXvul03+tWs8uCZqokCbr9Gwk59LMDnzLm\nZukDaGLzG8UHyGhM55siV2k+Ryq5KCNCmHCZMIbLxrHFIgoSKS9MFvVBO0Vf\nt3YYEyaZYw6Q+kko9zRVH8JrVn1zAaQpUzDYxy9wXhGRT7uNZ13ziam8Pmrz\n/qWVTbjwqvCDLmBXZeNc+53bFo5iMgI5/r+WlLtnfKdTUdNutdRg6CVgmVrx\nHJB3dhH/XeeedBIqGH55g5JPrF+tKDICDUd7Ff9kuZkLgwZ+JdlgdwAY9fn/\njCaCRsX2sPDSZeqe//FxPvdnbnHxluOrIbwajUC0Gz3s7Yl5h2fV5cun5WTh\ns5l7NTFk8+zb/G3j66g9Urkqwoj53yM2yVH04WlPbx/r6Ql38/nXem3N7set\npsIDPiQrlJkXSrTtwv1c7EoRmZLBTX28y2y3/4IAYy1YN85QHuA3flVM24sr\nzJf2\r\n=gTwi\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"5744d71a59950726441cfb1b4e3ae33706069b94","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/rtl":"9.0.0-canary.832668d33.0","@material/theme":"9.0.0-canary.832668d33.0","@material/feature-targeting":"9.0.0-canary.832668d33.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_9.0.0-canary.832668d33.0_1607105149577_0.21447179235465064","host":"s3://npm-registry-packages"}},"9.0.0-canary.4321323e4.0":{"name":"@material/shape","version":"9.0.0-canary.4321323e4.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@9.0.0-canary.4321323e4.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"df82e41ca47615d15b2e5345fda861de208c51d7","tarball":"https://registry.npmjs.org/@material/shape/-/shape-9.0.0-canary.4321323e4.0.tgz","fileCount":14,"integrity":"sha512-iKqwJ1ZWx0pJoy2U5PBJ3x7827btPiV9rNkXYBoOznfrIIuI9GFJbatHw+hCrm8su8bn6aTSKuWnVELm09e9Dw==","signatures":[{"sig":"MEUCIQD7J7p4d7teVKdCT0GfPeIQmFpFuT0lQA2tAyYc++TP6wIgefPenJCJq/bwWq20CGs9kvQyVq7VUNojmfD2SVPMHxM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22166,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfzhH3CRA9TVsSAnZWagAAh0AQAJTeerpyFJIGeqy8hsmd\n+tlClgdW30SVNfCT377B4gvwvw+EUDz02KvGELaHA3PrJPteN03k9jv6ko49\nXqklGKcnxiwIHhEvZKPGsszyTxm0f7aYDbbfdrzVAmHONNfus8Rre3EaMQtG\n0hvtTQK9qTsQok4+iM/Lpb2W6AIQFsOqnXT3mCdSMdZTA2AobutvDtHLVmL4\n6eRWa7ajKoG0YC5RtOwf2+mgmeEbNhdU3n+En5tC4XC4wn79yY0MjyN2IOPq\nkPAUfp85hrhmfryjk/6j1shx3AoIuQoZI6j58bt5agzBq433c67+2SGBP1SO\nrEh/6zlWoDJ4YYtHlV/E4PtulqQPiGXsAFc9rKBYkwMlBv0s86GA2dNaaqQc\n0TixFUJ8imssUklWOvYc99TG26IjBjcpJVXhLspqaVbAJKPTjjWIodaUUUej\nJBtL55hDNvU5QOJ7aIXn67gPaJVpkwU5w1PZk2EhQt9ZOGfDU1JXW7T8MJcM\nwV2XSDhDOC6HE7fzgHj6H4RuZEkW880j5x4JsXvb6hYtDxoeaky+r9ryvLm6\npy7n6Xdnx1EwCkxJFKhqHqr6plTyq1hZ1JUH9D5pxwEcauIir2ONkkXvLN6B\n/QwXFD22SysgChLZUOuE+tVdoCzQYE339GYs+/7bly2bB7z0g4rClQPQe5iX\nxIMZ\r\n=dLN8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"a838a6bc72ee56a967d493a841d4c69ace1f3f13","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/rtl":"9.0.0-canary.4321323e4.0","@material/theme":"9.0.0-canary.4321323e4.0","@material/feature-targeting":"9.0.0-canary.4321323e4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_9.0.0-canary.4321323e4.0_1607340534946_0.03067665237529127","host":"s3://npm-registry-packages"}},"9.0.0-canary.2d5f32d41.0":{"name":"@material/shape","version":"9.0.0-canary.2d5f32d41.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@9.0.0-canary.2d5f32d41.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a1b0c278ac2ff1367b6bc256a5f80184dc27e4d9","tarball":"https://registry.npmjs.org/@material/shape/-/shape-9.0.0-canary.2d5f32d41.0.tgz","fileCount":14,"integrity":"sha512-Pxa/apNVJEo/6m8Dke/aRfx5OjoCe/MVW1HeJVxB1578n/9tKBEqmPQ+9QbhYrJFo2WUCOo3IYjynUVR3EzMvg==","signatures":[{"sig":"MEUCIBc+bAIPMD2m2XDrGtgRjeLr2e+46ijubbY94nYvyDmIAiEAikFmF/2B2SkaWXB8OcKtBklixr7EjJhFgNQQPjGFHi8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22166,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfzltNCRA9TVsSAnZWagAA1foP/3jJ7nEmm0MITkzNiGSz\nrA/fnIcVBvG2xr48tFETPKzVV6ZM+G0F3F/IGx7YhutNfcsqDHvIl5rAhlus\n2fHEI/3DWy0KwRz0YNDV6EbrKFLoaOLU5QHi+x/T5oPs5tlINRTuoRXtc+WW\nS24spIRLfsNWBqIoD5oQGZejAtSWvNirJvJJWNznvs08dD2fI6ipz65eaw97\nPYXwEZS8yHdrt2KhLVrZhYxoxEQ2nFgXvFzhuNieJhCDtJHamS+/5gVlkL4W\nb/+tIgtjx4YM28hh9El6n8mTbBowUzdWQVBueC27OgP/YJ3eg/lnP2t/vHYm\nJCjoNk/ILHhNPvKHer8FjLQfiJBu3zr7rHrXOB1qTIgKCEbyhLgIN+RVgvjh\nqrrpMzM4SGP+RWwZ/sp1yZLLiPwwx7ZXXvvfgK9q6KXK+LNk7QtUt7UwKo9p\n+P5BRpr07yX1Znx0tAtI3n3k4MZEmt0+y0DFy0NhaOhB5VWgFipk9hyle2Py\nrViyXmZJk+6lps34T1iVDmr7q8yfICXDGbYo6dCjKpEs11vADXxhopr7+W1F\nnkjUo02v5eIi2Gn7C/OusxrnreZSeJJzwmHqekCzeg+rEooZrWIkI8r4jczY\nwxHJrFVYtD/8jGXi68HpxuMAak1ZlkY1y66kywhHDZwfSLMxnsj/bnScBEl9\ngvaI\r\n=t1+J\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"2c385d3016a738d32bd3c03bcc91bccf82981fed","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/rtl":"9.0.0-canary.2d5f32d41.0","@material/theme":"9.0.0-canary.2d5f32d41.0","@material/feature-targeting":"9.0.0-canary.2d5f32d41.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_9.0.0-canary.2d5f32d41.0_1607359308713_0.3940571811739555","host":"s3://npm-registry-packages"}},"9.0.0-canary.8239afc64.0":{"name":"@material/shape","version":"9.0.0-canary.8239afc64.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@9.0.0-canary.8239afc64.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e516e33123859330eca3e20d58592469b485553b","tarball":"https://registry.npmjs.org/@material/shape/-/shape-9.0.0-canary.8239afc64.0.tgz","fileCount":14,"integrity":"sha512-PJsmCYbBQ1ermXTEhnPmdOKpsPtI617m0+50ghYEeoJp1p/1iESu9TmV1naMuUt3e1+hzVimUwBV9nQ8T8yCtA==","signatures":[{"sig":"MEQCIAzHmBpGghwOwO22EUyDMdKr/7x394DbDHh7ytDQ+M68AiAGb3altwwfKkSus32u2Qc11cNqR2Arsx38uWJhkEEcSw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22166,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfzodECRA9TVsSAnZWagAAtsUP+gPJrYSFED/opN2mG1oa\nHx3l9FBm9MCht++9iD1OnKAyr/kUYfmesgNA/0T98jMf2HsqvuWP2OrhlJ0R\niVpmFzaXSUJg2/q//VQEmXU1khMFmhug9sVOQ0vU96RvuFGudSZ1Oy5ckGMX\nY1qUb+bZIViAcJ2MwAQTUCE4v8PiQ8Mt47fNr4uUfP5Zo+b9KZyJVjimgFve\niUO0OJS7C3tuzzCelgVV9I6g9J+E6kf7Pa4JQQJKBUaHp/pBusjQw/mGr8d2\nK/6mWRSxpfQ8dwuNPsqa5t80MH9y5ofI8uSvjGnNyRgeWGFU8U5FjoZPPr9d\nuPkiYwKpJrVMkxINSJF9DNK9l9MUhjE7/pv6U7XkbnHajM0GQyxNI7w+wDm2\nB3dKNS6hCg2VuHsLYQRP0alaNnJJ2wI16JsoQk1KkIca+zNe1JeEXJoaZOq+\nJGvbA10uNH0a1euxRATJQCHNgWXAFi+cBYlD8Sr5sNpLK40ucpSmm1v8Js/z\nkgpsNCvC2FjJMIrSg6Ikb/VsPvxEzoKx4xgU0A6+Zn82EuS587OQiRxZB4U4\nsKuMwmTsyl7OubX+DhLnBeF2GlTQuO09ssgPp6nZf1LX15gt3B/NpScoReEi\ne96SAPvaLfOUwyLc5n8CrnzBe44AcI5afTg9FENtJqKoVoXfWLzRm6sBDOHE\nD4JW\r\n=ljOk\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"3ba24284e7fdc10c5aba869e2a2d3175867e0f15","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/rtl":"9.0.0-canary.8239afc64.0","@material/theme":"9.0.0-canary.8239afc64.0","@material/feature-targeting":"9.0.0-canary.8239afc64.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_9.0.0-canary.8239afc64.0_1607370563602_0.17764290664130367","host":"s3://npm-registry-packages"}},"9.0.0-canary.6871336f1.0":{"name":"@material/shape","version":"9.0.0-canary.6871336f1.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@9.0.0-canary.6871336f1.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fbdb0eeaeb171088a28e5be08d1def6798bc37b1","tarball":"https://registry.npmjs.org/@material/shape/-/shape-9.0.0-canary.6871336f1.0.tgz","fileCount":14,"integrity":"sha512-pcbSGgEvZkkprFyt+WyyuSEUmlkrD7a5XiCHDONn6DzMj7+Q2vicvKjQH7gPwUgI10ZfssZfMtHSziU8SVj6yA==","signatures":[{"sig":"MEYCIQC2X343bB1a2kfFwn11hO7OYZ+dKbYoKEANTZEKbg7x9QIhAP0StaYr/Z0utVYwIHw4pdR4bG44knyFVdb/4hWLvXSi","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22166,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz6NTCRA9TVsSAnZWagAAPVkP/0UDNUWL9BwD43EXFe8V\n8Mob2H5Sr74qr4KbmMYPGGh0c0VGqNZVtDtJYqaPc12B8L/4SwDWkGAijHk0\niH7KVHnq0Ooj/9bRuhPESHyOfESRMePZo3BA8Gnr8A02U/ODWBzSAAsh+2EU\nzerb1XsNKxs0B+xRn+Vmf2bsC78iKBGIFsaCEKmkIij7ZhK/Hx5E6TzVz3ZA\nnif+ElzWawJBfJfcSEiMRBIZ3vuBO14Zd1OzOexjCcG8ClZJQeQzxfgYu1kA\nyrAXsHmmfbihgqy1epzN4QSMNcnK7wQ3Bic4Ihf82T9+LZJreztDPjS143pv\n31SBAWjXLJx0hZOAEf7dl/jZMdzvS4gLosiuLc8LOfuWvIVYBHl4tXzHJ4yG\nucwzi/dQsCpvrrxZBprsRAc7lPpTQxXZ2tjBse5mj+VEWzEw538y4eSO8PXq\nME1y3wkJHIEoHc1esrydsoPnvgTemj43j90RGw4P1++prTnqqATg5csFmdoW\nsI7yi7Y8BSZYcWbSomsTk8ms6JtYXCkZk8NIayJoL2mlPHNO8IcbcWqlYuxR\nBKl/wJ72gFShSPmdDtjdAaA0ASWR6BvzJmnPhYnUENYLZExlvKog6OGNf5t8\nmt26bnhPw5lrBfnFVMCOYJ4IZnZ6664qGf6FFYDpoWf6YMb3Fb80jNq7Z2u8\nGY3o\r\n=lhfH\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"aed20b07d4f2597c382a6ce4b7c723f6df0c3efc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/rtl":"9.0.0-canary.6871336f1.0","@material/theme":"9.0.0-canary.6871336f1.0","@material/feature-targeting":"9.0.0-canary.6871336f1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_9.0.0-canary.6871336f1.0_1607443282624_0.2237638470382417","host":"s3://npm-registry-packages"}},"9.0.0-canary.9f718da94.0":{"name":"@material/shape","version":"9.0.0-canary.9f718da94.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@9.0.0-canary.9f718da94.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0cd1102e4021fbd4c146430d313d0d168425e256","tarball":"https://registry.npmjs.org/@material/shape/-/shape-9.0.0-canary.9f718da94.0.tgz","fileCount":14,"integrity":"sha512-AFZD+Vk1e4GwYW1VNOH8PqU2sYTsv06qiviRHkR2tyyGYKKUmf6+6eieLhNdioAjkBfSEWouxxnxX/lC+BUcmw==","signatures":[{"sig":"MEQCIHCfQlnaZrm3nlj6ELsqt5i0j3W1GvlEs0Ql87NVUSK9AiBVDh94IDESNItrUihj14BRvvMQBPycNvtfcKCSOqbKhQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22166,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz6YVCRA9TVsSAnZWagAA/HQP/2UjblfV69mxk0rgVqGN\nyM9QL6cAXIB6ZBfi38cD1NmfSZ5/2vMVorrTsCPQ6EslybG3s0qQHX5cfPA2\nnAVzGoRwmL63oCEiQ6YO7+4MJXapfD8K7No0v3Gnn6JdZ2LvFzvi3ddkzmqL\n/OXJbMJWl/smyGw/zpW8ZSbrnyGx41g09LoaMZYuTFu8jwzKP3vPNmsvM8cc\n5vX2fZATQGA2riulETNE9f4Y0LKiiyDvqt0SbpfRubhFVYjYlG2p/DFyzy1p\nG3XnKqg7WXjhj/vMd7cCNfFuDtpf8HIsMfQlfxeH80/9oL+nxMuZRTSS08t5\n4b5o2SjNMx9iVxXFIail+wSofbLmktZDR62NcCJNOO9/tah6hhGCzZ1H/4bC\n3q7kGUYpKjAjLw55zvsNdH/phuoSfGO+pDd3D2uoHjk/T+ySwMBOvNASyDDI\nwB3H+jonxGO1BWSBqk6siZyjK5eFFBdLGC76gs4HsYFXw9ud4GfkJeiv+PKB\nFmwEWhlcGFjJmo3bLnaxX0qejDeruKrdeEt8USTMU2qZYinPXsf5zeQfF6Xn\nPqudrlic2Dl6RoGjxhRvmdc67gbfjxLbL/N6V4R7WGHwTmG3BY+Y7hxALW1q\nlzSbZT6NcUZfTI2B9T4cLEVlHOUhnGrvXFJ+Jn28TK9bMFM8wH0Me5zpi7q0\n2b6F\r\n=dI+x\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"7fb6692f329c5482f22dc9fe691a20fe4c6dd38c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/rtl":"9.0.0-canary.9f718da94.0","@material/theme":"9.0.0-canary.9f718da94.0","@material/feature-targeting":"9.0.0-canary.9f718da94.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_9.0.0-canary.9f718da94.0_1607443988734_0.8041001866370308","host":"s3://npm-registry-packages"}},"9.0.0-canary.1fccb1418.0":{"name":"@material/shape","version":"9.0.0-canary.1fccb1418.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@9.0.0-canary.1fccb1418.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e907e6c6a1dfa892a27e74bee11b383da754a78d","tarball":"https://registry.npmjs.org/@material/shape/-/shape-9.0.0-canary.1fccb1418.0.tgz","fileCount":14,"integrity":"sha512-dDL3JlXz9PuZsLcZfQ7Qofm+BVlKepgRMJ7lGiA4+H6JvgvD40Az5XjDoaf3fIFwZ6Zzo2Krz4zp8xWOg7Iq1g==","signatures":[{"sig":"MEQCIBq1S+BHSUlcC8Y9n784ErHrMo1ifY1GgMdb1htTODzrAiAGKTjkXWliw+U/wQ+9oXU9aYYm+ilWZ/D51qkMXRQUJQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22166,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz6mcCRA9TVsSAnZWagAAErAP/2TAOicnZ17ktBOwSIYM\nmBe4dqPcmshsMgXzXonrO3gD9A84R+j0wm71s5ixdo8n2gXXeF6P7wUYJIyG\nf6jxv8ghH6R7qBxJD1rTpIxo0hcudjN3TIIAoli2P5Z3tWHGKAO6AmdNvsjT\nrXXayfYq7yHLD/bRzk24QSZ7PB21BmmOSFZ+rnBz7g71Nwng9k7IYY4rN4DF\nSoFLvubn5Nc76v8wPtAvrbHPG9r6IVP4En499RHVRNgSiPydV7Tjm5aUKg72\nPPUonyHt+fOW6Ne3PoUVqA5VTlnXIv66VqhbU4fG45CX3p8vX1zxPBNusDCd\nAIgPP42EIcpEV4drM3sS6FsT/IHW+0cg7VRtc8+ewBy0rjwE3Sbucowp7aBS\naUclvpPzwsUcPwAyJP2M9wm9ZcuVh0d88VDf4zH/GLfTaIRLwUADWkUxo62J\nf3BGPrlKSLi33hmJIQ7uvWNO23tATCQNcSfyMAe4nQxmA+z4leHvt1kS3tH1\nsDRfGLbkHWZ6iLqbfVNCOyC8YXZVJ6j0M1awXzW0nvsSwYVCj2GyWyqRpGDi\nVqjDxmZO70sEnPcGdPWudsq4q9yMdCAPhiWbu6prkbrPtoyxf/KD8ueLf6gg\niUtfekAtgbU6iKkm1UdopKoC7j+5bEa6xoz8sg2jXSHEeJkPfy3AYQmQnnSW\nEdQm\r\n=X7Hz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"f9dd96ea7afbac37dca91bc879dc44ce4523c442","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/rtl":"9.0.0-canary.1fccb1418.0","@material/theme":"9.0.0-canary.1fccb1418.0","@material/feature-targeting":"9.0.0-canary.1fccb1418.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_9.0.0-canary.1fccb1418.0_1607444891636_0.5502254009670347","host":"s3://npm-registry-packages"}},"9.0.0-canary.afb68894e.0":{"name":"@material/shape","version":"9.0.0-canary.afb68894e.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@9.0.0-canary.afb68894e.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cb4cbca36068df978300d3e25b3839064b4bc2e5","tarball":"https://registry.npmjs.org/@material/shape/-/shape-9.0.0-canary.afb68894e.0.tgz","fileCount":14,"integrity":"sha512-HFObvbmPaYyUd27gI3QlwxdIF56BZBkSRykgMRfMPu/cZ8cfeV6/V6U7docoJReRCkeIAnecMcV3ClyIMgexCQ==","signatures":[{"sig":"MEQCIEcBO2nQ6hcp9kWXK/nS8zl56+SIsgY6KNBhSEpQQiCKAiAEPL8od4fRlNXz4L4Om20aAxv/xbAL9oK13DLVTdmunw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22166,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz6qKCRA9TVsSAnZWagAAFa8P/RCrr4scuYwoukfyDCoh\n/mqQ05w720EHmczmb1fugMfzTrkMobvSf/597KP7Otvp0ojfN7/ug/WLpujW\nBLt1eQ3y/ieXzdsE6vnjl9Kvsy3BnxeYVlaGx2TFcRfxjviQ74yjXl6qreMj\nUCu3MoOe3XYAFOxqFXjIrprrpNIMQ6IyLIsTTuZCO/z3xzHu7/uyQ5Skw9pa\nMTrd+Rp+3cK/EwIIijBxVQagAnvnLIwvRy5Z1kMtBNuakWOY6zYhXGvIdKzJ\n4U4dmt1kLEONsAEa9kOR8oMko+/RfX+MEstKBKj53GBSFtfMdMM+fp34oR/q\n6AYn0QpsP0hIZCPo3OL55Aon8KFhZSYW8YLR93cdVE6oO1YO/6VQKKkwMbsw\nhcSM68p6EJWrN//qew4suPehCREUZVNxBwklS0jkZwI0SI603/lhFGMf3Sbh\niXTNx4qrNefo/nzWaQtBOUSyEOQOqD6T5+1v+WEAY3B4FXuC7aiGJoXUhOGg\nQuBPQK7xmqBIjh/VrKZxknAyAkRsQHofBTZOKia62RHOBBNfcK4uBZ5jqoH1\n9MzOyrebgv0yrvdZPxBNuulIccJ/dmhf3GPP8u/4ja6Sxm2ftURycaDaW3Df\n5cy9sdSNYr3POO0BFt/8ui1sUnr3FYFfJPnJU/wAxSKOUl95tug/Lb6X/N+d\nwqLH\r\n=qUWP\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"8a3ec1a501083d67f1c342fcf5b11a765a586ca0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/rtl":"9.0.0-canary.afb68894e.0","@material/theme":"9.0.0-canary.afb68894e.0","@material/feature-targeting":"9.0.0-canary.afb68894e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_9.0.0-canary.afb68894e.0_1607445130300_0.6255989990381214","host":"s3://npm-registry-packages"}},"9.0.0-canary.fd88d40c2.0":{"name":"@material/shape","version":"9.0.0-canary.fd88d40c2.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@9.0.0-canary.fd88d40c2.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9aeaf79f0652fd90c66578c3dd1a04a96020cc1c","tarball":"https://registry.npmjs.org/@material/shape/-/shape-9.0.0-canary.fd88d40c2.0.tgz","fileCount":14,"integrity":"sha512-73K+fvXHmD4tRB+rqmAYaQ0KBXkyHBI1cj3onuz5KIkTQ6i4E8+FS9t74XvRv8uet/WiklGlOSLvm07YM3FRPg==","signatures":[{"sig":"MEUCIAcTQCpltuT97CoqU3Nt9SCZlqFQiRL3w/wg7ZkXnC4pAiEA+qGnFcrD5X3aonRa+rDyIB4FiyyIJe/qPU7Y3Gw+Afo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22166,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz623CRA9TVsSAnZWagAA4qIQAJEuxhebHLYvDKgm8hbL\n41cKus3j08eQxjh3hptv+3TbtnG2vu2GlQ3iFhGNt3lypd/ocLZpwA2KkY8n\nkyfmjHadvcu/Ah/gRmRJKmzRNKzWQXTy3nOLMWtaX3JbWsbDYjbleQ7XHfgg\nVfRLxmQnu1P//6TvOQ2g19epUXDPlJCGbrP/XbhmT2/f5SsMGH6NQZqghLGI\nF5nnQNMo49tLaU6l6Lo5ytmn8Pvyk8VXeKfsC5AQSaU6VcD6Xrfa0ehyF/d/\nJgu0DpO8CIxuRFbu62BHtlOfe9ZgMOw/KYHJpHDLAByUZ27ANK1YsXjfDdh8\nFB+FYJmqM3UyaQS3mbQ3wl4DUn+BG2ELITyRS3eB25OUd9QUbCdVMXC0j/m5\ne795N43Wre44h6QNAl1/BQPdFghFdCUuhiwToVFsXrtIRjM6amPAw4YWJbqP\nCzufAbBoTR5chtbrHfPLx8Gugfrkg/ZYm1nnWr/P4tKVvsYSgdbuQsfsdazi\nGFn2/yZ7k8vLaVIOH+R73Wh3VZao0rAjAbl6mRyRdXJy0QnMOrCqfJDrWTR/\ncM86Y1mL9zebSSc01/TG4q46JL+wA91ou5aJheJDeVUVUMMAC8yifuJsmIxu\n12Y4l9qgaAGoUQypdASLWaUozlRcc7I5V1U9LcLjSh4qMmAUw6IrdH9tm+qh\nEMJ1\r\n=XaNI\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"b0f8299700bd0ac44ef5acfdd0234b464d837131","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/rtl":"9.0.0-canary.fd88d40c2.0","@material/theme":"9.0.0-canary.fd88d40c2.0","@material/feature-targeting":"9.0.0-canary.fd88d40c2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_9.0.0-canary.fd88d40c2.0_1607445942644_0.1405283017598251","host":"s3://npm-registry-packages"}},"9.0.0-canary.ba9e3109c.0":{"name":"@material/shape","version":"9.0.0-canary.ba9e3109c.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@9.0.0-canary.ba9e3109c.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"63bf2278ebf541e8f1b31a86c839eed8a308a5d8","tarball":"https://registry.npmjs.org/@material/shape/-/shape-9.0.0-canary.ba9e3109c.0.tgz","fileCount":14,"integrity":"sha512-AtVx8TjRMzh37sHgYc/skpCRdUc84OZgBpIHt2dBZQ6nXhmfGCx0Kw24ELl6m1wvQn/wLENUTkGMUUMrGmB5XQ==","signatures":[{"sig":"MEUCIFyJQOU499RBk54Gc+RkkQZCP5PtfS+Os+XtF/KQCv4yAiEAubUYulxnujDy7+7HHl2SoCfEAl6SnuozMbH+OGP/WwI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22166,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz85qCRA9TVsSAnZWagAAvnUQAKRSklZS0yikcM43bAgG\n2zTqhrkRLoun2NXV3HZol0o02rlIhLMdSTv+CfZlv+a3QbxOTg9xDwiQl4OD\nXGl4pRJZYvOVk6A9K/BQLHb1SnD1RyViM7be6B6e0CMENdO9NzH3jrnW5dxn\nlBEW3k4Q8He9912U5hI9E12JI/WbQH2FSVj915VLb+Ld3UgEF/oarBEeOjia\npt9egJIaAjsmz9sDPSY2PT7hrQ7r2fsJngX2AwhXx5jLjSr2dRDDyrxx6+Vh\nHEKaaFcjCaS6SXJjucEVuyzDw6DwTIyFUenxlMUZuiIOJNWewi8ZlHgOS8Oy\nTD0DTf7wIZlcyyusFSwukETNt9CYlYd+1aZk/8x11gPXPXL7GVHIX5jQOQ7p\ngEG6Uh8lqIwVwCdXyCoVOa0VV6wEsnW5FfyEnU1X5On3HPo3PizJZGc971MC\n22RSUeyq4wfVkd/CwydenIXXf/P6EeWq2zm77uCrEb08HYlkLTXWEFHGgjOJ\nKpdvjc5xxqNDYkosf4y5nQqRTyj4wsqWci3/WQy2ne7fwtI2bY8+TLTfE3oP\nTucYOj1WW2BQpsxqps0Yv/bMsx74aEouZOI/nHwM9f5dbf2Am+r2ShpA/F/2\nSAOTQ0t+DE+oKqkLe0bhumQZ3a8dH6482kvDL3fDBgWCY/QKu/FTd5z75HyJ\n/xvy\r\n=uXuJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"84bc4a2a193fb62b5721555a77b59e7bce321bd3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/rtl":"9.0.0-canary.ba9e3109c.0","@material/theme":"9.0.0-canary.ba9e3109c.0","@material/feature-targeting":"9.0.0-canary.ba9e3109c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_9.0.0-canary.ba9e3109c.0_1607454313878_0.6841629411254095","host":"s3://npm-registry-packages"}},"9.0.0-canary.1085c3b2d.0":{"name":"@material/shape","version":"9.0.0-canary.1085c3b2d.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@9.0.0-canary.1085c3b2d.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1beaec94be6c72b4f019d4ffc8756d8d1528519c","tarball":"https://registry.npmjs.org/@material/shape/-/shape-9.0.0-canary.1085c3b2d.0.tgz","fileCount":14,"integrity":"sha512-l5jy5G622mF8jLt3WMr+uE54fYvG4594w7ms6rjhSClPb134dtrrhfX8/RVpoo5GnfGBUJ3cE60eq61Z5UkiXA==","signatures":[{"sig":"MEUCIQDwFCTh4d3UaLB64GXre+ILJZsVUZE5/DG4sbsXE5LZRwIgU8lNM2w88T5ed67cngSA1ujqZsWTVYgeaNViSKARqtY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22166,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf0SFHCRA9TVsSAnZWagAAXMUP/0636syRawNvCwIhfv8b\nnVFo3KizKoLYwKgnG6d2z2W8QBVxiIL8eF/Cnx1sy0z9ucs2PSocudkRk8VD\n0x3g26QMBmCXI8JGZ+giY4eW2xl28du1P4lKqsQhzkZsnfZUQIG6wti7WTW7\nL8hKE3Cn1CaKIsv3pwL/HxTFnyhfo2MLl0wwCEc9wcSR+qmkcaENen2tISml\nmIyve8u+Vav98MD5tFRvLhtKmlLKbszjM0okZidK2q4C6zMRPbwe7m7gax0S\nFPAWL5o04cIi2BOE5v27FS0qSfurloJF8L1KaxhRrsAqoMFq06W1jo88mAdp\nYojOEFLz+OWfYXy5IrwORGCr3BTY8TZKKlAReiM6eddZxULDSwEDxOn3tpK+\nRvdiGUJP9lzJsKHP7DuGJx6K4TU0G24G59F7asuQO50jGkzlfzAJOaWeanee\nOHS6KZHaKMXbldrAnkTycWXRyTrxvZ2khtl70F7KKKwHHePfE2k/jlQDiImK\nyC/j/C84fUppC0uRzl2eaEytjAnc5g+XDxdxcwosMk5pB6Gs8+rI9hjNwdVe\nsXXv/93gN86MO7HSX+6d5se9RJOcdZoW0zyh90EpPEQFlnZn6GbWnSxbCCny\ncpINZ4lpysRORwrjlWMzF+VrjzDouyKo52BKihypNpSPewOxFKi+joUPfH7g\n0b/2\r\n=qIOV\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"a223e0b83a78bac523ca498cc8389f361cd0f4e3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/rtl":"9.0.0-canary.1085c3b2d.0","@material/theme":"9.0.0-canary.1085c3b2d.0","@material/feature-targeting":"9.0.0-canary.1085c3b2d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_9.0.0-canary.1085c3b2d.0_1607541062761_0.42952292902043254","host":"s3://npm-registry-packages"}},"9.0.0-canary.c5dda809d.0":{"name":"@material/shape","version":"9.0.0-canary.c5dda809d.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@9.0.0-canary.c5dda809d.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a64ea042b6eed755f58e416b5f40cb7e44539035","tarball":"https://registry.npmjs.org/@material/shape/-/shape-9.0.0-canary.c5dda809d.0.tgz","fileCount":14,"integrity":"sha512-VP97cyDQyo8fqZ10vRp/fSsEwkxC8Ul96Kl9UJa7TjSfWVA0GgH4J2P2R+J7sBNDOkEfkkVOUvLZu1YJHIybEQ==","signatures":[{"sig":"MEUCIQCWlPtkOGDCFdviU9Q+q1NBwnS4I+UuDgtb24Qso9zWEwIgeFrq4l6iTcMjKRjfcj54bzWbaI8zkxAaKP6wzwQDamI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22166,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf0ThxCRA9TVsSAnZWagAAKnYP/joHgCKVa+4DwCbN3PcP\nd3yG+9h4fbY6LTc54DGOmjCg0qk2XZ751fPJPbK/FzCq4blMJ9yVk6m3HkVH\nmbs12Fm0neRl1mWnryxswGSgOe0LWC+Sp+pzthwhONKYw8xrN+g3DOx2uRHY\nkX8t1akd2ESoO3DyZMNr2Uq77RWJMfJZmmdu5rEvP5ZsXkmviJBErTOsDkya\nCZ7fA9/mqBfhELIWLY2w51P6g/2nG7L+tHv0IOu25CBrUxwo/311kfnpPiyl\nu/PKpyBX78KhYlL08AoYdGivYnGCD6orn/7H6NBplmNVLHBMqw3fWn+vxjAt\nHqctttLmz4e4+zSymk5uvZXebNDJdkq7SVDSZ+X5sKTfdyykNmhOIbEHu0xu\nbpICocyAXTP38e1oIP49CY3RHNq72vuqBvqJ6XJBMd5t26bBawb85I2j6445\nyZeDD4hPFLHzcXxgxtTwcAi/0qrtRQKqyfwMzwBYobd9LZqMJ6YL4SHQXhor\nQVjiLyULcpCIJGT2zL4+MBuZf14pKocgffzWJ9FNH7Cqz9lM6K4PoyYs9tYD\nYmN2/JCDX2CeFzgNmNKf7K/ZE73CCCdSvRFarkRMQFoYjrjTmXBn0Oq/x7vI\nkN6kdXaZt0sKU2ekugzF/I9JKqddr0tRnRZU7O8V5o6qh0WQkjKnKUeD/1Yn\nRB5G\r\n=PDpF\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"c2bc7206e40f2f31377a09e53af457109018ff02","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/rtl":"9.0.0-canary.c5dda809d.0","@material/theme":"9.0.0-canary.c5dda809d.0","@material/feature-targeting":"9.0.0-canary.c5dda809d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_9.0.0-canary.c5dda809d.0_1607546992711_0.5833802906108954","host":"s3://npm-registry-packages"}},"9.0.0-canary.f5f1bd86a.0":{"name":"@material/shape","version":"9.0.0-canary.f5f1bd86a.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@9.0.0-canary.f5f1bd86a.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c376f43608d097b909f4ee61079f5746daa42936","tarball":"https://registry.npmjs.org/@material/shape/-/shape-9.0.0-canary.f5f1bd86a.0.tgz","fileCount":14,"integrity":"sha512-pEAvWCR6uO1+yW5LHt0brV8fagiAR5uJIj2dIPw2bDyRBNVJ+qbWjDg88/Fk4BStEHlsIIP/V3Qp0wd0rKKcmw==","signatures":[{"sig":"MEYCIQCe9YO/O3Yd7HbfSqK78Bhdn3ugxZWleVXv1y0hyeJ3FQIhAJJXBe/6AsfKMqebtJvs2C+O0Kqp3CTHN8BVRfsY7fzO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22166,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf0TyiCRA9TVsSAnZWagAAihYQAJfRFi+hQyUYs9NphzCO\nBFVhmWTAnIYPAnGsH6BCBKTwSOd+Qr5zaOlp7KS16pk3pE976GOoVY1+owyn\nPuxwXxCm0LAC8tiGb/nu4n+icMf7RzNR9+TGdVNeKgu1OsaTicwsMSwOR6lb\niHSAm4euMJRs1lClSJkqPapSS8RvKYYTGyyQPBP5NBeW2YWzvsbmzlNe4gJd\nR+vVTiZpYB6NIrmtOdt/7QPGqqgsaZZk4eNS6fDADcMwX0FYBcZ7NU+AK9Ek\nLvLRrYTH0zYu2JO5St37O79ssvjyOMQ+ztX27yO5SFFe+lz7alNqqAr2/cSP\nkMH8MQ6fBJVpX8HUBjfUarxHpHd3968bCe6pWBmQtPiqU7PVfm6tqfUB2pby\nAf93pMMZw+BRnMaDgWl9cZBbeRqO7gtXQ3HhgjBXXyYebhb+9t32L6UXiSBG\n22QVcDn0YZRio1izMZI4OV3GfQwUW3pzaVp9r6XSeG/YNXd4Wdu34nRXJzey\nWrSFjB6KYkNn9X5Zf/5ScZO7ZmhSJD5ognZR3mJHfl/gQzccovSt5PU28uvu\nQpHy5n6tQigW+6uKGz5lnR2C+MBwXfZw4VS1J34REsGKYBKSsgFzxqloaJQ7\nRLHlxwW8WI0eH+3jRtkAo9/mbqz3/L9OV4sgK7NWMyTBE7BhWX/WxUou2fLy\nweGi\r\n=L4Z5\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"86cb1fcac08fb433af0662cec8583dcdf435eede","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/rtl":"9.0.0-canary.f5f1bd86a.0","@material/theme":"9.0.0-canary.f5f1bd86a.0","@material/feature-targeting":"9.0.0-canary.f5f1bd86a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_9.0.0-canary.f5f1bd86a.0_1607548065962_0.40246417130216927","host":"s3://npm-registry-packages"}},"9.0.0-canary.00f38200f.0":{"name":"@material/shape","version":"9.0.0-canary.00f38200f.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@9.0.0-canary.00f38200f.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ca7d714f094f3256bf1d2d443ffaae5fd88be803","tarball":"https://registry.npmjs.org/@material/shape/-/shape-9.0.0-canary.00f38200f.0.tgz","fileCount":14,"integrity":"sha512-RzgXagTFt+9iNHC9JK1ln9bWhmR2pPeZF30sR/wilQ7GmVJtS9XJjwDG24F6Ajs/mdY37uN0/8i9AisXzBDSdw==","signatures":[{"sig":"MEUCIQCUBxuPLCze2LJJ+ADTA/tf4YmU/H2ZK36u2ijWm/badQIgHpGvG4mKruSphwfhpecJp4wHNrBc6z9wDcMrN01fU+o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22166,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf05P9CRA9TVsSAnZWagAAVhoQAJlzwa1VPu9kGfChhJTf\neB1jvDApWJU4DD+gJHPfLaiOItKYSmIv3JLgMIfkhRDzQyQfsoMdULIDpp+e\nYTUY3acrr3QDH5JNJvPh1bjA6mkEdAOAH5KF85sLQ/NDqj59qgstPLDwgnBN\n24PbUgp6uslik/t/i8Oo3YhebOzzOO2CwTYqV8kZhE0OVAKH7iSLCiJk7HdK\ncbAjtpynFvzy3WeolCHB1lIyU/3PRFvEEYKrcMukjNzFFJO6FRL5Onqrb8lQ\nJkVdCQ7zM7KTd4tInsoK39aKWjh/gggO80/dCNyEYDsZVZtZGk27SbWbA+8Z\nRWwBPEyfONDMtuBpCRj1WzZvo4SmWAKG+ZXVlovfaWPUXe1aCYQN97PN2mhW\n++JxdMLxchh9OlS5IUQpTVqeBJjRibeI5LT34mlPdm5zBBLLY8zPzuI7Ip8G\noVtBdkLEhWVipfbpF+cni+onm4O1gGidCIDtkzuv5W7JCaL118V7SOTBm6tW\n/y79PyLXkirqqDAh5+9xTfraenjCqT/zDhcm2xT5uKEuyXiN6eNLFDozto8Q\nCT5QMfp6OboqkcrEmj/4F18FTWdmxToWXtNeQ8epIAy/tv8hg0c/WUAQfM59\nASmdzJPEW+LGO5uUUBlAWB03SnXF03IqrttMMf7SGEQEhouv2+Off6UQDimX\ncise\r\n=bLip\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"2771c0048541c1dde142fd7f565741f0dbb83c20","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/rtl":"9.0.0-canary.00f38200f.0","@material/theme":"9.0.0-canary.00f38200f.0","@material/feature-targeting":"9.0.0-canary.00f38200f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_9.0.0-canary.00f38200f.0_1607701494824_0.040866657113292515","host":"s3://npm-registry-packages"}},"9.0.0-canary.ac41a5729.0":{"name":"@material/shape","version":"9.0.0-canary.ac41a5729.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@9.0.0-canary.ac41a5729.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"653435519239a77a2f284f09c51067a08c4946ce","tarball":"https://registry.npmjs.org/@material/shape/-/shape-9.0.0-canary.ac41a5729.0.tgz","fileCount":14,"integrity":"sha512-gXdlfahzIwJpvvF2rd+dpp+I9mvI/P3rIHQGxgupOioUtBjoi5yvQVZ9Sq91IYr5jD8/gZHb992/JUOgJOzTow==","signatures":[{"sig":"MEYCIQCEG7EnyYBqdILN/gP4REtXdNYwX5rde88du+BQL7ScmwIhAPKBVB4dZO5rVDU7MYK0zWkPvEiOKsM+CWZB9gCsm8/P","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22166,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf054dCRA9TVsSAnZWagAAQYYP/1kcP9b5iluRjuUEX+zj\nKhTgl2VvrbJtSvJ8h0lKg0t7rRiPWjOhPis+m3mrbEbButGdEQzXCEqeS3zn\n/Yv+qv9VpdnCjTwinuAyuRT10CziXhQouPIquIQNyAUsUkdcRA9Idx+1IWyS\nNIuT+8AibnhuUMUTNBxtUmdPmvQl3XE2OOfnqqGjo4tq7WdNsqxD30cekQsq\nqlOoV91k4FNshQnoXWwnL9qNfXEx71wg7l5HTnXRyNQxGyrwKp8o6Cmq1uY1\nkqAT0acJ1gUuV2/wTeS6scNIlE7/Rr+55YSdVVGvWT2e2f8MJSARuDAOwTGz\nXcFIJ47EQygMqv+DytxyjHWgo0jeCiAQcKUvLHS3yWtBZ+FQzIRpt4vivEsH\nH4IgWBOs0ZvgYSvR/qa2w9HVAE9wpaMfr/vUA/lu83+gfiJ4g/92My0UHvYY\nBzlDUchKnSKuM0435FoH9jLak86Jdgun7ZNKQW0AkTwcSyRJzW4fSJuZJxbN\nUtoytZA2IJBaw+vXIKuW/pWz1qOVZJKSIrWyetMmEOVr4geQXI2oKv0QiK3m\nXm69e/UzJTK3zMMQ19IKCdY9IgI3XsGPkC8mbJY7Srpp5k+zjS/7Rxnt4r9s\nmuIdKJE21qKjVEYQWK/GtFjBN1zvLAoog6MNz6HU5rSp3cyrwO7jXvRcw5Ei\njjO1\r\n=Erlw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"a8313ebe32ee1c67ef38d5e9ba2b5a4ee2d08f77","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/rtl":"9.0.0-canary.ac41a5729.0","@material/theme":"9.0.0-canary.ac41a5729.0","@material/feature-targeting":"9.0.0-canary.ac41a5729.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_9.0.0-canary.ac41a5729.0_1607704093179_0.7219951696504219","host":"s3://npm-registry-packages"}},"9.0.0-canary.7fe0e4f05.0":{"name":"@material/shape","version":"9.0.0-canary.7fe0e4f05.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@9.0.0-canary.7fe0e4f05.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ddb6ad95d726b5043b76684b181ff3e26225af98","tarball":"https://registry.npmjs.org/@material/shape/-/shape-9.0.0-canary.7fe0e4f05.0.tgz","fileCount":14,"integrity":"sha512-nbQmb1+zDjflOWfz1xjvcFDGVXPE4vSc3Lfnc1Ty+Q3btJXgVP+a9/sv/GMQVBAzPSC7CpWI+3UvWSJHpxpdAg==","signatures":[{"sig":"MEUCIAPUGBTgH3qSxaJx09KNg9yMbvx4ekPtPhi2ApTBIf3UAiEAxzg73k7oQNGVW3ZFPYCL2Pz20WNYAWNKpungK/evZ4U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22166,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf06bYCRA9TVsSAnZWagAAujAP/RU599auBedCdy/bwa/v\nO2jHASIwjaWsQOSxNqTUty84FfL9GENaNYsnCyTpQhcsw6JZpWFsr5UQQZhH\nw+4wtSSZTINDkx1YWPYnb5235roHgDKwRVmxjM70cs8POkIV56VMtahnXmRN\n17wD1kYaMWpuLmmlwxtOr6Efx5rd+W8+UGHX0zCQf7FMPCNJDpk2bxHV2TNT\npOKbpRNW/nE+pkXOW5t1N+QwIipJRGKdS4JW62d9Zn1VUNa1yDaTSoIHvkto\nco0obit7II2/2uLbANgyFIE9FotVa5G/xbIscp5+h6FlFnCtYoAIdg1+uX9W\nJDl7PmHclAEuSjkavruByYUvFHVghWYw9tjyB7fi8zuI9SXwkyvDVjZ74opW\n7AJG5g1/Y5kulrTpKNbPdU8h0vvRExYq/IvS73L5ZpdhXnaVnPAptI5obWWK\n2Fnq+SbE4A7JWwyFVZ8dbBSVG/7FdDesx1rmrm1TzWX1CEbOtcEkksyF69U6\nRkYMGYpDglmN6o++wN2SdJbiBmcURXL4KJHnhBpnVDfVd513KfvmaYxgI3uq\ncNYG9bN5C4jkBrtAQqKKKMHNwLhr01eKoN6empoePI933IWCBJ2wQxcdGTSU\nmNh7kn0YrS7YG5mL46L3SR9KIZJ2tbIjZQhe95tB/f2nagdZQSo5+XvRuBCs\nfBG2\r\n=n8hX\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"174435b67952da2f175e31e1db54647a2722499a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/rtl":"9.0.0-canary.7fe0e4f05.0","@material/theme":"9.0.0-canary.7fe0e4f05.0","@material/feature-targeting":"9.0.0-canary.7fe0e4f05.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_9.0.0-canary.7fe0e4f05.0_1607706327653_0.8662806703129191","host":"s3://npm-registry-packages"}},"9.0.0-canary.9244508bd.0":{"name":"@material/shape","version":"9.0.0-canary.9244508bd.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@9.0.0-canary.9244508bd.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"de92293daeb8c7c3fa562b905ccfeba7b2432a0b","tarball":"https://registry.npmjs.org/@material/shape/-/shape-9.0.0-canary.9244508bd.0.tgz","fileCount":14,"integrity":"sha512-Xo59IbCe2Vtr6WU5ulvv850YsxZRLOQSxGU5wPh2WdYpcSMsnQRATUZ7EoqgM6QEWLAFXX5/iUW6tmCd/UBQEg==","signatures":[{"sig":"MEQCIDvXEAO8U7XQHKzkmdX517+vpA4DycIrzH1OSpiCGTxdAiBuafTLMl+x2d4DigGLPLs3338Z/FdY05LemF5eRZfRWw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22166,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf08NxCRA9TVsSAnZWagAA/uwP/2y0JWA7t3REdcaKeaQg\nykydGyH9fJR3TPioUCj9dV+70dfA7hIu7x3RCKMiP4KdyQMFIuW7ydg+jypt\ngys8+zaKxa02KDZZpGtXgpx8/mjzt0bAsFA5TlJ7+oBuUFmzEbd1v51fxd2H\nz1kX35TmZikaABvHgXKEYGUO5FHW1zlRWdqr3FpT1znRrD/TgoGR9tcwqzuJ\nNUm8JU+l2pYG4XLREDk7bg3QwaH1mdyOMKNgrIf8w+x/DmQej0OgmdL7vomz\ncf96wReNDveg5kXdFm8Hzawh9884D8J4y1TAS9eWki7+yqKueu9OU8Arp5GN\nBW0iPcavnd2ROTqqXWr/fsKIXRPmXUJWVi4YFFiz9XHfx+TlGexWMGJ0dnUS\nMLtvZekGi7OHMYwzqqplUvZ6NpG6G3a+jX0wBIM1thmMhSJQSwmwoGE8mDYX\n/VFkunqkgKQNCBjpfK0Uenr+DjEaCKScJZ8X00b50UOh+qGSmy6iRdpAUV8l\nd4zT5tYY1rUIhObwvDlrXokwOUXBZIaoXLAm0jVqoicH51/gmW50ZtUE9/0u\nHME3J6TgKcL/U8fT/6JzmTGYecvmGy5c+Us2yfF04XOm2kBagnGzxsXJ8NrD\nJ78HRR/wjqMudBzO2HZlj/SkfpenHkS+atkCLelaUl8jKvvpxAsd/Plp3SvH\nSn11\r\n=dAUv\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"8d704729c3b4ba17ed088d900fb2ddfd57d5803b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/rtl":"9.0.0-canary.9244508bd.0","@material/theme":"9.0.0-canary.9244508bd.0","@material/feature-targeting":"9.0.0-canary.9244508bd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_9.0.0-canary.9244508bd.0_1607713648815_0.47939584219269493","host":"s3://npm-registry-packages"}},"9.0.0-canary.384a8eeb1.0":{"name":"@material/shape","version":"9.0.0-canary.384a8eeb1.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@9.0.0-canary.384a8eeb1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3da1cba78ffa841d0517326f231d9db358dd851a","tarball":"https://registry.npmjs.org/@material/shape/-/shape-9.0.0-canary.384a8eeb1.0.tgz","fileCount":14,"integrity":"sha512-P1kUnFVFdBUEEHSq3RSJ0H5g/YGOMedVDYHnN7bmcEI2B5Adk1fnQCdtcDbjU7C5Qc1ce7EphUBqX3c2zvkcPQ==","signatures":[{"sig":"MEQCH27C2/afe6ObKKHlumzR3LSO2i+XQ7oYpEdijsjmSiICIQC4oEFZyuX+yxjKlYfpQnwgl7hrTYmhJxIDcrTE6RfAQQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22166,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2j14CRA9TVsSAnZWagAAiuIP+QGwRtyZBwuWPwm8T2n7\nlwCH83t1SRwhd4ZrUKcGvVfmeTFUCUUBXsixJfJDQYhuW+ee66ASSihATw1V\nB1xLgA6DBDHtPLIMkaHWx1jXFV9Eu6A/ih3i3EbMewe0w96LbKmmjtWuC0k0\n4SYQGSOWOvH/d47cXTt28CZhjHLZOEZdLlgFK1pQetLb/I0NprFn06K+gEA4\nqmj/h4q1ej2IqQwcuAxy0MCyf1cRjDRPJz6FE8YvdIltQqcT4aKUdxREXSpM\nrAj6ioFzrxhcFfuVcOxEa7A2FWTUSmnuWKbm5iCjTWXh20SwW/+/YjEFcOCG\neIsCat/d6nkIvTlk+pXbghUsqCizy+/nGqlXVOgxvKZRq4VWU0Ri465gbYVX\nv23R/s7EPHM1A/G98WqBAtNJWv4ADvYAYG0Z5QEENSHkaG0cYnG9mQUgizUs\nRnT3CBB5e2I+sWWcx6ZWdXUcS98V8+jpAPN5NKunvZ6yACBHmNOoXsd8Hwmv\nzS3HHNFMqX7bcvTbrhTUcl2/4Xw703PNb6t4pZqb5ciNzLFZ2zOHDr/if4HB\npgAnP7Nv7rTqkkRv1gZe+58OnxmvB5ha7qVtnTQbui6o8GTAruJdTNhrMCnV\n/3y2GAP/7JjejtP4Ed9j7dHw5GbOe9gJsVLqJA+qxWD/P4GnOff2IT6pW0kT\nsyYc\r\n=tsnt\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"21b2ddce32077f19c001df17ebc3c8ca9c48f8e5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/rtl":"9.0.0-canary.384a8eeb1.0","@material/theme":"9.0.0-canary.384a8eeb1.0","@material/feature-targeting":"9.0.0-canary.384a8eeb1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_9.0.0-canary.384a8eeb1.0_1608138103631_0.9054794957651537","host":"s3://npm-registry-packages"}},"9.0.0-canary.eabf9d5c2.0":{"name":"@material/shape","version":"9.0.0-canary.eabf9d5c2.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@9.0.0-canary.eabf9d5c2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7cfb978a6d962d9a8fe89eb7a698ca3643767069","tarball":"https://registry.npmjs.org/@material/shape/-/shape-9.0.0-canary.eabf9d5c2.0.tgz","fileCount":14,"integrity":"sha512-aVW+T5o9vvnPCcr2rPO+ao3slR+M0/rPEcfhFRRtd2L5hcjvR85luoceCft0wQq3rXd3vcdhMLYiBMrBj28d/w==","signatures":[{"sig":"MEUCIHNJL1Neu1SuhK4+f6TF+9XOUoxVqTvIbc9rL+Viv7vqAiEA+7vOxDMsodDsAANzZfsJKom+Ythsl6pLMrh2mBB/xwQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22166,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2lGZCRA9TVsSAnZWagAAtMoP/3bV8FsQEUTSHEodKI5n\nrU+jmU0xxr9OM3OoxDIF0CdIC9KhSkZubAe6DE5d8j0DTDylTgxgjXb+BdrU\nuuHAgcDoeNgT9YsZOpBF+BsaR7ovDbm+x5OI+cDvE1wY/xw6bQvuvJdaIVrQ\ny+abPyESqFnyySlPuMd6BDnqYzWgkVPTNSha+ZcP2wpdYoyRZCuOLBwM4rAM\nBHJaqUbf7uFooUdR1/n7rtKOUptkOHRzQMHoRPIt9hYuSgfoSW3OWK5RxsZG\nZllTLrR4Sxa+IXfi4Fek/Dmffa/H7TDb8YcZaZIm5Z67CqLimMX+zmu/4cJE\ngMDymgt4f6Q+AtSpkPJooXF7brYhxCbnBn1Ygnwa8REcd2mtwFvyRZRD08e9\nVhWA9XAUxjWgZSn3unVokA/ldWwEhLyQhq24kxzhBrz0/nrehmpaTgWOWH+v\nU/9A0j6M5els26MoEti6WulgtMSKVoPGqpuhIlkXETUfqJQvvRhq3TsHjhrw\n0Gl9B/NhJDvHtbNUP2OAGIYTwQMUUTD28TF1ErkfUQQ1LDWMEP5P5akPZ4w7\nwJsQKqOMVv992HuPNnnUuU2T7+Ke3nCgZfntiIgiW5dPAgvl89PtFOFQIglW\nHyMHyV5VuQ36FWQm0oxETcJe51CAwXRnBFrY4/r49ksy/NMmCvnKseKpqLp/\n5kV8\r\n=GUTd\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"78b3a67c04374ddb43be73dc4daf2613746d08b1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/rtl":"9.0.0-canary.eabf9d5c2.0","@material/theme":"9.0.0-canary.eabf9d5c2.0","@material/feature-targeting":"9.0.0-canary.eabf9d5c2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_9.0.0-canary.eabf9d5c2.0_1608143257500_0.594855841523658","host":"s3://npm-registry-packages"}},"9.0.0-canary.30fdfd06e.0":{"name":"@material/shape","version":"9.0.0-canary.30fdfd06e.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@9.0.0-canary.30fdfd06e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0f5725c2a52016e94520d89bd20348c24295627c","tarball":"https://registry.npmjs.org/@material/shape/-/shape-9.0.0-canary.30fdfd06e.0.tgz","fileCount":14,"integrity":"sha512-jpQlozxXlnYqLbmG42xmXPV9bxQ3WKLKTVyN4JHxaQZ8lyssY2ByvPXpJ0+T6hrqx76WOv6n6cKd9jfpJBlWGA==","signatures":[{"sig":"MEUCIB9IXo+GmRh5dRrPGGn9GRaVwOnA+418dKj6ubpIe4IuAiEAl3k67BvnccOLCKxHNDD8E05Yezq5U1UtZJShmQzvlAA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22166,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2lrrCRA9TVsSAnZWagAA5xUQAKDYXfbSw9xXAiM+JHVo\ni8SJpuZLP62uUR6vhEm8xE+LkgHtfDMJtibKQvrkEuTkUfnZe7T896MeMiGi\nOxE3OXdXxgBuelmSS1ZNoj0oTATlFyUanjIGoYR49Xo9udcyXqfDkNmHac3M\n4kladgn5uO4QppK8IqjweXeqk74ptXYf1MbuHOXwvVLrUtVz3DxvwzQLBUFO\nlcCayHD0+VWPL1Av4CJfDSPWjZLpwwRxU66lAXuJ09EStUEcfZS8jlRIzm4Z\nsc4uk+fKODPA4pqrsjdNHGz30u3DmlBYEIk2R1q3Rs1P/ZAuOL8LGtXFfIUa\nUuiZGMwCQxeMjwYP9LGiVbGkDLn87dJzPndkTfMzJxaud82gkjTHrkh1Jjna\nFx0zF2i3WE4Z4MpP+vqNNcsLNjh5GPs5whBgDhVp8ONoghtt9eoIlcFrlzt3\nHbbzYAnGjU2AImLmTC7KGNA/K1amNPN5ueJG0TXk/sOr4V52ej3OZ5fN7Typ\neqpZVm8CJjDbAO+yUlYYPcPGRuN+vfyMiZ60mRI2EMRARf/CA5zqJKGQYCT3\nxibT4SH1RY8zWanlblRNUtMaqey4o7w5qM5RLl0RExiaD8SB6rWzqTNVPzE7\nmVEbN8x2iGcg8gDc8x1aCNXIsgk4wY5IgTjp2TbqSqkhXCUIJ+tVhtWCfylN\nx7J+\r\n=Ahsr\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"f9c9fe091a06230b038ac8a71ccd652c7c662b96","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/rtl":"9.0.0-canary.30fdfd06e.0","@material/theme":"9.0.0-canary.30fdfd06e.0","@material/feature-targeting":"9.0.0-canary.30fdfd06e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_9.0.0-canary.30fdfd06e.0_1608145643063_0.6508245574592124","host":"s3://npm-registry-packages"}},"9.0.0-canary.9590a8f90.0":{"name":"@material/shape","version":"9.0.0-canary.9590a8f90.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@9.0.0-canary.9590a8f90.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1dbe12a6f398a2b55ef20fe835f7305430fb0777","tarball":"https://registry.npmjs.org/@material/shape/-/shape-9.0.0-canary.9590a8f90.0.tgz","fileCount":14,"integrity":"sha512-jYvZ3qQYbX3uQTE6Rv8qxRPxPQyVSiu+HhAFl0Fs59UGkcbJ+GTePAOgmsedDmJiWQJQlhmKkoERgulV+j+/HA==","signatures":[{"sig":"MEUCIBbZa1OYC1CtjLS1uH62AZZPMTOGK1J+CthQEEN1+hFKAiEA0AAunMjsTBc1qNAWK8EIevOOnelrpnwV3SRlNCr1sNc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22166,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf4i/oCRA9TVsSAnZWagAA81sP/1WESpRF7rnFFpbCVB+k\ndQSwcdYlDW9qPfjyxQyHaKtfda1RZELtCXF8EMKrgRtI8fVBF2LoJHN05Ow+\nN3UuaYVsbe75YCgcYezPBUU0OQb8trm6t+wNvepg+lzSB4CL9kVsEFK6tmHx\nSqIJeEkv1D1uvEvu/bcMW8dgnkh/cyM47QwjQ3oAB339+U9tUMQ1Q4EEPYVV\nNz0yyqqKV84HGKI4RCcpWjQMrm+SQ0uQSq3E0mVRfkTHqtQkENFY68RSvfyA\nL/b67nc2fqaONt/Czgbag3Qj5RRHOQy8GSkef8mJS4fma30qdXNMoCikXkGI\nZSqx579OXYJEJb0/4eOR0bsyXZBpRa/HXzFY1gRDhHKiILAIHmamNkDW1Iy5\nUImGpt3gdPy7AG4gpXsTCH/JaPzF4BzHvNdCJwVpmPX2/qvgHaSaU0eYGIeK\nG+EdgZ5v0oIZJRfduJs/S1nmeZx553XZv4GhzuUSSIi3UZEhFTaHulRYokkU\ngAjbUOoCVrI9tSlqGtTnA0DkpVeWZq6azEpYk0hIRURYy2UNZOvJpvVheiLf\n22mwX/1c11IwP+AcaBEAQ9lSeGMwMzHSns5APOBlg7oz1R0XvApjbHUWzQP9\ngW6eeX2cbYF/vb3wPUqEcRZV87fU5wIrdUfvw2BdmpBt1nyC5xm6DpyvhkSk\nmjyA\r\n=tu9H\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"a592a11a03887b1e1535d4d49ea05db1b6f72789","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/rtl":"9.0.0-canary.9590a8f90.0","@material/theme":"9.0.0-canary.9590a8f90.0","@material/feature-targeting":"9.0.0-canary.9590a8f90.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_9.0.0-canary.9590a8f90.0_1608658920429_0.5668510113057921","host":"s3://npm-registry-packages"}},"9.0.0-canary.f89d8b8f2.0":{"name":"@material/shape","version":"9.0.0-canary.f89d8b8f2.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@9.0.0-canary.f89d8b8f2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3ae75b1b7c85fb37a8fe1bc5b086658ce23a0cf1","tarball":"https://registry.npmjs.org/@material/shape/-/shape-9.0.0-canary.f89d8b8f2.0.tgz","fileCount":14,"integrity":"sha512-Jo7IfhIsYhRefVu8aVfxGbeip4KnePMeG1RSM7px9lZlc3s8YKAl7I62uCSM1/KipHjvbR44JvdMyoZlYyUTwA==","signatures":[{"sig":"MEYCIQDGgXbxB6y7crwMnw+875vcLN4FXwKsOmu3szEPgrWGkQIhANh2wbIyRq0UHSvBth3Yz9e66lmwVOy5MmGJ9ABkQF6m","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22166,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf4nuYCRA9TVsSAnZWagAABXUQAKA9RcRp1TXSclXduef5\nNhyBr9330JRMexx/FNAbgq9U6h3t6OXgRDPmfjK7fwr7bKdtnVVGaqapu/+q\nOimErKYM8Y4GJlHZRZ1RxStsAg2HfHJerRTsaxwxpNG3vBEtqDieMOQrKfO1\novcedEfzuQLamxOeseyBPUZDxksda0LfBf0HPF69Bl3fwrK4CoFLje115cO9\nBAZbr+DBPdI2G8kpxUA9/K5u3QPRMT33WbAFb5G1EQr8t3Qwux4NwecHRgUE\nSd+MoPjHfRQ89P81yBv7MCMPP47Em2JY4KDt0FDc/9d0Jtjyka6Sla9TOUxh\n4NJ4T12/a9+NSOcLa9j1eSWCS7EIajLBkZbzjLnqrfpIZby1HLgIzWPLwo1p\nrArhNDWxIUcW+fNfDvrhotg6qV/tsGs1sIsCjF4BuvFAidEMKbzwBX8nzPv5\nw4b+nv2z+vMICkwqTQl2Jw1ZNszXtLnVkPy8p9opkWgEpIANMb3KHbP0SNRA\nFJjk3liX5bSDDBf+W/4Jmf1v16L7LegjOXMlakOKR4Zx7+iw62GcJZCq8E+o\n77gz0Q1ZP9mzvhff2nBMdE2Rs2xO4I90pEGrWHQRkzZaKWwWq72UW3YTR1gd\nyjdBjsaZlUJJnWB1o1aUSJ0Onh8Ze3WkJev5tsPXieykeY1nUYvGCtJGRw75\nu+JB\r\n=qUd1\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"e0d61155aa611a1a8573762d75379cbb25d2e7c0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/rtl":"9.0.0-canary.f89d8b8f2.0","@material/theme":"9.0.0-canary.f89d8b8f2.0","@material/feature-targeting":"9.0.0-canary.f89d8b8f2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_9.0.0-canary.f89d8b8f2.0_1608678295649_0.7801395163642406","host":"s3://npm-registry-packages"}},"9.0.0-canary.fb194dd35.0":{"name":"@material/shape","version":"9.0.0-canary.fb194dd35.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@9.0.0-canary.fb194dd35.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1495680818cdc5560444231c7875dd40e5557c97","tarball":"https://registry.npmjs.org/@material/shape/-/shape-9.0.0-canary.fb194dd35.0.tgz","fileCount":14,"integrity":"sha512-yvoUq6tCcnT+FUOs1IZbB4DHpreSgUTL2vC+5XSRuS3yNaths/v51cGWgAaTNTFLmGuSNBfXXgYMVusmkBu3Ww==","signatures":[{"sig":"MEYCIQCYS7bMzorsDbjvTs82810LhUgEWXbPevMRtwFkGgghIQIhANmo9APmVmfFloIrAfZi3BLZlx52SiTopdAr2Rq9hWY+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22166,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf6kPsCRA9TVsSAnZWagAA+vsP/A23lSkT7t9MfUcwzaNU\nUh5AWHwNA7bKv/7GeGBv3agdxafNa8yR9JHjNb6XVxPM/dyPBtIGqgSFmlPP\ndnojBuld7iD7UCMucapq2Q9UyEh16smI8pwMuFcospcAe1MAr9DaFjE5W1pM\ncZ8bCscwxAoC83x4tHhjCjWRHkkOvVvdshnpQeox3Nmq05nfc2jLtw2b94pr\nSineNExkdu0TPruhTg5GKIdcOStX1s/QLvT38LOsy16WqVWahq4+kNkj/r7N\nxT6uvPbAQ6O2ETsZGLOKVBFrUI3+zccsE4BOQv7+25dkmXU+3DFurpjjlL2E\n2mcbZScOlIeBtTzlk0M6KVyJjKUL2QTe1PHmYGiXuz99ol5HF6mE2R/eNjqk\nzaS2KQ1QZ6lMiVRjLu3nXXFkfnOSLRx+JRUX3iLzn9e+Lk9CFG1K9x+WEhu0\ne6iDpxDhowpf3QdezUpuyvPE/qu/VxADYG2eR4nJFG/VbnsO+AL0UQ6X9WPe\nbbRzT2bG5eYfyr9ea+KN/Y94kfpVyEVlmuYrbaW1krgFvRIDVwhaisqXpw4r\ngxN3/eCeO4m8qc1wjq0SMF7LkjT97eEglgHKv7PcCjGf62lGlbp2zyQzVXXj\nrBUw3zsBM6GFtZiJl9n7OcRfS0f9qxO3VXVaOibm3VUIdKuUq+E8LzblQQ+j\nf0Sj\r\n=R2XI\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"57a5b34de1026133757436905fc54dc5b326d3e8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/rtl":"9.0.0-canary.fb194dd35.0","@material/theme":"9.0.0-canary.fb194dd35.0","@material/feature-targeting":"9.0.0-canary.fb194dd35.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_9.0.0-canary.fb194dd35.0_1609188331942_0.061254549344426756","host":"s3://npm-registry-packages"}},"9.0.0-canary.64f36e287.0":{"name":"@material/shape","version":"9.0.0-canary.64f36e287.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@9.0.0-canary.64f36e287.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b3aee36461d5638fb13e126ae6bb91d913e299ed","tarball":"https://registry.npmjs.org/@material/shape/-/shape-9.0.0-canary.64f36e287.0.tgz","fileCount":14,"integrity":"sha512-zOPQt9bjvTtrKcof+iY8v7y2Umj+M+JRQfdzrMINVXajRQtM8FbeKH2erhr57tZbvVwkioqnwanVHR7aWQx2cQ==","signatures":[{"sig":"MEUCIQCyEmNXI7kkdEW0d9Xz1QhtEcAJNPjgYwhCdfha7okuUwIgFkE5je+rPQDXBRyaGX4bztqLf4/oq8tFIFfUbc+EjdU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22166,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf6klHCRA9TVsSAnZWagAAsTYQAKKlX4PaNoLxI5SJYIn4\nLOifHVyEG4jzNv6NAGgXGzhp+v6+qiZ2z7VyPoBEW3hiMa1JDnlqMJs31+x4\nXW7mth3TdLerSbhNqO/9jTzE+pZ3NbfgD/XFG3nAl8z/cD8hQxSpDByiG3UQ\nX5Vam7t1+YRC9BCrgS5b3OxELJsma7Zk88PSv7pEi6Q6sOTwl13dEuBQrviD\niFM5TmDOpVwhGTe5Sup4VvZVQ6CQ+Df6k62h8RLcUZZvS5HVxCxMfQQ0DMP9\nYGZGS+3FupaMbm8fAk7sKwScMaX6nBejAE040eHgUsHJukIRPqEVC6C/DEM6\nDaYSs33OAjvNO6Nnq+I8mbq2KehWmKAr/xFPsaj6S3mvY3aJkqyXUTFk+jOP\nVS7YFpdS6htJG6R+Y+EmTfdlNMS160ni1TlhR4GsdUKnP4nYlUhVELJJMUnx\nI19E+P3o79PWLwxJXVgBdHV2Cr1+bFUoURmk5g+ptfHgcMAMjapBe4E8BFpA\nJv1cAlDy/MqZ1FJ1nF6/B1jgQLS9QcnwPXGsmm5OZNFZQP4IKDVvGqvFy1he\nlbsd04BNnj3t0YBhflht8ItD6kqE+51mD+rOR38EaDbc1B0oABP3oKmCD2W3\nqN69k0FGjY6z/CdtTX7qK/IGXqDwhy6BJj6y98j6cLY8RIGGlRJZkIvwJDNG\nYPW9\r\n=FDkH\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"23f6770d284ec6c17b1aad9913827f8d456418f2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/rtl":"9.0.0-canary.64f36e287.0","@material/theme":"9.0.0-canary.64f36e287.0","@material/feature-targeting":"9.0.0-canary.64f36e287.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_9.0.0-canary.64f36e287.0_1609189703430_0.2939716563806356","host":"s3://npm-registry-packages"}},"9.0.0-canary.b7bbe7022.0":{"name":"@material/shape","version":"9.0.0-canary.b7bbe7022.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@9.0.0-canary.b7bbe7022.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3e5994609800217d997f8af722e8b19cb3a62951","tarball":"https://registry.npmjs.org/@material/shape/-/shape-9.0.0-canary.b7bbe7022.0.tgz","fileCount":14,"integrity":"sha512-cRIqFPCXMJ9CeoToIoiwybopvMNN1nB+Tkq5qIShL1A5kkKQwkv8YTkh/8yBgva4sGV71KIlYsjaFKmvfS8P9Q==","signatures":[{"sig":"MEUCIQCGbkVYSZLvqShHGCbVSRRrBBqcAsudLsbffo4Jc0cxewIgJSCPaRl+9awrT3uTu7mJ6E8CMsBqYIE6a2Zw1L9bPKk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22166,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf63naCRA9TVsSAnZWagAAJg4P/2uxf8OZVKR0/qCXaB+T\n9okZciTtFwhHD0VEY6FGoxQVH/wc8ZWL//3PWd5j8xEXVi/5/7Zt5SA44fEc\n8gCKVYe/kXiWimWj2LwX/cHqG2n8lngUcD+V7tHpElyMsEo7PIePnpiHw/ZY\nx94yRasriEZqAvTL3MNlrRad3CRgiW0JSO0dMLQMBu0dZD4lixWPCa3RwFU0\nk39WtQfE6En8ikBAl3uZ4+sMNo1XP+/AUBYb+JPjcCsQMQECkvATGgnGk48I\n5ghIsn1cFHCZE+6bKi2xbgO9wNBj+1zx3v7/XgdQn9VNtZEOvaQV3pYOa3YS\nee/eK2gMLkC4TiuUCFK8vCM7UAWJR7dbII31zWYRFq7Jw7ZZhVqwNRgjLTFs\n1hgcX7rAQNjBQAKmFsxm4ePqAk/ax//n1rbStjVn8mO1dx14za97H2lQ+MOu\na+uzGuuUzmlfnoUfj4/FiguuUjqqFx+dvSFbiMl8u/0DAL4BZ3MrErHmlfF2\nJfgHRoHPHYFkxVCtX0vg8Fiynj4U6EEa6suGmNXM6jcHEmoaU9aKEWImbXHg\nYWQriMft4OHDQV0PkSPislbOyUD2O0no9c1XLj2X4bnRqw+FWmr6qTa0mXHh\nasZBaJtbnnG4Yy2Z/w6q9aNJ39Ar21bxpMGLbXHNEVlvujqKl0b9dOfICEjp\n2sDV\r\n=0gd/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"81238a3912ea8bf30c97b0318ac2ce65f297eece","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/rtl":"9.0.0-canary.b7bbe7022.0","@material/theme":"9.0.0-canary.b7bbe7022.0","@material/feature-targeting":"9.0.0-canary.b7bbe7022.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_9.0.0-canary.b7bbe7022.0_1609267673827_0.44894510708605484","host":"s3://npm-registry-packages"}},"9.0.0":{"name":"@material/shape","version":"9.0.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@9.0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f124cc966d1a51ef1462170ce5a71ff5c24e3f6b","tarball":"https://registry.npmjs.org/@material/shape/-/shape-9.0.0.tgz","fileCount":13,"integrity":"sha512-kcZIBnPk0IRy8LyEIGURXAmtDNQHyySmOjySmsCKQzgXnfUhyNsU2exylkCSfPgJT/AWaclaIIN6x+E5OplvPg==","signatures":[{"sig":"MEUCICU6ZCp8eagq09CgR0i3zBVIahZPmECihVBee0TiSVSaAiEAtRbuqDsg1UgmbZph3IJ1hZ9Wg0iKx9lAoG8CWgKMdM0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":21720,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf64d9CRA9TVsSAnZWagAANWcQAIG248JVgE/JdzMyyXjJ\nbOHY0SU7+h893isekIyD54SkkH5CLt4TRggC2Sv8xGGA/G7N+DP+WS3EDOTz\nD1ed9LbTpVIxVBnTx6eB4EXHnQWUu2AR7nCeEpNtmpmVnGWGXaI8vNYqppST\ncTYriwkuCXpbG49CEHedZDTbYRSbJqQjH9oucuYJcZ8ayfRV6jIBndSVlYxR\nAfo9vrpnefkONqIc/U1YGqRqAxDrp0Xl5Lu/3U4eFUktjv2v+gtKtpBw4Q8E\nFDsuYMSBzrKV2wsZqmbDD9SB0eyFVM3qlhrZ72j5J33IJX903luzOOWYL4o0\nauFHGIAdnTOmj/ZHm6CPmDyldniD4Sf47wVVohkfB/bTB/kHNWH+gTZS/cI5\n8MiuF1Hcv5Czi7xOD0t5wmG178mHO7XNoMrsA5d9dMNkLbXv2/vVrg5+o0Pu\nJeG5/dJzMA0BsnvpCchrbI8SILKSsa35mXA04fqU/RbLgjC9Lzt8qhN2aCXE\niB5aYfLMyOgocFM2KBnP2TGW8tuhMi5KSzNxubzluwS+o87BLQLA0jAlRSrI\nGO64imK5yb4/MC0pvTSJic7w3qimRLr2hgcfubyFM/10gB1qdHsBMMOL6JFm\nFR4QicJbblVX8lENR9mYnU6zSEuFpjGcY4+KCD1uN4rWX8g9n49hwsnh1vYL\nFloC\r\n=/g27\r\n-----END PGP SIGNATURE-----\r\n"},"gitHead":"555aecce59125bc3f162b065dca47384bb5822b1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/rtl":"^9.0.0","@material/theme":"^9.0.0","@material/feature-targeting":"^9.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/shape_9.0.0_1609271165431_0.30253102226034523","host":"s3://npm-registry-packages"}},"10.0.0-canary.776c18681.0":{"name":"@material/shape","version":"10.0.0-canary.776c18681.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@10.0.0-canary.776c18681.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"22adbd3db15830c7024f4311c9f807f8988861fb","tarball":"https://registry.npmjs.org/@material/shape/-/shape-10.0.0-canary.776c18681.0.tgz","fileCount":14,"integrity":"sha512-DIfpUyn6i4B+7tjPZNPUfZJzFXPvmhG5p+e77ASkV5w/XBlPC6RjkNJU1pGyvNVLoXdLRF937jzBQViI/DglXA==","signatures":[{"sig":"MEQCIFtPUx3FoJJDOcLOh530+T5I9QzUTQogVCnkZjnzIXPOAiB20OQRww0MDXaSNbUbqtdo/6z0iTaryfKljbXcHu42bg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22172,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf68xgCRA9TVsSAnZWagAA1D8QAIVb6YChM4SUCMOeEA+3\nejy6anYPt2d8hqXao4ZwsBlMJvT9+zDhbai6UG1J4jJuAzcMhPFavyJHuXBX\n3vSX9+EWTWrfKxk1n3UchneUVY7PScJbwOTF6cAlWRULyQoXc+/9xEbeuRu1\n9jeB/etRMREuV2p5eKM1GOk6fEjUvB5wnJPUOQz6ZQ1ITc6Vjqqjrl+pFm92\nJTLv2q0C2EWod7v7cSLxOg8i57mHTVp1h4RQvdP3ozxst5mUwE3n4B45PBhF\nqiMUNj7jPv4FKJUf0DspVvCNt9y9mmXO/PQxJiIlAg55pajZRMskwFS2zrMI\nVt96B8RruRUO1YbqEAMTX2N+7lQyKppqEEfuYAIOxpmuD796xBCj3I+bM5ri\nOGzYxoKnvmRguZmO/IF+QpffGFbvOlUEfBRMlEkTcy4IPj7gxwjAVrGlOLXk\nedW02mGwe7PJrHqVTkcbFy3RfHLRChbdNxFYNZJliyFT11nel/x4W7izMz49\n/qGJbZBRIZj6knmUoc6DgvtD/8alLj1kLXwmOOTAgHOGmKoicwVb2KcYKzLa\nJgNFAtJzcpde0fDziGnO4S5E+G+9W4ALaaf8P7IVPn853Ms4aXYifxwVnJoy\nfMkrEVsEhdqID0g3xH6qdA/1kwKsPahIwTGYXubTAvYSyj3GSS1fjpHac/Ye\nS1XZ\r\n=N8xM\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"920f8ec98e9709a32b0564a5334ae434137478dc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/rtl":"10.0.0-canary.776c18681.0","@material/theme":"10.0.0-canary.776c18681.0","@material/feature-targeting":"10.0.0-canary.776c18681.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_10.0.0-canary.776c18681.0_1609288800342_0.26211824846055864","host":"s3://npm-registry-packages"}},"10.0.0-canary.671d72d95.0":{"name":"@material/shape","version":"10.0.0-canary.671d72d95.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@10.0.0-canary.671d72d95.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"07d04254f5bf269bfcbd373c17ebc07f63b65959","tarball":"https://registry.npmjs.org/@material/shape/-/shape-10.0.0-canary.671d72d95.0.tgz","fileCount":14,"integrity":"sha512-vkCpdkedIk96a48Ax5Q/y4tCRRmgt+xotxVeDGjbjUX95Coa4CemsC5YqMfGYwAuCv7EWDgayOryZmRGAEs0Xw==","signatures":[{"sig":"MEUCIHijZrmTJNwITrCThjot8kx98ioS0UnuLHV2lxhGO+y5AiEA3QTAVFh/VRCi2f10u667eMlKZ1ckw5PZHRSqNeUAmBY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22172,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf7N8ICRA9TVsSAnZWagAAhBgP/irAmQvg2ICHWfL+YRHi\nkd9YwrVXt+XZYUoBhEzaog5pds9tY9n945OztpGccoRFbTVNOM1iSR1iZmvu\nNP1kKleo4Za+PRIaXexKh6TxMvdKX7fYIB1/eeTiOgv/9kjtPlOvD5BkHFSu\nlQB+Us87okj3uAyJZvYjIU3zU6NpIqswAJdjFO0VKl3c/oij0f3IhLgAfaE0\nUwBpAa641m0WwfOaF6KUt+u6N+e9pHNAuS+Db4596/0TFqTqyp9+DrTXJtZv\nvy/69eZMLIVve/iefdj8aBfhV5sO4iy7vCeV7/fuV5ILxLWna1E4LOZwQ9pf\nMbuwMba0t6nyFJKM3pwIjv1zu4BvPCzfgIpcU385wdSpbdk7KpdxJN+5BXWu\nY/lpNHb+80g/LOlYJac9CZs+2khzX6W/FFdoOFOPPDlOcMT5JSgaG28rHENE\nPpTvqu22D0nXqFVyECfYoLJYjcj/iCAhF2/6QxzZW/qQpH+khp+6l/KpmsDW\nhA9OcJZm3yIxPQIEB1M91Wg3h246BhgcjtoPeRz0h4dPS2pif2VQ21V2z3Ac\nZ+ptCmfCGs2bXia9B9AFsY0f47U3iLQCDNkWEZ2w5HvX7Q2fOQXk/k7mCxSx\ngAQRrSEuZlEtkIRUQaPsOc6DiCGJ6evkBqHIBJFrxjIoVU7dXwbylyEFl+dZ\nTRLO\r\n=CDqB\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"c22803ec93a76c661222622456cf6f5c5a17459f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/rtl":"10.0.0-canary.671d72d95.0","@material/theme":"10.0.0-canary.671d72d95.0","@material/feature-targeting":"10.0.0-canary.671d72d95.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_10.0.0-canary.671d72d95.0_1609359112110_0.2743226318352201","host":"s3://npm-registry-packages"}},"10.0.0-canary.b4f5a1c9e.0":{"name":"@material/shape","version":"10.0.0-canary.b4f5a1c9e.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@10.0.0-canary.b4f5a1c9e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"58f3951b4c8e08689cb9c0248ae3bfff8e87668e","tarball":"https://registry.npmjs.org/@material/shape/-/shape-10.0.0-canary.b4f5a1c9e.0.tgz","fileCount":14,"integrity":"sha512-UYzpLczQizmwaZa2UyeDG/1gOMwQNDukfsHLrT5g7xd3+ZDEK4lr7aDYwMxYn3WY6Z6NQ3Dweb/pbri5i50Uzw==","signatures":[{"sig":"MEQCIA1Kaii2qIt32V7/P1xbW4n8sha+x3FYnn6zJ46je0OTAiB7rlSm86q8o2+p1UzrMrtM4FLzLR/k90Ck1BFifqqb1g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22172,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf7PUsCRA9TVsSAnZWagAABeoP/RegpJu0fCurPxlvycDp\nADkxU4fuPsmccndrN3SKm1aZSTatw1OAEgDfGUpqavHWrLQUmIQCJYzPUQ10\nODWWv0sYN4kHAmOd4c4u9LlF5mtj2FwIAbZ4uJbZ+Hk5kvy8GfhGDyI+4jSA\nds0XaQGVBNgwSMcHDSRWA062r+xRjIB0ahUncINpUdCPpey0KLcQ69r5PbOJ\nRyymIymRY4VUvCeTvMvh7mkn9SGtAYaYyq62wgBjOQ4pJP18jciyhaWPQGyV\n64ElVU89otmJPubBxeyIqR4hs5VNJE7wWkxV+fIUKlIGWdW5EwgLPZ+ZwiL6\n9J9AMULeEdTTWyRkuFtTqSTKv9f4zg06+NOrcDBUPoenv3rfTw+5DVL/w461\nmLE+3sIuASt8AQ95PL0Wb20rQacBo0Cq9uaKmFdhjPTlLZBdPCcnoihCP4gB\n6M1Qh1UgMZKV016FqHzMq8S3Vk/pqa1r/Lx/oRPGwOd36udrbx1dGrAMOQlK\nQMO5GSQpeVlR0EyGQ0Lwyo37wYm1lDoCH0SFjlOPT7r5J6MKSXBorCdi/oiz\n3DhOjIYxH+qKECFjv8fzg9gMpXwYOb/9Jak6xA7N6XVugozFHAhBpiWASXar\n6bbam4CbLtO5Ly/WexOatz3iDa+BDgse+Yxr+/Szg3BgGq9HrECQ76vpHoN0\nIWp5\r\n=N1d8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"1db47387aa8e99022677270066e7cba1da23732d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/rtl":"10.0.0-canary.b4f5a1c9e.0","@material/theme":"10.0.0-canary.b4f5a1c9e.0","@material/feature-targeting":"10.0.0-canary.b4f5a1c9e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_10.0.0-canary.b4f5a1c9e.0_1609364779581_0.0293782062225465","host":"s3://npm-registry-packages"}},"10.0.0-canary.a94bd8deb.0":{"name":"@material/shape","version":"10.0.0-canary.a94bd8deb.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@10.0.0-canary.a94bd8deb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"627b195e9001c614d1b4898cd9e51a06ad0c9e21","tarball":"https://registry.npmjs.org/@material/shape/-/shape-10.0.0-canary.a94bd8deb.0.tgz","fileCount":14,"integrity":"sha512-QoUSmfM29CSiaeS0bE4+cukKmGocblSCnJaSyYf4h0sRlyvxlmRDuLRaU2E0qh8g3idb+sOrVVH1ZuPmZKrhOA==","signatures":[{"sig":"MEQCIBcKMP9B5KVb6Rosumc16WFUgBIbZDiSZySsR7SnWQ08AiBdJjlEepm19KjvILcSC8NKTDH3JSgwheeRBw6i97SDkw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22172,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf7PlaCRA9TVsSAnZWagAAqMYP/iIbirrWRJ4YGRENmphZ\nB1NdVFzKIDZ8xr0t3KbLdKHF0npXA5Eb6ybQCQYGDJo+Q+Q8hM5Lf1KBq2x0\n6G0wzkEUPq6s+6QT/4C1A/K46JmnlkT0uvhITMRvoMJO17T8Ss/pECVgSBjs\n1DR4l/hP7uyl/7HDxfIgIVPUpOdZrT6NPjC5hUbVw9kxvJ6Ge5ckZomCjhXo\njU3UW6v1gzNlIF8a6LAAO3adtmdWmjM5Dm08DG+t+O65WMPQKDLP1N1ez3ds\nq7hvCMwgl4VVmIRV/AOhpy1BVEqUEGpj3CqUl9BT3JwYKoAUIZuVjevnFtcw\nDIb6GZS1se5hlteTMxXUYYqSChoZyOKIrUJ6J0sk8V28M0C62iCTM+k/ce/X\nxXNgS5EdKRtLsiw78ctpfbqdfk48xvkqBtQuWj01wugx30N+tM4Bz7wJjpeQ\nQwHiT19ZxnN1IWt+J0qEz7Plx5SYF4dHOesSI4l34y9YmY2n7LKOhiDwNHzE\nmYbJdFsAJrGiAdy4a9bPaHLnqC2PHcCWXCorIzNyk7rV6UPJGgWooiuxkQe8\nzjRYbnC+PTBMcvilxzqCSbTUXYRqT0Xs42WjlLnQZSXxgVUVXpgPTEQ37yVY\n6fJol/8ihdyYuGqMaV0aAzUJljXt/RvhAXu1Rb/0EBncYlz9r0DeeseUvurD\ns5sl\r\n=PWwR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"12c943490c76f911dda3861f863c68d7abf77ce5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/rtl":"10.0.0-canary.a94bd8deb.0","@material/theme":"10.0.0-canary.a94bd8deb.0","@material/feature-targeting":"10.0.0-canary.a94bd8deb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_10.0.0-canary.a94bd8deb.0_1609365849509_0.963343992758859","host":"s3://npm-registry-packages"}},"10.0.0-canary.5d128511b.0":{"name":"@material/shape","version":"10.0.0-canary.5d128511b.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@10.0.0-canary.5d128511b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"440c23f067a936c5fd2e2bdfd0e48864898d301d","tarball":"https://registry.npmjs.org/@material/shape/-/shape-10.0.0-canary.5d128511b.0.tgz","fileCount":14,"integrity":"sha512-b+HTFQdS+h2wdaF3xCaOXb3Isacfcs7GXD+qrI4USZ7bfxXqH5O55Xa3GRsBJ4NZwQ/D9YBlSVVJgppixYyMAg==","signatures":[{"sig":"MEUCIEyQELYK5nT7DrMyvI1BLhJuKfUZcjDJkVuF9aFh0vFqAiEAmeT/lngifJDrvRwCQ3WryoevUpGHirTMg8YdaSfJm58=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22172,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf7PqhCRA9TVsSAnZWagAAiQ8QAIi12RcgU1XQdb0+rPE5\nxWGAy6f1r96k8+Sg2k2qIEsGvBbXuFiNy6sj56L+oidOchqGm9MU7bn1ljhX\nZYlIe2jJWpzJFGn79KnzhoKsX38ai6z7TPoEbpu//1q10Ezv/1V6INk0z2e5\nEAIT/WsXad16pSyA68DqkyqE4bJDwec8lAldFZ/rIx0hcpWpVpQpUiEQKNYC\nmOgqYJ9FRJUzH848rBYA6mSvBgKrBpAnJvT1M0fCn1UH5iS/wWpEiG+rLThd\nLeflnPWs8edu3jrJKIi4f8+esEOcBbG7JVRQ/l8QjFrrhZi7/BKnlmcR4BtM\nCJlPtBZ4U1AhgrKUI7QAdaffTMJS0ATMo1VTyWhTnSymDSxCvLsj2I5DaXg5\nwV2ZiaY89XdIdczZREEiiJYTgQHUrtejHlGRB8rsQ8OJMlXf6vmPk5Wv2PeV\nXBKRJl5B2vAIrMlcvEMG4q17fyeE+WWTm+RbTQyxQZ6hDN0L4siuKAqBX4dv\nVnoToff1DC0yM9YNfavxGIKcvMUT1six9XwFsw82rmLwIIrWcWM2Q3MTTxPE\nWtwo3iNy8xqdWuvZKkoIT0u7B9CD1ZM7mfdRS61PWS/dTmPyPpGb2FFnQkPx\nadJNLOVMZbANOcnEp09cmNn5GeZoCbkUmbTRguJx7KjjdW0nhKLT0N1AAJ3X\nd07j\r\n=5M3V\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"05d17b41cbad4a8aebac080f082633a26be09a3c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/rtl":"10.0.0-canary.5d128511b.0","@material/theme":"10.0.0-canary.5d128511b.0","@material/feature-targeting":"10.0.0-canary.5d128511b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_10.0.0-canary.5d128511b.0_1609366176597_0.927663487656599","host":"s3://npm-registry-packages"}},"10.0.0-canary.365c69360.0":{"name":"@material/shape","version":"10.0.0-canary.365c69360.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@10.0.0-canary.365c69360.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6a36ade78967e0257103f4df32b91418d4bf0b1e","tarball":"https://registry.npmjs.org/@material/shape/-/shape-10.0.0-canary.365c69360.0.tgz","fileCount":14,"integrity":"sha512-vJa7uycpmgMmE60dmzcVJNQyQc+EPLAbDSq08qRNRx8O5srPymxC2fNsoiENbhmv4j7W/zt5V1FiWPl5tlFNKg==","signatures":[{"sig":"MEUCIQDYFPKl16knSx9QEx2I+NF/B0chrjHqmN4vEW3z1N10kAIgLiQMbJWVPrh3amS8VpLUx5dKhA8TKzHqBejmfnLHP3w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22172,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9KZWCRA9TVsSAnZWagAAwA0P/3yfCsUduqpRRCQfDuYE\neOObA/mHCO59cVWRNWFumJsxKiijaT5ytwoD1Hp/GS0XFGZ88PvATPKWe0g1\nVhGfM0GOb0Sf5qHbp9++LYOCr1nP4auAoRaMecc2hCqJjhYB3EALi17MHcl3\nxC6fpyDfbQLuVoG9IDb6d46+3wQTFBwkC5KvtUBCcNDdsbuHt7l1fq4iMn5X\nm6p9OycmjmqJsiR0kZoEh/lSaTSTYakShvl1FdDIlBNcmKp49W9O8mxkueY+\nxYKmPEVK8gP3hJ+pkOQiXTrFSo8BeWmsJSNXZzLGKTkovejVpV/w7gnbtUR5\nwFgfQE7RFJSNmoyhUgy2cVDpoaplsVwhLSP2MwSNTFZcboc0cle0tHInlK+m\nEf5w4Ybj9WUEZ9h0NkryX9F3tvWaGEGZ6w6TvFRQwJuBdzqKvYxB4xYi2UR3\nDgJs0itovf9fDNpYkYu90yEwh3CDmkbw8hswEtQKY1p86aocNo7Pimj9VDbb\nOpnVs0F/9e6JInJ3L8gW1WRMFzB4apGM2t6KZdU7m/CKQgw+px7W+32zB+KO\nD6SHZDMblFfT32j5qo6+qzG0eUz7bVdv8/CvkACAX0A3JJpksC8OGVWPWvkc\nj0yYnOvF0oebDDgBZyh43klsWZcbGa02eDGWUEW4DM4GMv/u7RtU3rbWHeZZ\nxvU+\r\n=ZSN3\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"0b060c30e2974c71db5d5ed87e3ab7918656edeb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/rtl":"10.0.0-canary.365c69360.0","@material/theme":"10.0.0-canary.365c69360.0","@material/feature-targeting":"10.0.0-canary.365c69360.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_10.0.0-canary.365c69360.0_1609868886459_0.2047597976126505","host":"s3://npm-registry-packages"}},"10.0.0-canary.700a8261a.0":{"name":"@material/shape","version":"10.0.0-canary.700a8261a.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@10.0.0-canary.700a8261a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f349ed2941049f520a904c2736089d4cc4f99e37","tarball":"https://registry.npmjs.org/@material/shape/-/shape-10.0.0-canary.700a8261a.0.tgz","fileCount":14,"integrity":"sha512-HmArRsTl+Xqc0BVu/iqBKobqfWxcUeAfsuGZS7Ygp59L0z2a1jpQuI9Bzi5pR9GIQWx6QqdPzUbULbyM/YpXNQ==","signatures":[{"sig":"MEQCIBLgQipmJCufkYWiz+W5wBr//vI8XlIYWxcsGcZKcr80AiBfxK9GKFW8Popd3J4CUU+jPVtZkxEOR2xzqU8kCHqqkQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22172,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9NNnCRA9TVsSAnZWagAAyxQP/2zy61ir0rKAykaDEL6N\nU6jp2+rKK0GOhNxkgFcjQTO+P+ICoM52TpqtyRPGvy6k9R12mxkxnSqkJYyP\nhcyXbBcjdVUOwdAee5v3+tDZUJ8aB0rulYB0EWg0BSTZnPGioXNiK7+KTau0\nrxc50JawveVrWGmP8lR9DnlbhpllE59J4CWJFvcwDtHgNd9Ps7HwGTZFQXAN\n9I+utkx5bJ5ooAwDK0nUmRfmVUZtUr9uqO3ZGX4+GQee0w2WLYTu7ssRc30V\nEgq9ZCck+Rx4KYS7pilbck0C6vaaQT3i3uytva1/+sAC3k68N5EuoPbnW85u\nimJWnZCPMirtMKWrd/nrnV52vtq/uNDPSpIN1Hxbv7Wh85HuwCDl9rSlNRvn\ny7zC0xf0JzWgSZahaOl6Jskoqi6YucPiBIgfy364Q2/YgZYEw7h4wnRONeSb\nY+j6rqunS2/Ps11l+GwVhJ1qPl6VFZZMhDqlzwDUpFH0EZkW33SbDLQqGv6e\n1o4JazWkxjOQsxWxp0I2dazUYg9PltXrm0QoVoJjB1GKWggRBnOasjcjh/oj\nwh3lPSEQ3nEqWA0OdrjuN99PIhhgE5NAyBAuan9sdMVcOD/2NCeF0gfpjpra\nZSWGWC2Lsq2hh0rw5vK5OXYbavDkBDm6betGmJq0hKpt5C9YhZszKwLuS4hR\n/k2z\r\n=UJtx\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"0e9aee4feea82b83f34c723b52aac42fda1cdbd2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/rtl":"10.0.0-canary.700a8261a.0","@material/theme":"10.0.0-canary.700a8261a.0","@material/feature-targeting":"10.0.0-canary.700a8261a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_10.0.0-canary.700a8261a.0_1609880422765_0.6914439260240792","host":"s3://npm-registry-packages"}},"10.0.0-canary.766981c15.0":{"name":"@material/shape","version":"10.0.0-canary.766981c15.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@10.0.0-canary.766981c15.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ab27a58731f3c1b6e11339f78847698e33755f99","tarball":"https://registry.npmjs.org/@material/shape/-/shape-10.0.0-canary.766981c15.0.tgz","fileCount":14,"integrity":"sha512-cOcCXN51coys/B06ScjkAGbU0apgVXnnRL51d9tU5J4xT0pESR3mi7p9X7phqe39y6DDCcz19kZZ4mlJzZaeLQ==","signatures":[{"sig":"MEUCIDlUwTvkYlyc+eYZQecUKJJF2D83OEZ4AgRLD3oRdpsSAiEA9JUz2T2F+G/WlMYTxRruJYM2HPUm0q+ETEHp1SzXIYo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22172,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9OrICRA9TVsSAnZWagAAVzsP/jk91Psn2ZjdT8qsgG8S\nCXje6FztUs7T4CTfSMKXJBvasVenJXHMxcH+7EP8b5NsbnILNFRPPseojFEz\nt1Q1w/U3r7gOFkv1XafQLrWpdrhZao8kaI26zhx2uQYHk6i/QQKsV54PyTjR\nq2fnzlZuPrGTdHv5oiArRcA/YBHKbSngWjl1aHfPbB1DzBoMZ2WOklzphojA\n9cX0GZZq3kB/vG5d3DivW0v7EeNZ6S6QQzVuh4oO2vOW0/PnaZnlDQz6w0/a\n/o13YPg6g3dPVwqVaZO41c7xfPhB/KMQj2hT0MEA9Rpjgyt4SvdRkXWJjo0f\nZAGV1jwRE5EhpDFX0eEzZsaDTlcrreY9NcXM/cqWSYuPL/7i5vbDlxyIDBq8\nKkgnUAPeAzRe7M2XMe0syEECPLPL88mStHFOqmRponPfhDrmmo1j65FTbBId\nedZjCMtLUvKU/WwzvE/dIrvdBBUaQ52KgI8ovtvwjnF5fn27Rs10lQeyD2WN\nhUp6kumY21JIxoW6ymcaKLnK+rVbDZXMg/jg5Bp2tBrkcyKL1H6ir+gI1Vnt\nIJ4+3WIezTP4xS001IXtBmJgoqeclUkoBpoBC8dkehwmZqiQ7eNNkNm6c0Y5\nPQcAucsIUu0bZUlBwN4gXWyBzaGDnCTNozclbjzyR1HbbACkRqx1bYT+roEH\n5HiP\r\n=PS5+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"40a13adf47648f48d6dfb1daac9ded2f7f0bd442","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/rtl":"10.0.0-canary.766981c15.0","@material/theme":"10.0.0-canary.766981c15.0","@material/feature-targeting":"10.0.0-canary.766981c15.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_10.0.0-canary.766981c15.0_1609886407581_0.2112604184684641","host":"s3://npm-registry-packages"}},"10.0.0-canary.b28c576d9.0":{"name":"@material/shape","version":"10.0.0-canary.b28c576d9.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@10.0.0-canary.b28c576d9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"643ff48fd0c6833e108346653967dd8d7bf42596","tarball":"https://registry.npmjs.org/@material/shape/-/shape-10.0.0-canary.b28c576d9.0.tgz","fileCount":14,"integrity":"sha512-sM0yepuNxGIW2wfASkcI/geKIJY6WbQ+F7w/9aFr5yapu3HP3THEgrRz9Yd4+Jno5aVElHGrDITZN28UvWDLfg==","signatures":[{"sig":"MEYCIQCWftfvOFQV5MvBtCxO4PN2eFgYu40sRSsLDSqZPTOyvAIhAOSGFmkWTGWgDTihHa9ZUMVS8nP8nrdAGm9D6/1nPd2C","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22172,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9O0RCRA9TVsSAnZWagAAmAAP/i/xOcWMERHr6ixPrVrm\nT1aezwtFiKeXAFbb06sP55gsVUgurNqVsYomBZPNOdLoGNA6EAKLkGFtedHb\nXTWT4KeI3pmc+vBVXMu/MEWzYfdYeLdSPHoj6S644pDrp1exvJzZKYMkOzsF\ncBk6+tpIAgCkcadZwS2UXrE6mve2w+2mcqeep7BQuY6c58pQWk/kI0zH8PqZ\ncX9mAxj0tA6/19vj0F20w8wmjWc+7R9U88scCpPaPNGmDRwoagiFfMbx1si4\n1G2cVb+WgkREFF0meM6VDfwDsL5quprTqVIe/b5OZCVw6qx83DaaqO5gMmXf\n+aENbgOsFtIUcA17usdB8PYJtgVMZLZpT6BGlEvktm+ZP6YV4LTp4T3lOvol\nw7LbPeR0VAc76+wt6P/ZP8cuu3dXpFFiWyC4Opyz0DDDIDV6BRYt+MSkTpa7\nasGAnVtqlgYQpd5ujQU8vB4WnhHQ9siTx/ME6zl9m4CJrtdpMWu6T6ZOMLQb\nb26OgLfBa4vPdJL/4oGbRZnf2otrQeaojD+u5j7NPhp0ZyLWymkq27sCd5EX\nbdMao/Yce2FS8DKQV3zUQiqS0sY7p2XxrwOn3KaT/6430jHjUUzVXfAqAguj\nyzSC5tlgJzJYquJs8uxaL9idf3oqiVXKSbv/9M+6PP+AWkPuFn9IJn5F/jjF\n8kW8\r\n=kJ4W\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"f11c5039e5e02253cd6e3eaebf7ee15629f3c182","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/rtl":"10.0.0-canary.b28c576d9.0","@material/theme":"10.0.0-canary.b28c576d9.0","@material/feature-targeting":"10.0.0-canary.b28c576d9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_10.0.0-canary.b28c576d9.0_1609886992660_0.2089411264432639","host":"s3://npm-registry-packages"}},"10.0.0-canary.968735356.0":{"name":"@material/shape","version":"10.0.0-canary.968735356.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@10.0.0-canary.968735356.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f109e8fb9a1156f4e785f18336fc3514cb84d521","tarball":"https://registry.npmjs.org/@material/shape/-/shape-10.0.0-canary.968735356.0.tgz","fileCount":14,"integrity":"sha512-xHqdUtff4l+vjI+7Ei16GobIhJzY8CP76oNKsYEPR4CFUkkxtLpUkV6OAjux/n+B/Wo5LpWDxcyzXM2SqqJwPA==","signatures":[{"sig":"MEYCIQD6CNqYkV9SioyNPLiqxN7jpL1sbxy402xGn5LWsB8Z2QIhANp292tCIHLVDD085wpLPqYxhZ+cXIw9zPqlbK44vBb7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22172,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9dxUCRA9TVsSAnZWagAA4Y4P/j5tbxF9ZPnf6EKGVlqW\n5R3dOK99Y0rmJgfIT2ahB6MLnLPCp0qsveYYFy/0vcnvAVFtaP6e8EDcNZEn\n+nWazbx3r+gxVdqI2qzDnUSjZIHNHx//l3SLDYMIWHPtbdbsR2nZA9niQqEN\nVYko7qMMVvv+HNwJnbhZmOr6hhwSRq9h2fuxyA8LI1q2obSwvVoS4m+yCcnq\nRC5bcI/IiX6j79TsgWhKFoBwl60xYbrF2k0r6D5Q5Bw8WI+m2Dz3H6N/aOHS\ndEERyV8C3rehqUjberfNc82PT0VdKuUuzBgRc74VbonSPdnhzXBnt8VXKbh9\n8NY+YGcU2ZAmYFJZ8YWnp2S16DfDyNnXv+7AyZ+t4vZBwLk3MKyyajCdmRwY\nPuEsjHLxx8wODbm9OkgxAG2RbylISBXFAQtHInm4d0KEZgP6pnZy9sosGq+R\nRVlSOCLPE0XPqmNSe69BjQGoTu5YgbVJaVgFvse7qyHL/61OwfpfsrXae+7Y\nf1bnZ7AvbYIeopHk/suf7L041myv+s8tVKuR5YZeXriefH9bBjPQLKfM0IC4\nB4g7wiGLbxR6LyADZXqkFn3+KVclKcv8Dw/Bx9kWPOVzOFCM3/404oi9K1Ri\nz7weKa4MLAPvWoM6eWeVjwG4aX5HKPhNu8RKp2zjdL+u6ydw1Ohahey7ndjx\nB76d\r\n=TR3y\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"016bf1732e983523c8ba8007681b058735467018","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/rtl":"10.0.0-canary.968735356.0","@material/theme":"10.0.0-canary.968735356.0","@material/feature-targeting":"10.0.0-canary.968735356.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_10.0.0-canary.968735356.0_1609948244094_0.13723133243801144","host":"s3://npm-registry-packages"}},"10.0.0-canary.c5e18b020.0":{"name":"@material/shape","version":"10.0.0-canary.c5e18b020.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@10.0.0-canary.c5e18b020.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f399f1ad96004c87ccc95903dc2e52bc19aa3534","tarball":"https://registry.npmjs.org/@material/shape/-/shape-10.0.0-canary.c5e18b020.0.tgz","fileCount":14,"integrity":"sha512-4+QJ8u1ay0zvDrS8e/NRrgaBrU1ib6JSUSP+A/4rWgxH3KJxDLbG9ghBeeeS8kp3xU9P2In5Sy0vpSWmq3KCHA==","signatures":[{"sig":"MEYCIQCW8nHEaGH5SmRnq8HpkrG0c9YX2XjNJkfWjYwNH9A1wQIhAPrtlWuUX2oC8ZHDXe2TWt7D9Le0bh+YExOoTLgyjMNZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22172,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9hMPCRA9TVsSAnZWagAAZLYP+wWnKRMM98TDWT/cZGwp\n+B5Ng8setUtNIEPUNug/inffxlmswmq+vTVaYltdy+fBhiLqhEVCZypmqrLu\nHo5OXG4OzvWvhweGLa73UTh66k5U2RBmF4D45qCThGqeKUv3okcLf1/E3p/F\nSpdC6m/G/hbuVqOLUYzLUnfBTEtyCd8DRyvCCTEC2ng8+y8TAeLyv7wSkweR\nzLvDJV2AjhO5tELRuZG0XkIBV3o+RVRzACZpWmwmaIISztyZz1XQHvyYEIuW\nrYSFHldwq9TFzKUAx+5OYrsCLj2fj3VkTbq4L6TUcfy46wo48EMsDmHahktC\nwG8nPmr0MBmvVMrv3EggzL2VXGFy2+tpmmyo/P9qpNLMyLsam6r5Hpc7C5TB\naXV+RZW2FNn+WhxxsdUGVkh8g9My+0C2eRH5PuG3PhoaSRffyKUjNK3C6CdM\n8+rNGJpNTk+wMO7yeB9pYdU5hvlrxpsIbNlqq5Tzf+gvx0oz895xg4xEOVPu\nTQ7vTWC9GJ0dD0RGTQylrnymbRccVU2YXuIAuFQ48F5c85Gel6OzGhWWffia\nXE3XrIsRejvA7EapveovHjnFRbvkZutUdi92nbQPAjoClrWhvf2UepsZVxe1\n0gnPnri49JmDRb89MD1uFnaDz4EXFHHBPTZsIQNpZ2vGrM3JcEmgugEULN8d\nX476\r\n=F9nd\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"16a60c2c89ea18fb88971304d4491f612734e932","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/rtl":"10.0.0-canary.c5e18b020.0","@material/theme":"10.0.0-canary.c5e18b020.0","@material/feature-targeting":"10.0.0-canary.c5e18b020.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_10.0.0-canary.c5e18b020.0_1609962254617_0.49601445577172254","host":"s3://npm-registry-packages"}},"10.0.0-canary.bcff8a66a.0":{"name":"@material/shape","version":"10.0.0-canary.bcff8a66a.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@10.0.0-canary.bcff8a66a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cc7f9d2c5f9866716f4fe1dd31d9298f13774924","tarball":"https://registry.npmjs.org/@material/shape/-/shape-10.0.0-canary.bcff8a66a.0.tgz","fileCount":14,"integrity":"sha512-A/Lsr8IBQj+kar44JO40EPzzWiwcz2nbKyTG0r7wxnlQopmgD0uyMrgYo2vzbDJlnUwuWC02yVnBew/UQS3Qpg==","signatures":[{"sig":"MEUCIEuzflLDIIDNMQzfHTRJdyoyMVtVT8jlVr2qtFBRuLuaAiEAnhqDSYb2rzNe9PFxkgJfJ8JNIzgLwqNGLRqH39lRrKY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22172,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9hzjCRA9TVsSAnZWagAAoDkP/3DArzBkh1uAbm0pUKSX\nfmIqng6czN4QU1i4rAD5sPHmZnCxhDm14+z0qHjwl2FylK9Gapc7P0eQqSSn\nUHgbjADVWf1fxtNC4WxJyYJTTpjLC/Kusa6T/YVu1dbw12FyPoG9WxyJHU8F\nyQGYpzES7Yk1Pp3LEwqO+hvmm7P+fJCXFEWMFjU8vxkUFOmIFsPS1x+GHUWQ\nbrxjIIFEcxhLTMnD58UK8WhsNRgNWEayP7jkeVFShZq8n8VDGp81jD+fKBdY\nJZLvBj37mlsaYW8ccWQSFUyGwv4qtmmZx4v+HufpoXNRo7a4Z38IrVwOESWq\n/6Hy2UilYtlr1rMIPg5WhkZxXkUeywc6j/68l3raHT/biwyWga1ojii7EATN\ni6ArBp07iASHI3mFbWvOvHrcj1quWsYqAu/J7zgz2YHmGPKCel9O/xPz8czk\nOImGcgRh10gufRgGGB2cjx20lGb/CF9NbD1gn3L9J2byFoO25opPqsHnAko0\nViBYW69RBQvIck5VBHqb2yto3UoGpnZdQICQrgFm9qmWjM777iNyJFAGNS+H\nJQi9kluODm0mDVeYoj3aFQ/RW+RQSqCAS/ERl/cPurUQDRDo5ZR+BhtCaHCE\nveHAezW9BM9hKzDMtuQ2Bpk8PUqtbt8nXWmydzFIrpwReNCJLLIMIVHqLd58\nsw1O\r\n=HjX/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"81af087ae7601c8b819dbada709de8d76ddab960","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/rtl":"10.0.0-canary.bcff8a66a.0","@material/theme":"10.0.0-canary.bcff8a66a.0","@material/feature-targeting":"10.0.0-canary.bcff8a66a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_10.0.0-canary.bcff8a66a.0_1609964770486_0.7202991624601582","host":"s3://npm-registry-packages"}},"10.0.0-canary.79328c9ff.0":{"name":"@material/shape","version":"10.0.0-canary.79328c9ff.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@10.0.0-canary.79328c9ff.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a178bf16727d42d663847765f9b9e577688fdd53","tarball":"https://registry.npmjs.org/@material/shape/-/shape-10.0.0-canary.79328c9ff.0.tgz","fileCount":14,"integrity":"sha512-fjFRBHr8kIET8tcty/7DdNygYzIlhm0liY8uOlIkpFV1BMLqgWv45u8ZIYN2qI0+AtJQFbnajK9ggCMwq4nrSA==","signatures":[{"sig":"MEQCIG59cKuTx/h9RZBCppyTxpoMsBgBoEby2tKfXJpUiosXAiBx/nIvzKIZDhC1jCZPRRgwbJlolZxbPk8YsSxRoTitLw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22172,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9nMeCRA9TVsSAnZWagAAvRUQAIsnSJOu2hlqmcobCmKO\nFRInL6rr8NB7UNpE011K4avTxdHaGK3FA1fzD2PXmqRqa8Coe25OLXYnm3CW\nqf0HkoXWJMjbzKlzB5WKtwqvYZ4fKQb4fFOWIHKwyGdXMCA8dTs9ul6bMAyn\nXH5PyAOrakqGuNAgceFLBtyRZfHK061wdWMAGokgOFmZT9DcoD31HJLw/he6\nGiN1rlhT6PDau9E9BZx5/1WD7PceNO+Y+YIZHA4QLro5f9JbDzZtRMlpIXrM\npCLZmTbufmVzM2KGSPNbWRG0uWzOB9gIvBhvtM6U6sCCtU+7VSqKkPk1FdXe\nLJpq6vU9IxcnBXeqRJxXgW0wr28sjXk1THBpuo9SUMR0n+IB1Lz1Z+nOTY93\nizCev2+GAuTY7hiMu6+HkMOCzNWk1TtjXwf82Y8cfmJvGIerllcKZAzx/u1B\nI1Vr2oN0EF21eqMOnL0G5OqOO5kqrsaPXTvhWIJ9wNhzzj0C0U8qsXY6ku2O\nvZkGrYAU5lAOWDvttNLQRqITtHLUSPALtNrACzIF5wLuLKIGisoHGGBg9uGu\nuF8sCuk4YkQxLoTBoTubBnyymw/La/4mELmJXUkzGcxYbo4Rs3C/t5zpkqT1\n7kJJUnQsaNek7y/Zs+DzEf+woarL3SLYx3mSoPMxeuAQwKdkeN9chgqrkbka\nmDa3\r\n=j455\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"15dd1d7d9065f275f9f9779094b959944d33197a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/rtl":"10.0.0-canary.79328c9ff.0","@material/theme":"10.0.0-canary.79328c9ff.0","@material/feature-targeting":"10.0.0-canary.79328c9ff.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_10.0.0-canary.79328c9ff.0_1609986845683_0.9700809683500826","host":"s3://npm-registry-packages"}},"10.0.0-canary.121e1f303.0":{"name":"@material/shape","version":"10.0.0-canary.121e1f303.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@10.0.0-canary.121e1f303.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2dd21bb776359f8446f5da09250aade63968cf6a","tarball":"https://registry.npmjs.org/@material/shape/-/shape-10.0.0-canary.121e1f303.0.tgz","fileCount":14,"integrity":"sha512-qolbgJ/G3JRT/yBMrvDnJJRG2FLbDNEZehZ/v4hTPCO4h71v+nNknBC2GnuqywryXnBYKU0l12BInxSJ/DanzA==","signatures":[{"sig":"MEUCIGfrDpcuz5Lqbv41i/lnzHFlSx17WLhCCUuFXubW/mkzAiEA75uDNSStl7D6gHH+3DOuNdrxGujoZ0RfiTRO/n8c7Hw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22172,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf95cNCRA9TVsSAnZWagAA0VEQAIckjG0NDznj7Po7t3BR\ns2sTJIyD6u/LDuX3xZGfRVlfdqj/IjnmKfanZCYy2gOoX9bX2nDTQQ2bZg+4\ndO5j3SbN5LXqKFJ1HERBDxhNmMUZeANfx0S99mcir/I78n6orxEwrO5t1tGA\nNAvQ08FXkDMa2Cb5Var1tQYPvNzGH6VTK9aDBHWHY3xlc5AoHd7ACs0hABQc\nygVGCSKo0S0z5i7oc1978g88jms7lm99fciG7/DWVBJDYGXw45FgGOHwFd0W\nf2LkUPtb5BHbVC+26CIj2mNuz/Zk3UBtuRONgGHtfsIsINZQrVxDi6eZnsk9\nJivh0/e4jSj1CrL7PfZXfSY6Ymwr/407TswxAvuuuXB9tjHADK8/0HWVbatV\nvY4uTHmkBRes58s84L8MfGXJIE9DbsoiL4hwqHZMODu3USziQHRBClTuSezt\nddywtD+OnEWUEaL4fg1yu4cy9Xc1dUEc+rcw8HzhqCAFyeFgU2cVIsV2r6Zr\nB5mbZ6zRMdd1b9ciFxZ2DrrUwHBzf/jkk2hVsBizddYHKrcDWDcTB2Zy0cVT\n+4g4d5T40uERpFW5iCrMpIx+w8Q0xG3NjKAFc86dV12qjgdlg7j/6HrrcdTB\nHEGq3z0zF7/0T00eqn2+bAVuRZpHAIpEpF7WH2wczE3nTPxfLwf5XqJe5cq1\nXi1X\r\n=QVY7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"6ae814dae9eac40570f13ed9d7b821cceddf838f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/rtl":"10.0.0-canary.121e1f303.0","@material/theme":"10.0.0-canary.121e1f303.0","@material/feature-targeting":"10.0.0-canary.121e1f303.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_10.0.0-canary.121e1f303.0_1610061580992_0.4459111705716128","host":"s3://npm-registry-packages"}},"10.0.0-canary.abdd10065.0":{"name":"@material/shape","version":"10.0.0-canary.abdd10065.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@10.0.0-canary.abdd10065.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d058d2c9f6ac408c25f97a6ad70e750d2e35815c","tarball":"https://registry.npmjs.org/@material/shape/-/shape-10.0.0-canary.abdd10065.0.tgz","fileCount":14,"integrity":"sha512-i0aog8p8yEBKHSXXBSW+6ogI6+97m/cEvbwe1pFmq2IJh9Ebo/oDCI9pWQ9iFbUR99C1f+LtiXkwXljaNzsJrQ==","signatures":[{"sig":"MEQCIHW/F9oPtecxUBbOa4+QFPB0E7b9e7S3Y0NVO8FLI0LRAiBFp4M1MtGvTwYdxGSt/SHJ+EOHOTq9mQbvF+CPGPma7w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22172,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf+JuYCRA9TVsSAnZWagAARk0P/0U8NM9pHYHRYvmCUNRG\ne+CD0uVAAsFx24BIdiows2QATf0TBC938Zy9dtmdLoYmd+AIieGuDNZC+HZs\n3ZvjOXgMGEX67M24CjTEVhcmQxV+u3vMnO+8P6Kzs1JXGvCAcaxUkF94chwC\nPDRghK6TSTI0StveHuFqjK6sWIyoxPpGvP4O4ZBxDmjqcE0/2shEneMqp9Vb\n4DP9d3Uy/1c2nCMn1kH3+jBRLjOu5JEIGbsaAAuDemkqP8Il8uXQgxuRI0Fy\nDRy4I2HKxLAGB2yFN/mIHMTSHISRc+P8RA2dlnXUmGd3vUhvEb384f6IL/Bk\nAskTtoPP3Zlof9LuZJ8Ubh90AOfwaK5Ow3zNUQ6M4CJRNRHWpsPrbArMZQuW\n4fE9q3mZ3hK2iSUmCRBKAcpVfIeHJRY9fsktJT7MhO4AhsHE99wkL7YJotMo\nw6f7uXZNj94j7kLbVYPgRb/WKhcJauiSJ/1X2QmdvFdepP842291GzxDg0ma\n1cNpL3O8QDCYTScVW40ENdJVVqXEU1kXUtud9X4i2nTaGbzckCTlaoW1U9Ca\nGyxF4/+KXDafd4TPb0+IFchIo8uin7DeZQ7UPGFekLcmZ5DWRxd3K0lidcQj\nutCbagCD35PSh8V33fPi9dOWoVMJpQGP2+iOIZDQXToDEBvPHca3IbGNub1a\n7PGf\r\n=QiGF\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"bc8986a19721edfc6facb62cf839cd222de97d02","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/rtl":"10.0.0-canary.abdd10065.0","@material/theme":"10.0.0-canary.abdd10065.0","@material/feature-targeting":"10.0.0-canary.abdd10065.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_10.0.0-canary.abdd10065.0_1610128279796_0.16353630862734914","host":"s3://npm-registry-packages"}},"10.0.0-canary.089de519c.0":{"name":"@material/shape","version":"10.0.0-canary.089de519c.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@10.0.0-canary.089de519c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1765ca61ca2ac28c5932d7e7258e338712ad8968","tarball":"https://registry.npmjs.org/@material/shape/-/shape-10.0.0-canary.089de519c.0.tgz","fileCount":14,"integrity":"sha512-bsTqPNW5IrlJqYVLeTpeROm1SBarT/FjqdHlKJtGg8IKKhb2z7ARNPPL3ibOSdXB5umhLxFjEvyYtPqESM1fEg==","signatures":[{"sig":"MEUCIQCoZhN60fDSIy+J2bpGXqzD9YRcAFvWSF/GWeRz0CSh6AIgWMN1JGYCHWhv9faqLm6NN7zONRMtffh3eTn3LwyWghc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22172,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf+NqwCRA9TVsSAnZWagAAZFEP/ieYcvH3ORrWJY8C/cyk\nmFAATEXan6nUWH7gGAshdYzijypvKtL2UHUe/1kLzY60eEx8XT+3PHi/aqeC\njas2OtjsM+2tXiaXRouCo1ycwJBLl993LsCoDDcozqsvKtfOPQ1FWjJHalsW\niCPN1zMb18EqMcYGxmbJPemQqcGwU9QbXKRKxiLn9ORtP3I4LC+aIGbQ7jfL\nVmQYi5DakJ8fzCCsflZZoPY2knYdBMPbSgk/WgHQcrDIacpmki12yETZJtEs\nT4EvZxOdNloogttolyESoVLqxMt+6JqpK3A5rPWO6Fu6WcGsn6nzxZKhkpr9\nAHyUg9NwIZip99BTvEIgQQE/xz29WumgKnz0p94KvHzBf8qaUbn9E0/bwqnA\npjG/xBSNyYKhbm9Y1dhie1FSdCumt0ARBMHhpZB8IbPSLh5L100q7e46h3sg\nK+r96H50omMNjbWrYDUM/9dgNAeA/AzimnLBdlHy/rPdnChDFhx9N3JnjJSB\no2ctFcara4ANABr9dOa/x6/6u7ZJ21DQOgQH4cYFhL8R8jb/isI+9n5XoAb1\nXX2ctoGo4OT5o7LsyLdN3NmPVrspWkg2ujNgdPlFxuo406If75KATUmpnOpG\nQQtOqIpKb7DOfMTDQfFvNxETHLqM73UXTtOEAnBV1cmWeG9P0aVn2fPbHKJI\naoW2\r\n=RmvF\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"6a64709b5be73a45401fe82d1e6d126d7312fd21","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/rtl":"10.0.0-canary.089de519c.0","@material/theme":"10.0.0-canary.089de519c.0","@material/feature-targeting":"10.0.0-canary.089de519c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_10.0.0-canary.089de519c.0_1610144431788_0.3836192750695999","host":"s3://npm-registry-packages"}},"10.0.0-canary.163119837.0":{"name":"@material/shape","version":"10.0.0-canary.163119837.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@10.0.0-canary.163119837.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7ed934d80fa8f36bdd06cd0209630479b7ed323b","tarball":"https://registry.npmjs.org/@material/shape/-/shape-10.0.0-canary.163119837.0.tgz","fileCount":14,"integrity":"sha512-diNw3893l0DO7M3pV8N+/h50nPqe8iR9r91sSeuna5qnWDysywWwP3uVFQe30QZEr2Eg+lJWWLllo6SRmXx/NA==","signatures":[{"sig":"MEUCIQDN3soRJrV1keF9Cui8CrUzD0ns+veDTKcvihPOaBIVpQIgJh50vl8RgjYYkpr8Aplun9BiQC2UJi8sAo8nkqRClQo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22172,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf+O6PCRA9TVsSAnZWagAApL8P/1H4evvzDNORsWpaBLd+\nkDY8/Ad9pmXgV+yKMCjfvDg2kJiuZnUXoLKQ9qTVOTjic8kiC6c5ksNxtBI1\nv4YeKQvxglRASvd/TuIR2W0GaN2lp3r0fheA8/Vn4IulRlbQpwCU7wyDMsPV\nEt+gvK2Z68y1w/GI8J7NGulh4lwROqh2Hp7VrODy7lLbT4AmpiunuKQTKCoU\nP++PtNtc/DOVGdCTTggWlFskOWxrho0aPaX0q7eXrkr0iSbctucjcuWLyPox\nNHTmzmS93+SdGaMsSkQPK3947Aqi4j1gaWH3lusAawiBAfUCiYz7L6SzqbsY\n682OQFs8M32xxuC5To66PdKqwLMjrVt63mRsgRpSSKTioGB4c9PFktKnlH3d\n/WcO712DsoJegdphxYHvkbEpsJ3/oQ+lfWBeCAGI4HK0U7W9512LuePtX1Gi\nHNsvvruOO+UJFh6OQyMkWbSLGV6EQZqP8N3K8h6NgHM6lP1Q3f8lAGwU5Hu0\ni7XIdTeBoSLZ3t21d32qyyY551YFgYsJTC/mHwb7qvE7+3bUaDCCRaiH5jfi\nMPpSeX8mdMDhheC3A4/RM3Zl4sS4ifX7gTfe9qu8d2TlpP938zMQe6ZVxcRH\nUURhSz1G3TH8bZmvxwHq9PTIfLaQp0j3gBT9NZsGEB+tAZc8abThMVlivdnK\njTuz\r\n=hzso\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"86f8af57c151ec42ed920ac445544bc384ce0975","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/rtl":"10.0.0-canary.163119837.0","@material/theme":"10.0.0-canary.163119837.0","@material/feature-targeting":"10.0.0-canary.163119837.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_10.0.0-canary.163119837.0_1610149519247_0.8276226234787796","host":"s3://npm-registry-packages"}},"10.0.0-canary.b8a1a58e4.0":{"name":"@material/shape","version":"10.0.0-canary.b8a1a58e4.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@10.0.0-canary.b8a1a58e4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4303b1f5b61f3e3f7c8b944e5d1f471f7364c0a4","tarball":"https://registry.npmjs.org/@material/shape/-/shape-10.0.0-canary.b8a1a58e4.0.tgz","fileCount":14,"integrity":"sha512-swvWeVyy3oWkyav6grf+w3V0FeYu+6xicKTzE4dxK8CpVuv5rpyA71JMPL8cCWEB6K46qDx2gnLrr1wNmp0Lfw==","signatures":[{"sig":"MEQCIF9ETDZCtzd/rs4SQbc/PN2/LtX+rp/3ohz0nSM60CJJAiANm6E1dgGWMYJjHQGpsOF+moK+6DV2l+4FPQgWSezb6w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22172,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/HuoCRA9TVsSAnZWagAA7ekP/1FBbxdc59k1kUj3x68M\nhqeJMr0CilFkufTb22QRyG8HXxnV+0YqtD3kBi19ReSPLfZC2DRLkAIZNFX7\nvCflB03QtNkjZtE5d4Zf5dXpo0YfdfhrlcQDaAVt4AhZtQpP/2uflFds78Up\nEZdnJFExZ3B9gEjxjNimMd5J9rLuUFjZ3dyjQHLpYTTicU2LK/tVlASsQyHF\nUNFrHbXEBFHeUF9uGFfqDt1cAsTt8ZR0TxprOXCg6lCPnQV0JGBxjGKD7Kgn\nC7tE091HXFuJj0pGdYSQiSfkfIiElCI8uxjrESYlI84bZf1wY3reaI4fZniN\nSlkrAer8SJgbH0SEUqg+oYl8+qxW9hwtL3XRFfD75pZ3ynDKRsCtrAWnAu/W\nzssa0Qj5KwZXF1Kb5BU/dM6oB/BwGDqgk/NLl7j1gkuGCculw6kiTTrIC7bW\n/puoH0obFPa1KAkIfLsM9WNnNTIIw/uwL85E6Ya0ZiG7kP5mJGefqQ2sACcA\neTKupG9v4d4pKJ87JjFcwKicEayZo0uVhBuZvVjfAY/BGeOyqSp55B+3zMs9\nNJdzQKNEm5JA6OeEBEq/t4/DC2WfDg8plojFf1fiMkoWU7YBTBjSktNOw3f5\nV7WOrUIU/QAZC1a37L5cBn6TLkJ5osIfwL9+g63iPCI1C904+3q0wTDLfcKc\niMuk\r\n=56Sx\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"3b735aa03cc784b7346905168638eb6a486435b9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/rtl":"10.0.0-canary.b8a1a58e4.0","@material/theme":"10.0.0-canary.b8a1a58e4.0","@material/feature-targeting":"10.0.0-canary.b8a1a58e4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_10.0.0-canary.b8a1a58e4.0_1610382248081_0.979723890286134","host":"s3://npm-registry-packages"}},"10.0.0-canary.7584267ff.0":{"name":"@material/shape","version":"10.0.0-canary.7584267ff.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@10.0.0-canary.7584267ff.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"094e354497c13ab5ab39ade02ab4f06fa635ac3c","tarball":"https://registry.npmjs.org/@material/shape/-/shape-10.0.0-canary.7584267ff.0.tgz","fileCount":14,"integrity":"sha512-ANkXbww9PVoTw2un8HeV7IPaElR0qvS3/FBvvjW+ixKStSgg3T1AVpcGp9L5nLVg0sfc6keV15/xl1mYko4DUw==","signatures":[{"sig":"MEUCIQDodOcWj3ln7MTGTi7HQEEb4s79EqpO8PFkaGOVxl5QDgIgXti+MXgdMDqSgJ1EGdWikV8VHvzZkNaRYDo+WPOoMuM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22172,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/PdnCRA9TVsSAnZWagAA3AkP/R1OIuXW8XRbsitw0BcQ\ng30KSI7IPgQ8wa7TZ1nBO7eC/amvPQHI/TVvnJovnPY0MmK+0q7h6wNJwcgi\nHjTCu3OgZmOGc7cNmpQL2ukmThkPcPfWI2/6bdTcilteAUwJurf683LDobwy\nNVkp5f80yZHN4XbpOlVd829M5qPpHX2l0BK6NGypHfvfQ8ZDTvtiq2oq/t1P\n2U/O/MiplnHn9Qp02aP7pFboK+pJHro8T7CuX0ZbyX0mcSc35cSkKgdft3hK\n+0dVXKXN5pXDNobKXovffJ5DuvJK5JYid7ua0NA0NW8I4eJXSW7iZXQDHnu3\n3YlwMiMuiKnV6ATgAHbZb/b3Hdkisyi6KnlJtx129w2kooghyQfyirkdFcJ/\nYD6yyY/6s2bzMWPTvzWX+wN+lddRQ1hDdzev/wHlxRV9ApEf6rhbPnWn41R3\ndnh7k3LyoFyGo1vdSSDFdOi8vUcmP3RMU65Mn0b3QHch3bXmlsjKCvfNzHh0\nphAndZVlsbjpOXHh8fsFYS1adqN7zEkyqyzjDKCZavTmuKs3O9onMuXRZkvz\n+4WtYCi8ETlIfzfnjo6rd1bSMZ8SzRbcGY9fka+2CdazSbcMM1cJp+1BdjPk\nWXxPwStK25zYFX8JI3Qo90hWvZia4de5dbBkMuFsoBFeuWvxr/M/r4/7VSDf\ns0HV\r\n=V7on\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"89cedd80674ac536aacf2762f084fd7d1640873f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/rtl":"10.0.0-canary.7584267ff.0","@material/theme":"10.0.0-canary.7584267ff.0","@material/feature-targeting":"10.0.0-canary.7584267ff.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_10.0.0-canary.7584267ff.0_1610413926777_0.451184760278329","host":"s3://npm-registry-packages"}},"10.0.0-canary.251ac04c0.0":{"name":"@material/shape","version":"10.0.0-canary.251ac04c0.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@10.0.0-canary.251ac04c0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"93e61a23834faa1c8ead378aab1a77acd1a5b7ae","tarball":"https://registry.npmjs.org/@material/shape/-/shape-10.0.0-canary.251ac04c0.0.tgz","fileCount":14,"integrity":"sha512-0fZRmrgItqZ+sIAq7ZX7xrWUyOYE/UdDowFrIXZb8lpvPic+1TuLwjnfvxAEdAeMKnJOpKZaKcZ8YJPql6eH0g==","signatures":[{"sig":"MEYCIQCGfbSc2G2FZdt+ChRRpJgT9X53v6tUPbmEbYXxnvDXCwIhAJv4xi5aMcOTOf+1hGYzEd0LVDIQ6y407BkDwMWkl7b0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22172,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/f6bCRA9TVsSAnZWagAA9xwP/AkoDWrpPB30s3hJyZA4\nJUvMklwSmVSd54CvHqFKNJhc6Q40Mv/cDcFLxFdfSZpooq7Sox1o2tvCr3/P\n70KKzEutLWW+i3S+HtNViiniQdEi3zBG8dyhrt2QH4bNnO6T1WKJtGbqujB5\nFsk5N7E+4ExjYk8Mf5zzc82HmTt/xjKQKDZGfwoar0HBw2vmxDM6YRgxGPfo\neLgrmLPwmj7jneGs6tgrKeVydQAMqnp5fXg184ERH5dEGs5/RSGvKdVcbCDF\nTdziwrwdTTCxF2L1MXe1+m+r1ovBeWgSYLdBw4cdz93YnhXZr9AhGOJrkMrP\nUBMasTH4ijJVQalUx3WWAWv9ol4Kj6QVNClObH/U58ze7LBwopmyfVlVtRT2\n47bFAMg1baZzCXunhuq84E07JGCd6O9rFA1UWcdCTzTwO8WgzEorBLSsocqY\nr3nV4bJP8nSsoJGL/XdctPZZNXdpZsDLr3g3mxjqF4/d0D9aXa5yVjgRE4V3\nqlzcJpSPLpku66K1uP7K7LOboHV2yAbmGZN7XrcGRgvVzsa+vHcPTsM7DP9r\nEMEzVhCUs924hv0U2vMR+6TGJWp2FYtPdBOYe4vwVQyjz7LtsbA/leL06DYc\nbze0vlJ/ShD2tJR+QBPSWf/OBTgEsO2q5j1twr34znN1wM3pVpz2dzMDLmIS\n8/oG\r\n=2lW4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"bacdc97357600156630f8321ac8a3a8746474194","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/rtl":"10.0.0-canary.251ac04c0.0","@material/theme":"10.0.0-canary.251ac04c0.0","@material/feature-targeting":"10.0.0-canary.251ac04c0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_10.0.0-canary.251ac04c0.0_1610481307479_0.9261172321665347","host":"s3://npm-registry-packages"}},"10.0.0-canary.772cc1068.0":{"name":"@material/shape","version":"10.0.0-canary.772cc1068.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@10.0.0-canary.772cc1068.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"29e6a6072aa36ba60705a53b59e7235c4a85e663","tarball":"https://registry.npmjs.org/@material/shape/-/shape-10.0.0-canary.772cc1068.0.tgz","fileCount":14,"integrity":"sha512-J6DJYrmzYuloi/uqOSGFelyBQbtiyd8pUW2ec4opo769JCzfte9rVK5njTSbryzVsJu5RoSvG8H0y14eS2tvsQ==","signatures":[{"sig":"MEQCIDa9ehUrCgbgq7ivexBmV4KJ5xnp3dReG24YaQSRbAB2AiB5L4EVgG5eLpUIVHotyhqwpTWYI7jalj5GcXCdGDa6Lw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22172,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/4sYCRA9TVsSAnZWagAAm6cQAJSW7BA4pZXd30W5YVTR\na9bB56qCBDyhnMEImlsc3zgtR13qcNvqrea3ZNgdG3I75HvaTJKR5Gyd/KV3\nKHEV6V0NIqa/pDV4s/SRcOCpIBHijS3vXk1+Uk+xfoU+Ff+13Rf4JzPqFAkn\nJqWsIQLqRlsIXKAgqEouzNxCJT9Zh8RbFF5Z8c2InOR6hdTuKJAbQ0jIKCjW\nbr80kwOvlrL5HjCpEYxYjDPS5Lt2iFi9V9UAhAIegmym8Gsu0owfwwQr8ITO\nlDg+3Hx8OaO0/C5S8DoBTBrQcIqFV25ZgLjG4IJyx8UV3UeXc3wYGUSwC8OO\nx9e/Hslph0JLBFS6ywrZCigonGfcYx1Trd55UjXZRhNmVCwrHMXttb01YLTS\n4F8hiq9DT0rMIHRuJBOvwviHB1pLWJ9w4S2LRTcTJLs3f5uAB4QjEn39ZEmG\nEJpv/EMTQTX7qBEWnuNhA8ixucnF5+jm0IKWgycwDKnKVXZbRhGwuYyJUb7p\ngxye163KnuzCv2Friwb/2oqsw8n4CSFVJSauSlAmsizBoEwfYNdbYr5m/UzH\nAZXGp6V7Gz0szzX5RMTkfTocKKkfpdBS644X/2MVQ8UC9XQIJnQlwmA08PYc\nyOh9pslKrdCisuNKsuk1mAMCkcm+PLXB0s672mnS52X27zJWTn18fJixpvye\n6GdZ\r\n=cFal\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"e8dfb103b25351e76ae27e482ed4f13c4bf997c9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/rtl":"10.0.0-canary.772cc1068.0","@material/theme":"10.0.0-canary.772cc1068.0","@material/feature-targeting":"10.0.0-canary.772cc1068.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_10.0.0-canary.772cc1068.0_1610582807531_0.7592765040155838","host":"s3://npm-registry-packages"}},"10.0.0-canary.fe13dd130.0":{"name":"@material/shape","version":"10.0.0-canary.fe13dd130.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@10.0.0-canary.fe13dd130.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c6bb17a8c3616e8c3adecb97c49f4449db35e672","tarball":"https://registry.npmjs.org/@material/shape/-/shape-10.0.0-canary.fe13dd130.0.tgz","fileCount":14,"integrity":"sha512-RKfMBmnt/7E1e1+lRu3fHzU5xz+t+kDlhdG9+spWkCTC+IDj/vuMPEiB2cOsDqCXjxHlnH9uNopPHTRZ9xwA7w==","signatures":[{"sig":"MEUCIQDQCp8//A//bV/+30J/dKIMzafif5FJZSbUwg0aJ6P55wIgHWXPb9+AaOe04NmqD3nt64yP6/MSwR0RYSfL89rScUk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22172,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/5nzCRA9TVsSAnZWagAAPQcQAIlvz4k/kQHFCEbyRQtY\nCdTSAkmovrFvtKBg6O621tiVpMgtv6JE658Y0b29+n5WsK2NJcMlxCu3qqFC\nakOFa1dpJNrj6dtU4c9Y5kpRG/cGtjheO573w2MtVxumyDZehx2GgPjlorRO\nsKryMkI3PJwDIRC9Cf5t23XieijTxnCn03JWwB5vCj+ZHPgtv0rn946AIPdy\nHlnNPc09DpgWTSpk5+Ql36tuWQKwOwkxm25S5pG4IULlgm/O7mpF4JBQXHZz\nxD4o7AJ1Dk86sn/H9hLMi0keUi7H9Ter+zip4SijRQsS0j6pdI58LvK6UeYD\noveh2lsbifpqyLyZSm5ooC4l0+d03vhaAZI5DbWycZYYOHhzC+kUMprEqUjh\nWtvfzQoxY5ZPJcJ20BksM5wX+OPPzFpkvcOcaOzNC/8SxGWSb09xvhAbk1xA\n1NdaB1FdjRUWbB15QBR0xuEFLRVH+vs6FmZxrCslJV8T92xLOEv8RCtQKM0b\n7o27/Koco4aYuG3yKLKzbAiWno+XbeOYW6O+AfArpqj1D9ulzib801+NryZT\nuuEJtl2KC210ClAHINL6UfjHQx3Tnj3H1uUdqIDmOMhSqmDm9qLRGiPMd5K1\n4U/8d8ZC8svhLgyDDkpOT2fGNIgFlzq21ta/xo5lGR0xdRDec8yyoeXqYoEV\nyt4K\r\n=8+Rd\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"8825c25e04c8e88b7430f2f8e148da8a9197c02e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/rtl":"10.0.0-canary.fe13dd130.0","@material/theme":"10.0.0-canary.fe13dd130.0","@material/feature-targeting":"10.0.0-canary.fe13dd130.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_10.0.0-canary.fe13dd130.0_1610586610907_0.4064637238670177","host":"s3://npm-registry-packages"}},"10.0.0-canary.c7c5da28f.0":{"name":"@material/shape","version":"10.0.0-canary.c7c5da28f.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@10.0.0-canary.c7c5da28f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"330077647982f1fb9677633c2647b10ab8bd22d9","tarball":"https://registry.npmjs.org/@material/shape/-/shape-10.0.0-canary.c7c5da28f.0.tgz","fileCount":14,"integrity":"sha512-U42pNA//KRfvLs6UOhf+I4Be49K+7ToL0UXrfTdy1zWUtBsBbNHfpl1huMJe/RMfgVeRhDgIHJnHA/Xq/SwO8g==","signatures":[{"sig":"MEUCIQCzd+ijwj346z6BgWzRRpiYk2OS24uttFELHwDspcNX2wIgFFsE0Lcb/V6ipekqgt5GsR6CjJ+Hq//CQMe8kny1MK8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22172,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/5+CCRA9TVsSAnZWagAAzrMQAKKYnvNaenfHu1xn1bqa\nUjSpi5t04bUekCeEaVdUh/IJPGumVsu/Dl2ha/HhXGuez7EUUcXnMKEUoHAB\nm7EO0M6xfvvY+54lpwObeWdq/GfB28j7FlqCUBfouY1IpmJvvNeOCxXRRV4d\nxwMiZpPlW7wJFaJkl7ezusROObQgxqH6dTK7JOeK9SL+2Y0O8Q58Ut4Bq9DU\nLV6ahcAp0ZR+7a9VIfJfoVKzt6JR0N6HtjRul1Ubxo3fEyaEKvvo2c+65Kj/\n6xCV2dsQP99EyYulS2CATYeuMhX7ODs/7pQF9WskcxwLeIejxMCT5CCXllKJ\nfz/gxbGL9EIzCIcPP0RG6EL7CR4boxDCxS686GzrmUMnBElIvwU76oFH8P5q\nd0teGh5fVx/ist51fFf68G1MBonY8rKZ+PHI6ZqXrZOrUj0ZAvqDHhayHoE9\nvyweZVqsLl6mJLo9x3rxlEtdTngl2ZUOSxIeCwX9rPGxdeSrdnOzk5qUIF6M\nSyZgU/9vBpzEomop8gZNIc9hEctpiYICFl/pm/M3jZH8+7OHFSELjFerjD5T\naqYEz3eFLLZESGsdU/FSIRSVTPmcs4fRAYazYW3WGwVFPG7TdT8OTR2s/nac\nFTfuAlizc3WXtWfsxRyFS5mqsDwrJ1Fb601kJovTPtakzEoQrYXmodYPEKmL\ndxwz\r\n=dOcj\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"5d3f3a72d4e9757f2993684a89928b04ad29c6a1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/rtl":"10.0.0-canary.c7c5da28f.0","@material/theme":"10.0.0-canary.c7c5da28f.0","@material/feature-targeting":"10.0.0-canary.c7c5da28f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_10.0.0-canary.c7c5da28f.0_1610588033995_0.6737817333203355","host":"s3://npm-registry-packages"}},"10.0.0-canary.b2faa116a.0":{"name":"@material/shape","version":"10.0.0-canary.b2faa116a.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@10.0.0-canary.b2faa116a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8a0a4f8fba942b1ae0e87f9f2ed9eac2064255fa","tarball":"https://registry.npmjs.org/@material/shape/-/shape-10.0.0-canary.b2faa116a.0.tgz","fileCount":14,"integrity":"sha512-ArB5xX/PC8D0GbXq18TDrN6QJAng/fFxJOmtm66AoLCa0yLFaDY2mLai5qYC1nWVIlpJpJRq8MSKQ68cq4OYaw==","signatures":[{"sig":"MEUCIFstq3/s61qFApn4LjxvWWHPNRGCw4+myCDygGUuy+iJAiEAhYV1YmKkyXj/I93SfSlQJwl3rLswPV8GlBzywzOMACA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22172,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgBzJvCRA9TVsSAnZWagAAAPUP/Ar4KBL4p1w/FpZbBA1w\nvWpVEzFznW1tBtAvvyWP7JdqfBNMbeUSqlIXqw+lfB5YACVlj+ePE3aYlC5U\nVe0Z0JXIA8lorc3Lo82CoqsHQva+gc1JTZwlADk7+orrH+ot5mp7vpNIzYc4\n1lPJkK1C367m6/tSL2YZChSpY+2CSmZxq+2JgdJi1BIWd/AbElsQLM6uYJo2\nWj29NaAvPrrhTN+2GYodGnDCbMxNU88MHRFeiMB03YcznhImgvr8l0RAbeu5\nJ1IZTZFcEllL9UXGqElZlygGRZnOPkr09m5z2WYUQAEgBecEz0kvnyYHIw1D\nYefRWLI4sfzh+bmWCjRb6Ps59rZEdt8C5s+x/0kZ9T8OkCnxJqnRgI4So4Hz\n0TCOXrSeHm7e0CNX/DQz5KA+B4QIVeWGlY/PfmhQIDeYhkC+MJOlO6qRVpSI\nLGlGunzOFDsclou/wfyeGnGdxhcpfK3xLDk8dnSVYdPm23PmxmYOOVPNTypC\n5OVIJ6tGWihpsek0Iz0fAndIDKWiQaTgt1iIkauQNKeH26+rgJWdx+6O1Eol\n/iTU5zidrGidhrtKiWCaCT5ebublCUGplDpYVl810SrApSoLqrAqKRDSKCeF\nI2YQy4kS6qxVxZd7q5dl9cPsdx77/6C00CRoLSD9Lc5VqZ+D4oeajdIJI5jf\nSmN9\r\n=WTyH\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"8c83e6751cbdbda8095b6ae0686196398066d600","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"@material/rtl":"10.0.0-canary.b2faa116a.0","@material/theme":"10.0.0-canary.b2faa116a.0","@material/feature-targeting":"10.0.0-canary.b2faa116a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_10.0.0-canary.b2faa116a.0_1611084399592_0.8212491402673592","host":"s3://npm-registry-packages"}},"10.0.0-canary.0c95c9f7b.0":{"name":"@material/shape","version":"10.0.0-canary.0c95c9f7b.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@10.0.0-canary.0c95c9f7b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1996f33b92612e298572a241a899c9e09a1bc55e","tarball":"https://registry.npmjs.org/@material/shape/-/shape-10.0.0-canary.0c95c9f7b.0.tgz","fileCount":14,"integrity":"sha512-0aRNYbQp3k1yqaWl55qHkD20ha0by5Gvbmi4taAQZby1rbgi0Gewdc4UwZcwyH2CJMEiHqXOTTqMV5YchJYgXQ==","signatures":[{"sig":"MEYCIQCHI0PUQNVEnqOSSrBjkouKDgjiDO7sRLtZP40n+LoXRgIhAIWyZQ3a9gFdemkQY2pMZ0+xcSOCgjv205QygJpj3j1N","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22172,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgB2MCCRA9TVsSAnZWagAAMu4P/igiwfwkFDL6K0TToBzx\nhxQIV14HS4jE+JJqDyn6uaPKnpiS+IA0na7J21Qws6svjrXww03hz95UzmRr\nIAhVGEsvqOMMtBOXLBY2noyAlSoWZDr99B+RF+GM9wLLS27ylPVAWrFlWRFb\nucY/G/6dH4aFjtQXKTuYQLHHLaxA6hJEGYHw29A/5RZm8o8mCXR6npe660eC\nEMmCgbYdbBY9rcNwD1YD8uAw7KIRswSZed5vbjC+0jFaWFQc02/5yDvZ90HQ\nWPAv7Ql09VcuOS2u4sYap0DMA1sp95dJIvZMj6fy4yfzbLBpxUxLXBybLHgW\nx0UDbWoTHwHTCs2d5qijBawuVk/TAoeKgDj8Vpqnee5SC5ZwPlNUqrAsZ7Z2\noe3GTyDTgkQPs6Pgq4dfxzUtYTR8Q3kyaK0WdpCTX9pHIARWL9FHHHkXpcMg\nb86Ae3T39tnLRAZz2XHCALx/VTk0Wqa+wkHVfw4FqFFtwSKpuf6eyd6iRfrM\n0ILQmzCWLxjkIhMu5kSFzIzpEzEfdf2FfBoD9yiLf3qTfpVeT2AQamZ1pLHN\ndtVuGzKgxAweJh4WU7hedMCshYZyiZwqHLUcpxGT6i31A6yJibT8lw+UFeid\nKB7EIf1Avyy2KN0gMOPogyUBFnN1jvvl/KsTDCDAf6tbgdHQGNwOZcomlQuA\nbFh2\r\n=QKS9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"c9db31c38cf439af3f1498600e029c2dd812acb2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"@material/rtl":"10.0.0-canary.0c95c9f7b.0","@material/theme":"10.0.0-canary.0c95c9f7b.0","@material/feature-targeting":"10.0.0-canary.0c95c9f7b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_10.0.0-canary.0c95c9f7b.0_1611096833776_0.12429209779179407","host":"s3://npm-registry-packages"}},"10.0.0-canary.5268222c4.0":{"name":"@material/shape","version":"10.0.0-canary.5268222c4.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@10.0.0-canary.5268222c4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0903137152691f1fcdcacf9c39e94a895fa7825b","tarball":"https://registry.npmjs.org/@material/shape/-/shape-10.0.0-canary.5268222c4.0.tgz","fileCount":14,"integrity":"sha512-fQ6crNpgJtX9jWvCQbasOzn2qXHo7pcab/9tIUirWQUkPsWRxe+9IRrajowJw95RgPt1H4fKyDbk9lYmRnSyFQ==","signatures":[{"sig":"MEUCIH/ujjonxa59rOWsUratkQ82oQPyWEACALMmb6mAbE00AiEA1z+GybB+t7SoKfOy7ym/1FRLSsJr1LxAc1lzz5PyAhw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22172,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCIIiCRA9TVsSAnZWagAAzcIP/iIo04xUHZWLNcv6Ymsc\nxl6dLFY/jwcofl/z4NlzeZI5cse5/57y3UyQIQ74IW6KFB9zqvHymWfGP6B6\nW/pegjgMO472mSSXIRilTF/aFDN0S3nEfh89iTu3EtjJyx8lVtWR6pY9KMPL\njNyQpFUlDH2q2ccLPM3CyJt2Uax5GH6bcAF+JG7X0Dul12+64eb0zSR/ZAb8\n+bmYOunZ+L0VAYwZ3ZxsiX1h78Ysu8FXL/vodBE+npNyXTVYirasHt+5DgaO\na03JpAT5jRA6xCBhouCOeDzhb47xJ85KFFvUonEfoSU2wI5uqHJkqvAi7SS+\nKd/iT0/HcE2HI5c0aF1AGYxoXd+V6xznZTjKwy5cGvkuPbl98JOMNh+3Neb0\nrG2QNi7kPYPzChEXHms6i0Y1i2fbAdznYCjTdhADKlkjkK2XjdT13ONlY6s6\nLXVG8l79HlrBXxDp6t/fjsvUUree4Dq+fbg03aqr8QdLeVAafJaD1/814Y+G\njI6IcWpAapqivi54Mz4IQEqKDx8FWo80PSJCgFWTUAFMaK3MSEl7dyvi05Uq\na6m7642W2HWA2uzbX4yOEcL+Lw6rFeEfNsq9JwWmN2484UwC+Tzz+sWmXBEX\n8RjiXPo8R3uRsEhjcn3oEb9l/+TZpkMdodN8Zld5VXG5n8iBUSnWP4gU9m1i\ndzM0\r\n=/Ttd\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"149775a975bdac97e3f25a99b254c8b632e6ebd4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/rtl":"10.0.0-canary.5268222c4.0","@material/theme":"10.0.0-canary.5268222c4.0","@material/feature-targeting":"10.0.0-canary.5268222c4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_10.0.0-canary.5268222c4.0_1611170337576_0.6504825909072296","host":"s3://npm-registry-packages"}},"10.0.0-canary.2ed2d829b.0":{"name":"@material/shape","version":"10.0.0-canary.2ed2d829b.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@10.0.0-canary.2ed2d829b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e98a47bc9931e51c78a29015b0f08d51bdf658e9","tarball":"https://registry.npmjs.org/@material/shape/-/shape-10.0.0-canary.2ed2d829b.0.tgz","fileCount":14,"integrity":"sha512-WJWYjOMkH0VLvKmrdbMonjHDVJGnRsFsT+84ULk0YBZy/slD5Jtw82/e8lPBRsF4WKbOb0z5fhXOTgKyP6xIgg==","signatures":[{"sig":"MEUCIE8B/VN2+fku7qbxusECjj6wuAr0g6aPP3ZjT98eUhyHAiEA43VK+sq12dIH8yIWfS9bT/I55rLrNk56schm+7svdZY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22172,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCLfWCRA9TVsSAnZWagAAzxAP+wfYtIbV/VQtvdSZGCc/\ntOL49jAK1KnAaQpCxBDYeppya2X6K0ecRIyPG9xd6aee/DMjDomWdUEWsf1G\n0TiFFFGbq+3QMFI+J7RfpNMFvnP2ellEgFkYTycdHWX6hTwvCkLjQP8g0Mxg\nuaDdB3QPfN3ECtsOme9Kzug4dXe/6O6jxwzFgKF+rwbcdV7GRoRL1hVTN0X3\nidR5pc+krTBiKGASFl60G0b5uKfZY3Pe1adPSsGAhnQww4Yt3U3oblH/ym1a\nJgSqX2KlxiPQwVq4IAguRO6c8U4FzX8TDKl9u9Y+LMiCJCarxrYU4hgQXBvc\nZgFdp1B3CmwL45RqgJ3JwMznS8EtX2oANz70O1ar0FXOuWzFE9aAAkDlJKN/\nJHKukHkf2nOXVxLUE6J1pT4V3Ka3gAQ6IeOuUmdyeyjvo4N9RVcIuszBYNxQ\n6dZekfoVdRNFTHcP8Hg/N5V/FzLKWUxnVKg7vfor0/bDJDljEfDztoguplSC\nTCklDtXGDL8TUND+NFZTX4S3ngaAh8h+2d2aXb1oxG74X+2Ygpvg+LL5tw4I\nU2qP2i4IwUn96OoxfseudD8cCzZmLbwPZ3X00pGDTNCawezSQV+Roke0x4cQ\nIMpalY4rK9D9Viodyom3mL4NzI95KrC2THgIHDLxH5zcX2EIz1gKVmowRZZn\nkxaC\r\n=wPeY\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"e937a8c393e2170307639b8126f0a461ffaf9e6c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/rtl":"10.0.0-canary.2ed2d829b.0","@material/theme":"10.0.0-canary.2ed2d829b.0","@material/feature-targeting":"10.0.0-canary.2ed2d829b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_10.0.0-canary.2ed2d829b.0_1611184086486_0.20123342786313803","host":"s3://npm-registry-packages"}},"10.0.0-canary.df00c2b30.0":{"name":"@material/shape","version":"10.0.0-canary.df00c2b30.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@10.0.0-canary.df00c2b30.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"19e6fd0c7e78986ed1d306783af07b74ebaca595","tarball":"https://registry.npmjs.org/@material/shape/-/shape-10.0.0-canary.df00c2b30.0.tgz","fileCount":14,"integrity":"sha512-K+nQxabE5c+m6UvnxZqa3FtrS2Bvaf0c5AHdAW3QBtk3deXnmQyCkrJ6QvmuwuBFWmcURqadj1MJ3q5j86qLCA==","signatures":[{"sig":"MEQCIB7U6wYyOrgFfnTsZ9+FJL8UR/k2Pq2cnnSwn0witlBLAiBwQmVTqzaydYjZXn+PnI7X428tyuIeANTt7UPsRboIpw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22172,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCdwVCRA9TVsSAnZWagAASx8QAJ+Ad0SXWLN1/k1nlEKY\ndTKyweFZiNl1uEC0qh0SkNDlq/KaFIBFc+Ml8a9la73RCUR2GS/eL2X+G0g7\nY1aSyXZgnfpAePJuaNvUDu2XMZ4gx/sUzV3TXVjkqXUvqMppKgrox6NEq4Q7\nMMhel6KLLXM07ib+WEisC4msY2Anw9Ny1KLwcQaS21ZV2KvRfL8eaJH7mJUD\nwpbcHkOR7msXg5cCUTu77MwGi/+tkPdI10DxnYvOQ2Xv/QeQ2rWv6X7qaUoo\njrPBLwfstqWVOfwiG+Dwss8Nujs/LwZcszLjtscWOtLs5RGOQOD84+lEJL96\nRFcQVcBeOYMsHCDskNOq+DOlEyE68/MhNUUYNZXcnqD9yJIc2cDgxoZFJUFe\nYCsqJIZ/oqUbLkgg/n7oqVw0hETN2DRMXv6HMhj3BtsLC/WLwBBBt2J0hHM/\nZJd2Sk9ONPiOK7lW8K5zLoT47/imp81L//UvTNGgIcyrQL5mOUXImjm4Gr4H\nUN+alKnqaSELe6LMLq2v8L7DYimnvfm743Wa161D7QYRza9xVdS0hARJPD0q\nTxEx0XXpMQN9QhYn9HSKuHvURPZTqSGC2cyLD/RxlvIZxH5y0Bk1B7rk2Pso\nIFeQB82lOU2KlMCTfXUdI1cHcsAiNzqP0XOEMwhfArv7uLIPuW5EQyaKvWYZ\nMV9h\r\n=WqNF\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"b80e68ca5ce1e4ff7a83ec06c805029869aaa5fd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/rtl":"10.0.0-canary.df00c2b30.0","@material/theme":"10.0.0-canary.df00c2b30.0","@material/feature-targeting":"10.0.0-canary.df00c2b30.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_10.0.0-canary.df00c2b30.0_1611258901517_0.12021884674323147","host":"s3://npm-registry-packages"}},"10.0.0-canary.fd61b0476.0":{"name":"@material/shape","version":"10.0.0-canary.fd61b0476.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@10.0.0-canary.fd61b0476.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3138c8399f3a4daf47f0b220b745217ad416848d","tarball":"https://registry.npmjs.org/@material/shape/-/shape-10.0.0-canary.fd61b0476.0.tgz","fileCount":14,"integrity":"sha512-q611twmY7/TC8yMpwB4HxExPERCi31kKweGFEdGw6T1L4ZJbJ31fDwbL55TnJCjKfXBplU1BprJn4gMOAyhURA==","signatures":[{"sig":"MEYCIQCKdzQtGS+WWF3A5RCmcGApjeoh9zT0dUiUdjAoyTjb4QIhAKyVunzKDYxrocj+iBqRsPuxL9GIOQl5Zu2ewBr5BEzi","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22172,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCd+BCRA9TVsSAnZWagAAnc8QAI0rdJzpRjjyo6yFRhs/\n2MpQk2rCano8Tex/SewsRdR8g3ptDx3U8ZDA1ypQbyLHx9mUW0IYBWB6PiZO\n/hi49VdQhmfZdcUcTrIEow+FO1+xqg3vrQdqYagtPmOTIco7ruY06yA1MGRq\nMngmsUa4/BSYf9GbMxDlASnAs54Q+LEbL5ED90GuEXW5Wp8uBj7bKYXeXo2F\nv/FRjf/x8eN7EhmUK9Jvmtc2jT3J3KMtkasHWFRdd2TAK9YNJsy6BJfnm8Yq\n39ahLb3HWofLdBa4hEbWve3F1WGXrr9DVK0QzazIEOtd7+mqw0ZHT76rto2v\n4SuaPTUQa2gBhliqbrdb1taLPDB/D+Nj+muQKa+AikVi2hWCwWHl1YkJAEyS\nNaJME712/kUBBpkv5RD+2E2RPstJxU65jamj749VmDU6BB/7NtBXKjV6XBdq\nO9nm8R4Ik7fjC8EfVN+6TNjua/kvdhjqFgXPj1X7QTemUnm8l8k8AsYyRMw2\nJGhZ/xE07ZGf6obAYHZgdWhDdT/X8iEeVqDmuRAJ+Pb9gOijFRFicRKeA8vs\nCFb65naZxQ1rO/TDwHQ6yiGPyySVLqAKL3V16tIcYOPEfO7R9NnWYw1RvTbB\nLCcLJUYN466U6Mxnh/mCb9pq9vQtPFVWkCgxNJZn0M9gFoYAI1ZZHQKkmEC2\n74Fz\r\n=ajuT\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"67853fc809fc128218f211f5b54f854f102d1ec1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/rtl":"10.0.0-canary.fd61b0476.0","@material/theme":"10.0.0-canary.fd61b0476.0","@material/feature-targeting":"10.0.0-canary.fd61b0476.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_10.0.0-canary.fd61b0476.0_1611259776474_0.6507649232780135","host":"s3://npm-registry-packages"}},"10.0.0-canary.3fb3a0265.0":{"name":"@material/shape","version":"10.0.0-canary.3fb3a0265.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@10.0.0-canary.3fb3a0265.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c28da9ae1df6fbf7c516953332b2ed1f66912f2d","tarball":"https://registry.npmjs.org/@material/shape/-/shape-10.0.0-canary.3fb3a0265.0.tgz","fileCount":14,"integrity":"sha512-1tgHPmm8sse6hS5yT07axSHBc1GdMzklAv2vJNKJFs4KhCPv530lKCiCa1cqddc+BqzIatL9ck6Isq1cnpXWmw==","signatures":[{"sig":"MEUCIQDlbU2f9cKbyMvq3CcziOHM/IjYB55LE88C1PqSCN3uQAIgW6EZrZa46kDsZLAr++aECmujV1EOnSLE81kk9B4Ro+c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22172,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgChalCRA9TVsSAnZWagAA/LkQAIuXOyxv8w2zpOQfKpgG\nRveKmSpAb5FVQdwv18HU38OC17yCzqRGxUAiqalHZUdcC+ZeejkbDYw+QEVr\nw5CVHUvc3bmxtz9vuL7GGtmhiLl406DNYE/oFO6lQkaihtFErB6B8PygTI6P\nkc1BxgRmmmjYwE6Q8o89xke0UsbyKEIxG4zEYYQV/gPjc9mVZrQqKmlSSF15\nqw0IAT+tNoNSha5Oy7yqXFfIWuOywTJNIejWdjzPKRoje20rCrRFc5BpW7vS\nUI/8ga8eqrNke9Ub1NIvs+xKpndxYWcgpDpwq5S7lmKcsVkasFJCi8OgNRWF\nraWPSulZhrq3j+T+5xdDv2m5LhTOssnDrMXvkHlQOBhcZmcYoCCYt9BWv4LD\nHogiVNT6snSZmHC9c/dEr41kPEjlYIH5iMSrmM4rASHlQPOw9NiYEUiKEvfQ\naI0AoDE1S/LYiHrf6OerhcpsjWirXchYmxNV2lVoqLOwPQ7AV7wxRHaJEu8H\n6RPO5UjToDtoDBoUul2xg47FF3ztWX+gyx2+C8Ns9OqDNW1e4ornyNNPJXj0\nl5S/Gd7ZItHji+/EBlRLmvQT1tX0OzWou6MdsFhrECQXZu46K7BvbVFr48i+\nP3Mv4ThQqGza1yRx4WuioBrDH251hth/1C3rrOdCTxicb7QwrRTqgDuY7dEy\nGNFQ\r\n=ovw/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"5e619e42cc5398fa779a726d775cc7e9a72a1acf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/rtl":"10.0.0-canary.3fb3a0265.0","@material/theme":"10.0.0-canary.3fb3a0265.0","@material/feature-targeting":"10.0.0-canary.3fb3a0265.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_10.0.0-canary.3fb3a0265.0_1611273893265_0.9797034130541173","host":"s3://npm-registry-packages"}},"10.0.0-canary.07deaec27.0":{"name":"@material/shape","version":"10.0.0-canary.07deaec27.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@10.0.0-canary.07deaec27.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"632d2d9658e294c2d661d0095d84913e10b092d8","tarball":"https://registry.npmjs.org/@material/shape/-/shape-10.0.0-canary.07deaec27.0.tgz","fileCount":14,"integrity":"sha512-N7Xy1Xqcv3FFUeBfiRN1bo2h2cOtZww/bRIV5K3BSNHzYS+5NJtH1Mrh0pshviSdT/86tDSyeyGVt/FRAjzXgA==","signatures":[{"sig":"MEYCIQC0nDrOspyOChJWkcPSYMVZLb4ekFzbtppwBp136uwydQIhAJ61VHT2byHABmjrKZp6ybRqBt6jZHxSy9rzkLhumYvK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22172,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCwO5CRA9TVsSAnZWagAAj40QAIlds6DrA7kTgK6Kb8kq\nZJZZH0r6T+XryAwx2cMQh5VzSkujpAKbA1EIVkmcQqqKqgFFja9zN1X0A/+O\nyLXEbgeaH8Hqm1kDLYN0/SHSCFMDvD27TlIgyHv5lMOV+52U9XTR/j67hYnF\njtzUEZYL3tT84hU+MnFqkWvBon/2/B3oa3fcmBexVspbAPQZryxmyV5vYGoR\nCPZEpIw1XLulc4EzG9ZhN3T4FHH7XwnPXiGTGBX5k0p+9pImQGEn2h/vytmH\n97hZeVkG0e08PC+4Gnd0z1kAX/Kzxv/M2mbinm1O4uu45lpvLSqlyyu4RpkE\nrZKdY1c7QrV+TmpBl4lgJk8hL+Q7+z2XIBNlE/0jZMV2TTHMLd0FoJnBc2up\nCNXbteQCF0JpnVuECtp6c072rM28ftr7hSYqQMU1Dhh0E74PoDDd/w6WrNCo\nN9bk7vdeLt26PUk+geptvN7oMWBgx+EbZfEd/zmuzA6X599R9DyPeoRWDtQ3\nnByqbFuTqh0rIPXf1QmtJOWx3PqtBlpHXywP8Ci7xjet/p1oMEs2MwNm4Nzx\nHTbNewL7RR7BJprZzwfA0172DegWHKFw1/UWwX1vFhhHjl7Z+BcXZj00pjTr\nTGOGmSUmGeoGx7LkX6StCfQoetVMHvMFRARGEhGHL5q8myXn4BnJhQej6TqT\nw3XW\r\n=Bv/G\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"be75b8d81f1ed6f8ebe94c8673f32110d71cec7c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/rtl":"10.0.0-canary.07deaec27.0","@material/theme":"10.0.0-canary.07deaec27.0","@material/feature-targeting":"10.0.0-canary.07deaec27.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_10.0.0-canary.07deaec27.0_1611334585228_0.9611257421890604","host":"s3://npm-registry-packages"}},"10.0.0-canary.d2959b16c.0":{"name":"@material/shape","version":"10.0.0-canary.d2959b16c.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@10.0.0-canary.d2959b16c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"06bf1dab1728c815221ff83ad9ebb96033167a79","tarball":"https://registry.npmjs.org/@material/shape/-/shape-10.0.0-canary.d2959b16c.0.tgz","fileCount":14,"integrity":"sha512-o1H2mKNa5gS3PZ3UKT9iwt2Pr96ROFefUEYWJX6lcvuG/oAMpDElbRfzv6p0ykpqqVQcdPDCFUmfFcCQVZS2VA==","signatures":[{"sig":"MEYCIQDdXjOBDf8y2stXvuIkiQI7GjBJ/vyiQIQzL+gvNPWQ/AIhAMDNzwWKhzmGm2ZbruyDn0GJvtHz0iLwrPPNxY3M/ip5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22172,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCx7dCRA9TVsSAnZWagAAgcoP/jFYnZax7V2Fw7d5SvDs\nOYc3GC/JV3/tLDdOAIJaY3GgsaiEgkOyVptU68sL5+bwBAvKa+1yJsR6+BtN\nigRfvlXqYe1zLyMUOsOAj9bdh6e3PLfAtPkzNxWRpSfMZdtszdI9tmpFSO5s\nJbMw5JVYZK6m1VmIbT9dp2pRqiNymarblfy4ajZ+Fq2KSRCrLy2oSizMPBzK\nNjC/pQl3vxtN6zIu00VwjCXAtRHjZlgGObBOGPWz7RaySpjoImm+gMWj9WjH\nbxMFrFQpUNK19IIvcnueG3a/H8b6b4PyPlmzDG0jg2kKVODNugd62b7DOldW\n+FL5V6qrtjCDkSgXSN6g3Yfps+uId8AuDt4bBvxsKrwEbjxYla0tOBEWYRMz\nnOdFNq+hal9kCPQ2nJgYdeWzoXPtRn8i91ZZTdlq9vQ66g7QZ18klFk3k3Af\nE+BJqrfDG5b0o6Mmjc+ycOKWY6BUbpvwopWfIAmXCzsYcsG0fuv0kTpW8naf\nRXWOeLhAg3aPnsDFY1tZVaV05J4T5EzhL9hIfijuZa2LrA7URWreMO4JwbUn\n2AZJUtgPEYu3b+CymDvq8B/bqpvqW3Kl8NtATlHt5yrpjW8W9zhz+tXhWL2C\nMvrhxxBd/5JCydIYHSsmmC12O/ffmTX+UMJOl4Wr/udXYvz/8lJYww/fYDFS\nYHlP\r\n=lzpR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"9a89df0257ea15e66bbd565cfea291993f0c4ef6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/rtl":"10.0.0-canary.d2959b16c.0","@material/theme":"10.0.0-canary.d2959b16c.0","@material/feature-targeting":"10.0.0-canary.d2959b16c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_10.0.0-canary.d2959b16c.0_1611341532574_0.7642997233804716","host":"s3://npm-registry-packages"}},"10.0.0-canary.75f3bfe7c.0":{"name":"@material/shape","version":"10.0.0-canary.75f3bfe7c.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@10.0.0-canary.75f3bfe7c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9d42e28fe8aaf6e83d8229284f6358f1443676cf","tarball":"https://registry.npmjs.org/@material/shape/-/shape-10.0.0-canary.75f3bfe7c.0.tgz","fileCount":14,"integrity":"sha512-et+uhNSMqlalsgIv8oyBMxwcG8EaRIxGIT30g4tTnHmppcWIKjQKfbZTRLkG8Z+Ulvb3PeHUvjWFU872ny57EQ==","signatures":[{"sig":"MEUCIFYD+R3GryMklKCg7kI7CoHENbrm+ROrT2dR1A/e3qEhAiEAsQ3eKEaBlCem5ZEfX5U4o14RGWTxnFZ04475WJzm9Qc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22172,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC1b3CRA9TVsSAnZWagAAPT8QAJqY3K/gC37BfIOQlIzd\ntCbV0mlWblSEJf7WcjVrxoy6/fBES6E/GQNgCDx9f8inSrAGuRLLLb+bPBWj\nF/JbIuWAVg71fYetHD8NR5ZYt1QaoYPwGU5+CdX2WcUGNGBoN+k0L/8a0oso\nBH820kkp7qGxGXOSGIXhx51ZI0DoVIAYvCXD/K2WjyT+WhXvqUeUUIOMCwpM\n5jA2/Ol2vMdJhnIRuvk4ComYK5YUKtSXamYDSngdISHQft0gRNS/OUXQqvwD\n7bJ65L5KBcSyOP4I8wDqZo6NDHqf30BPSGsFliPCS2prkYDjmCJlLK3W9StM\ntX/kEatHx6pDcd0KLTohTRd6SG01s3WYwJpfvWfiC2kiTNluC4bLYUc8Up36\nkyZt5LwNCIPcbtqjLQfdpgZ2652phqpxdsrTK4dYY9dC1g3u0hj+jmvAx9r0\nSrPb9yHhGDp6XRFolLtBQTNB/D/N/OO+uzQbNcYT75R9aUa2MzHagjmJcdHt\n7DiUu97mZK411/zVvpXBU87ARl9fUNzd4LipIVJWUeMWZVQLOPCH0DOm5hvi\n68fsMffgFM6ap3M53Y/stceZR1o5Okk0u5Q3OK/jF4p/UBa0qaDCSKLtcJkE\nvbI58tOX4NXUjIe4qnn6v5YZ41RE0j4+FOh+OGpJdfHN+WsgjzhQLaw6Wk46\nSInT\r\n=H9i0\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"057941e604e02f88d571d61967040f58bf499bdc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/rtl":"10.0.0-canary.75f3bfe7c.0","@material/theme":"10.0.0-canary.75f3bfe7c.0","@material/feature-targeting":"10.0.0-canary.75f3bfe7c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_10.0.0-canary.75f3bfe7c.0_1611355894936_0.2882788672567589","host":"s3://npm-registry-packages"}},"10.0.0-canary.b9adb7a0f.0":{"name":"@material/shape","version":"10.0.0-canary.b9adb7a0f.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@10.0.0-canary.b9adb7a0f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ddf919d018ba3fe751e384ef775c3fcc34c861fb","tarball":"https://registry.npmjs.org/@material/shape/-/shape-10.0.0-canary.b9adb7a0f.0.tgz","fileCount":14,"integrity":"sha512-Mt6biw7JEWOaBoA4JsRfZv59LN2WAQS9OF7KX7HhN69A95vISi9PqiMbSkywVqKp9OjNhNb8UwaFC9/Ahyl4Xg==","signatures":[{"sig":"MEQCIA1nJRYuBS4B7T3Cgoi0BbYhhO/rU6IXYle6WZGij42JAiBQvdVQna5hI53AZ9IxV8dOKQVXvo9UGNBTZeEO3Ui7Bg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22172,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC2FRCRA9TVsSAnZWagAADrkP/05YNdM+M0h0yf7mkx2+\nVCkKYeUYgKJYF4vl0zmFm7cJzbNYxiKe/5xxGCRno26Oe8moS9H5X0cMMfvG\nkn46bJb1vuazIibqPPl9tahwknKDejHTBO1mzRgwQnRki2yjAtsxu/5ke2gT\nL8vtGhKoSPmLFigW3be+nrUPZjepbQipVyLMCnO6usqQazD1m1UKCr1onFWw\n5d6n9NerbTxIy+6fW7IXI2cDFeSm2bt0vP+R7mT/jhsOTzSxkWYfmng2L6Z3\nSdZ7K1+hADEVm36IUGFVeA9WI9xCIzZXw29VTe25aujIzSVEYn0upNulSh58\nBIIlafejbJBJQpcLsaiWtVFcNv8kQIzKN3/04T+YKXDVgNvy9oy+zjdOfxnq\nT+EOMtSma0tQ4l+bmEvGk12rNP0N75mg4DaYPDe1UxDmniBBDeLGTUpVZ6Pz\nJ3f/Du3c9xcLjXJbLLODpHCEB8f4q2TOAibjhTIj4d0eHGMZ6krGEGQVA02b\nji8FERElCFSrDUw7gcYVA6g1x5hElV9ceo9rx7ovFi6DZstX+rs3NgrR262P\nkmdiv7qywEjLX3sOO6TEN5JUEydJpbMe2JRG8jNTXVuPUcUfzDRccwu/ALLG\nzE2p0JLV2tbxkfkqbTDFCgM2cMg6ugkr7ZfGbLgl/9XRt50RDiPK6C3/erZQ\nHg8q\r\n=B4Mw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"a591eb080c699d02013eb9ab0090fdd5e9813a72","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/rtl":"10.0.0-canary.b9adb7a0f.0","@material/theme":"10.0.0-canary.b9adb7a0f.0","@material/feature-targeting":"10.0.0-canary.b9adb7a0f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_10.0.0-canary.b9adb7a0f.0_1611358544580_0.16653028095441091","host":"s3://npm-registry-packages"}},"10.0.0-canary.d29ec2862.0":{"name":"@material/shape","version":"10.0.0-canary.d29ec2862.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@10.0.0-canary.d29ec2862.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d0aec1bbe7dc78e03e42f151ea4c9ab81291baa0","tarball":"https://registry.npmjs.org/@material/shape/-/shape-10.0.0-canary.d29ec2862.0.tgz","fileCount":14,"integrity":"sha512-u2X/rHN4HmblKwEvoNJZkpCNW9u1uFpIT9bXalkWFCKRaxAlqbdtXyp9rzwgtmFzoLwDsB7o80RUnKBtbtEJkQ==","signatures":[{"sig":"MEUCIQDoDeHxWq54Fgq/pKskbBsoKqhFRFt014bRvjNZ7D5CkQIgFVlwH83N6oIoqWWPO45simHGFInRyEFoY/5QyEMzTPM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22172,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgDvCcCRA9TVsSAnZWagAAu1YQAJ5jCO0rFC3mgH16rQeq\nQ8B0nNl3hoLF4zHzOZECi4VG7VPjDUx1KTGGGtJK3w7YachwnVVZvKdNjEM6\nztJnp89ffBDxYVQg7IKoiXWYVVgk3iKR7+lAkmDd1Ftd0484gtTBWzZQEitD\nu7KFAOj7kL+U55WiC3VDTGq4duj+PQkhPuX/t+tpdw3OguoRj3c3p+G0ysF5\nxOdoKj77kT2xrCK/PW9pfg5rPvvPJk5creOVQwMzdmjdVfuGRylmaoqy0Xyo\nYjB/NuN35+KwQgr0JL+REbWBKC54JZFqHZs0EPBAVH8XR2dgZ2WToqpZtAKh\nhNqq3u9HjgPNFIVOc6y3HtnV9ghJqdi3LeFfuhsAhRBItiR6+nu/cvp6+w/F\nLrJYSpW9aVXpN0rRX8Z/FFbRFwHr1TQsqCjf3bmuCP1C4DbQ1QVq0FqDu63e\nGTDmYJsr7JJ1auh6qdLSFg5NyEVsKkbRG/ThZYLoW+0tIUXfZytRmErYdv2V\nU1ohbMXM8J9rBmiX8TycpK+DyIRdWEoxJQPTos+RHLRAk/cXr4lDESgBqQgM\ntY1u+pooMOxUc2VrgTXRXk9jLZdk8AfYlOW4d4CQEzyDG+9C1xlH2bm7PVH2\ns+FWeHgSa4CzAgSikcKG5Nfn7wHgKIKMuxcueLvCaaZrOGqG+vBEgaeCZih1\nf1n+\r\n=3bzA\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"1f2d18d6e94fa1f0808b7d768169b9f4827dc692","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/rtl":"10.0.0-canary.d29ec2862.0","@material/theme":"10.0.0-canary.d29ec2862.0","@material/feature-targeting":"10.0.0-canary.d29ec2862.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_10.0.0-canary.d29ec2862.0_1611591835953_0.8419217092062181","host":"s3://npm-registry-packages"}},"10.0.0-canary.96be07c68.0":{"name":"@material/shape","version":"10.0.0-canary.96be07c68.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@10.0.0-canary.96be07c68.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0ccb24a3c045569e25ab320ff738088405cd905b","tarball":"https://registry.npmjs.org/@material/shape/-/shape-10.0.0-canary.96be07c68.0.tgz","fileCount":14,"integrity":"sha512-FVQanIXEazu1cf5K79RO3VfB7UcebhDmLtnaiIXzpadoKmS7EAa1dwbYZ+jnpzw5vmp8br8ZEyx3aaz5YZx6vA==","signatures":[{"sig":"MEYCIQC7fRL0AZHiG/cFyZGshE1neFEmpX8gXjqhgvyUE5bPlwIhAMoIOOR5zgV/5tvnQFkhC3waJJi4i5RTLjjQrHeYHRfB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22172,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgD13kCRA9TVsSAnZWagAATqgP/1Tk/lIdSVUq3mXOcJvG\ns+8fSJGcDkJtoiGtpOpbdJIIfZjy/gYlgWRJduQ8JOdH4iyegDR1WtB4jr1q\nuxxspe3mmmhCzB8Apdaq0JgnINFn6BVcwrbHqg0/RYvxvjstdvm73KHLgJmG\n22IKjIUq/ze3honSMRmcpPy2CEHBUtPpr+h2e6iIRhr5XMws6wyvk7cYy5F2\nm+THGU0AH392w8jYoz7mIN+1P/WDFOUC7xdburW1bmRYjMLKPMaz1beparBe\nILXOzDP/l6CWbuBdrud3I042rVmty6MI3eC30d4+UeZQV6I6jRQ7M5+QR5GS\nPF3XlmwUD2HJnImTOOZxoexAyDt/Nuoy8BUVOZU9zj4+050twuOEMbJ0c+gA\n07HoxsBNt306iOyEkXMmAUj7NWsd9oJHwQnNpIUgXb6Vt/B6SveLWxyp4bq4\ni75H7t0rwgMmQvnluSNjam6K9rjrPwgKXmM9No3XhAOqfynOa4JaADCI9Xra\nlFl1+r5hib9DEig1tGpq8D5lDg6zN8gWTyauu9On05e4qz6k5AETRZu/KJLZ\npSxnvXEq3T4O3IxotGJ1HVwZT1A9hDXllidmE1KzSusMAtzcLM2AzhpGcX01\naxeE3sQbU2/6FrBedzVguAkcGhqSDDbEZb9fb9kHcMpfUEVs0lA5l81ckTvM\nHGKI\r\n=rmi0\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"ad510acabea4f02cd7399e109ef73d3b0bb52e0f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/rtl":"10.0.0-canary.96be07c68.0","@material/theme":"10.0.0-canary.96be07c68.0","@material/feature-targeting":"10.0.0-canary.96be07c68.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_10.0.0-canary.96be07c68.0_1611619811398_0.18741748353175303","host":"s3://npm-registry-packages"}},"10.0.0-canary.e383944e9.0":{"name":"@material/shape","version":"10.0.0-canary.e383944e9.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@10.0.0-canary.e383944e9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f461dc1bb95c73bcc962dcfb47c1d1f70cc59d4d","tarball":"https://registry.npmjs.org/@material/shape/-/shape-10.0.0-canary.e383944e9.0.tgz","fileCount":14,"integrity":"sha512-b/dgqh4MMbr6nFg3Pu/3K+sxmpPQe0/6nzR6GAomrfze0HA2W+2p9EXXd4QieKRHCAOG4ZxI0ygPCTPlA99BKw==","signatures":[{"sig":"MEUCIHQRAmmy0lQ87s6hVNh9e+mH3mOG9wP2cWNyQ6YyOUUjAiEA2PK2CfilVi9OiZKSQmNAhKhHdBKKFrPFNGs6sdwJ+HI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22172,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgD3QdCRA9TVsSAnZWagAAPKcP/iDsA5xETeBlIcNIKXW0\nksy/Ta9fHf7H+mCk7UnALqdBkAuvy5c1cRUA7Foo3aBkSUse1JKBCbU+8fqf\nZT6xO1FKNlqz4Kbph8NfjUD4meaTnnyp8QUgnOCvu7/DNLSLT4IJV7dNhHsv\n+yt3DQXpjebESB5LSY1BD3II87PB3Boe61FEtFA81rh3ptOeBk+kHNu+qLM4\nob9OPZGtIj2wU21wpSeUQY/0quT32vDRPoKQTaqZoBKXaGJLuGipeMh0gucM\nBXH8bGlCS3+g6UGGTf8cHj5kH7fIww0A3m5ao9s4V9qV1qCqjpCbzOpDjCY2\n5xeuJ/pdDMZwiZcab+hCbQcIhVp2nStoV9J05V10lmRQdfXP9wvlmikx1mrF\nzL7kg3hYRlAVvDSc/A6/lDI62hq2+HqTuVVqqyvKR4WLN7qRHcjhuYI1TItC\nTOmFTOlIbLDJFrO/9KIvzGiUhwCZ3ZuO9WGGN1WJkoilY6nXI+WYgpOD6n6J\nVe4tEbrlgtGhcXjp5UD4vyLvS7pQl2nAScX05bgoJfqIj6WsWjQBSXG3qWzp\nob8elsbjNA53oHX4UPfdgnLKqbaY34dLdsGWvu50kDZONEXtzhxcPwzKacAd\nwgmJbKalzLQmNSMWJN7mTvzdpzlPTsGFlyU+aCxZ/ysbu9R+1pZ96Xqgcxom\nxErU\r\n=iJ0T\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"dc6dc4efb9210fc9c70fb089edb90278a8ab66f8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/rtl":"10.0.0-canary.e383944e9.0","@material/theme":"10.0.0-canary.e383944e9.0","@material/feature-targeting":"10.0.0-canary.e383944e9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_10.0.0-canary.e383944e9.0_1611625500872_0.6899854153337814","host":"s3://npm-registry-packages"}},"10.0.0-canary.623af861e.0":{"name":"@material/shape","version":"10.0.0-canary.623af861e.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@10.0.0-canary.623af861e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"55531f43246fc778239381ab6ea3e40aeb1ff1f3","tarball":"https://registry.npmjs.org/@material/shape/-/shape-10.0.0-canary.623af861e.0.tgz","fileCount":14,"integrity":"sha512-R71t7fuJtG7bwrA0O8L9zGsdeyCgn7JbHfCCovxeHeQ/yw0MvtumbelV26GMy33Ng/EBd4uxR3BdPjUMUqMRdw==","signatures":[{"sig":"MEUCIDMaR/LAt+LMsHoJ27IlfcnRzLxZVSAg8eiPDG0rUxguAiEAje2O8hkCxJawuGXHvSjy1tdu4onMC5Adk+qygjrlOug=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22172,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgD5BPCRA9TVsSAnZWagAAwlsQAJ0hCtPZ6M0qwhlPwCol\nQh8ygaRyHU6Ew1BhfxbBOTb+3ixwtm897IGPnpVbmO9k0kKlwhL6jd9abcyk\nsBmrQpRIdNv9aTWvH3bDvU9uJNUWEoOS9reVmBMzhkFbD45jrgyksu6QLexr\ntvk0No3yfj9HSytc/93ld/cQj5S+IBTKns0JkLkxkLWDZovnfsVvDnyfplH6\nYjXN8mvcTCVUkPwanrO8RsFdCDZbtjGzO9WXWfiXTVFwgNFLZcWJkPrlUoUP\nWgDDXYSzkq9nXTG27hpzq3xBSMS3j/7uc6in3Nga3tjhzSkL4Ri/xLaJPc7e\nkK5C95txWKkk7cCE/nGwtgJ0i77BPrXsX/0/TMhCu4QZrwQDXuZTms5+Hcco\nbcVVss2MQWQCud0+Bg1zQU11vzp/b7GKcPa2KeBjc5KCPOTbrSCZ5HZ+6ols\noZvolZK8PwqWED3zrxM3SOhAFnma0zBPPNZJDpBZrZ+pu1DZPBZm9nd+/btb\nJGPTOCH4DBAjEuUddQlKDC0cC8ZUD7GWhonDMcLJ9gTPWPFQAEqB/m72k4mF\n6/Rhpun6sWiUW3E5YkZpXhorj8GiqZwpmEeCdU5Tw5z0rXHrotMUIHhoLQwq\nBDWN4oBQKkGVEFIIo8kkzscLIZf3WKAWWFdhNwI5R7QEY0cXntsFFGXlfcWG\nkKZt\r\n=Noka\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"5906815761339487fac225651c29aa422211a72b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/rtl":"10.0.0-canary.623af861e.0","@material/theme":"10.0.0-canary.623af861e.0","@material/feature-targeting":"10.0.0-canary.623af861e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_10.0.0-canary.623af861e.0_1611632718670_0.5244460903632249","host":"s3://npm-registry-packages"}},"10.0.0-canary.6863fd43a.0":{"name":"@material/shape","version":"10.0.0-canary.6863fd43a.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@10.0.0-canary.6863fd43a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"01cca0a36880ec49053683d8f095ed0972610725","tarball":"https://registry.npmjs.org/@material/shape/-/shape-10.0.0-canary.6863fd43a.0.tgz","fileCount":14,"integrity":"sha512-4RG//0TefBLKp7dJLta59dmDHWocVoXsY8PD2VbXYYuW7n0tY2b7gi3JAhNSEZ8xcIwqKwOSFWztFHJ530RTEw==","signatures":[{"sig":"MEUCIQCx+iVzihCldbpI3eKh3X0ga26sc1lN5z6lzGCr56DWpAIge9LvHfxUqC9csrW/ZAjybxjW/xmkYpPeYtfuOQT0RGk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22172,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEIpuCRA9TVsSAnZWagAA1tgP/0+tJVfU3d+QloK0HsFj\nQOim1MjmLCq4Q3w7Ii5SiFZDehCPEX2IZzMV6M0r0MJqfmPD+qJLZY8oUZSE\nWzWhsloclcvGVizHiFalB2uOXEQamgeonVfOQZxlWMh6BnLx64MVuC4KnHxY\nwRIavAf5uInCLJOY8upfYWQs9IjhasboUreEAvogUtS+8hLRb1Uvj/XlODKa\nTkLRzcxHZFau4v3mlJ3SA4mE5S2rgNdYdEZZXSG9ARoEwZJK1hSs3hJB/eJo\nY7c3ApTdFv/7pc93IdzC53o6HvnpB7uJyMcvNQ3QQGZLNWnNlT0PHi6A0/DW\nItMoldhndDWG8kp69DMyduMr8T8zS1Ul9XR9eznPzVsrQyPeHxVbaSqW1870\nPyAgNsbIsc7p0Ay5R0UOJpDFgG3l9A/65LLsM+5dglfwU9kqVyLmo1LVuezE\n6lF0Rs1K7IcUrSOojyluC9ADr2PgVSuE/tQR0+qPGsplpZacdCE4/1OaYMEk\nTMRjHBkKfpLmGKaD89NqkuVLmFa1lliNnRtFZNedIrJIjSr4xAYQleC1gUDD\nwngJH1cFKBKJkukpO/JRJRJZaId/XnsiioS8pBU+xzWhifs9UtyiC0vwLxxt\nZofU71N1VDs4OJkC2bzD0x0IAs50f8PtDfYcBLKZGLngklWjXecb4CHkUM+3\ndscv\r\n=jrRT\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"49d0dacd3a675991bd5b8c454304b1f10dbcfda4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/rtl":"10.0.0-canary.6863fd43a.0","@material/theme":"10.0.0-canary.6863fd43a.0","@material/feature-targeting":"10.0.0-canary.6863fd43a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_10.0.0-canary.6863fd43a.0_1611696749852_0.6154978863261329","host":"s3://npm-registry-packages"}},"10.0.0-canary.ea55b87ca.0":{"name":"@material/shape","version":"10.0.0-canary.ea55b87ca.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@10.0.0-canary.ea55b87ca.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b9ed9e428e4cc0097bea91ef98a4bb43060af22d","tarball":"https://registry.npmjs.org/@material/shape/-/shape-10.0.0-canary.ea55b87ca.0.tgz","fileCount":14,"integrity":"sha512-X53dMnJKoUICJQuD0TQEMZ3vQ7+hthY72ki6xIMKgwLwFUN5Oh8HVRHbv/k3r7yDpREHZOrRIGiYKy8oJYthJQ==","signatures":[{"sig":"MEYCIQD4xPXOFxBfU6PbpMNTyAUduaPH7k+a+y0CgVBKtgAitwIhALrOSvtN1bRa4yve/lIHt0Py1929Bavsii+QZezqo2a+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22172,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEKm3CRA9TVsSAnZWagAAumMP/1+uTCVu4Z22Zmk+bIME\nf9kkNRQZWZLOTQR3zsveNxQEzaAY6i4LCYOidXU36D6eG6UlHaEeAZDJB8Ws\ndSQAMvL9fl5HzhmALPFY+lYRBtXC2qdcp+HopbsGgZlpAD/uBdgzfScqwXSR\nCMLRL3LGUNCuTeT/Jmf636xKh5NPjPX90fu80KhG1rT7Hqk1jPYajU8lYFpS\ny2YPe0PCYSYcsl9YYAUqpoHWZOfHYm6zTDjETgYiAbFjpOE1Q8Ft5GY3dNzk\nmpg3YU/VJyc6N1To+mhC4AR1XG3jug7XMxRfgCqkyPURdj4q0fhNV/tUEDc1\ns249Yx+OtduofLO4C2AGmLd7aydoR+uFogy2UT12RwdDvJ3ncB/GMXXSRet6\n76YkDIJqZarYPYgT3fTaNlFK3DQEpW4TxTF5mOQvzzlUoOZAIt3Zq0IsniEi\neWpE2U8OL03XubBqGlEzURfXam9HRQXi7WIsl7awBN7HRo7vNrFrrGNbpAZE\n8hwZmUL6nfdLAVvRuyQaTfFDBeFupPotdN3SQKVSK7IS7L4YN/oA7XDa80RL\n8KONwcWhL6Wk/ggK+mJCRf3tUe8j6Njzv84jtauj5Y0kL2CCFrcTSDKCR1vl\njHeWlUsQl+uye6OefiwWNYTdqoqOMLEUlW/7u1W7rXZkYTvkHMJJ5MHYOt2b\nRklJ\r\n=9OdK\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"00e7569feb0aac4c4dbbfb9b292c9f53adb608bd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/rtl":"10.0.0-canary.ea55b87ca.0","@material/theme":"10.0.0-canary.ea55b87ca.0","@material/feature-targeting":"10.0.0-canary.ea55b87ca.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_10.0.0-canary.ea55b87ca.0_1611704759311_0.5783871448778954","host":"s3://npm-registry-packages"}},"10.0.0-canary.e902ff05f.0":{"name":"@material/shape","version":"10.0.0-canary.e902ff05f.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@10.0.0-canary.e902ff05f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e4acbfbecf49d3aa4897fb25b52c52579927f889","tarball":"https://registry.npmjs.org/@material/shape/-/shape-10.0.0-canary.e902ff05f.0.tgz","fileCount":14,"integrity":"sha512-RqL3gahlphfOOoiEvK/imSoaBhcAWwBkS6906vZjecynUvt/1UJPEsLSWHUsdRrj9Vp9oj1Xw+0XEZf459uMMw==","signatures":[{"sig":"MEUCIQDI64r+YH8UtHkqFhTdDbJpnwGvz5t+ev9n5ISC0BypKAIgYmwKhioFKjR66JAXGk6B+4o0/CXfPyUt7GUuTf48xdc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22172,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEK33CRA9TVsSAnZWagAAlIkP/0tV9xNqBj5S0KOyoQiH\n+NHQ06K5jFDYJnuZQ4OAezTwq5uAxM5Fg5Xwl4LPLI34MbbpljklZkzrGA0b\nhviqpSh7hYxh9lF33Cb3w2oRUZA/sfjEwKgop8lSSzOYdF44+H5hhvxv0J4v\n08qFoUb443z5nGK8wgZ4qPMxN7ZZ2g8+93I1aY9G4CKNEo1wG14XCcWuAzKh\ndmvcDtE/HoTm2DuFXAfg7MSexoGKmtrbupORvuT+8Q51Xlr6alG/gCr1rpIr\nQqMp55WeJqP3B+N7Jf4MN8JJ4IZzWD8813i5AlvMRCWc4wIaeQtbq7Bv/JgF\nBwvH57Xsc+DyrgxrJbarArG0wmq+DXc/lIVMaFmb+cPybDNe69zwSie2EVpG\npxtBJbuWs3vQ0la60G0WNiE+oK8DqQUNTDketdkq2KiyAQ95VGHiLDzVTXaZ\nkE0njbgxfPwRUdHOs+HphPiI/14dUzWgT3+XIox5QF+K9mwuy3yAuFFw1KqG\nxaYtbP7eHLS7lU0/Ig+6sJAk30G6NKhliZaDXHhRblcEmxGVC0lZzRWF3FzQ\nvEHsmw2bZPxq86ci1U8jI2kfWpIEf9O+IuquKDK50iHF8WjwWlubxT9FZGYB\n4PD6PR1NZ43m7UonCMW4rXkYfT+2JUXICyuqQQeZHkcfNQg2nja+NYoXlRtb\nhmo+\r\n=PJxW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"8ae6ee07772b70becfa69208ee5a4849f86c2fea","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/rtl":"10.0.0-canary.e902ff05f.0","@material/theme":"10.0.0-canary.e902ff05f.0","@material/feature-targeting":"10.0.0-canary.e902ff05f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_10.0.0-canary.e902ff05f.0_1611705847471_0.751739774736039","host":"s3://npm-registry-packages"}},"10.0.0-canary.2c9fc538a.0":{"name":"@material/shape","version":"10.0.0-canary.2c9fc538a.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@10.0.0-canary.2c9fc538a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4e2bd63c8488cc4f4eac39ecb354514e4d2f4f18","tarball":"https://registry.npmjs.org/@material/shape/-/shape-10.0.0-canary.2c9fc538a.0.tgz","fileCount":14,"integrity":"sha512-br79LYwVLjOFpNbKm+6W4MrPZVoMUep9igd+Fiyb9znhlKdAouWNmSJUSCCAur9j2UIlmz6DBmG7nfWRmvDs+g==","signatures":[{"sig":"MEUCIHakdVnaJQHnXPaoe+FRGr4+NwQhshLHe104lQ9RwLXYAiEA/qJSebfq3110Gzh9tDupVl5gMjJlIsuEfHDnjoS3Bs8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22172,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgELNiCRA9TVsSAnZWagAAVHcP/j9bs8T6UboiR2FQ3Hha\nPR5YThiqUOZE0k9LhJkw3wfof2UDuYKK45aVZR2Xsbd5ElJiT0RNpPgIIMek\nPTHK4onoNb0clXvFpHyQF4BFT0Q/YbkKy/pwS4hKouS+ABBJcL0Zl6s/AVrm\ns6NRU3NdZNyG3qBmIDXaB2oCrjr5DMdDA+4KhoWpbx8YJYJoVEglBmzYf+L4\nkJGv/pz0S4/nATNzyfUTMUIr5sNqkvaUIiZ6Z5S4yAIbHFSo+Glc6bEiXxyA\n3Nsn6viM/tdCxcGsbmH/dsbgMFbI6S1lztqryWokI1+IOMrA3qz4V3DGfzrY\nMAG9JYHpMV+s3b/1Yobg+BME0offLmaZayOZnolqTjfvIiw9qVdV9RWJAJQo\nQ2jiTOSZtuM3kg4IXAL8jOgwMptCYZCz3DutUxxgWrDADITHF9AMI+QPEgzX\nIYxqejLhU0mO6KWrwg5eIIZoNlCt71PWDkb0wTSo0g8ImMZAn/B/bDERT/u3\nFgsVQsSU/bX6shRPRDyhO4OdBVo4KCSUu9V6ozivByKHJo1Txo3HEm2FSbEM\nBmnyJwnPltTMFdgsl0p5BMTYgqxykvuMKm8DjTkYpkD+K81mpVq6RWYIm59+\nUtS7Qan/D78d/3xcXFUXZZFWOXiBWfxoKB+KbTGY4jdqhtdgC6ZLmAnxxxo1\ne1Np\r\n=PB/O\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"4bc5fff9ddee1f7703010e418626d050ca883474","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/rtl":"10.0.0-canary.2c9fc538a.0","@material/theme":"10.0.0-canary.2c9fc538a.0","@material/feature-targeting":"10.0.0-canary.2c9fc538a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_10.0.0-canary.2c9fc538a.0_1611707234341_0.007761381675987611","host":"s3://npm-registry-packages"}},"10.0.0-canary.6bf56aaa4.0":{"name":"@material/shape","version":"10.0.0-canary.6bf56aaa4.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@10.0.0-canary.6bf56aaa4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"365fa8667be5ffe859f9910cdf997820bf6efaf8","tarball":"https://registry.npmjs.org/@material/shape/-/shape-10.0.0-canary.6bf56aaa4.0.tgz","fileCount":14,"integrity":"sha512-UPq1wK2aH+BUhL/XX0WsRgo5V6N04VQXMiQgYJUicCbxYFrG8t1kWEvf5m8kakOq1VJwGmCGazTYYq0jOMXT8w==","signatures":[{"sig":"MEUCIQCDvgdm98phW3wjKgjnUe3FIB4WHQXqGIWPBqjGirvllwIgWQHbbT+ekg6cHALW8H2xnw0Rzm96ZVzV2Qd6wHIKgmE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22172,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEL/CCRA9TVsSAnZWagAAqBEP/RrTi1PBCwmyMpvqedwu\nN4/iBrCcwfYrRBRFzCsvGD3R6bUFJNgb7TYaea2RiuvM371UqcpCl0aUT3y4\nkaTBhTv3p49NrguoWpMFA+JUfgc/YNljYOLxcK4HiZYObcsP1XUgVnkNi14R\npXs0oXLPmQP4z1KobAkTCcYvYa6lCcaE6QRfIkzJQmbE6Y9eNCWPDMQZFjSu\nMNHCUEmFSpyDlvtiY+P4o8riTunn1QKjG+Q7SbqAkH+rRm9bAOBz0QZqze2/\nYYGhGCwVIOZZtq5jBzb7MEFyqAfjpSRb725uVWrb8fBdJXekFChFu3tVoZNv\n1edpYXLr/HW1OzF8yaxenSa1wLCL1ObcLTjNzBSn313bDWo48vxM5lMSut9s\ngrBCNiEWIWD/N7tr6BFmS62+PA5M14DBzydTIj27BzpRV9NGH49rrhzONyPx\nLs7xHlg4sZU21dHN3phSIy0Ob9cJv5B44ZqYkXntGA+cxVOW1e6BjXd1u1xz\nHxBQ15nmTVn8TXGn3ajg3b6eNIBAfzDsoyQLW84kzQ9AZCh0BEKde7wG+xlA\noB1sk7eimHndOSf6pp//dB5RvrLBV44qqAaoC4a5Ts8iT8mCKXJVgVOL7utG\nxGDCWAkuf+z3ZwV/y1vFjOVGpxEw1tGc3kuv8GOGMqop85589AvKN92umvbJ\nVaU2\r\n=eam3\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"557b9cd09fc15e60ea09bd17651230487a292b59","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/rtl":"10.0.0-canary.6bf56aaa4.0","@material/theme":"10.0.0-canary.6bf56aaa4.0","@material/feature-targeting":"10.0.0-canary.6bf56aaa4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_10.0.0-canary.6bf56aaa4.0_1611710401571_0.3424504037283247","host":"s3://npm-registry-packages"}},"10.0.0-canary.994873795.0":{"name":"@material/shape","version":"10.0.0-canary.994873795.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@10.0.0-canary.994873795.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a61b34b36073b2afe5eda1ef027e4b7dd5869a42","tarball":"https://registry.npmjs.org/@material/shape/-/shape-10.0.0-canary.994873795.0.tgz","fileCount":14,"integrity":"sha512-4imxT5SCey7gTIFDgXr+fY8ZemqqwmKExvwl3QCmNr0aN84THjYq1+gVjX2VuXW+NXiW12R+0eAfWdtNi72ILQ==","signatures":[{"sig":"MEUCIDWyK8wXhAMYi3sQo6yqKe5+czZxLOBfQ4URoxApw9xTAiEAiwW5zL6bxcNJFKIXnnClQbI7QYlKP4omusEAxnU3Ua8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22172,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEX3KCRA9TVsSAnZWagAA5igQAJkqUXZDYBLno2Av6btZ\nK9Hq+OETc66YiJi9Vbbd0Lf/c46Agk0gQ4gJN/EOJ4b8JCghVHiedrmWhEQd\n08Y6hn4xYs0cYsHQVLNBL6X3x+s/1FEix6SkcPcv0DKmWMB92Wt7ThhnytfP\nvDSsB/zjZSbJiEczv0lAVBajX8gsVURpMR322y6YyBTvKRck1o9jTCWDAsla\nEzFuMVvkv89d9kzIr9AEQU1g8S/uip+bjv0RVZPuHAfPS4vMiTt65vDBEqHY\n7DYWOgv/ailsDQyKF8Ee/xJh5Vis7PKxFCTYxYzbi3BUZTBmCDZ9K6It0uek\nN1KqV/mc/cvmPTJE+PrBzDV6noFopAZfOlOOJrFaXixdMaAJgd4L7cFIxXJ+\n8L9lRGCumgw4k8jxims+b2tMMefGrG5ij/HHf9a3hptiHd+p0TGhGlR/xJ8f\nxh9fKby/MEtqN+b4HKKbe6TlywdTwrtXwcmLAQrrG8wZeEibuwFhVDT/XAQV\nNO2CW5okOvfbPGUqUXvTa5OKs+VyKO8aMIDPOpI8KfMWyYdeCyWnKOsXoEBS\n6/cGPGzbV5z6Ok8E/Ca25uEQBlG+QtgMsPf89FKLjgKG8iERqVH9EhVEjmn4\n8mJe6oSwNmpJFzHpoR2bY0dAeigJJctQdfR2NOxJvs9PrHvKFYGplMvn6Ohf\nakhS\r\n=W0A9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"8d1337af6a27bed9f06167ca1cc1c996fffdd9a8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/rtl":"10.0.0-canary.994873795.0","@material/theme":"10.0.0-canary.994873795.0","@material/feature-targeting":"10.0.0-canary.994873795.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_10.0.0-canary.994873795.0_1611759049440_0.27493771964332825","host":"s3://npm-registry-packages"}},"10.0.0-canary.96878e1d0.0":{"name":"@material/shape","version":"10.0.0-canary.96878e1d0.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@10.0.0-canary.96878e1d0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d50eac9a65251cbbea6d8bd87777b30683db0037","tarball":"https://registry.npmjs.org/@material/shape/-/shape-10.0.0-canary.96878e1d0.0.tgz","fileCount":14,"integrity":"sha512-rVxLCygoByuNHPIIwwh9Fc1QWLoPsXYs31KHksXCzYIPu1dvQ+DoGL43quNHFuGYyIDjq/ou1bwduFEp8iYtQw==","signatures":[{"sig":"MEYCIQCsz+NgnNu6Ckceky6BZUHal6H7orAM9ND4nu1mSUiBfgIhAKUDPfgbX5oZmyT55oAtASR8EW3SBS2LGucXuvNwtlex","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22172,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEaqqCRA9TVsSAnZWagAA7HgP/i9w0p7qUlzQBuaRUiV0\nZl8guYFNZv2+PshH4pdg1049ZP29G+YYbXFyO/tZc8xz1HRY8ooX/c5ltZNm\nmdnGRoK1dgB0EOhflWBoAaeAhfNmPPulQshAhtPVIJ8QIugxHMj1ZSyaQmuv\nIizSOrQlueswq9yN5goP4+Jze6M5OIxAEhXBOzuxG8WjeAevA4gHmlHh383D\nMbHjFGFzwnEeebzNc/rle1CJrGNfZZZxAVxvWJ1h+W0d9pMe6rBZ6/YXVMxR\nnQdu2ahGehAR3cTICC3Gjd0Sm5JA21DGx+Z5pDd1B7kDzpoTa0NduQB6pT6g\nD/NawxOs8tQ/FXfctiOAV9qovkJ9DbMhlhRgZjhylfkFuc0fA6HOZG6UY+NK\n/fQY4KxmQzKy5xrETT2nZO83wPz+h56j8nDj4Vwuy0rg4xI9G5Di/TXcrZ71\nBI6xF/X6Ndl6saw17q1AmRxp18+AtgsUTcOIMWtcB8haHJ3QwOZtc225m+ac\n4+WbrJkyUUzmNKzOOUC7KAcybhcdfcbscMO/LG3wZEfgV+i4jCW1305Wkw71\nsHZ22C4tvrEn3l/lD8rnv2kh9Lhs2Bw2DtGu0j4k3IWANc7IsN47Oa8bqK84\n0pQa315ZtCNB8dbAb6V0cCPBXI8/qSLWOlxRYy73vi/AXRzRDPlrKwoW8uRj\n5nrB\r\n=75Qv\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"cc9f62002fbbf03874065eac25971ed2b49a47ae","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/rtl":"10.0.0-canary.96878e1d0.0","@material/theme":"10.0.0-canary.96878e1d0.0","@material/feature-targeting":"10.0.0-canary.96878e1d0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_10.0.0-canary.96878e1d0.0_1611770537603_0.6485854867594889","host":"s3://npm-registry-packages"}},"10.0.0-canary.3c117cdcc.0":{"name":"@material/shape","version":"10.0.0-canary.3c117cdcc.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@10.0.0-canary.3c117cdcc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b01569981075029d2f69a9cbc612f76fc95ea5de","tarball":"https://registry.npmjs.org/@material/shape/-/shape-10.0.0-canary.3c117cdcc.0.tgz","fileCount":14,"integrity":"sha512-eNzUmGHIgpR/amybr8gm8MlMA5ml2OMW9cJUpeB9QgoTRwOyIq8KPXEBAVXAZfT1FWMek1D0sgIa0Ma1iebPpw==","signatures":[{"sig":"MEUCIQDEFlXmlIZ+fsr8z99SfAW705+Amav7Hxo8Ogeu9Rdg0QIgIF8o9MueQKuJ7dG5dY//jzfe4RogZ0a+Pr46B75E1Wk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22172,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEbG5CRA9TVsSAnZWagAAWsEP/iWIEMCyyY2aQ9TeJ0SS\n4qsVzFejpP8zG8QubYn9YGquTqpeVLAgAp3NBXHjJ4yTuxEBrg0MLhjE+ODj\nfbzgh1YKGYsPNWX6VkG8EGfEOd3IifDqzaTSgyyF+sEu0Cldn8V2tRNxPlN8\nC60D78w9AOjpNFvH/cd5pGOMTM1Lq59yGG/Ym/tbzfvij/bhFueazqNfrNJj\nD+QGXlSbmioR0lBn/GI7ESRd2Bq91LcEz8Uk1FjGW5TQbOI4FJcJkSHR+Wwk\nxB4Ryxh/QDWXffhsWiyiDETCdRr5gNkoxl3syfIvoFBlLEwoue4bwIh9byxU\nBCzXpDsaHgRVXFnFVA0LMYzooV3ibim3Vu3G/181V+aWkYZav4v0FCjpMzXW\n0AsP29sRw7nM3U8oaTjPSNLBTl9XvtdECLhh0JCn2Ou50A59/cS6cLXlU/uR\nlFk86TfFwriTOJ8oxYcOfrQTuVfVSRmt/IGTqGVOfySRQiI19quCENByUO0X\nhSWXjzTJwg+fDywsJgqjMoqiVaD72Dp09bA/SIViFKQChgImMpdtodvbCPqO\nKptI00PcKVoKn3IbMHXNZ6gNQ3GK+qTzC/vcCXHzkpqOILAlfQiGOaZIzGP5\n03Jzby43nf1rNcJuvqYIxYuhRj8xD/wO7ZjDoJemsSENAcu5godLvCCJoxjw\ngHP9\r\n=4i9G\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"dfd1ede4a4727199e63765d305bb36d91509dde8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/rtl":"10.0.0-canary.3c117cdcc.0","@material/theme":"10.0.0-canary.3c117cdcc.0","@material/feature-targeting":"10.0.0-canary.3c117cdcc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_10.0.0-canary.3c117cdcc.0_1611772345451_0.0022321119768811126","host":"s3://npm-registry-packages"}},"10.0.0-canary.b411e7033.0":{"name":"@material/shape","version":"10.0.0-canary.b411e7033.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@10.0.0-canary.b411e7033.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f252845332f1e9649c33c595490b847ff8022c42","tarball":"https://registry.npmjs.org/@material/shape/-/shape-10.0.0-canary.b411e7033.0.tgz","fileCount":14,"integrity":"sha512-Cypmzbs+/j1/D8zvFy+yAu54RP7e4B2M18Wq7ZvCJVN2S/4JGI00TgTBl23W0BeKBeNPyYSuzGDwVh6QBCPbJw==","signatures":[{"sig":"MEYCIQDbtYKI3ks+qPPYU6KCfqYdqCH/g1DgJPjDI4EHtajeEAIhAP+KcR4XaoEYcReiQN8iKLrAu3gy5kgzZUhmVhW4WWSB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22172,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEeMpCRA9TVsSAnZWagAADToP/0MOVoYqI5xkcnV4huwu\n+vy4ZxU//QPCBTrF2tk/e/A5dj67a9TdVh/xfB5qkGzAuVUeMgXZwTD9BCR/\nvyPCWe+JebLjJK5A7I+C5OtDwvFR/IPRFFuIRfzRw3bftPONfSX+zYWryamP\nOyo2spmXuj/6urM9PK3lq+tmWIfzUd5ycCV/DvCqj8kuWp1Rvj+Wrtk3jXKI\njMFPFNChU+1tKeYojYXhXLoG0Htod8V7bnctKeyKGkwlY4WrDC4HmaQxDDBj\ncX3QUBM7REiSO/Be41uYk8E0wnzDGzVWUvhzgvH6mwtFhNCekHtdjkMKf6XD\nqEVHsR4CGFh+CqapAJHQQ5v68H28cirqGLv8nEUqTj0A+ymrUtNCC5L/g0em\nMH8mIxDycQ33swxJhPTzTZWysEwGdTB99g4ISyR/mQEsTn1Xov56dGD/0bK6\npsn9gsbiefIzMC23EZnAAAbq9Owe9DHp5AjetvAQC9dDrDP+uXPsqqLGqTr/\n3pz26ySRb+qaFG3xoRG6nnj+AOJg367FP8R7A/t5XinILibvj/clKxNAAAX9\nxAXaJ58alhlKkfmGRDScoXd5iwe94by4NxGAfI/RER8lOHQBFIbwdd5qa5qc\n0wgLh7/rAwwkkiEdUTpWjGNTClWqf9Z0tSXL2HRLrMEwBnlrVaFKNb5QOY9L\nHEHr\r\n=eg04\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"1d12550a6229cb648f6739f83d7ba5feeaa67dac","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/rtl":"10.0.0-canary.b411e7033.0","@material/theme":"10.0.0-canary.b411e7033.0","@material/feature-targeting":"10.0.0-canary.b411e7033.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_10.0.0-canary.b411e7033.0_1611785000915_0.5630503942955016","host":"s3://npm-registry-packages"}},"10.0.0-canary.a9ac16b4a.0":{"name":"@material/shape","version":"10.0.0-canary.a9ac16b4a.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@10.0.0-canary.a9ac16b4a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"941208612e3c9b45393eb9a00019c740da26947a","tarball":"https://registry.npmjs.org/@material/shape/-/shape-10.0.0-canary.a9ac16b4a.0.tgz","fileCount":14,"integrity":"sha512-lyUpMQDLXiQZlBTRgPS+vWD+sCl8IBXeTbNbFMWuE+qEr+xmo4Qgf66iMCvywB4GVu/H3GD4hCIE4HQiGjxMxw==","signatures":[{"sig":"MEQCIFxw4ScE/CONmNzebyPzdIbMxVlc0SNTwofc+Tr8HDJHAiBwBx6yLiRxGi3fUGkNvMqZilOmBAQCHInW6fVwraPdqg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22172,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEfFGCRA9TVsSAnZWagAA4ykP/3WJyAlNi9vvqCTmRbAe\nlw6uSUOomWqHLzhQPrSMOeFgCxc6x2lhWVw+k7jxtObfF4/y5W3d1intkfyN\nK6z3kBfrDzC/7nm0aB/IgcgfWgSkDuVFMbXPHCzWQfIqjbjXBdy12tjmE+h0\nVHvpacEIEjlPjOkOtQlAwwzibfL1f+LhVGJ7i0dvDtRFTK12fNfckSoijMvO\nEFhtJMmDTJDWMncccGzm303dLOYDdrLDPJY2+/oVK8Mj7dtLgzOmXBpGQOQy\nmHe9m6AVUiD+jlaD3xuGVGr8fDuhpW4ch1qyvXBtahVCOGmObBBQxZRBUYpL\nE7VOjo/DvNHWDXC9M3GXaA6M+kH7R8VQp9Ud3COigbjG2E0DZAd4tOFPXPzS\nq5Os7oAg6gGKPXTutc8j9N1SRWLjenL55Bp7IktHP8x6LbZ5Oeu8/VXlCCfs\nQlpi0wElilu/hdxm0qw11el2Yx3WqfcIqv6oQGelIlrmFSDtW6pB8bVifq2o\nwsFlXwT+qeAC+HVLXMyuTweS/wKvetGWdZdtZHk3ldPtKlDI01A9D30HWT6v\nBSo3JQl+91oPSqUZgOxRhDM4iqt1D8AQ8Qy5YP1uxlW1OL/sasCigu9FwOy1\nQoUO9I98YeDnv5COO420X7gIgw1FskCDpM+zb9MopjWowktVpxzizUbAL+os\nu5hb\r\n=QyXT\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"1635bad405a8d329ac4e844d0a2b5f3bac553113","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/rtl":"10.0.0-canary.a9ac16b4a.0","@material/theme":"10.0.0-canary.a9ac16b4a.0","@material/feature-targeting":"10.0.0-canary.a9ac16b4a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_10.0.0-canary.a9ac16b4a.0_1611788613748_0.3329428981527851","host":"s3://npm-registry-packages"}},"10.0.0-canary.fec7b42ca.0":{"name":"@material/shape","version":"10.0.0-canary.fec7b42ca.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@10.0.0-canary.fec7b42ca.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"020c97e00b004cc567422af51b4a9959f447f360","tarball":"https://registry.npmjs.org/@material/shape/-/shape-10.0.0-canary.fec7b42ca.0.tgz","fileCount":14,"integrity":"sha512-k3XiBgUwnkPBCKQfNMTLswDAjmAeLf1l4+Urw0PknPASTCbOMGoi4qMHs67W7HMbRHUnUfzXoQDGqWgE5Msj5A==","signatures":[{"sig":"MEQCIG6Y3zIiNxLI5btfqdxvDa5YTNG43TucKCJ1n1p/IA9tAiB+kM1dPSzqDqnDOXsYP2j07ipp1nXiC9ETj4Gt7hRPXg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22172,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEw0jCRA9TVsSAnZWagAA3XYQAKOfioAmveVsiCfPfOgB\noDwyxFu8zVwgJIro0ae/HygR05Ro9KcjgA2+7vtH2i8F07n6/M/XNpef6OGo\n0PgEUBYZJbf3m/vgqFGAxJigF0ENxYzc+yxw8ckmg3MIArDz5+yMoLl3XqUx\n2Q+oF9+c+hk4v3nVQh1sjgn1KdDX0vpmYq1/iGHBv0P2Cy0I7j93UAboy3jD\nfIsB2lElPSY+zWrUTbr5Cknt5GYzCfOdij5yw0UMTJpwiETQhi60oslz+3cN\nuPLpy2+sak9ToRPH+5R8Qep8UM416r60uY4H/sDv8DPWHgVbmh3K0oJN1VSC\nWP6swxOO/LMMMzHSK7MXbDOzrt7irZbo23fl0QpiA+L4YRUrBfJlqenbT3+X\nf9ye/aZv17a2gMUrwk+Ys/DfgTW29flue1SpJsB99kGby70XuAuuofS4lVZ3\nScOdAM7FSTgiJzCpakyvDyQXRcFu/LOFb2BaGQBMV+OYtSBKkukJXitbWer5\nXn1uLwMyL/c0JpvEHDlATy1buDFL/Mwsu4IOLA9zi1YP2+sbrbPVDVjxOSNo\nJC+IpgL9+dRaoHS6y9NvNZWWgd9sX+M9OcECizOkjRkHC0DLhgyWPZP3yACx\nNHn55qudwZRHCYHvTr/nwPJohP7PLujrEIeNT3agNHqStP+1vFdni0QUBoBB\nRVqW\r\n=1tAd\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"c05b9618cc2b93ff9a68314dc20c83c691206159","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"@material/rtl":"10.0.0-canary.fec7b42ca.0","@material/theme":"10.0.0-canary.fec7b42ca.0","@material/feature-targeting":"10.0.0-canary.fec7b42ca.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_10.0.0-canary.fec7b42ca.0_1611861283174_0.7561783064835692","host":"s3://npm-registry-packages"}},"10.0.0-canary.8e66dbfee.0":{"name":"@material/shape","version":"10.0.0-canary.8e66dbfee.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@10.0.0-canary.8e66dbfee.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"70eb1ae37da810bf5af7da5c993a768c3cffcc03","tarball":"https://registry.npmjs.org/@material/shape/-/shape-10.0.0-canary.8e66dbfee.0.tgz","fileCount":14,"integrity":"sha512-93ZV7p/8o2E18gfr396D/JAqCaM/8/rbenq9Yc0n8Gx1/VUg0k3VPN4gEUGP+jUcuZUgGAKt+p2+9+1CQO6ouA==","signatures":[{"sig":"MEUCIGOkh/UV1VBCqJ/50ma3ImRnfVqET9NY30g0ryCAfcMiAiEAq9Ml41SEGz9JdTpw7u2fFAjjQP7P+9CqkiQNy1t/AQE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22172,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGIy8CRA9TVsSAnZWagAAGlcP/jc1s1gZIVM93XhTeXqW\nOiXceBrOFrKkpw7lG6P3HuTN/J+6bJnuAgU7StxNhD5EUdAv6PZGq0S+qJrg\nU/rJZy56LtXTlKLNC8Us9WZfwRJVBTUtn17HaAKFCFYTFWtW2Wu/tDvNCWt+\nUDcPbDFrhIIdST3W3lwaDh9AkilszIHM646ZdqLXdP1HqwhjLWa0Wj/dhyiX\n1w7z+FG3hQr+PBtpwgcZ6CbnAFu2z6GfQQDblaOTN0KBfnfomB/YdZXxiPHu\nzUkMMEKaPas/eI1xX5xwC8/qNUavc12OA+Y2H9nJlV8ZEJ6APJWyMw8bSUzv\nD1Puu3wEtQrHJpma2NyOILae1cQszmHLPE7BY0N/ey3ncUgYjW6tnAqUdQbm\nbLClu4Do4vvuz9PFRKdrBpNEwPAyGCpKXqDEaEqT6jTl5p4FZzHTLcz+i574\nVJNxReBkuQhstyqGbriUayPe3R/KaKD9CawANWp+zjPA4ve118sx8A3WLUkC\nSnRiQW7wQtTFmayxsujzfOprnkuJ85lAoKx6iB9QoWvyRocDV+5KadPG0E/A\nqcjk2YjPOb6q3AU0BJxlzMLcVm2CAMPQOS7Fw0CdncEfl5RJ3f905VN20Fum\n+eHGl87a2yEPq/AkSbg/P9LaDA911MyMFht2z5er9uhpIRMmrdvCgPpI+vDg\nJMO6\r\n=KvZs\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"63606d4d60d94cbfccb1897812018e02aa13bd18","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"@material/rtl":"10.0.0-canary.8e66dbfee.0","@material/theme":"10.0.0-canary.8e66dbfee.0","@material/feature-targeting":"10.0.0-canary.8e66dbfee.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_10.0.0-canary.8e66dbfee.0_1612221627779_0.32680297499365785","host":"s3://npm-registry-packages"}},"10.0.0-canary.637d15da6.0":{"name":"@material/shape","version":"10.0.0-canary.637d15da6.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@10.0.0-canary.637d15da6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fefe56e7bd87faaa12916b5638228aa1e322209e","tarball":"https://registry.npmjs.org/@material/shape/-/shape-10.0.0-canary.637d15da6.0.tgz","fileCount":14,"integrity":"sha512-IgT6ue5vbKCApyFyYC/794uvKiUZFdtd7wzKO6GkrN80GYVvSWK2mcaRZsPyKdEyQDY1m5rQLKLShv0CxsczwQ==","signatures":[{"sig":"MEUCIQDePtgAmJPJCk5KKmVNDfHPLBFIQAAX/q70++tNkXRDRwIgfclmadoQmQfMk6qUvpAd4B4Nl3S20SProJwRsvO95Kg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22172,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGZ6vCRA9TVsSAnZWagAAt/gP/0b04L7I3ZYrUQoQmD29\nt+j8GbOgVQr4kcm0MnAQYH2v2Zmwkq7CAHM4UbDatXnAAAj4jzsdj+6MCayU\nN7YnN4hMFKrnvcKxMQDWGNnI6in5oeIkoMEBPWDe7sPkEh1m1AYydD8iP67T\njluyOvZyw5qZSGosS1HiLNNL6D1Cab7Fh4/JeUYjO9nhLLwzeVp5ERL9bF7J\nW3+hYm/GzAr4r8GoVkFQ0Jm2Ril3Fucjlc6nJaqLqRO7lKHXEeNNCWMEmONK\n25VW91+hJYXmuJn2t0HzWW1Cilff5Q2lbnZPgJ/z4N1XFFp91lMsnI5K2ka/\nh0m6WJBfxIQsheW2iwtDykISr+WoBF0x8DxTepFVLPLbBx4youzv+r6oBeki\nkrTsu3uLE8jsAafc+6+Rkh+XcCy5+2N4EGo9liSPtXFYz87Jbz0YMVmlhLqO\nNVJg7h2ccWGk34SVX42WfTDSPfWd28MDtB5LRYg4wJMo0k7egjizOSOGYVX8\nKJTG/EcOeYY9an2maE3LYLh8B48d94j5Ni691FF1A4LNXBdUFVndJXJxKDq1\nyhzGTK68hsXUVGdjzkDd5GkXZ046l7jZDRSqiBeD0y2I2pr7lViPXeJU74hW\nt4LkaA145U1qX3WrPyvtH0dPFNki+DQd89lQEqlumlRVNaXE+iX2wniJNKuY\n7Ofp\r\n=u0CJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"264dfb09f81436a3537d88f2366133e250344864","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"@material/rtl":"10.0.0-canary.637d15da6.0","@material/theme":"10.0.0-canary.637d15da6.0","@material/feature-targeting":"10.0.0-canary.637d15da6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_10.0.0-canary.637d15da6.0_1612291758950_0.36547204251777776","host":"s3://npm-registry-packages"}},"10.0.0-canary.fb793939e.0":{"name":"@material/shape","version":"10.0.0-canary.fb793939e.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@10.0.0-canary.fb793939e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"06bc49496af6ce1ab8d8fda665c813ba78f95dfd","tarball":"https://registry.npmjs.org/@material/shape/-/shape-10.0.0-canary.fb793939e.0.tgz","fileCount":14,"integrity":"sha512-1C3vLNPgBfUOKFbRp/A6MKOKBjKjFIIEFPGznurnN+Xu12WPp1ayyjxz23JiSwFjhuIXJoMI3XqE0+YHS6ut2w==","signatures":[{"sig":"MEYCIQDCX80c2Vo+uABHG01bfWpqCGYhYIPn0huRWCNRqZuxQwIhAPZ9zyz7BD8Z9MkUBTdMQgpkjqa4tKiOpWLSHlYwAHmA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22172,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGeN2CRA9TVsSAnZWagAA5U4P/jQPXal/+fmzt5k3p6w6\nrsK+mwbedxALvhJL23C4QMOppCZjUiMJnPr5Ul8/H+EoRkKmANuGCtDRQmNE\nVApv3jfwRpopUbdiXHNngQH/mIyT0cVwcC+qHufpFgfCC01AQOOc3XXkCShH\nVQ6KWMirLhTVj+BaVD/yyn2FYC7K6qQ/pSwUNgJW7R9Ye/23ytcRh4hq5CGV\nOkkEZhv0OVHmBzkiCUESfGEKn1X+AZ951EWQfEdHsAxVyrFwdSga0X6lqobq\nsmcB6Z6K+dWWHCtsZq3JP/tINfsf5Lf1oSF1TYY4bUTnD+PSOI3ojmFZ6/t0\nCfXNW3W84vepIYN7yY6xnkptehKaXnSec1npZRi+dUXNbhVYLgIw8ePoMpC6\nZ8EY5tkuwtlMmfVxcP2FaEy1ig9Uk5hbXMD/SLbW7ge2t3Nkf5ca1iT/w6Xh\nXkQvmgxVdMUQ7AQPBel8mUowUtTWGkAIIAaWGAapIHrLwO+oHLDpfYUSY8I0\nC6LmkYt74Sei2NoSNsTvetHzOU4fd+subkb/vM0j6RjwCFYA70ZPZBQA43oe\nOxkomciTZAiHR8Z1mfg/V56WALRoM1iXqMBpgnjG9eG65k4H/wyRFmmLI5P2\nmeKCE13icChhjePXpHDci5slFlurIU40u27noIHxT0F2IMcVYPx0Q8n0K57r\nlixU\r\n=8cee\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"b89489007d2a0c1f3821bd2291e448d44723ac68","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"@material/rtl":"10.0.0-canary.fb793939e.0","@material/theme":"10.0.0-canary.fb793939e.0","@material/feature-targeting":"10.0.0-canary.fb793939e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_10.0.0-canary.fb793939e.0_1612309366195_0.0987542648605304","host":"s3://npm-registry-packages"}},"10.0.0-canary.15a4d40dd.0":{"name":"@material/shape","version":"10.0.0-canary.15a4d40dd.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@10.0.0-canary.15a4d40dd.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8667766732ad68b326d2e544ed14507604ad69ef","tarball":"https://registry.npmjs.org/@material/shape/-/shape-10.0.0-canary.15a4d40dd.0.tgz","fileCount":14,"integrity":"sha512-b1HEjNv2sIVPB45MqEJOxdxLlzJUv9kB8kWrbOpO5dk01xymw4OatZEgoxGeKovtWldgKJnkFGmfb9TOc5xpOg==","signatures":[{"sig":"MEUCIDSkJ/BYQzHLgBnI3qa+Zz9eaclNS0V/Nmof1cb7sk7jAiEAxAppvCDS2SOnN9yYHEojelvYMas5klN4Fl7fQChM3QM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22172,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGgf+CRA9TVsSAnZWagAAb1MP/3wdYMeRICA7G+lXPoZg\nEDYKK/KqAej5aaWvKSqKn9oPv35xCo4mux7j+4foyrfN4GlnSbzBsgiUJOJ6\nSQ5lzMKyT9BVuVHNvd0Q70SDHlowmPM8tYPWeQQJaf4xyAdlNoR9G/SzU24Y\n6HWJ9Z9LyaKRrfosinqNdcbJLbTZaEvhV6mEn9Fnz+LoZ+CgVV4KyUjLUGOJ\nY5ZowDPeZDeZ/M83Fe9mnPrpdRQWXykG++HLwMhXshCSGmljRjRCgoGqN/SI\n3JwRsUmLTiTHUcD7GFtOYbM+WWaWCw+Zr/O0dclohUUxIXJzc0PoiBR/DO57\n/XkOkOKCAPGUIJ5ojtvD3QtwhImBC8DjaN7z8aYqJuSLTKdLbLwDaFCw96aW\nEKk490KpwYkhOyMn/qGeEFZ6nyU3W/lj+yVtuSWouroUZ060nUqFfw8sOkFx\nYmVoG7yyu0PopHiiLbEFWNiPoO2xZrtDeoQPcSLeq8jaOkU2vKOkR96R7PYV\ni0Q7gViJD4MJKuDcdXuuBUcUHc5tLbI2vlV3xmN4FbnJSBTtNK0gKcha7qz0\ned8NJEVFtDaWp1TMejVZnAvwFn1hJxZ3ZX/7Uoss4ZQkVMm8+U/6HI1qsc4x\nFLtKJZ976vZjwjYgGhQy0FsRuKkwdAQSUH5NDU3wk0qmd9UhZ8tvGyf5fGmD\nQitk\r\n=Drfe\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"a6b5f072852f1f101d03fb492c57fc97f7f0ca9e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"@material/rtl":"10.0.0-canary.15a4d40dd.0","@material/theme":"10.0.0-canary.15a4d40dd.0","@material/feature-targeting":"10.0.0-canary.15a4d40dd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_10.0.0-canary.15a4d40dd.0_1612318717521_0.32644015784980973","host":"s3://npm-registry-packages"}},"10.0.0-canary.7a003acf0.0":{"name":"@material/shape","version":"10.0.0-canary.7a003acf0.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@10.0.0-canary.7a003acf0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a66da1606e017d108f33ecd268dc25827957a8f1","tarball":"https://registry.npmjs.org/@material/shape/-/shape-10.0.0-canary.7a003acf0.0.tgz","fileCount":14,"integrity":"sha512-fU8QasCtSdRgx5EGCrjGkMv/u/ca5pD2XRt/CADQz2BE9zfsmRZAhm/szYiA8vsJa+VLw/b/rrreFOEfJmKsGg==","signatures":[{"sig":"MEQCIGmnDCESmAiooihGpaqnwO1NMF60gNpxFp39OSEaLZ1HAiBOnjb89TynG4tlncEcWbSdAe0HgroVLqD9GNW6dwFfzA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22172,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgG10aCRA9TVsSAnZWagAALSkP/jajDiOoLVAtDftT2OB9\nCcxIw/hO3O8KPk7Gs3moCEIFYFQieMD8sRhHbVlRW59t5+v1TY143BqNBzAD\nGG2do3J0m7wsmaBGReTxUOdUCYEiLevUv/BfYmttZa3c4gaJ8CXZs0MLsFKD\nPZ352jPCHE0xd9TBSXqDlPvH87EuDFxuta2oALcvCQymwej+/5Wnwxt7ouk1\nIcrG9wyGBXcIaDY5av2neuj1he6yNYcUrZ+fMM8xi1z5eYrooNneFoKi9f6e\njeYoyu+e3cwmZUs1BZRJpMePmaDcdDI3seDAegcxNu/09lV5uqKiRPG023H+\nyPMDRUeMQRn54kB/S0nCcDO7rZJbQnv7Sd46xTDiuWsKonNWOU6kpsh6eG/v\nfx4l6sw1I08+WylQt/VzyIJU8wcACfSco0nXTlGyRsM75IjWpo0ELZ0lKCx2\nNmOOSg+v1RILwhUok8yTtwxX9ff704PUs+LzcodZHjsNKuQYwbMoEXlXj80H\nD8rsLJozwcRGOdr61jGV1LB5wvzKyDEZ9P1pvCU+05VYAGspZBRSIsz2Ua81\nC0avK1fAozFieQfco0C9YbAIS4B7PBzI8P5nasdx0y1SOl78hUNiH7CV4s6v\nT3f2dLkEqRpkjli/y9wbohv1PNBMJtJqqO4kYqJO14Y205P8GhL+Cdrmg1Xs\nHWCQ\r\n=4M0D\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"50aca8110f6412e14432e118e1f9229dafb02d85","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"@material/rtl":"10.0.0-canary.7a003acf0.0","@material/theme":"10.0.0-canary.7a003acf0.0","@material/feature-targeting":"10.0.0-canary.7a003acf0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_10.0.0-canary.7a003acf0.0_1612406042133_0.6106425747035025","host":"s3://npm-registry-packages"}},"10.0.0-canary.05f249666.0":{"name":"@material/shape","version":"10.0.0-canary.05f249666.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@10.0.0-canary.05f249666.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4e0cf60b2a687b2a2be205ee75310a0cd06fc638","tarball":"https://registry.npmjs.org/@material/shape/-/shape-10.0.0-canary.05f249666.0.tgz","fileCount":14,"integrity":"sha512-cqaJt9vw+pxEf7goBQhmntgp2cpDki57AWn9sjRoXzYRIr6/oons5ybdx63Fl0oHPAxIan0EdEwFnFhWSI9YUw==","signatures":[{"sig":"MEQCIAGV9z5i9iQ9o4xrOMEyLTCqYhv1sMyq8anikNB4qCWHAiAZjx7ISTPhbOVncCYoGpRTy8oGpvGHq7brXVaVtpYIig==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22172,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHDPYCRA9TVsSAnZWagAAHFMP/R6aLb8j8bv4sLWdLTRe\nJcdaTIG1OBzW3nuwmfG6HHDjtU9qJQzx6GzWQ3Boi2WA7A63ikd+b556Jslu\nG6GkC/PLuHb2aFetfsknW3gTrd2AgZyKTAp6s9NkoBSbHgCrtLrmsmwVjSCj\nxBv6SiYrCXx02G4Kkz0/SkmkZl1mHZQhHYfychYygR7CtP9Og15yd/C00UZP\n0LGK+Mf67mDVg2ZUBG0McSHMmjzmkgAG69wJb+lQH9LP3aknsWw9+lcIjZlI\nEAFE3N2qbegj4JZiivp5Caub92I5IPkFI+/kTUTNia6YAMdoUX9YJlHgyWju\na3PjVLuHGSaK2IcCoa5qEHXC3a6vPmSlPQACKu7aJa7CoRBbvPbqJyEnhg78\np2r04QDgOmiYzADrqoFItGfSC/ws0MGr6Ju8hQRHighBzlQoe4QhuzYs3rHy\nmC/a3rCRTHUNzyigw6T/Cb+wN8+rZ3MH5H7h2hSaVYNjbQ0RJzlcaDTT78tb\nNknCL6/RgayX7BE+3z4OiYLcNsNGekJVelXM2jMKy7ftOTvB/tAkCSSa7pi7\nyXGRBTgwXDorepmdko1jCHiYMKBQFsove97s1C7TmmDD7ou8lUaMkzeVjzpq\nR9iLCtBgk7jAYlcPuIa/hBG9TKsdy9rf1+B/EJqZbRVUZyVZ3g6HKglRLQGF\nNEES\r\n=v+PC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"6f1fffc7e905a3d49f007f288c26a4b5ea11dfd0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/rtl":"10.0.0-canary.05f249666.0","@material/theme":"10.0.0-canary.05f249666.0","@material/feature-targeting":"10.0.0-canary.05f249666.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_10.0.0-canary.05f249666.0_1612461015487_0.5470285436606535","host":"s3://npm-registry-packages"}},"10.0.0-canary.1a3a39629.0":{"name":"@material/shape","version":"10.0.0-canary.1a3a39629.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@10.0.0-canary.1a3a39629.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"24798d33a799f7eff48dd297d8cf8f8b162488b9","tarball":"https://registry.npmjs.org/@material/shape/-/shape-10.0.0-canary.1a3a39629.0.tgz","fileCount":14,"integrity":"sha512-cDf5PvUB9zF5LDhFXwiiQdvWCyHjW5SUqiIf44RLJGFjfwIntlfxuQY+tMJNv7f8uSItGAqctut8CjDVQTAGVQ==","signatures":[{"sig":"MEYCIQCc6jJMDbp0dgMvdBVwxRSb/K29Uyeu6uSkZz0wI8Wd0gIhAPJc/f/shO0McCvIO0awFRSPHxkGew5weplYZ208SUog","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22172,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHEA/CRA9TVsSAnZWagAAytYP/3PePrDOSOL2fD6hUM2G\ngtYFNQ6vP8jD8CPWmY+41lLA5wEjcxcpbEVtvpzc0xUU0aUy2vw4SMi3yPS1\nOr5+4NYjSxNrBajc+Kf+0ZwChkdTTwvjp4XEdwhO+H02fn8C+/0Frfenz4Cd\n1irUfRVwhzMb1nXiX7XQvshnm8FW5a9i5/BP3JVfqkpaM+/2XSgkZwpnylaQ\nrtaD6gmQPjdlv60kAO++uK6Q4ZesQwt21ZuSzeblGQD5azbIktBMR5Ak8KuN\ny6gbOh6OxjVAPul66Yf9Y0gbyBVo8y9M5bQKff1MzRri9yXJl6H1atobauqv\nH3favlyXL6Fuxa0XlFdTCW+ptqKajK+TjyYZxwloWVSc6pz12LMRZ+RJooaS\nY4R/iUyXRODywJu5SPKR7gdHMeTP6V6Q/xvaUJ7TlBcUlh2LA16xzvSFJoSl\nyxkh0vVtYTp/E7tZVlE1nvXkdHPXiY8JzvkHiF/5/yHH7YmUgAT4Faw/gz5H\n4ZYO8q9Ce52A0b5ZxLMo2lHo6XohjXleYkSl3kksndVI2XOZDgG+I/E8xcpL\nrY4ySxPqxDvpsDQcXdLeqSxBDfVeEL7lehBlhrZkBa1r4IlrYPACGyX7QhJv\nv4qyoiGSifwE2qqpOnxlLlv8Pyy9jd48qj8RifP4kZ1gY1TEAv70slMDV88p\nDe6E\r\n=GYT3\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"87d65275f85db5a2c4e630df10d231afaba36449","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/rtl":"10.0.0-canary.1a3a39629.0","@material/theme":"10.0.0-canary.1a3a39629.0","@material/feature-targeting":"10.0.0-canary.1a3a39629.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_10.0.0-canary.1a3a39629.0_1612464191139_0.4088175822843245","host":"s3://npm-registry-packages"}},"10.0.0-canary.8b1cdb1be.0":{"name":"@material/shape","version":"10.0.0-canary.8b1cdb1be.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@10.0.0-canary.8b1cdb1be.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e31442b97fda83287d038f8d638f5be61d9d65c6","tarball":"https://registry.npmjs.org/@material/shape/-/shape-10.0.0-canary.8b1cdb1be.0.tgz","fileCount":14,"integrity":"sha512-cyn+eN7hoFIp/ndT2fBnHLx9Iz/wJqgoqhkiCIDQAXjddg2POnoE28gQi4hEj35WHJ8ZP03zPTno/4Z7L5TnIA==","signatures":[{"sig":"MEQCICKBhMMKmsVw8+B7Z3L29xXzCnRnvwxPhECw9Lck9DvjAiB8fqr1zbO0uuJgBRVKJ6kza1m3TLZNHyPDGOLn+6tJ9w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22172,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHHaRCRA9TVsSAnZWagAAOBAQAI9L9SRaVhjGO99ynn9Q\n8C/B0Oe8qiXOuZyjiqyUb1Up1UBpemVUWgNR6lbQo6661GegEDgVhH1dv86Y\nW0sZ0hGtiom9gC1+xseb+ou7E8NTKH4udbdOw/2oHTcxwralVov5z9Qvb/lI\nn36eprEFs6HlhsP8x+1lkjrUk41PIwnd61eWli/WWu0Yr1vIblydSzfBeGwi\neJ/MAhV77q/32NrfOG3a0mzIlmWoO/BgQ8yEVw9vB4LAmjrvUcN0AxbhmeYj\npk/BlEx9dmuz4SpdtCvoVz1/ZiDpEGuKu/1MnpgkjPCobrzIHEf9cY5Qsezb\nGOM1AnUKGFCGB8x/KEQx4wrsA2Ui5Ae+FOGb9MGG5Gpwk20+2ErtJTXAtIo0\ngBxC5qfMvusAik/gU2JCb1DaYDqfAHweWVJ5AHq5C8+OCzIL77KTRlIJVrnQ\nmBkCvgeLLAcxT18M9UD9okrdakHhYUAkzc5iF84byrYY5is4OCQnimSLJ0uy\nYmOVLBSOqRH07xqlNQjGf2RdCvGDhjFD+UMySy4K/aPgtYt8GiRUaYzGjnBx\nPOEK+NLzz9XOTFRDgL/6tOOSzrVrX7xxewpijGcGwRw27vQiP2ggq77pe9D5\nDjSa8U/5bUkfLpUwcUF8cZIsC4/xUdXUqEbtCjaI44dCgilgfkZPNE1NQAer\nFZKa\r\n=T8ev\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"73f8ad23c72c2fe32bd1a9e5e102b6aca8ce21d1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/rtl":"10.0.0-canary.8b1cdb1be.0","@material/theme":"10.0.0-canary.8b1cdb1be.0","@material/feature-targeting":"10.0.0-canary.8b1cdb1be.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_10.0.0-canary.8b1cdb1be.0_1612478096912_0.6535311086168485","host":"s3://npm-registry-packages"}},"10.0.0-canary.8271f00f7.0":{"name":"@material/shape","version":"10.0.0-canary.8271f00f7.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@10.0.0-canary.8271f00f7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"78670d35cefe427fdad93a0852d30329d29e9128","tarball":"https://registry.npmjs.org/@material/shape/-/shape-10.0.0-canary.8271f00f7.0.tgz","fileCount":14,"integrity":"sha512-wJz6WbK6SNnofEJjsSVKAN2RiotHtKkS+NjSA50NtB3J91LuOPjypkOci/7c+OQ4b/GgE8TaBEbasDYe5YfQaw==","signatures":[{"sig":"MEUCIHFwt+fLEmwQsogujCeVJYJqpfJRxDjf8CXigIwETTAJAiEA4rYQ49ZxiyCLZpy6QCTZ0IvzZCDVW1Z4pMpWJ5fZYrc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22172,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHHyaCRA9TVsSAnZWagAAZHwQAKJO3cCP7vnOb+qTcqbx\nKr6v9u8Vz9icM6+lmRjjkvdp/nMxl3TuB9oMobVj+26SbTCtXTkQTHiXCJJi\nZEnheOGVqn5LwNLBMe97HhBbmxRj0T3vD84zHJ43nGsLbOsw8hVC7ua5n09r\nzrDoFrBKUmQOJcjP4LInLwTwtqYTiyUbOCQejLUKu7l8j5zG7q0MOyT09w8g\nKMofoIYfHPkupiSECejutzvbYEWsBGHoTIb+nfWw4u+FPGgM4GJERCe3v7oj\n4xfmkDjWi+EKTQqTlvGGNUDS+msOdMruHSnX24ps6wP9FTOpIqXnoZp3ttKE\nBkhxX59jbCTFVaehg6wP53eJwQB69lITwowbBbD0F6R6krzz9/yMFbxpgrqW\nnruUIOzGPRlDlsEOKlyC3LwNzCVQXE56r7+UT+9WciXr4Va6cLppuOeSwVJ/\non27f92/dng8mWo9MMgpUgWqXICYVoKHfCOaPd7HKf3dFnIS9eD/USjiglRB\ncWmUM1SB6wxI98b1Qnj+5j8ZzgzYsdFtW/REPnUXMBP+8atAFigUJ0TA9vzw\nvbJvWyRU1EwD5oechMmB9RRpI6FDOXITiPtWQT+a4jma8NO+PwhRxLEHUg85\nYXXJLIhDYHYSTHt4yB9M17CTkoXNEbbMm6DwHbBFqT3jEyixiJejgI5aPGrt\nJp+6\r\n=zLbu\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"e210c5292564fea23c9cedf08acd2b8ecf86e94d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/rtl":"10.0.0-canary.8271f00f7.0","@material/theme":"10.0.0-canary.8271f00f7.0","@material/feature-targeting":"10.0.0-canary.8271f00f7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_10.0.0-canary.8271f00f7.0_1612479642337_0.7413390174278047","host":"s3://npm-registry-packages"}},"10.0.0-canary.533092a90.0":{"name":"@material/shape","version":"10.0.0-canary.533092a90.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@10.0.0-canary.533092a90.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"63d164f9d61225f4ce5cda77a24ae619d5b6ce0d","tarball":"https://registry.npmjs.org/@material/shape/-/shape-10.0.0-canary.533092a90.0.tgz","fileCount":14,"integrity":"sha512-UHc2OWH657+hG44vZkPyPM8C/SqYyU+pLl7eRU6AqbtF33eBmGPI5hkY0NjXFQHFYdQYoHafnpjsBT0H2BF+Qg==","signatures":[{"sig":"MEUCIA1ZdpOXVWKEQU6YhWryfDzMZ+MDY+wShc3nhaRMyBIIAiEA5D12bU/fRMINH8wesekmlca1+KLz18UBMkaSMlXuc7U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22172,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHL+pCRA9TVsSAnZWagAA/jAP/jkdhSq5SwcIKdsfhNe9\nJ9YsyGG3lL9azTepMdokfgDHfCl9Sm9mFdDHrC5kHcu2nRTahTGJPTbp03cq\nfF6cwxixd3ddlQ7ghepS+vKbuhhGvS4Ls6Qn1JupjBvNi2yKlBo59AUxiihN\ni/v9ks7yE1inOw7lr0Em+Gi9CKy789PGIpwAkDjGocIv5ZR8wf4mwT2UGsyi\ngDU123CZLLqF+3mvqP4NU9ZQy59HBQ5G8aNanZ429yGIM0XcrVeKUBHkAlsQ\npuvrkGzXNfviUq1ziq+0dlEX5dSEutLbVUJ8ezYCv9dGkF7/M6Bb4iJavAIx\nF/TIqDP9al0apomsqVrc+ul7wxitsjkN+ffJsRbMhbX7ItdtNwZjGQU4Dp7S\ngQqhqsn6UZQSMpvwohbbf/yQpaD1diiJd+u4ErszuT/1FFWuAU+WV3MHqwLr\nXFjKq+dGzCrkMM7UXRaKdc3uRPySMbgVQIJZs3Lj6emJ4kAentRFpZY22B+w\nrByRH/MzjmyKE/coAzrJmcw5fIDAKJR3xJYLTG/uW2LclQbKNrROeM9kPBjx\nohNkx4Adcp+q9JpfCRqudBXQF6a+CaQBjkJixi69hPCKvgxrCf5NT7BiKEt+\nJ7kj9Z1d5P5Z6x84K/8ofGPvENFf9i7ptwsQpW7kll3U6rDhFMtJYnqtgsM3\nRLXI\r\n=l3ur\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"1f76aa244e85ddde7348716259e771c739c09f23","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/rtl":"10.0.0-canary.533092a90.0","@material/theme":"10.0.0-canary.533092a90.0","@material/feature-targeting":"10.0.0-canary.533092a90.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_10.0.0-canary.533092a90.0_1612496809083_0.9663100989915652","host":"s3://npm-registry-packages"}},"11.0.0-canary.633a9fc7a.0":{"name":"@material/shape","version":"11.0.0-canary.633a9fc7a.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@11.0.0-canary.633a9fc7a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d526c282018cf07b8b3335787866bdce88282092","tarball":"https://registry.npmjs.org/@material/shape/-/shape-11.0.0-canary.633a9fc7a.0.tgz","fileCount":14,"integrity":"sha512-4YooYMQ86rb64a2w1mzBZ4Xgvu9qPCF976WQJ4KIX3PtDoLOyYdnaMTBVWpB0exVVhek9VGVxKJ0YkTNo45h9A==","signatures":[{"sig":"MEQCIA+2ofothD7cO6aYkulie0mJtBCDZ67i9YThwaR5mVyXAiAnHD/V8I/qUdcdqtbwNoYXnumliwq3bV/hCFm9yTYQJQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22172,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHW+SCRA9TVsSAnZWagAAYv0QAJOq23zn+Uj55I32Ub6U\nhwXtu4mJg9ffUt2E05WAK+KTPFvQuX1EM2PIicI9kPz9XEIqJw1Xa1/Yntoa\nr8KWU8+LQsw7t/lD61hU5QcCXxOSr4xFs5JCFeV4r1nqdNQcxXkf++5dJ3NK\n5jeFI0EfweBKDRoEM5wkjMYEj/qzg794SMXd3RHKHRg5R0pMhXvihk/EaFOO\nMbR4Zwh41DFgEjKdS6CTg0Yxc/tzvlhokrih6OElILY5FysJo4iw3fntxpc0\nzkECR4DaxC9xR935lCPcN+q8/Ou0EGgYenI1sdd4T7ek0IBGUbdbj3zkGuVY\nZqvC/AyDj78FsBdIU3hT1HlFN/P9PURs45wU50luVVF6WFAK2h1tVeK/f5Y0\nhJ3T9e5VlpE9Kf/2yzoc48pFnKYJJWtBxNlkjp5fd3Y8uz+na4L23KtD8Wx7\nPugaBLvb/QvIl6ZITG9E+uxk0z14HgQ/qrWnX4p3+sKAmjA7281Cya0Nib6Q\n2bVAVLKCUtQVdwvN0G+fHHaC9iONx6Z7gnMmN3NbSRN5Ty82Dd/+bDRtAgj8\n9cA2Z3jy0OezSPGanpu8Ag2yfN9Rlwy62lBbggepKC7PSo9wvoNzuKGWNUI3\njgblrk+7RbnR6K+cKlneWCPYfgVWHMVMTtzesobjKuVZ9sbXSv5yb9JLlYvD\njy4J\r\n=oAq8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"9fe28e8829bc50c384861e340d551c0718dac053","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/rtl":"11.0.0-canary.633a9fc7a.0","@material/theme":"11.0.0-canary.633a9fc7a.0","@material/feature-targeting":"11.0.0-canary.633a9fc7a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_11.0.0-canary.633a9fc7a.0_1612541841866_0.09386233115518605","host":"s3://npm-registry-packages"}},"10.0.0":{"name":"@material/shape","version":"10.0.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@10.0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"af3272d22f3782a8dcfb8b9d67a28a1e3d4b6303","tarball":"https://registry.npmjs.org/@material/shape/-/shape-10.0.0.tgz","fileCount":13,"integrity":"sha512-2zUib2htoZz21ULa9lNd4llGOWlZcGLBKKJdNV6wsyPlqdh6SjEXf3Fz1BrWV6pQVW3fhnhn+oTFLMveV1mMZw==","signatures":[{"sig":"MEUCIH3f+3ZXXLYWdAmfvXBbg0IyhjgkcDDYLC8ZSph34WpBAiEA5AxXJahQuTyOQcso9tTlXx9kS3eYGD8zJkP5Wb8tC7M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":21724,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHW/qCRA9TVsSAnZWagAAVugP/i6Y6XhMptaZrChwXuKB\n0XEG88QVmyO3iHGekE1WevKC8huZ35Y/A0ILw69cRoh/4rSNTj2hsnAEMWnj\njOBaxh79e7iPhwiSuDmk9o6ILmMtMucoCu17k9c9qIDxb09fnwiI31+M96hD\nnN55fytR8vNJbWSl4KoOFxoesXhukE+j2yye58bcmj2abPxhap+JzpoAHR6A\nnC6D1i6Cq1IqyL3EOooTv2e4rh9LjPWzAJcdyRGrN3XWjGhXcjyRAkWLTEOS\npalqL3D71LSCSf8C5LNMXW8t5sp2yAxbJFM6lSzf5RHa6PDdagaL/ES9zP86\nec340Fy2eR0mY8TROBsheex/h62sRnfvxhgZ98+iuQ+kzb2k3hJlRN+Dw7SP\n8tsv5GzqONc/ZzXCm9lEn2T2b/mdFjZStcQcWNw0unZRnoKyd9N7IjJKuDAN\nHgIvoJEZsCwjBK2Hw5MRgzg+Svnqg42cILW6VLc9nBIRFmL8biP7U2Wza//C\n8xdw47qmK2YkgtXa1OvOTsrKZd+a6vVNxSpulYBi9TO+1rwHYNhYNTY4Q8d+\nEmRmQHF1d53NgPo8as/YoAb5EVP9HZUg+Td5J4UY1r3FhB98GxpwnpV1NiCD\n4sZhlaEirYiJlU0fs3JpHcCoLLISNYFmFk+4+nj1//zHx79FdObGnS3G9XMU\nlsdw\r\n=aUW1\r\n-----END PGP SIGNATURE-----\r\n"},"gitHead":"633a9fc7a98d0d9bdc177bc9ccbd49beb25bd5b6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/rtl":"^10.0.0","@material/theme":"^10.0.0","@material/feature-targeting":"^10.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/shape_10.0.0_1612541930448_0.8810379687475753","host":"s3://npm-registry-packages"}},"11.0.0-canary.b5227247d.0":{"name":"@material/shape","version":"11.0.0-canary.b5227247d.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@11.0.0-canary.b5227247d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9281bf2146e69f296322ff5c468c97f3edfbeeb4","tarball":"https://registry.npmjs.org/@material/shape/-/shape-11.0.0-canary.b5227247d.0.tgz","fileCount":14,"integrity":"sha512-AzpImdcnlaDN5ZWz6ECSWeR0sfrrOMkKm2UD0+IWID3aOTxyQxaI8mPg7xczfRQeh8MVBe7Cw8ZvcXZsbtrZmw==","signatures":[{"sig":"MEQCIHlxxwKcwFLxfVCh5aI+N/1MC1ddSg31HApCsQ//zQdZAiATRwh5iBVjixsQcP8F0xJekghjgXU+vZGHfNJC8X3V6Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22173,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHYNvCRA9TVsSAnZWagAAc+kP/1MmDUBmfIrHPU72KJUA\n2p3rh11/crZMMdofqZQQzJZm8GChhqGd55zXstsWsq+tZjnPZO8AcJAMiqLe\nIDlKJhRxdtugLQ1JudnFQFNcrn2YTURryTTDk1EQbRRaRFGaGXQyTLGhh856\n2edDJ+iG1bYlRs+Q5pZof3xe7OCzT8v0PIasixJ5mFAdvCi8n43FZhpd/55Z\n8uImyDDaEleIdKYmj+3rHwc/E9qTvH9W3weVf0tuCY1i4BEhk91dOuPxr7GR\nQ8IKAtF+h4pC94ywNqX3g41ukobeh9RHs8yqBrhOv3V8wg15C4qs4gPl0iy0\ndvS8jIVWOPHyvaRVEheagnZIrQSTXzzzsgD8Xc3WlxvlOFvZRJMj2+oMZmAz\nbzbVAV+GGFKe7ocsa4yFwsnNI2tb8LvmTjA7Aj05NN0p4bGgDVB29qTnaDld\nuFn3SQNg57T9lGxEjksp8uvaY7h2duF4LktM21i0Q3b0g/ixDOI24D8gLZa0\nJO4XZE4mPY1Ijm4NcbrKMXPtbuWRtdSqBbZYv5Bdcr2Ebbg2swlWffQqKC0d\nFZDXWpbbJyYo+SAzNbfv68s1N3EThjHsNRXfZan045JYGEe+j016I80mIrh7\nsusET5RKUNVh0mV8XH8PaFOid5AEBkO+ijpV2GllRW/ldlEUvjHYTWaeKKUQ\nXhEH\r\n=/8sQ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"6f733c52a8cabe9fdd3ba4c35cb19e5526d8b312","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/rtl":"11.0.0-canary.b5227247d.0","@material/theme":"11.0.0-canary.b5227247d.0","@material/feature-targeting":"11.0.0-canary.b5227247d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_11.0.0-canary.b5227247d.0_1612546927095_0.428320818971774","host":"s3://npm-registry-packages"}},"11.0.0-canary.95322b11e.0":{"name":"@material/shape","version":"11.0.0-canary.95322b11e.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@11.0.0-canary.95322b11e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"51ddc16e2f9b1b8bcf847cf936fce2e2fdfa2449","tarball":"https://registry.npmjs.org/@material/shape/-/shape-11.0.0-canary.95322b11e.0.tgz","fileCount":14,"integrity":"sha512-FQss9Xv6bX5XQEgmxlY/k2wyWnp558Km8cdyi0vR+E+Gy7+ntphltyPJpH2UKFmOnZj6x1nFoUrvahApLCsogw==","signatures":[{"sig":"MEYCIQDP1cUH8+YpgbzshXUofAnnKBf8ILkHVBdnCl83/We1XQIhAIPMKb8f6ekO/9xEvcVbEPwT9iL+Ce4k9Py38dLw2jJ+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22173,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHdVeCRA9TVsSAnZWagAAGOMP/05nsyH/WAEEVJBBaVg1\nD73rLAedVn/NCQetbM1U4Z7X6Aw9pzs/adUgXhKm5wnAys5IWB9tE5n/xRW/\ns/adBmB9koCSAbNslFbNnhpB7BmlWdv9EbKLZx597sSLBW/uP4tK/jJSosZs\nNVlm3lzIMNe4GdwqHvKZSbmNjChKz81b4jr7n7mgIerAs7600cYNbvqNVoR7\noSPp9SwzbfZMsdysazj4XQ0YPbV4D8yD9ATFIUxTHjV2mtklCTaEuR2VONTj\nstH3aiYawfwXWY5ymf2htk6N49PuGY3/j0R2JAZrQTAcgQPPmWJaijDDSsT2\nr09cbOmoTjicZ0AoLvm0PKlvrzNWV4ZAcNgC/VX5bNYeHqS1Tj9Cq1Igv0q5\nB9EHXwYwL1aHHCUoaj63stUWKb6odVxVBkMiH3tx0A89pyRJLW/fjSX3M3hJ\nnAaAhRbMbmQ2OoT9dv2H7BM4NjNhMKTgtckq2WGTK3Z8Wot7hAGLsUVxSQZ6\ne66DBtSPnuaoaMAgPg32J4dRivbbjrVgZ7ZhouOz0IQtS7KdC7mZ+ozmdJ5D\n94IktYge3EhTxYEAPui+zpcbjrklaZkZAVEcUz57wNhlsnk0lpdA43zAEDlp\n0yxEQhPCkQxSqIM21lyCaqsxiNajNsQwatIbYWbDAxn7r+XPpsEN6OnZE21y\nhPWe\r\n=n0aI\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"96cbc49ea4bd39eb1c275fdae68b6bae32b59ad9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/rtl":"11.0.0-canary.95322b11e.0","@material/theme":"11.0.0-canary.95322b11e.0","@material/feature-targeting":"11.0.0-canary.95322b11e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_11.0.0-canary.95322b11e.0_1612567902187_0.10892628551293604","host":"s3://npm-registry-packages"}},"11.0.0-canary.1f318ff0f.0":{"name":"@material/shape","version":"11.0.0-canary.1f318ff0f.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@11.0.0-canary.1f318ff0f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ab00b4d9b292e6e34ca8874c1dbfa3fece9ad537","tarball":"https://registry.npmjs.org/@material/shape/-/shape-11.0.0-canary.1f318ff0f.0.tgz","fileCount":14,"integrity":"sha512-tDHsd4qk9rDszdpykZsAoZG8iwvoyzaOEN5hibpeu/O8pIAdTgeLbPD1qDS526iNOg0iZV5EFVQB98iatCEGhA==","signatures":[{"sig":"MEYCIQDbBOfvnMm7K1f7ea1HkVdg0k0a8agIEUZWaXoVDoHLRgIhAIwnTl2MH0rzrLL1P9JUbXItwwwmjWhyx+tkfyUfCEX0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22173,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHd0nCRA9TVsSAnZWagAAuZ4P/34jRONewx8Ln+b3Grjq\nLww7sWXFpCk+F2zQKwTqH8PNg5SppoNRmF9FhYKVc1rd+PIS4GJ0sg0ZnUrq\nfmKd+V03kgRFP7GZb/HRtisg9yGCKrTAldViJcsQqpQ+v11tXA7tDesEg11/\nfuM3XjDFs+nCaQUGSmZ3/Cv2wyTzujAU2mDIyyeCz9qRvOUnQ3QnLpk5z+Z2\n2ubYlXufHpO83fD0t5LDguNcm10mgeOudZ6kiYKTJVzmYV/irIvVfXSxlCOm\ntKaskoHHkhgQ3IDQGgbDd1tVf3nzMGKJP8gO+kmeztxEkRqIa9iHdJjPcK90\nHhDfQ4kimGHGLiOaQGGYOTd2jR4t59wMZ1xOe/VIqxg3OaGjtnwu7BUnIAgj\nheSHcffYi7oummVGkjOzhOfMNTUui0/SZuLcTMznRaboOJv7WJ+YvrxOhh+N\nakPOidyDnbqdSNWhoOuQ7476YPIDmMmYpJ1RRLEad9fmu1nZ19YB7+tmO0kK\n+Hnz21P71i7I4DxiFgli8+J24ENpIaUQXrfjboyGw98GQ/0qa2pX0upcgx4q\n5wyEZXEOIySFtXmtT/2UiSeyduz4Gqlaseo63ehrm7e40iuHHAtREmTHOxem\n1OQVA+S0qgVdJ5+wxTBciHP7xqRAlw8QJllSKlA3flC8nEnXvOqrkwDOpXr5\nL5TY\r\n=Sbog\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"fbdc53421d5701ba23a43e18a010bebd179dbae0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/rtl":"11.0.0-canary.1f318ff0f.0","@material/theme":"11.0.0-canary.1f318ff0f.0","@material/feature-targeting":"11.0.0-canary.1f318ff0f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_11.0.0-canary.1f318ff0f.0_1612569894622_0.9010921659448419","host":"s3://npm-registry-packages"}},"11.0.0-canary.ab12cf7a3.0":{"name":"@material/shape","version":"11.0.0-canary.ab12cf7a3.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@11.0.0-canary.ab12cf7a3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a72f79603bff83d52e9557d930761048d16fee95","tarball":"https://registry.npmjs.org/@material/shape/-/shape-11.0.0-canary.ab12cf7a3.0.tgz","fileCount":14,"integrity":"sha512-dlNiuoHzZwq2ubJ+1cgPngEzaRzoyy29sCMObjW8ns21rqv86kjhX/gACRXrggvsLgGpHjR1jG41uGMywy7tsA==","signatures":[{"sig":"MEQCIE6ICXdWQqkBAzP3g07ng3AJJC1fLwZZTGr65/fNWmetAiAUuQ4iYaH9fe68bkZR39RckfcCGMBXshjACGoD+tDNUA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22173,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIVKwCRA9TVsSAnZWagAAv7MP/ivLKexpF0Tb3zPUUVRO\nZPOVvvDEAyqBKpXc17dT5Y96G9egL7Hy1MmW5nihGh5+90Kl6b80q3xJz0kt\nGaqs//QwfgBN1rw2f9sIyLDm1nmm32cfX1AA3wrS7J8kKTOv9QOgFXiJAXlq\n6lxZ65Q7I19Sb10g5GTnfMo3ihq3ThngbHcS4ZakidjFDU28s6cIYf8h6PGi\naCVN0qryuSZHAkhwQe2Sc1zrICKxPglxqIElaFBfzWhUlUVMCpzes6A3AZjn\nAd4lp7rIY4muItPF/Cue5fy1AkkHLWhyX4DgF3MqFskCcVMYKAuvX1nInAk5\niB6XreQKSdAbPB4qOAx6OjwKk5RJvVtUiA0wqEKWphEIGNZxBjaToKXjwynw\nJlAsf2u3yIlDnwVpTO6zeYCe1qHrAfAeVw1i9e6zOAuXN+sDhmGeOl60FG/C\nK1mzu5d+pgMTO7Rj/MZpqoxuqPm82AkWjQEaFhJ7CExTiJ+Dk1bj8ttFxrug\nOPOvSYpsYrTfxje0SLapemNVizXNIleB/bpyJZiYCaGDUTHGv+pJf1s2cgE2\nW1Ae7EBe61jgoo9mJdJIF40/ijKH0bZp9HkQm9DN8RSPS634819F5CREOqTw\nxoq8KkGeasHGfREfbwdP3Hs1/9Kv5OXE9jqVgf5rxuG/AArfdf+0/60yE6sO\nt2fI\r\n=UF64\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"b1cf52745607ed664e2dca58a230a3b3849aa273","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/rtl":"11.0.0-canary.ab12cf7a3.0","@material/theme":"11.0.0-canary.ab12cf7a3.0","@material/feature-targeting":"11.0.0-canary.ab12cf7a3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_11.0.0-canary.ab12cf7a3.0_1612796592412_0.0635282283280485","host":"s3://npm-registry-packages"}},"11.0.0-canary.98db2c5ec.0":{"name":"@material/shape","version":"11.0.0-canary.98db2c5ec.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@11.0.0-canary.98db2c5ec.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"da5f14036a092e75b1f619b33d19fa19005ecbb4","tarball":"https://registry.npmjs.org/@material/shape/-/shape-11.0.0-canary.98db2c5ec.0.tgz","fileCount":14,"integrity":"sha512-+fUXx28D8ECtcYWJB+kMARcoQ3jIaJD747i8M+xPZProyXKmelcRAxSigo7QXSH7Id0zVZjBuo0kss/9sOrrzg==","signatures":[{"sig":"MEUCIQDlg3qFZZCZzco8VfnRQFlZIbVAJbbxaNtnxDvnsM6LOgIgDqaqoVHet2K9lB1O5amZj/h6ohezUYIhhppdbc2+FQ0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22173,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIVnyCRA9TVsSAnZWagAA9IUP/1YvMZnWJk5uaO1HsM1i\n3w/jqzw5XvRQWt/WHAmSygNGg+jifO/plBIl0lmjFzXobw2mXLxmEcayV/AL\nQkoy8mGBIzsUgvGIT9AMuEtWsWUXw3PTLeh3xY+d1xAGYTh8pvxXZV++nZTP\nCUeTBwOt6Nnj+DZzPHSWAf2OniLLBa42PkQWpX/pVYc4hve/S7EHGBc3Z4ej\nWs8ZLtUiXUHTw4tywjFWPEKqEk3mrW7U4xit2/hAGLRx5LJbbpSWN4W0GVMS\nDigHGVpQku+o9lL0zkzCwuTC7hGfmG672uhjv9VpyF2Q8GYDREmVje/SiyUH\n+Y6dH6Tp6WXv6Dx3Es7MDcaIg3NHWguQU6sedde5N1tI2dC2uPRTUAoyhZS/\n7hHCCbIjp+HqgzwmNtJNE4IXw/rXKZ7c7eu89P1sdfyTSVeiTfOfOsKCLyfP\n5m0eyiAVjoZoUdjtMn+qHPJ/YI6ufvPBaCeJppirIA6xhCo0aQk0ND9jfFz1\nuATD8xnhtxb1aVkxCpaaqbX2SkR2N6n/XVtHY9TzDP/QAzXFB/5K9dK8mnIH\nvkTNXdW4bUtl1i7PZMf34Mqy6i/JptNSMQninM4sF8hGSbrd+oboFJyVujGb\nFE6vDvpIB0xjfI5AdtrEoHWkfgZUZpdMUW69sA3QIbYzKGea/aFamBoxnNs4\nOBsy\r\n=ljzS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"cc1b9da2cd7b871fe0f5c8370793e0ad9b1a5f1d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/rtl":"11.0.0-canary.98db2c5ec.0","@material/theme":"11.0.0-canary.98db2c5ec.0","@material/feature-targeting":"11.0.0-canary.98db2c5ec.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_11.0.0-canary.98db2c5ec.0_1612798449970_0.1801763572601205","host":"s3://npm-registry-packages"}},"11.0.0-canary.1f86b9f6d.0":{"name":"@material/shape","version":"11.0.0-canary.1f86b9f6d.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@11.0.0-canary.1f86b9f6d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d9303ea78fa278a038ca76a1e01407eb2d5e10cd","tarball":"https://registry.npmjs.org/@material/shape/-/shape-11.0.0-canary.1f86b9f6d.0.tgz","fileCount":14,"integrity":"sha512-eelczitraMEeEqPxA5vFeTb1Z5MyzKnnTgLcwT5oHyLI7inVY86/1DQ476YsF3WS+i5JvntfNr3aqQZNQih0Nw==","signatures":[{"sig":"MEQCIA6tyO2j7O7WGb8pXpk5O8scQAX4wKhq+zd16XtOwCKuAiASI7MB/IsqZxgLeLn1YiK02wMiym4UFGOYKCXAyxNyfA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22173,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIXIeCRA9TVsSAnZWagAAmokP/jZIXuRgKv1Azt7IcMMW\n1H20Ei3e6KoSRmqOOG7C7dWfGix1bxH8s0YQOoJaly80XOV8zlN3vJKzONci\nZbAq1lWQxZGlc3VigOWISCiwaa8aB1Sd4JrtuVQvq/toFcAhjif2G9+MSpQZ\nxQBkH1usehwm85C21eXzM4IhlHX0Klcj1PGHNv+LbXW605yYEP0eJOsWMft8\nijY5CRMz/oO7/G+8gugHEoW/dAjToFmvr2YFiPEYLboJKU6afHHkBhnPnvLL\nH+G6jTph5Gko0pIHNC/dGndGjO8yIm68anFiTPcN8tazOrTW5fNUTRflNc1v\n7GR8nJWiwc666uA/1ruXJPNl3j6dPFkDFBieSjW/qutn9akVLYHloEem/dUG\nJQdqsb1c8RYXHK6XMtVxZ7oeGpKdD1fksy4I+fwBdHFLamBNMCZl0wfHsAWf\nHmGGyJBAjxetF6iQViRdezdAXsgkaNVzFdnvuio7hcHFnkLNUlZOsGNd/cuY\nLgkf0tVTBp1NT3+n0yvBQU/p3nnGxwm9qLlct7LDnnfNcMpf6PMVpx5jgRX6\nbs6FO8zzN/JoKjN3HnFnVPzlEZ3nQf3DIc47sO4oMIJDhvLPR1oHyHYvzwL8\njvq1gZAP0ECJMj2twTF/AnodgdTk1nwyfF5yN28wcbdQgA2aaJsUx8BxJYIO\ncZf2\r\n=IPG8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"aff88a7d3786743558ecb0dabd92c225698d2b93","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/rtl":"11.0.0-canary.1f86b9f6d.0","@material/theme":"11.0.0-canary.1f86b9f6d.0","@material/feature-targeting":"11.0.0-canary.1f86b9f6d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_11.0.0-canary.1f86b9f6d.0_1612804637949_0.3253777826501607","host":"s3://npm-registry-packages"}},"11.0.0-canary.aac8f5d9a.0":{"name":"@material/shape","version":"11.0.0-canary.aac8f5d9a.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@11.0.0-canary.aac8f5d9a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"508669e96c5c6066b5f6d0e32b150f0f6c45e192","tarball":"https://registry.npmjs.org/@material/shape/-/shape-11.0.0-canary.aac8f5d9a.0.tgz","fileCount":14,"integrity":"sha512-/HALpGh8nUoPkMW4A64m0JZWcI/cP1Z2oh2FzW7TmTOsJVGuyhkj2cga6hM83MBoCMiNFzLUKIlMp7/0FCvouA==","signatures":[{"sig":"MEYCIQDz6+iE5MJ5bHiZ1DS2D4WsslhvA3ybh/fCGf3vH+ReXQIhANTS7NGMIMNLzTVPNPSSZq7HXLIoMCEzj26c+sw3hIrm","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22173,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIXwvCRA9TVsSAnZWagAALvIP/0lotUHqfND2pk+y2vmB\nrbe5s7UlUBzxAYyy1+PNAjShxZUo3HrNMPDC9lHHvfLbQ/luSiPkmrRC9BMd\nDETFEzimMvtrMDfaIt7N2Roo1Cp2P6kIOJB/a02uk+ou2Hys/gCkNS2tNWJ9\n9ENYNNBUV7RsjXcU730jVatoU7RyJhrfz5eG6PpD5kExJ652QftfZt65UXpg\nnBdUfK+hZNyurNECvgZD/90KfmzNgKFbNVrRVv2j1ZXSqIhxEli5EViNiUjf\n1DN/hyc/j640fpKkjfdFrEO2yp3ZjGmetBIGN+to8Q2rxJX+Ok72f9GKLCc8\n/di+e/D1l3Aa2iewQmcqMMVoKExDbS/TGAg3RyBg+NpT9bagBw4/lf+7px3M\n4yeUG1LPxgquUulzf0uINB1COroqy3ivGJuVHexczQ5CV6uTrWPWVJ8moJ/l\n5sDOmDOpmjguVnEN1fVpxmDvdlvujPv09aCPQxkM4bh1S/X8P+r/6NC53kxj\n3OZOReZLRL77+zEfGJKvl+fw30yJla+bjjUV/ydyQRFacIp5/A1kcE7Zzv/r\njYsV519JTAZV1EDvzxbM+QqxzqndQorcPowrCfDJFGmGCmvovG9xJg0SEeFW\nWRfIfNrOmAO1oSaxOAqoHBVoNNFtGZ48X8hFInhdjCDw/a5J5RcM+3o3xQ7n\nlpmJ\r\n=s0gn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"5accfac22392cfbc1035dcad920093851b33cc79","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/rtl":"11.0.0-canary.aac8f5d9a.0","@material/theme":"11.0.0-canary.aac8f5d9a.0","@material/feature-targeting":"11.0.0-canary.aac8f5d9a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_11.0.0-canary.aac8f5d9a.0_1612807214229_0.2692929684913532","host":"s3://npm-registry-packages"}},"11.0.0-canary.750e18fc7.0":{"name":"@material/shape","version":"11.0.0-canary.750e18fc7.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@11.0.0-canary.750e18fc7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"47ea2acb804c4d4d22c2a5a19f7bcf09695b080f","tarball":"https://registry.npmjs.org/@material/shape/-/shape-11.0.0-canary.750e18fc7.0.tgz","fileCount":14,"integrity":"sha512-OSnV9pOeVauB+Mckb0B2QvpSt2YAkA6iTjTi2RCqsHnPoIg/MuMPdMUjpdlSz6aIzgvh8RUe6l9AOAxwiFF98w==","signatures":[{"sig":"MEMCIBJVEFBLOkjIwsIUn2Tv5oGE5s1fMq3ZI+rSFoRgkrqwAh90yIhszDDrB3wJFZBiODMrc6ra3nULh8nbVJCE1Ukb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22173,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIbAACRA9TVsSAnZWagAAH50P/j78ub6xlOpy+Hls7waB\nEFqdN6sBltMqYiLjUyd2eBh+jW1M4kdlWexH6eDZ+A0uJ8tn9SjJauzIteIp\n5fiGdrlLnUfivOFJn4pLSBGXErswFTvNsJYW9+uvdaO9d+QWiX8CB6ERr6z0\nRNNwEx02YiVnMTINQ0jDcIjccg39NbcvldfDwmS8d3MuupFC0G+wdQx16h9c\nORJ1zjfqAMIp3tCt5Mn19YngGBpQmTUSrsOtWuXbBv5vGNCiXEBVxUv2255B\nL5NgmSif97jD4KFDqHAXFvKlJEi5gcrm+QLWKzjHiUa/PF739HrjUiCb1UwG\nJPWX6VXRtTVVlX3cwc/urB6H5k+BJNwNn3Em+aU47OrwS42QFYpXEiiyBJs2\nfERWQQeco+0Eht9rAsASsX+5G8Epg5r9VtvtGGIQ8lTvhhoVc+/DIEva1WxK\nub8FwpPJ8USvZi8nODvsphoAgOjE8UnHEL7TII0Bbok0S3PvgAy+H42zjbIa\nHy0D9XgDbfmakUhghE1Y0IXInhT46pzqiHEorb7aJQ9bZu/nxq7ujo/EKEjY\n9xK06QOaKu6QTnihAoJ7HeZugvAqSJixHs0s5Un0COdsDyiQ3uR6PIhvFG0H\n8jvSINX83hILtnIPzYmvljqajeH3XnJV2dqKRafPwxIu14SyWinBBvsXtZby\nxZIo\r\n=IMA9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"1bab3bfc895c50d4159c7b24b69d3ab3a7eb9e72","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/rtl":"11.0.0-canary.750e18fc7.0","@material/theme":"11.0.0-canary.750e18fc7.0","@material/feature-targeting":"11.0.0-canary.750e18fc7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_11.0.0-canary.750e18fc7.0_1612820479639_0.19344905113842037","host":"s3://npm-registry-packages"}},"11.0.0-canary.b62b1266d.0":{"name":"@material/shape","version":"11.0.0-canary.b62b1266d.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@11.0.0-canary.b62b1266d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d7d7697b668f0c4c8d950a5f8ffe1dae35ed8f39","tarball":"https://registry.npmjs.org/@material/shape/-/shape-11.0.0-canary.b62b1266d.0.tgz","fileCount":14,"integrity":"sha512-/5+Pq/R4GTPMSm2OIFFgi8gIgGdp8ByqbTHWFVj3rH7OKfHghIJFNO3Vk+AbVJibDNewbdizwwA014TMzDPouA==","signatures":[{"sig":"MEUCIHL0iqMdjdIHNY908jSpzW/BZ/qeJyMaeQY9jVpEein8AiEAkwfxlmh3hY03MR0uJG/2vEPfH1fI6M5xb+ZhDdSDqEk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22173,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIwQpCRA9TVsSAnZWagAABfkP/3RUPepNweZpCRnRU8sO\n0Uo64MEclz12w7a2I07V6sE2sk74UVMl7GVtObnIkTwHQkwgG7jtDu9uXazr\nml8oZlAvJOzQal18x+DZ5K9JtKVstswM2W7s1NGpfGMx2u5rNOrwQg1eWeWH\nQ9jPpiEcwRhAZqp/6g+yGg4thM6UEwWZUGSTnWjPPJXYjBCOMOJkqvX4Mlra\ndVKiOvgwr+hJXZNXGXRh7yxfv5EDM6ug0ODlm9BIBe9sJMFa8FdA1YyXyFUg\nQ4BkIenVTdBhie3hSavtgvWkrmaAtedfmum5nkzXJA26fkb4hdGu+02i2i0Y\nKw5s8L+TDirrKyNx+K8pr9vcKmNX1m84Uw88+lF5070QRw5Ba6OC0RTo5is3\nEZ6XuFdGIW+75ynQuBk39mQwz/yUZlyfk3MxQjbmUNulkDnzDnj1RyozK9iD\ncW5bkz3X2Fuv4ZT2uzbPqdsiiKZwl1WL00juGV5Mf7+dwwlbV6z74vJlo9ev\nenA+dioR7LsSZ82l1ZlQd7x1ZQu+QHXv62ojc2BviQfqWndL2XiyPxezz7hE\n05ZsjfOhnua+JVSiGI0N0OhXC/7WM/qq4nnMLBTks13NOht2HKTiqvSXGMRT\nQqhzc4xuRCcSC69jFoanLNa6v/bi7xH+YpNpIrfUqCWq1R72WTrnw1jN8Ciu\npORL\r\n=7oqo\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"2369de5a28b7ff8c15bb5f1b2ba96320e8a9126d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/rtl":"11.0.0-canary.b62b1266d.0","@material/theme":"11.0.0-canary.b62b1266d.0","@material/feature-targeting":"11.0.0-canary.b62b1266d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_11.0.0-canary.b62b1266d.0_1612907561033_0.25498296088168004","host":"s3://npm-registry-packages"}},"11.0.0-canary.a6b3101fb.0":{"name":"@material/shape","version":"11.0.0-canary.a6b3101fb.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@11.0.0-canary.a6b3101fb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cebcc8d6581a612630fd384ff4faa5fac25babb4","tarball":"https://registry.npmjs.org/@material/shape/-/shape-11.0.0-canary.a6b3101fb.0.tgz","fileCount":14,"integrity":"sha512-B+YDqUctI91s+V/WVWoR9IhduEtUlkq8qxyNnM5mo7yf/nlCrTKRMZFkNh5zeb/KsUBtAi71OD8zmNU439bKQA==","signatures":[{"sig":"MEYCIQC9V0ueeqSpa25tjbwIZ9/T2Lxa+Q+wYD5JCYyz+IjTqAIhAPk+WsnSO55XLP+9ECQrdrSvb++Z3EizIeTdHUC/idrC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22173,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJbrhCRA9TVsSAnZWagAAuAYP/3VkzcbCzkeFoYQlFYbR\nnLypuKi7PzGKNHlDUWgajw22HeTXzD+10Has0Sb5v1GDCNPpoGcPq4t/f5Ou\nFURNjeuy5luBiHuFF0VKPE23rnky37lTlgKymqFQKCSL1ihTu+/0qaqJgOLI\n7uUc5GFWRk5oxBD61609mPeK+NdpxPpOjeiIvw6+HlDK3tXJPgZlcIsXHE7V\nRWKSABu1Ro+FyIndekY8CfU5ok0Opq1xBlfB/2iu0hw38Efjf9eL4GENyqrt\nfLnURFx8P5Ox9mQ4UlV+f3XQZYOP9vqZ27kxxcLu/P8dtg/NVlNMXwRcocNX\nWMbPgd6VQZhRRG2UTsFK0zCXatOju84x6sD6Bru4VrVVPhP66wGYDjxzCaUZ\neHEuiR3iTn7seaya/4+Kw97OTSX33CLeuuageh1tUIo5tTbs0K7GHVY9Yd3Z\nUJqgjR/ZhK7Izr/jFt7+B6fEe+0Qtu1Zx6+/5QwdPwzbZEPA8X5FjCPKfMpS\nKkjmnJj29ta3oPOqDWNWgQdgi7x6p7Zzy20hYMuT7KUjrZDWUgFYf4jB+cjo\nKqfJWuzkftuMHOL1i3lDhUle0wVuVSyjbzLTYYNhoYFRqNjIt9qg8o//4eJN\nMKby8PfvfJXBYQcgyWcXEISgmAEVmYhO8A1seMi1C+a/s3IjEuLm53QRHwCC\n1Lqq\r\n=HDz3\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"4e94d35f86983ae07d81d1c7893ffdfca50c2afd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/rtl":"11.0.0-canary.a6b3101fb.0","@material/theme":"11.0.0-canary.a6b3101fb.0","@material/feature-targeting":"11.0.0-canary.a6b3101fb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_11.0.0-canary.a6b3101fb.0_1613085409302_0.4340239808405095","host":"s3://npm-registry-packages"}},"11.0.0-canary.ed88df700.0":{"name":"@material/shape","version":"11.0.0-canary.ed88df700.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@11.0.0-canary.ed88df700.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"046863e4bc304eb96e9febc970fb8df7996693e7","tarball":"https://registry.npmjs.org/@material/shape/-/shape-11.0.0-canary.ed88df700.0.tgz","fileCount":14,"integrity":"sha512-p4XQ3mq0Ng+w89hAb+rv1sF61/zO5mi2yfCZ2iFJEOPWi0lhHrVCQKti9faCCGuu9ly1bM7+IUv/rS4xTamL2g==","signatures":[{"sig":"MEUCIFyyONE/RUMAhQjhCagQVHE9wG1uNIbZs7nrYbtUsZVaAiEAs3gNLwhuaIdPuUw6EYfiK2kOPIu4dz9o75yZsryio0I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22173,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJcaeCRA9TVsSAnZWagAAy+cP/jPCte8w8DNBUEnw/4Pc\nIuOUv4drKjxVDIawPR3KqSiwRT7XoEAuRzYajSphUo4DfYgav6dBUACROo9s\nPh3XJpPCRr24zfc4RXnvf+nKhv6sH4z3mmSMCXNcM96oeo2akWiJrr3kMHjA\nmygRhLIwXyGsuFEusxonjF2TUTh7dci1iCceQIpKkYalzclRUnx8cyq4gpU9\nXAD/oikF7IMc7Lv6DbU2SBN1yoTJOGlIueV6hkYc1AwIj7eEkmKWC0JWhUkF\nOl+3jZKTOCOvS4CP24uEv4cuWjomLGyuV/X5CCM99QrOuceAbyNgrctsiNUv\nuFBx1r6CoXScyE3bbvn2cgtdgH/+mQlF7MOlOTbK1nkwrh/T7MYYdnn5CM8y\nrWoBAX9FsDNKNgrlYJL0O/NPpJF9W/iCJ4ZhmNR4qk3IBWAoj7qGeXIIYJqm\n/0ZkyKyKT0S42NX4I8EV9vVIt+XNLOHNE7eAXRJTDYjxzeWcgaF3vmMxD7P4\nWgVq41kjxkH9c3tr2zZzrMNtr3CxDFkxqvUoXwOU8Ryqe1bIFZJif29RuRO1\n01LC3hHsKzz/5oU9mNZB9DOnavxhzSrxcjsK9fiUu6LE9McVc3tTtV0Sht8M\nhj6eoV9MfCiRYtbyQYrOaHOhz6msZ0fXjPA4TcyGUKLav4+l2OBzolBciQwL\naCGi\r\n=33De\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"9ee8b051c4fdfde9d63ea193e791d71e20094867","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/rtl":"11.0.0-canary.ed88df700.0","@material/theme":"11.0.0-canary.ed88df700.0","@material/feature-targeting":"11.0.0-canary.ed88df700.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_11.0.0-canary.ed88df700.0_1613088414230_0.7655089537642297","host":"s3://npm-registry-packages"}},"11.0.0-canary.d30efe6b4.0":{"name":"@material/shape","version":"11.0.0-canary.d30efe6b4.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@11.0.0-canary.d30efe6b4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e97bddfa8c327e25ff7a54139d73eafd9368666f","tarball":"https://registry.npmjs.org/@material/shape/-/shape-11.0.0-canary.d30efe6b4.0.tgz","fileCount":14,"integrity":"sha512-KjCytxhAkfDN1KtVXOJPWbuH/X+4AJKg/pBSFMFBiUhHljJY7i5x2BWJ9MlGxPP/UG6x8OtgAZ4KqRQMa8Jc5g==","signatures":[{"sig":"MEUCIDesZIfPj8IaHQxEbDatKvc9WhpsTSD9wIkSLf3Wc1tfAiEAhmIG/Jsf/WyMuoWF/KxpM2DdFPFTjZvTkcDK3yfpYmk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22173,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJer0CRA9TVsSAnZWagAA6B0QAI4PTCVFb5+enY+Ux2XH\nWpjmkzZleWpsNzc5Z4WWAQGiaZa6eHgBXi0IhmCgBSJPbOGKhA7SEv29Fqid\nhbwmLPpy0PNfBAUv9tzNZURdb7zoSH8+kHhz1V41wV6gHPLtxiE2rgFIyMhO\nPYycmpnMtM6US6F/Pxq0U0OzQcuTR56HG3Fm36b5iOPHsgnnAkHrU15GQkhv\nuJZTjRbFySlcDwi0cFhhs8zO0frNqEkL18afTUCq8A2/6z3TIbNFZNzjoHuX\n5uRmpcHH05vbkrDyfHdLwtT1JNxxc57Lda+NdBuJR/A5a+GMRkExWnXS1wR+\nWgaBS0yNYV4rRjObLLRyHN1CwFjMWGbHXRjdS5yYAzY+o0NJbZiPfX/JaJt+\n4W2Dq/dHP2Sh4Ya06CmQ6QQxIQVLfYKfIq0pIvJLWu9mXa0x6h+enwlI8QLm\nMDT+YVGEGnwqCAmF1hYTkdO6+fGAr96IWCK4fYs9oJUyEgP4v0291XTJleJP\nhB+sOYF9TiC7817olGNoP4EQrHsU4MImvLyLYeGUPq+9yT1eyVxGBha8ITM0\nVQ6+e+oebLrh8MACFPd8CtKKyDEfv3V6hTJ5fel27AnBNs4ZvhuKDYC33xVy\nQXELvpzWOwxNdOeyPKMmVTpVBQUb5rXPjiE+kTJvX9ylGET0gx85CRh1NaGH\n7hzW\r\n=ltb5\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"0d2a46d4ab9ca5088511e4e0b5cf2b261e3e644f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/rtl":"11.0.0-canary.d30efe6b4.0","@material/theme":"11.0.0-canary.d30efe6b4.0","@material/feature-targeting":"11.0.0-canary.d30efe6b4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_11.0.0-canary.d30efe6b4.0_1613097716266_0.16526887476995022","host":"s3://npm-registry-packages"}},"11.0.0-canary.0393bdc4b.0":{"name":"@material/shape","version":"11.0.0-canary.0393bdc4b.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@11.0.0-canary.0393bdc4b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"914e06fb93cca9f78de1d74fdf907a67bca3c003","tarball":"https://registry.npmjs.org/@material/shape/-/shape-11.0.0-canary.0393bdc4b.0.tgz","fileCount":14,"integrity":"sha512-K8icxv9mWFl33rNar98X88HgoMLuhYTu4Z3SJeEHwTGyMbkzAb/Ek8j4NXxgMHo3YkTRkCGTlhUsrNDbeRJzzQ==","signatures":[{"sig":"MEQCICRcaqhDn3BvqQsbMU0kQp1HA5bh1xkJ2kSnXgYPPy/CAiAX5eiWaW+vhDi9R7LeGAtOX/kunPMCsH5fl00V1PHCig==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22173,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJgSCCRA9TVsSAnZWagAAxq0P/3Zn1hr8fbqGp+CFsNme\nrggXisnzgqQjCf7b26bo7OP/u5iqnF0/SNNMxEWFF+yoLsiLSnWjsZLWDq/a\nDeZxE55ze6tq9q97hdYhiRjTDUVWbuHGhPU4mDRxfdP8SK6MnNo4FDOS+Gd4\nVCW+pEYUGfXjShlKGRzaLSHFOtsWJ2j4bye7TA713WxP5hqXnog+9tsWjXeC\nlAmVcp/WfVPm9mS3zAzgIiAoigmpo83hKCCE6HmLFHZWFNuRAmA4cGaQYDUY\nUxpqsgeD+lbhkN03X/O07xJr2ZKiwvElLoO4PrWDYh1ooVmqh+cdpss3GDyX\nhOzq5cOXoJEHf4AvOLU3SnH4CGIj/Q00UFyCIJltfyyrC5Xx9n93XjnfHcw2\nSx1qgtM4EOJac4AnO6za0CGJ3+Kmz00zsFBogaYi5tBi4NhVTf4RqQhGggw2\n2KJwufoYzFrZLws9zIF5xcMBmljsOs5c9uLFKCvaQGh1aFE/nbvTANe+ZBTe\noyWc2BgMpKTRjfKs2r/Q1s7JHc8cUOvKT4oU4w4cFDeW+6ydTGq37W9IIiac\nsZm0CPTS63osTNdrya4HwQsTVxbEkmUKJT0Ch/f3vswAvIupAseK6juNB717\nSFnqiFP0ER+9THCLa62wfZcungYfIt6+OYc46j19Djy2fWx3TBNmlWyUPtm4\nBRFs\r\n=GBmm\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"8f241a2f549ae5b1fefdbb0c93ddadbc1e1705a6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/rtl":"11.0.0-canary.0393bdc4b.0","@material/theme":"11.0.0-canary.0393bdc4b.0","@material/feature-targeting":"11.0.0-canary.0393bdc4b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_11.0.0-canary.0393bdc4b.0_1613104257701_0.4898341569052054","host":"s3://npm-registry-packages"}},"11.0.0-canary.7cd26af4d.0":{"name":"@material/shape","version":"11.0.0-canary.7cd26af4d.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@11.0.0-canary.7cd26af4d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"851fa5757e6f033340fb7bb58e38aa1208ec3979","tarball":"https://registry.npmjs.org/@material/shape/-/shape-11.0.0-canary.7cd26af4d.0.tgz","fileCount":14,"integrity":"sha512-bCiscNHkue0XjN7mg1oO2dINL7zGM6YTuDn6ArqnirV6b3dlh2dDcm4VqQa5sDzWeovALlClOaqScdKMFkXcOg==","signatures":[{"sig":"MEUCIQC6b4KKHKcdd0Pga/l7GDFWG41eiNUYGM4R70RFKVl+vAIgNWzuSNCl2Mlm5WEQVmsypAMOp5BAbYj71SdiYDcB/Ro=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22173,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJqXdCRA9TVsSAnZWagAAA7UQAJ4SIXxBr7B14zcYrNOe\neNyX4kikwFoE3I9f67v40n3I8YXuwoc8qvv6UBETHkwGJPzsC1TGDx6v0ffs\nwgk71VZQQ0xBNgBjWZDGV3WykcNt9AM1lvidQoVnvxiEfLKRXAlZiqEj4pr+\nRuAPwytt1FUckhm3MFfFVhvUjpcOymi2G2n5A6idr+hGnJCg4IucsJ5QwAac\nczj2Hg8TeJ7YCeVZLuO+2TP9YU7Jj5k50Kw+HUzDWGJY05gnqKTvQZXqpQCG\ny48r9Y0KWJaBwS54rRVQfPTQQFRFtAFTNhTON9FKfe+qSghgXWc8iRktS2WC\nYVdrNXekbOWKAJ091Pu4Y9ADk0L8s0MwEFxotXlbA8mQsYusQxMeYPCD41vC\noPK8TxHKSyb1fOvbjjl47g457/Myras8unwPXo4A+0jpw5b6vFG1bXlDR/hk\nj9vXk11Es1+9w31nUMqsnZ3IO4wYGSFxCr7HRK15t56dQV5Hi85bp4NtNvil\n+VAzYTPjCARZme2Wyg5J+AOw/8/O8dH1ubDgLr2kKyLnq0c3S8pkMzdEubwr\n+OLvHFinLEtymnhv1T2MZsFOzDtVJhCTL7nB0OG2T8ca+aGntVsVD8v+LH+Z\ndbf2Ao1CjP+YjPJ6olB9QYZSjjvWTz97Fc12NS7pR6MeI0la2AT/PDtogW6F\nX9yD\r\n=ajgU\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"da78e237011a9e38abc623fed26601ad22a7426d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/rtl":"11.0.0-canary.7cd26af4d.0","@material/theme":"11.0.0-canary.7cd26af4d.0","@material/feature-targeting":"11.0.0-canary.7cd26af4d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_11.0.0-canary.7cd26af4d.0_1613145564588_0.037550610011578556","host":"s3://npm-registry-packages"}},"11.0.0-canary.71fe9a067.0":{"name":"@material/shape","version":"11.0.0-canary.71fe9a067.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@11.0.0-canary.71fe9a067.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d0dfd9fa7ea59050734b790348b88e92b248e343","tarball":"https://registry.npmjs.org/@material/shape/-/shape-11.0.0-canary.71fe9a067.0.tgz","fileCount":14,"integrity":"sha512-pNZ/dwDdNBXZ833MO84kTYsMdPpwlIMV+yylBlhQfV6JEuuHOKG0AbfPkIbzpjinaBYL7qDmbv47mb3V8aphTw==","signatures":[{"sig":"MEYCIQDbK7TmLetKhrWMljnf3k3pDgA6X7E3f9silVh2UN9MtQIhAJlBnGYQ8/GOCURzeZr/EKeuYnd2JFwXLfFu7/p5u9nu","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22173,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJq0uCRA9TVsSAnZWagAAnQUQAIKXKrTEQx4yCoympXNS\nY6MhlX40gXg/iF41UTfTr8yS1him/Etlq4ygoOcna992+sZZO6g//sscmn0u\naHyX3CkBpoIUoORo8g2NenTtFzomIDkvLGENbxXAs+hhVRdtnFigm14LRbGw\n3Df+FA73sGcoHpzaMIqG8P8vwSsK8Q1ezcuY2Jb+tA9Uy24INNmg1og8HhZ4\nD+l3D97xewu3P+xe+ymL1cZdhU0dsDx/TyHuq1yWW9sBqmd7GNwTPAHSM+9C\nf6VWMIC/6q6oEKlmpXNFqQBLAes5DiwzVNBTVX49grzkzSL8mT0aQ1+8eXpt\nqER7GJiknp4AKSp0nsom1zRXUVup/VOHxSByDadB8USskvxPB9hCMke4fYaU\n1is1ptXMDp4cGEJqBa2ZNid9LeQsKXtxpukqmWCa/eUqo2X+5VCTcAROdqEe\nsy2a7mO4RRq8CGkjjjtJOHx/Me49nODCBfa8wlZ2KNmwyIerlYjvWBEWT6+8\nFZchfPipEorbsj1mwyRuUKWNVP6wADG6/wD+AEaw8frUklnx91BEFzdstjqx\nZFoooPsFvorFP0QRBYF4T069pV0FyvryrijuW9lBtwnyBSyfQSdYzHlQRZQN\n/IXmXrrAE66hpp8pyAaCsEYSNzM6QFpNeMBc+2k6puWqQTJs43M0aGFV3KAX\nfcqN\r\n=Qi4I\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"c79890da6d0bcf08c3d7c57e31df805b50394019","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/rtl":"11.0.0-canary.71fe9a067.0","@material/theme":"11.0.0-canary.71fe9a067.0","@material/feature-targeting":"11.0.0-canary.71fe9a067.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_11.0.0-canary.71fe9a067.0_1613147437889_0.838651982978373","host":"s3://npm-registry-packages"}},"11.0.0-canary.0fd56a86b.0":{"name":"@material/shape","version":"11.0.0-canary.0fd56a86b.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@11.0.0-canary.0fd56a86b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"321dcdfa38c021481417f2fb3cf5b81b16de2137","tarball":"https://registry.npmjs.org/@material/shape/-/shape-11.0.0-canary.0fd56a86b.0.tgz","fileCount":14,"integrity":"sha512-Um3/IoHsyK0yhrBDRiGhuDu10RQethhslNnT+dcgQ1964I9n/pAjxCx1nAEr+CXc0E6XEs02wzGM08KqWBHeew==","signatures":[{"sig":"MEUCIF4UxL4oBkHrGatjidbIbsyfnr60knktH+RyeudSWsBIAiEAvwQNG56tR36y1HA/A3IdCOWl2D4trHIYncjEMsvPycU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22173,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJxkzCRA9TVsSAnZWagAA/RIP/1+xS4upaP/U5uYQf0Ww\nA5GM96o2eHCo8A9nnKmuBHmGCMhhXU4/ayknt3d8cwoxsLXaLpTdN8pmdUih\ndGQ5oOP776je3rPhPwBB8gvwE2q0CBRb9932djlWFfAq0ElwZ7nE0T+zQnOw\nujeuCJ2ZjlSID55AbXK8GT2wvPj2ZE5mq736MjgZdLL/Q3cFVMGZ8xHVz3+K\nAP3AmHvVIMFXkreeJA9l1DpfjPihsIExgNKywUi7VYAv5fH9w/aRj3jR1csi\nyv6nusy0iIVG1Fi6gcMBVa9BXpFXMd+UXqQaJ8VyDJ3pzpdiDJ/EVmUmFqmD\nmuoK31eKXBiJYG4xwr7KUmyzwxZ732j9RS4vK/GUryueaJryijFD40MS7rwv\n7Um9gwOKvlDt55ej6FkXUnqPM/z9xfAeyFPWyt9dhVhScWBMwh62KUWdlaln\nxbKLBK5xXZh3RE3pSmZIQGXiqSn19vybrDK7JxeoZ06BracVsWv5t7k+3PqE\n6sJUqyXebA8huC53Tbloc5Ihx9WO8/PBD15LKXPntWIfVXfNnmZIbLo3yu8S\nMk3Pish65Unsi8Mi0s8u6p44By6MtJhgRMWHOHh0dXNVdn66Db4vRn5dcd6v\n1VCX9njUF5ozdcO5BVwhhUkButBd85H3Pzm3e+jf+qnXXfP4VI+xSy74SeG1\niDT9\r\n=ZwwW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"b5d7e78bfa318c864343a15754f4c5ab98160ff6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/rtl":"11.0.0-canary.0fd56a86b.0","@material/theme":"11.0.0-canary.0fd56a86b.0","@material/feature-targeting":"11.0.0-canary.0fd56a86b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_11.0.0-canary.0fd56a86b.0_1613175090283_0.1375500217509935","host":"s3://npm-registry-packages"}},"11.0.0-canary.f19bbc4af.0":{"name":"@material/shape","version":"11.0.0-canary.f19bbc4af.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@11.0.0-canary.f19bbc4af.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"45bbab2a83d033749f624536115dba2055325dc7","tarball":"https://registry.npmjs.org/@material/shape/-/shape-11.0.0-canary.f19bbc4af.0.tgz","fileCount":14,"integrity":"sha512-MjGxr8ofYkT43K7N+Z1v5SNkUxr0mHoEivo3S3VnhM2iccjNdRtJuUPLq/6uV4msMJmXFrfVUXb42sYkyJItCg==","signatures":[{"sig":"MEYCIQCPC3h0JIvufbZWDXwCSQ6hU+sYFyA/sd4+h5W1IhZscQIhAKpPPepebOd2cR8vM59agAo8jnsgDxP8jAyz6lyE0c47","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22173,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLEQtCRA9TVsSAnZWagAAfGAP/3CpwQwIjRU2KMiICU4v\nAcAPlb0LDNtXeC9Od0xbb0DzOazE/T4XWFPJpmF3kqLU8sFaSgqxZ0TykTMR\nnbSs04Q5DkkHcyudA5rdp/kl0A2WIUDo7wlP6m+rtUVSHomN4zrEfJLAXPYB\ntit6rZQc02shXO3VZXa2aYfgSWCkO9lCNVNni9T8wcqKVeX3bmGskA9IeC6y\nSOA5HEr9fPDY07bje+GuISqRl/QLHfwYRY5qSnOzlN8SOnqegwm8bQpigW/0\nTR3lywK2qAALGusfqPjlQBt/BUy8bzAXbwYUIMeqYb8TN8rYQhuLaW9hSGaN\n9yhfJZp01bkhENdUPT4sZJeAKgyLXCZ/O5/Te+ijG3dASDJO5uRdYyf/EFdM\nuAuy5ZSGaJkDVNXmBY2ZQOgl+lPxbtpFEYK+YN6MYDBKgkbX7yShtLQUoq4L\nh9/2X8TBupnNDQRX0ovRCVoi4TobLa6BRkWoURSfeFdhDdKFmDWIRVCAQ/W6\nvNS0OzuRRORtgqDIN1PxljAFtAn3nw90mo+jr78j86B7gS6wmoInMZ3FTPOt\ne+Fjv0bRSicljE4E2GEjW2gVCLy6HTOu6nIWOwmGpMljJ4hGRn036Gf2MYnQ\nKeOJ2A4ZO0JfqUVaVRhuU1uatTL8f3XJ5Dz9lMRsNy8oh9sqP4FVJHYPPzLG\npLwf\r\n=Hxn0\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"842729c260f5a3be9fec8618b41657a90e725af0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/rtl":"11.0.0-canary.f19bbc4af.0","@material/theme":"11.0.0-canary.f19bbc4af.0","@material/feature-targeting":"11.0.0-canary.f19bbc4af.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_11.0.0-canary.f19bbc4af.0_1613513773466_0.33014886687793576","host":"s3://npm-registry-packages"}},"11.0.0-canary.f9cac96cc.0":{"name":"@material/shape","version":"11.0.0-canary.f9cac96cc.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@11.0.0-canary.f9cac96cc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1f8c5801b1d81f9172ab9ed98089b86a2dd6ba91","tarball":"https://registry.npmjs.org/@material/shape/-/shape-11.0.0-canary.f9cac96cc.0.tgz","fileCount":14,"integrity":"sha512-kyE9pNfgW2VPsw7iE9ZYzba5pa6dLnZGOCHi9w5ANCjXOA7fqCNViAPtIAkR6Sy4FatbjKFZ7MEtALMTx91cBA==","signatures":[{"sig":"MEYCIQDvXOsdy5wHqWpMRLilr+PpYYnnb6g/wZEAfMDEjeIBVwIhALXbGhc0ZXl+/5CQlxhN5J6Yrz1aXuylbiGVwyLR1Ldh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22173,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLT/PCRA9TVsSAnZWagAAJs0P/1BolpE3dsumEvRGRRVU\nlJsSK43obefVpQQhOmv+Mkw6sbTStwuw0+IsjYUGu3jUdFeo/a5ma6OXa81u\nkFUWVPbVy90AQp6rvq3YmzpnBuGZSg484Y7IsmL651upQXSG1tFkm/UgC4ct\ng5TWovoZrzDkDSpUSN/dIDFOPZKDcVZsFOimZE+1iCEuPXuhNDnxpifQh22M\nLvSVz+8hnjOAoOmbhM3ZbpU8whL+j0oT7mJuv+Uvevtd9PAvSuzrpD5C6aXb\n1bxDLYdnChFzWAjyHcT1VAbHI7r9D2nqpiR8L3F1wa/iL8iqex6w3M8cBb7r\nCggqkbUuLwtKAe6Lx0seldImii4hq6FlwFokHYTdgTiidLApaZ7uwk3eDfnv\nV1VsNqTAeS3saY/65jQlDWO4qrV+r6MHXBLQNiLOwFmXzzb+WR2YUcAeGfQc\nqKO13Wi9sB1SeE550ZQZJUQFBscDmhj37MFnbxZc1Xn6YqZs9GssVEe7xCHn\nfMFdtHxWCFxWSxtND9yGr6xPyv9wFQRT4anUXok/tRPNyKXsEgBdJsT+ADyM\ny67dMgBnHSHKeBemXGgz2AXKsodcPAPRlvP14hCJYJeM4w4byDM8X53IqyUT\nUQGB8YyfN+nTd97iBCFCCs+IvLz6bgCvY2M9bweKnR1JuuOHvFNlbv4JJrxk\nq9wE\r\n=n87Q\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"993e327235c8cd36a8c15095389eb149ada97cee","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/rtl":"11.0.0-canary.f9cac96cc.0","@material/theme":"11.0.0-canary.f9cac96cc.0","@material/feature-targeting":"11.0.0-canary.f9cac96cc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_11.0.0-canary.f9cac96cc.0_1613578190891_0.41611660938348627","host":"s3://npm-registry-packages"}},"11.0.0-canary.79ce0878b.0":{"name":"@material/shape","version":"11.0.0-canary.79ce0878b.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@11.0.0-canary.79ce0878b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cbf6d1fceba1ea9636646bd098ebf7c581789c35","tarball":"https://registry.npmjs.org/@material/shape/-/shape-11.0.0-canary.79ce0878b.0.tgz","fileCount":14,"integrity":"sha512-KnLWOKo59J9yYNEEYsKifWsBhPGNtFV2KGAfrWFskTieQoT6pQ/Qpp5Gk+/FS4JCpDrzk+yKhfqkbzG5escD1Q==","signatures":[{"sig":"MEUCIQC5V9oPI4hOpSe5MduMkVVIVsnNU6nWpp+foSXxfNA+cQIgMWkZS2yk4mZIYe0/KpUl+kKlldOI0UGz9UnSsNYgCTY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22173,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLW2UCRA9TVsSAnZWagAA3u4QAIQimFLmPsKMidm2zbQZ\n6udQMSVyTmVOucbU246uX/qoG5ZkVwkJvrJflla4ppvuvmYZdwMi345RLw/J\nTqzfJVNVdt/hod2yMvEHkXU//6GYrCdcfz5bMEoDTI/uAIlxxUy2/yEGkwFy\nXoHJJSPNJlYjLQyvB/kW5tLWt4guizVGcAB6GV3l0g39eOmVh96rLSnD6muh\n6+N2nRo8hulSByReme3Psedb+A4Kh1jADWJjOAOHnvdqswxH0efEdndekZq4\nQmGMQw150+ZKAooHXtDPq6kprVCiKAjSu5ys6lLPNdpoiLjFjiER505A/mfT\nEDKhea42gBcwtdqDFrlwy23ZDHOZ8FDzhu/kJhSH6GvPxZ50xN+Cry7sHkk/\nRLngPnpGmYQdJnLdghA7J8f7ziKBT25pp3OLJ9TKAtchMeEAEbbqUiS8N7aO\n6L820VJmr/3/Ad+go7Qx3Phj91dqexg0gGDWzHLW+TdEz770WZVyGsDsPbdF\njlOpzIF/6wcKZ+7/b/EavFlLRgMz1NUcq1pX3DPFNVqnx0oUhqcP+cRblJSL\ntD4rrzqwrITLY0RErsIylpJlJ3g2/tWXTk2iVr0rNfBHBHO6xoEihMeAKuXv\nA1qDmwk3zjXO8lWYc4xwnFXh1U0q0eSjs9OPKfxM6ubpWbulYlRKhrTgdF3g\nzm/e\r\n=H0vw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"3941c218ed650b1d1767cd6b17652d4e1b5f7ac9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/rtl":"11.0.0-canary.79ce0878b.0","@material/theme":"11.0.0-canary.79ce0878b.0","@material/feature-targeting":"11.0.0-canary.79ce0878b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_11.0.0-canary.79ce0878b.0_1613589908477_0.571777304802495","host":"s3://npm-registry-packages"}},"11.0.0-canary.d6e507b5b.0":{"name":"@material/shape","version":"11.0.0-canary.d6e507b5b.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@11.0.0-canary.d6e507b5b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d46cf8d5205d8ad643d760d5c1296b2a6490595d","tarball":"https://registry.npmjs.org/@material/shape/-/shape-11.0.0-canary.d6e507b5b.0.tgz","fileCount":14,"integrity":"sha512-0n6Yi6CJyocyoxSiNdgjFZJSGbrd5rFQ3yNQ3UGHhobJU8K1ULqe6eq39nwwn1ee0jFzFgtM28WEwIdzLpMBRw==","signatures":[{"sig":"MEUCIQDLNxd9mEB5TTzrW3tVXYp801jn0n1m4CdJPdCuc/hHFwIgP5UeqLXh0p2f8Bvtk3NG53pHcYqe3MnVRsH6mBmUUd4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22173,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLXVFCRA9TVsSAnZWagAAC8YP/jsP7QGiiQLG5wx9OCe0\nKJvkDSxlE3mYE5DODohocdQN6t7FCesHX6kwFXRd8ItDGiGFY536AE2ac8T7\ntHDBh80rXYv7lVcQ6HJb5Fb2c3ZqLn/Yf6ZC63oz/JDNEoN6Hryy1FcTBtnv\nUqkut2n3YmTXAM5A4a7Lra//luoau5zRjMTqaT+XQ88An1nQ/6dz0Kk3TZ8B\n3huO1ZJobm7etAaClBUE2/F5dg4coKysnvNmO+D88jTy9PPyoquDWJHRdqzo\nNa+Kwan1bOVY4mOdQGcey/DO/+NEfpr+pYYHEL+A1/PC+r73zsYdRax/EbBD\nGs5eiIEIwNvCWsbv93I2JIStPX3VOhPXSItwNbyJd8ks5VTmccQh9FzVqQYQ\nObIXwkbAVAOrd6RRU6WKGThQk35nZjLX7OaT1Dr2g+rqDE/zTESbecWcTZt6\nCjdJosRmsWHU3/4xJxYqE/CGRLutQgcTKkHyxiHVxas25UFS0KnS0hsYK1MO\nDX1A0ETwE+F5sXJPzvGS6b6gWtLz2BROF01mU/VaNk8ZcFoIJDS4BBSSKLSO\nXGsU3VRp50mVtkpDdCgBg2VNTEplu/McoSpUWqembDzCYAtDSQSSnkykm8YL\n1nFix3rhhrJ0n5V7I4v8bo+SE0Rj9RoxaXOEmCe6JfxrVgm0U1hNauJtp5d3\n3s8w\r\n=NqRN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"b20b73a4aa16995dcd0b73e46e4dc31f7914a367","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/rtl":"11.0.0-canary.d6e507b5b.0","@material/theme":"11.0.0-canary.d6e507b5b.0","@material/feature-targeting":"11.0.0-canary.d6e507b5b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_11.0.0-canary.d6e507b5b.0_1613591877446_0.967960887645626","host":"s3://npm-registry-packages"}},"11.0.0-canary.f2658381b.0":{"name":"@material/shape","version":"11.0.0-canary.f2658381b.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@11.0.0-canary.f2658381b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"66956107ee2189f64b49c841c5b464328609fa6c","tarball":"https://registry.npmjs.org/@material/shape/-/shape-11.0.0-canary.f2658381b.0.tgz","fileCount":14,"integrity":"sha512-htc5tuZXSB1NGSNGGizYZkxNFsQJvjNepVkwKmjClq/lUiQSlETsUd6xkc6Fqk59h9jFPoz0Q1SFdVjpbHYymQ==","signatures":[{"sig":"MEUCIBRph9B3UYPRLUHJ38MNwzqicSn0cTkaCrD1gXJ51/OpAiEA23yZDlzhkKDE1LZeoKPVc+7hQAB1pqMafXS1nR96/IY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22173,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLZxfCRA9TVsSAnZWagAAjZoP/AxgS2MrD+z22wiIiqRj\nu9n0OhiaVEJcWAiGQZkErRH4oOrloFiDzhv9lmXa55eyC7eHhIrv9iTl7YPh\ntH0QvB4J2nTyNwuRoj2lLwUsv+iXztGHNJxAjpRdDmyNtIfMoFVT9eGfPVOh\ncLpns4kNhpjfbeqdEliVBpRzEGNalnkdkc3NcPpIysQCFO+Fah+B63Pg9/he\nkjEJdmxDtCYdZrkIhbk9SgSx65lONyQ2pnKsi/Sk/74zAnd1hJNASOR0g8lN\n7fTzTS1NG2TvUmdCWzkeLriy+B/uC4HWKrcmgS1dmZ9Wo8mDaBYOEKcMmwqO\n55TB59cRFIzbNJsn28lF3dLy478OMQ3GSz3bFCbFEruHEHRHp01uCeDuM3zr\ndYqhrO/pdTiwkRmVbAC+xip8XxU550iukldOVxgL9PahVMq1SbjZe6/2dXRF\nFOjvuZ13Buuz3fzhni/RDZWiNWT4OtEAoA3tP2bdwvf83upY06H8QrXEtp6N\n68F6+lxpdpz8zeH05JV7FcCk1gUw5Lx/K4GQZ0IZ9AMVB6lyMeqZuBbfEEKa\nuc31I+T3GKKEBYs+yWuop13wxdHehpuMFDil9Krrsgpr3sIGsjuQ4mxYJzH1\nlV8IMvyXV/XD3JQNHmW09qj+hNVxaE3GZfmk/C8hrrjggoNpS/TAjgztS5yK\npTu+\r\n=G2Vk\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"bb1b60f60cf9b1a4184aa52e590bcb4003d3c09b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/rtl":"11.0.0-canary.f2658381b.0","@material/theme":"11.0.0-canary.f2658381b.0","@material/feature-targeting":"11.0.0-canary.f2658381b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_11.0.0-canary.f2658381b.0_1613601886807_0.8989182991281432","host":"s3://npm-registry-packages"}},"11.0.0-canary.97c4d4035.0":{"name":"@material/shape","version":"11.0.0-canary.97c4d4035.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@11.0.0-canary.97c4d4035.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"59abe8136fd54eede142b6dff5f49e6e3493dbd3","tarball":"https://registry.npmjs.org/@material/shape/-/shape-11.0.0-canary.97c4d4035.0.tgz","fileCount":14,"integrity":"sha512-WXhiJUpqjkmIzm98/CeN7bBavRro0c4234BaiZdfAl93hBR8JtSjRZf1p+GnCZYBbzfPD4HSCHB9zfMAdUsqHA==","signatures":[{"sig":"MEUCIGqVxkHtZYyXkoWbqfgkNPTzNwGsRtOp8/kbQdoIxs6CAiEA5j7gyIdMRCQmsS4xne+zd8CfYKERsPYHNP1xCPfBuSU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22173,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLdJMCRA9TVsSAnZWagAALCUQAIqM/99pd7PmeIAipKPr\nHzlT6uBQR6FPrKFmJf5Uq5rTYtSEHU8SAfkWNouR7jwau4qsPBy0SE268gNp\nCcf6ixM/cEK2DcgBPiZc2vNQKXpZL5lUegTlmGCxQ+iszu3YSiMtWQSnWvZG\ngdag97W0wyLQ54Y4YptokFjK6BZqwuGK4S3x0pTE6UNwJ7qghzyCcxVyts6X\nKPZSc+BMNiQMtby1C5gfm0jHZqiOLq7h5eSeDJ35LvB4rfWiS13NGmI9i8JC\ntj3Ke22Y0sHZZT+CvwZx6mibeYEBfYu35KszsiHwNXf6KSeCvp591fst6t8e\nvL9K+lfjMc0DdexlaJexb9mWKnt5cQXp2Rb/FZ4hijaymLyFoHA6kPN+76hC\nC/MmBlEeyOMGVVFcHiFNpIalj7CCzI8WMdalenbSkVkVnFn9dMOTGWvNFAno\nwGzmk7cUnxopin11Pd74H5kpCRrlCQG5S/U6FlIt3xJtSEsfzh4hV7zn7w58\nkvh2eLxHUn9Cbzfzu6zNZQWCm+db3T1oZVX0OpoxPYiIh6g8c5+FVYvUK3S4\nKE6edOhr0R9VslNkBOGxKYI8JqhIHvITcSm+qnv2TyEeurjtaYFXFE8t20Hj\nQuvxhr41EqzWXutN31OxSp+XPzVYxG9PzTcUyDW0oGJF3rD4AANjNiCb/XGX\nXntl\r\n=fD1U\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"1d9a223ae17277dc00b76dbbc4263232d38e50c9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/rtl":"11.0.0-canary.97c4d4035.0","@material/theme":"11.0.0-canary.97c4d4035.0","@material/feature-targeting":"11.0.0-canary.97c4d4035.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_11.0.0-canary.97c4d4035.0_1613615692001_0.617883160988236","host":"s3://npm-registry-packages"}},"11.0.0-canary.f5bb4648c.0":{"name":"@material/shape","version":"11.0.0-canary.f5bb4648c.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@11.0.0-canary.f5bb4648c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"565a87453a45e6a432bbf91eb977665a87da1213","tarball":"https://registry.npmjs.org/@material/shape/-/shape-11.0.0-canary.f5bb4648c.0.tgz","fileCount":14,"integrity":"sha512-Morf2V2kiB9BNNlWsHL4dEHrFJfZk8kk1fafMRanzCwdXvakp9NWecaBm9s+MgeHpH2O9z2jBmzebAoIZsqlWQ==","signatures":[{"sig":"MEYCIQCj25qKuyk2gb1ddQA4Y0OSg2eSzzKzfr5ko9gQsCLrBwIhAI2RTNARRePCXTYFkvkNWy0AvZBctHBf4H4m2hNxX+On","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22173,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLpBICRA9TVsSAnZWagAAh0sP/0ryZ+6kz11GCYBs1q4T\nOZQ4Agty5I27/012DlfJpnYni6VsCNwFhr/i12xXn01YledrvtE932mAPUAf\n4eX5lYFTbsmXUEVZ4d/Hxbp68tgdv7eT6kxxc+HTnrYD3gybyFlED/Cmsbe1\nJpW1aWN5f/tNrjHGEF6+k8IvsTb3irNwEGN5NZKAvsk+IiWzSxRDpmI/4KzB\n8iZAk3bz7saVX40/BtMJpG71DD/0dfy4bIFEZa9afs+ccTw2hEUTd+CqbzRd\nRZnSAOMgLPkz4efBPh+7gpdVD9X75x6ZD7PuMzNXbSfGf+0xCbNrZHKL4h7S\ngorf9ZChw1ATbmITpVk7MvLFrxFlu3j/svPFczFZLbgNXpyZkis0cYxF+ZI0\npskq8WQYEZk3Nb3qEVAIr8LsbTABzbHq6rXtlCvNO/y/jgWpGW4rLwttXjVa\nvKygPnPX5uFIVl87ZMy4GH3wiK9aUNUCs6vlL7e0dVVrUNIzFi4YF9lrG1Rf\nwsyC8LIWURMt8O7I6Rz017WTRh5RnrLJZaVMLBys4A6nyF/cZQPbqaYgN/lT\nW4lFpJFnL7v/qxm3Sl4G5EHBFnCW8SEHYzZ64jwnYjm1eaPf3JbNkv2SLMwY\n19IR8pWhgMsQju3ath7RKZsxiQSDFOrNKMUddgMaGpOIt1sjEKLKGOl7hCEz\nFlyL\r\n=emI/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"3abc3c2f94ce48fd3a6cc689419e03b8f7769ce0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/rtl":"11.0.0-canary.f5bb4648c.0","@material/theme":"11.0.0-canary.f5bb4648c.0","@material/feature-targeting":"11.0.0-canary.f5bb4648c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_11.0.0-canary.f5bb4648c.0_1613664327584_0.2647033884861394","host":"s3://npm-registry-packages"}},"11.0.0-canary.302c7a960.0":{"name":"@material/shape","version":"11.0.0-canary.302c7a960.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@11.0.0-canary.302c7a960.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8d6a4247ea7608b8d5c158b1e95faecff64ea838","tarball":"https://registry.npmjs.org/@material/shape/-/shape-11.0.0-canary.302c7a960.0.tgz","fileCount":14,"integrity":"sha512-J36VPBE+2bLedNFi+oBVBtoohJOnMLj2550qllKnNnySQC14RC7FPZ6Kd8ulsST1aAuQDupbmDmRFCMuLmHBIA==","signatures":[{"sig":"MEYCIQDm/r8efdgdQWbrQ2ExJTDh45mehQG6W/SmbE/pobgNbQIhAOKNd1rIjfbVOKLJHdblyZgDFW056cNn+QE6f1wL+hFp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22173,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLrP4CRA9TVsSAnZWagAAW04P/0iV7AtEKJ4ijWH8ev11\naGQi1uoMhqpQUemZfdEQvfRxTpLQTSDdmDGH/IPn6fuAPqAX13DJWV+fggLR\nGqzmQnQMGhRyq189uHh0Timb4YtIWRxrezBPdvp0LbxfZ/6DNH+SnsBrK6SL\nuwQ8FJilP1+xBq+5FGV27sSKl435b+CLjgL7880ntAdqrZtI/X1F2z2vy90W\nN4oUNEc2oeEiVjFqU/HROQxg+pVtbULdQX0qjjgPl5ApfKWRc9U7egHuikSc\nUlqAQ9qot088mLY3hoQD7PPw8JxoYcEfg6mlrw4SjL7NeYp+XdBwwKeVdd5x\n8/lvCf5EBXa0NMKYlWbB1oZAtxt2DlwSFzZv9lVn6sXTd772UkFpznNHURm5\nG60rRLzPAEu0AdvxgNb13aje/8OTfqSMbNpfi712VQiDD1FwmQ/QsW3/O7we\ngs9/Lcr7TutkaqyprTuBWtyLlYQR8DnF0O+V1yOzs2fnnTsFLmaLHE9P3tnk\nBxAfiXTpv5Ho7pbMRtJQzs+gxjS45QsYLJj013audcmXZaan3uq6HNuXtYAP\nPOpzzXBPhkdv/3WqU1VVTYw9941sBtP6O6Ibj1dC6RW/2bPIms+43ELboenj\n5droqUblbeB6V6k/Yt/XGvCGeX6Yylbji9aJvZ3zRPdHxLCAg9khzrS+kzeu\npaCC\r\n=KwSv\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"b16c4cf1d0826970ff04a72b663f1838cf8c37d0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/rtl":"11.0.0-canary.302c7a960.0","@material/theme":"11.0.0-canary.302c7a960.0","@material/feature-targeting":"11.0.0-canary.302c7a960.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_11.0.0-canary.302c7a960.0_1613673463660_0.28229024502074784","host":"s3://npm-registry-packages"}},"11.0.0-canary.aa0aaf026.0":{"name":"@material/shape","version":"11.0.0-canary.aa0aaf026.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@11.0.0-canary.aa0aaf026.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3934cd4ae110427754e6269d59e71ea492107d77","tarball":"https://registry.npmjs.org/@material/shape/-/shape-11.0.0-canary.aa0aaf026.0.tgz","fileCount":14,"integrity":"sha512-1M6e/8PONewxrd+8V7JQcVuWpiCUIn4zoLI9kfNCFVwsxzCYRe9mm7SXaTPgQhMExaqRjFdV+6Vve97Rx/wLNA==","signatures":[{"sig":"MEUCIESIaKcysTJFtQrPeMWTiK8D7FQz+BcQ9Rs9j1s0yHxcAiEA1fzUKi9gKAPDSb8jQDlgL7QrZvmj7b9j5sBX70TNfqU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22173,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLr6vCRA9TVsSAnZWagAA8EMQAJa1dr8ULEvBe191DITx\nyVFLjgQX7BS1zSvaN/+43qnv64xx4B1spomP0fg3pMFVLrCjr/0dOVx42t9M\nyPXGspg5A6CIfARQGJObxLnrGwwRXGsat+WPYpXHFzgUkf8YkJ5Q3nH4zlGq\n0WiuevRdNY+jY0f1z17Fg6gTJDoQsNezWtZTH6zmZPPnR8HFWrvaRSQ5q53m\ni9IMAhtFYebAiDAaWcHi026qzNS7LaygUNQDi1oR4nP2RCTqmkJlpjtwehG2\nMqMuYrRxAnPvqe+OtIn/9gCA0c4+CLVmRtSTf2poZdYcJt8cKH2arVfitYfL\nbquDRMi7+mzt6qR2HbAA6zQzcOGtoQq711vAuH/WMl1yZ39LucBgcgoAwcXT\n6IPx58zWeY1A4HhFKvJaxSRAuKu6gX/aerQymbBwjxCiXN0Mb2epSxrWxqqY\nVoODpUE6Y10OQWYJm9xxskNN+gdWLyeJN+nRTr/KUr5hvyAXLT7HWmBBlLoU\nO03cw+joCHr78EUyOoUuAfd3N217E4Vjdji+6SJN9DlNk17FfM4vH8ncmDYf\nBb311esQcAoUTjhVlJjNWA12VUn485KsRXSBqYMLz1nOocgDZ1yzn9noCJVD\n45u930FqHIMSgiE7pG3qnbKnYT/+/2eOeKtcOSQN5ANsnLw6tSDKIacKDvFL\nzH6k\r\n=wFvL\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"de542de1d7c4c8f5f51199fe207ef527fc1265fe","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/rtl":"11.0.0-canary.aa0aaf026.0","@material/theme":"11.0.0-canary.aa0aaf026.0","@material/feature-targeting":"11.0.0-canary.aa0aaf026.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_11.0.0-canary.aa0aaf026.0_1613676207214_0.3384564363658271","host":"s3://npm-registry-packages"}},"11.0.0-canary.07ff0c452.0":{"name":"@material/shape","version":"11.0.0-canary.07ff0c452.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@11.0.0-canary.07ff0c452.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c26c1b7a09cac45fd2259086b5136246f1da34f6","tarball":"https://registry.npmjs.org/@material/shape/-/shape-11.0.0-canary.07ff0c452.0.tgz","fileCount":14,"integrity":"sha512-feyl1YYiPgx5vyqz9/CwG5KGfJbU+u1e34dDYWQRVC+PlnKzg2Gf5YvdH1QJviaB5I2hEt8/OB2fh2mLO2LF9g==","signatures":[{"sig":"MEYCIQD1NbB8c30pf/OGSO5/g4A0NaKEBsjoLriT+TZty6WumAIhALwT0HcbSoSF1Z22xmfGcgUb7i3pxNQcpd7iKhKMN3Xa","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22626,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLsMnCRA9TVsSAnZWagAAjx4P/iOIrPrbds1kIIDZ8BnN\nvLIYY1FqTrgP4RIBLxLoKuy3H1vKkDCx7VLbaOFcBErWCDkqQN5yjpG2JmiV\nGzWvZKumJpa5h81bizMTDWMM7193F+SkUKnrpsGuZkTgRydFvqGvDrjh1GKV\ngMuIy11WhlnAkTX28mhg2TDpvT2FIxj1R44EOSf7LqHYDt6V8jcUBiQhkfvr\nLpnQtlGAzp2KcQr3Dty771tcEUp5KjBtP8wifPK/O2L+AXKu8r0zbfgfO8Vw\nxZ77tOp2Fle2P2zRrqEQW56O+Tez47BOwzB6s848PncvFrrnbO8dg8sPHt0f\ndmQSYP9P/GMaIHCt6aQIKxaUpfq0yHejy8ux8ErTIaFzt6GNnp9imJ+6/TKF\nAhcEeKR3ci4cpuJi82XXOX1f9GJV3FUum+juSApxZnUjfV7Eilc0ZieQ+8ij\ntgdSJI0bUbkp2FFAjUpMUrLZ/7MJSqGU1UlK19GbyjK6jDit0ZlXkINo/smM\nsQF73D3XL84RLoBzxYzS+MxWuOxVhAzrcZD1Nz+PF7zyQBVcQlTtwdwyVL79\nQ12145YJV2/V2bqf7g+CNfuNiWU4524RULSsql+rJDsqrT68rkgDpJsuL9RF\nPZQrJ0jxYiU7r6tkrpbuHI/uLYtXdoqNXtew0uQYnnKvd26PcKJWbYB/Uo4H\nLkb5\r\n=HeBw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"52e3f1cc8fd4568a48ba4314f982d5613f53ef5b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/rtl":"11.0.0-canary.07ff0c452.0","@material/theme":"11.0.0-canary.07ff0c452.0","@material/feature-targeting":"11.0.0-canary.07ff0c452.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_11.0.0-canary.07ff0c452.0_1613677350682_0.7211213467704343","host":"s3://npm-registry-packages"}},"11.0.0-canary.bed7ecd3e.0":{"name":"@material/shape","version":"11.0.0-canary.bed7ecd3e.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@11.0.0-canary.bed7ecd3e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a7176510f366ea2894e1590d2b13b46392a7d120","tarball":"https://registry.npmjs.org/@material/shape/-/shape-11.0.0-canary.bed7ecd3e.0.tgz","fileCount":14,"integrity":"sha512-Ywi8/71VKls+OKbWQqz25NYPMfaJZS5PRzuw89BHa0fC1MKUFjQVeyUuK0uWRyCh83NjRZ/KJjwrOcuBpGDfkA==","signatures":[{"sig":"MEUCIBpk6X/uv5RMQ3dnfHv+KR36IheY8hox/le4lDqPd5oPAiEAl3a12jKAqiPUC6o50Ma6pHE1h43pZ7Wwlty8HYGSaGo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22626,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLvfpCRA9TVsSAnZWagAArSYP/3ydTXTbpJr/xMkvGP6V\n3JTATltGnjxwX0lEAqYjsEk8PI/NSi/KZ97RAeE4I7971BZqnvDavcAhuss+\nPRMsQx22pCUozsDJV0LA5jm/Spp5avj7ZcWuiuJLC3wH1p/qswn4loVgYRNO\nBSIr2aPDIZjf2Qdxwu7n/gFbMozx4gYuoPLpUXuqjaNOOqlTOFJvpzjZHY/D\nX9Fb4yRLif/BV1OKHkz8kwsDygrMTfQE/z/CC1FW68KVzfCRjYOuQ1N8ipHh\n/TtE1/nJnmLTy027d7hgSqP/LH5J5+hp04L2BjWlWxPPyCF5Q0PNfx/u7zDI\nsY/m3wwXxzYWxnYgsuhE0btAUzRUXYcWlaZ6+ulbX7viF35lKWp7Y4/ZqyyQ\nYMUZWSqhMzd7ksPi9VSv7APmlwohzMQEvWIZ5V0zViZ2nMRUPzgB3uv6EhHE\nkJ+B2cgDTWcHBD/aOwbL58+jfPQS/urJXHjyrAeGoSVKGrhZY3mFPE+aJLNA\nASaFCM86upbDvCygY1s69gd1I51cKC2t3Q95uUkbPKtStIR6iqPUyvBUKSRV\n+BYEffrVu83fqofP/XNGCjN+bZHxC7XNDjiVec/gF48zuBBO7tNqDce653FO\nmOQjlJfGoXUypO5kf3h3hEeRAfGM15wVAYUU24j1oDFR5drWav0qLdAEPYT9\nvdP7\r\n=y2bh\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"c23b9ab547a5ebb36a108742217a017fed1886a5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/rtl":"11.0.0-canary.bed7ecd3e.0","@material/theme":"11.0.0-canary.bed7ecd3e.0","@material/feature-targeting":"11.0.0-canary.bed7ecd3e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_11.0.0-canary.bed7ecd3e.0_1613690856751_0.745638578666393","host":"s3://npm-registry-packages"}},"11.0.0-canary.06dead2d6.0":{"name":"@material/shape","version":"11.0.0-canary.06dead2d6.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@11.0.0-canary.06dead2d6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6a057945cf21b8b08eb6dc0f73da8dd25e4230aa","tarball":"https://registry.npmjs.org/@material/shape/-/shape-11.0.0-canary.06dead2d6.0.tgz","fileCount":14,"integrity":"sha512-ExqE08tlvYFF3nA+7HGwbRvybfg+BhDYIabNkqeQdR640Ou7xKvPQZzeHBmif+DmTD6ZTKqiI3IoMWEnLYzk7g==","signatures":[{"sig":"MEQCIG7yDiEhpBiJ9YCUPpe6uixvHI/LiVC5eFlm1zMbfHqjAiAupnc2NwbMucF5IJH3/AOaRYKoi6ATd9hHRExGUyB3Kg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22626,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLwgpCRA9TVsSAnZWagAA32sP/0Cwkkvt6MfFeAOIHdsM\n6QZqUyKLsLFO3ELjpVIv9wzXqRqO98hJ86ZZ+cso3MSRIMtEjQoPLhcdsH+G\nz70N4yhs2vj4qQ7p3CFOLehDHj1w6F6xBzdZS+Hnowak7/4k0x7kY65xISwv\ncUBGkofbSYmDWxahnTKVbaSh8lLWIKLE9d52l9TBE2ax5OcaheCx3vBW+7T0\nUqT/nLigFXiGngbsYzwcWSsEfmm8XDLr2FWq7FW/r8wOae+bArYwXnb//1uA\nlkuU77IY1OZ8yUnCz667+K6WcKQm/UI70DEj18BzgaSDB1e/MlId4xfy9rVH\nnEdCP43oNrt4Ff4CfuprkRrCkK9YQIIjDy/KhcYJmJfQ+9lMxJSXTs/lvO7l\nT9n3OQXemTfzjsvgZtsVsMkOzTUJ6zpy3dlyol7ZDER5a/KHvhNyEQGQLQS7\nLebWHuHKBbazsAHKL7KFhHWEJhwkSTRiio4bZf23tZICy3TIOErc9y1QdqOB\nZZH8ftK0aWoVBE8fwjHAutY3JWw110OoK8jjOWbF1P6kcfhOyO5ND2dDDK5s\np1sqMfNemH0y3YgchYWx0CgRRyfkvvJtNtODMRJTkTnxCmOak/NIePQa7VQK\nLaXMroMQRhDOuT2+XFw9pOidiG+gRRvIXn134dfEios64D8/gbeCWIyAuyBJ\ngia/\r\n=A5FO\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"7458ca9f14be94c1a279bd594f262289d278bd39","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/rtl":"11.0.0-canary.06dead2d6.0","@material/theme":"11.0.0-canary.06dead2d6.0","@material/feature-targeting":"11.0.0-canary.06dead2d6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_11.0.0-canary.06dead2d6.0_1613695017098_0.057804564546604764","host":"s3://npm-registry-packages"}},"11.0.0-canary.cddb03553.0":{"name":"@material/shape","version":"11.0.0-canary.cddb03553.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@11.0.0-canary.cddb03553.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"271552c92ee743d0785f9fc90b28dd97f8754bb1","tarball":"https://registry.npmjs.org/@material/shape/-/shape-11.0.0-canary.cddb03553.0.tgz","fileCount":14,"integrity":"sha512-IE5vUwhIKUgQSNjbKXImYhsiAcEBLKAVf8bF4O0T+auwbBcryJ3TLG+jg2dQCleyjzRelJHbRV4g8fWn889ofA==","signatures":[{"sig":"MEUCICi5CxZinAS161kf4WDbQahRiIRxqPi2SZbaKvG4E4oJAiEA7t65IiEc5rrrOPMwrpkR+4I2J35gk2JiqmYxy+XHUkc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22626,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLyzKCRA9TVsSAnZWagAA/RMQAKPcYE0//u74gzNQG8PH\ng//EGjoJ1E/wYxFJvrUE+LbsObY6M8qOo1CV3TJuxlhVcO3VbH/pYHP4UbY4\nYB54PQqIUrKJVsA6xIH8uG3SFi8DuKB0SGobrFsjel9oUcSjtldBD2w78neV\nejVLVfIExzdnaxfzjUJFOACb2vPXzObu1HdgY2VdR/h4sCefU99bRL4DItIH\nJn3OasLyDLgsJ8Pu7rr71Kc5IrMeoixql5LsZH5BU7ODRL9vWz1eiK35y6d3\nM4BKD8P/YDMncegAhdtfNipHE/zHZyC/tN+BxJOVD1jTXfx5w2oA/Rt9P6Wq\niReLxS/PaN7p/c2fwMv9VglNWkJkSFqErVuC+s5ZjuNIpuUYXoxV6m9vN69V\n4R1X6c6ilrZf3BG2o57OobLvE5etbm3l+Fr2nwY9UBn06TTH39bEK/RW4oJN\nUw6jUpL2017pXPVdEq/Itf8yKpxPWb6TrKQQS0CbVZUy0PiU25875XaE2UIc\nYUckviAgfE2KZiAQ15b1zIWFfym9If9uacy3gKYb7OL3VSJOMq4GYAcMw/nL\n5Wg8t36gzjpoiO3Tw8V6T6ypkndqOUdKOlL3ES1tnOF+CBXZrAhaAjXDoY2m\nLshYSSp/Q4LQ1UTYksDNMNZIFkmBRQ+hYR7uoTWra43u01E9djAWvJH2slCj\ng00z\r\n=7Ew6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"a8deff13e5978e42ae51f60c844f7ca0abf64b45","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/rtl":"11.0.0-canary.cddb03553.0","@material/theme":"11.0.0-canary.cddb03553.0","@material/feature-targeting":"11.0.0-canary.cddb03553.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_11.0.0-canary.cddb03553.0_1613704393504_0.9816532328788623","host":"s3://npm-registry-packages"}},"11.0.0-canary.d6d8d0476.0":{"name":"@material/shape","version":"11.0.0-canary.d6d8d0476.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@11.0.0-canary.d6d8d0476.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5aea04eb510b55c83cad22eb4e00f7519a482bc3","tarball":"https://registry.npmjs.org/@material/shape/-/shape-11.0.0-canary.d6d8d0476.0.tgz","fileCount":14,"integrity":"sha512-NeKE9zlKp5hsJk2R9yIdD9jb3SxHYzIPBLgO988WofdoLnENHPILiQF5HlsYxX964JAhfAnnxD58eLJLemdxzQ==","signatures":[{"sig":"MEYCIQDhCu8+46dDNeZeZYr8G7QVAxMaLTdvFbhX5p0NCm7xFQIhAIKZfH44z65SAymdDyaWbNx8Lt4TD/qNw0o/LkFRcCiQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22626,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgL05kCRA9TVsSAnZWagAAdpcP/2EANdiwsy/8OCY8nIP4\nmTf8+n0YECnHhX4GAaCzG5h05qBix7zApfvG/iHyjqU9AJ1XQQHua7pYBV2h\nPqcGpfck6eEhY4pQtOu+dgZRnqF5XphvtWp0wtyK55uqp/lEHtX6KuBY5/FU\nJXl+nmjFzQUmJM0ErWwDJStxWChrqbPASUqTolT2HrQB6qwlXnSxuJrd17bf\nK3xVyeXjRf86iTuTUSwa6fHAn5iJZOKsafJG1znAkC0BubArAnegjE/RcMHd\nYB1/bSJbaCrVSHNw3TQbt2FSPc8M2pzS+NN3kKki8Z653h4Wn4aBR2BZkkR3\n5G5dGpPp9GOemaYjcSO7Zww21LsYUIX3+L0HyQ7glc08fdLH9GA/A6i+AYgA\nX4YDQ7cQznnOPgjnJ5eNzEkR/qkVoFOjM/N+YI5E/8DKaq8qL2y52aQ5bQyN\nrmNSvWdcNOK2Vw2QcwPmRcwX235/Sr20cJ+YkRat+OWUlFye7ikiKShnHWJQ\nXs9qOj4wuVOrry3StKZf+G+WrQZX6Vfape7C0QUoXFHlBE717oeK4x5uT6VP\nYWJEMpbp/iDwFrezYKCN+lst810G9VnEkK4OmQJus6k2/7MBkClUG1ecU8Hg\noflwyqMgKgZR+FITcjxZd5cQ8f+1GzNDGAQU0edb5fMwvfbk+Vw0wm/+82fz\namV8\r\n=I7Jd\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"17aa6317e2c1a8109a8bae34e962d438f170f811","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/rtl":"11.0.0-canary.d6d8d0476.0","@material/theme":"11.0.0-canary.d6d8d0476.0","@material/feature-targeting":"11.0.0-canary.d6d8d0476.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_11.0.0-canary.d6d8d0476.0_1613712996326_0.007367561953110835","host":"s3://npm-registry-packages"}},"11.0.0-canary.0b4a4b2eb.0":{"name":"@material/shape","version":"11.0.0-canary.0b4a4b2eb.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@11.0.0-canary.0b4a4b2eb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bc32952160c42d122cabd968f32b3ef76f499edf","tarball":"https://registry.npmjs.org/@material/shape/-/shape-11.0.0-canary.0b4a4b2eb.0.tgz","fileCount":14,"integrity":"sha512-oxIy3Y6nxKp3GyhTNFvyxEbRsBu43qnqtJzrzERAV4NW9AuoFaz0V7fB788ifRR5Do6l2oJ2jzuhvn9KH1rUhg==","signatures":[{"sig":"MEQCIFz+N0shiw+I6eyzj3dLkywirmOKliUTfOktOhN2Oi8PAiAet129F5ditHuP08Mu1OUFnIXBv8HwNjQzUihBdOyaZA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22626,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgL90nCRA9TVsSAnZWagAAhHYP/j4JcDDfgmC65ebOlgWN\nSh2VjHxNQJU08dv39TQ5ah8kDz7B3Aba313m1bYU83UHRV/TdnBMAdKeHnFW\nw0vEC6OWgta1EuIw+GF542WL1U6B+ceGNuWJkC0Lf8uCECOCZVOxpjfknQF1\nTa6TVeBNuke7Ij3093XeoxYpmRdDHZz45qIYUolYNWHUYc31gdZ19rr/i0Yr\nyOW4z1dkoEhu+tUhQw0gF6mowLxfLayMULiVBrR46/SHiHdtTacupsOa+T7C\nvXkE8Hf6d56FyclRhDIcHThbCpmH8DSxqaR2Rylr9hmKPvVhl5jcu7LVv3EL\n3uUmYpzMUlINy8M8aJv1JZlMWUQb4pj2gBoH3wuQjlMrs6m4uB44FskEluSV\n6rNOmO7P2XmS02nbxCIwjBOabIctgNpWfAF5LQ5qbEc5x2vDHfyhCFDIVhWq\nkARm43RECB2CTT8NegVXG6ox3t51Xysb57moBGdi6HsnEvSjcmCqUHcQurZU\ndvpC32Xq3cT1eHb64rUHXuyPJflH/UZLygf3BZyhs79nBEDSA32tLO4Q0o3F\n/CjokA7wl/zrty6JSVGjRQUzl+RdmngCSyQceMPJOqnVNnnsQHJCJFpJfv5e\n9Z1C9stHNmypjux/ly5yamdY9DkjI5utXr5fZeVDS0Q33J8e6HKbZ78/ggef\nsSfX\r\n=c/Zl\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"d96f438a60c2d44b9a3f9ec055d1dad78d316e6c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/rtl":"11.0.0-canary.0b4a4b2eb.0","@material/theme":"11.0.0-canary.0b4a4b2eb.0","@material/feature-targeting":"11.0.0-canary.0b4a4b2eb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_11.0.0-canary.0b4a4b2eb.0_1613749542456_0.231297483231099","host":"s3://npm-registry-packages"}},"11.0.0-canary.3201cae47.0":{"name":"@material/shape","version":"11.0.0-canary.3201cae47.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@11.0.0-canary.3201cae47.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2338872e19893fc9733b99f565af03245f2e1e8f","tarball":"https://registry.npmjs.org/@material/shape/-/shape-11.0.0-canary.3201cae47.0.tgz","fileCount":14,"integrity":"sha512-iyhmayKY+EJc+1TaSEaRkc7aZ5mAwoIE5+XuoZ3Bxj/LKK3oMaoxjx1S6sOlYsMTIk0IeXRUR4KuF/4/l8K8dQ==","signatures":[{"sig":"MEUCIQDYFkxv+4TCEIQb8a9ILzqfr0xkEaIagXCeZ5xeBRe6ygIgGndhinuS2Tj3AOg1dmga6OK2zXWKcM3t/fY9CrN1DmE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22626,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgMEMZCRA9TVsSAnZWagAAVq4P/iIoLW2NM/rNd7WNIAc1\nIm2N6WKF+ozMVxB9Rk3YApGLlMTh1CIof5ofRMcUGbpurrT2iKdm95T6q1Ne\niLwCbeQeyZZTEz/Vh1ID+fftAjnrBT7h+Csqs3kOgF5ci6So7o/2uxA0hA2U\n3YEHHH9weK7V+U7yeaAqQvbJID2w7XHdfmIHmYJAanobswWs3eaZvCtKkRZJ\n4jIKJDsoxLObFsZexYmpSXjIEZYTuIdFoXjcM3rn/HcNaWIIQUcZfX3XK3M6\nuDxDsW8BFOMQTzDtJXfEwO/uBCMifjTy7kjmv5TLBmN4h9RafQr9bYE3kkN3\nFuZDwgd0CMplGmjQ8B6RRMHYcWd1Ob1B2rCEyCJ+AWULXDNusQHYoOz48fTk\nmJ0PF7Z+MdqvduIqkWEV/+De2rLRVE81BwdblxDm6os7Jnvwgk09R7AJK73r\nj3iMKKlzb/XhrPdWZf+ajYWonzAKamkAW+v8Z4KXbOVicYG0dWkz60jqQ7iD\nP4Nt/Z3ZbatjT3y+PtFAgM4u41KV3FLRTposC6PczlzEp89j50HX9vV5PU2R\nypGNUwyC3hjV9XBK+txPq6DjUQO7WL2yZkX+2ZNe7LFKo9NOlvZCoSKCMkgd\nbfOQ5voBnvRJkGNO/MnH/RKYx2hmejIW6ne244stQqCsDb9edTPrnYTlFbkq\nHEKs\r\n=t/h+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"274d3ca7227bee74ffff3d46ddf3ae266226bca7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/rtl":"11.0.0-canary.3201cae47.0","@material/theme":"11.0.0-canary.3201cae47.0","@material/feature-targeting":"11.0.0-canary.3201cae47.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_11.0.0-canary.3201cae47.0_1613775641197_0.6457685850409309","host":"s3://npm-registry-packages"}},"11.0.0-canary.f1b1fd5d3.0":{"name":"@material/shape","version":"11.0.0-canary.f1b1fd5d3.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@11.0.0-canary.f1b1fd5d3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"31d2d3fa2f2ef59f936284b5cfb99749541d84c8","tarball":"https://registry.npmjs.org/@material/shape/-/shape-11.0.0-canary.f1b1fd5d3.0.tgz","fileCount":14,"integrity":"sha512-P7MrwYIASZarTv1TzQHrmlmx3kdy6vqNLgUYkI5ddup+Kc6EcFHG2CsaQciSlTGfgV3gLNakHtmPEF5+Al4s5Q==","signatures":[{"sig":"MEYCIQCDn8zxg044e4Plzf8GNVqVH9SxMzOad5udiz68TCBj2wIhANZxgaIwK3h6dFlKitOwdbJ5avOb5cjOwEBw6FwaaWHe","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22626,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNAq3CRA9TVsSAnZWagAAmsMP/1VrbB1Im3XHkBUPL1wN\nUTEiOdD4YaLgbi4TLVc5gyNpOxZIUv5gjB8RrrtZy9QfXjAzyTihrwDMJLNH\nweAF6/bBZEwNtaLQ/a1uRT+8bWWVz3b7Q7UfvewaS5TuvEaqI7RENrjbWs6R\nCxkZn/Ix2LiSPEu9XKamqwQwrI2GJJd0easA5iT1Nn8lYgh/MPrn5IDDEIfZ\nHCK7vedgR22O3VEYhhDNszpOhEXwgWdCzOnhnA2bp/jmZBEeStogvIXy0nI2\nRL/lrAvpFh0Ia/eLGt0v75DWd2z5zWQlX0RNUWdaoibmBZrD0tt4MBTnjVFM\nyVR/6kkN5jbFZ4NImn/kg04BrnG9ZnrE1uiCunO8hUAPNk5flyT/mV7bvou5\nXTMKBacfn1mbAycIhNC/0PmdiBy949NSwC75oj8uMBLNfhe5R1OVolQE4rpY\nHVnlCkX/jAlm8LvAzkv2jEvkT7uRBoKljwbFNVP9JIFaiRS6tGa2kiZKs2rV\nrCXF1Suzt0/z3oDdblAw04PnKEkz5O6gRWYucxfrM5FxlUNp/gJZJV03TXvc\n0lZjqSMv2Vl1luFdgRA7PceZDjJH2GPUFTGr6vpDN65xaPYPqoRCVrzZ13Oi\nlib2V8N2wa61uTxk9NBR36j8coKNh/iqHy0JYVg1/yMbdscmNi4RLGFhFFmc\nIFk+\r\n=Azgg\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"b73a5cc3b15b450664de92ee70312cc1e8b17304","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/rtl":"11.0.0-canary.f1b1fd5d3.0","@material/theme":"11.0.0-canary.f1b1fd5d3.0","@material/feature-targeting":"11.0.0-canary.f1b1fd5d3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_11.0.0-canary.f1b1fd5d3.0_1614023350885_0.9504888808920602","host":"s3://npm-registry-packages"}},"11.0.0-canary.7899e0fe0.0":{"name":"@material/shape","version":"11.0.0-canary.7899e0fe0.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@11.0.0-canary.7899e0fe0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"34f02058b274c139c9b09ecf5d66dc57c58111c1","tarball":"https://registry.npmjs.org/@material/shape/-/shape-11.0.0-canary.7899e0fe0.0.tgz","fileCount":14,"integrity":"sha512-rXyU1zXC39RGrqc5pLDTS0OtAhLkQixwS7zFepSP3tdCfdzkmBQAAGXbcpJ7xc3SbNYLkegO1hbKQ5sagamGUg==","signatures":[{"sig":"MEUCIQD6pwogZzLbfF3GGJlT5vzMzhvSF9FgqV8a7v+oe4R8KwIgYQhpF0ifMrPBx/cfo58xJPWvLoecgx4tX34Cql4ybkg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22626,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNDQWCRA9TVsSAnZWagAACrcP/0Tnr8RdAmMecSNgtvSS\np0dpbmsCJwQvY3opOOP9HV7NY2q62v+ruprBVv38GVFJUNbXm8zwz5isBJZ6\nsESNPrRYAXkJC3UeT9iCqNmoEQswW7b29shDeT1NitPFYIyE2d1+Ir9fSRFh\npTRe9F1g5AvgkSj5bMPSr+j8qXO42zmgSvH6lPZMmvVbH7RInQc5i+jTVevR\nBJ1q6pMfdi4hp0OH4v9bLmh98NFJHMiNdxHkb9TvaonHJKkbZvksdqouEo8h\nVaFpM2frZ0LNv40cbkjoDLc1sAY6NS/bwcHhHasTyrzeL5vxzmLCS/3Kyco9\n1ScBPBt457yHHOwiRTtj5/pQPDqTKp6IV4gtRQRWnZ5NAfnwLdRad2TY18aN\n0OLh/pWiDlitzDbu5tA1uaxkCcHbXjSm8AV2rpjARKkrfM98Ui3J7vkDhtR1\nMe6dqc1h+BFToIovsScyIcaASVd8X3InMUY+84FNUCYkSfZ/8j+ixJeXuiwf\n/MpZJ0DTVRimZAWjyaH5g2xKnUxK2JNeRxlJ6L7t7+8/iPyeg+An/lW5U2oI\ne9775Rgixpi8SEPOGeJcz3lhbHhqhmYFgCdxY2CVbF63grd6cr43iBEIOnkj\nimWnnrVg/JuONbt+g9OPmtvifjYUxMaI3+YXnka+dqW/bXCTrUu7u5acqrg0\n7QoS\r\n=V8cN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"73b260d2233a31311cff76e4c10438913b91c2ea","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/rtl":"11.0.0-canary.7899e0fe0.0","@material/theme":"11.0.0-canary.7899e0fe0.0","@material/feature-targeting":"11.0.0-canary.7899e0fe0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_11.0.0-canary.7899e0fe0.0_1614033942245_0.6306278556388736","host":"s3://npm-registry-packages"}},"11.0.0-canary.f19c86d13.0":{"name":"@material/shape","version":"11.0.0-canary.f19c86d13.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@11.0.0-canary.f19c86d13.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c6db3c027f6b4cf2479ed69d6c9ad43921c0ecc1","tarball":"https://registry.npmjs.org/@material/shape/-/shape-11.0.0-canary.f19c86d13.0.tgz","fileCount":14,"integrity":"sha512-sVmwFjYajjVZ5uu3OpZFhG5rT1PskPTTbTlVnW+Y9uOBEz9CgQuZDa37n/8ZfLzfriXuKfGfIulqq7k88jqCrA==","signatures":[{"sig":"MEQCIE5vlXnSAKgtTvLG2EiScFiutvYRX6U6JD5QCr0hBe6CAiBALADTobE+bEJA/Pw3vvROzpGQSEGyXEkYxvQ8hf7DEA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22626,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgND6gCRA9TVsSAnZWagAASjgQAKEYIECmo9ZesWcdD8PH\n/0Q1FlMUe8SzEjjJUwRa65fcCZnq8paNHNdhP1v4ZP50THJIi/k2MFkDm0Uf\n4viXYmFKgcUiYLXJLdR/zjwstcvxDa5AZq2hhIMztV0e+1/jA4e8Fl+eKYc8\n45wgGYH8cMYkJuACBgCKDi8Xlzksw56RHo/Pyw0jJs4Lo3J7ecVzlZ4G6POp\nxsSpiyqO+wE6FEqaT1xQjgXw3KskHDZj1J3uHCV8sPlOwvcUFSzupDxvsjE1\n5rU25s2bAOKIr7FR0Wf8JTsH1FcQBimb39eEu3FdGeY+4eZDsIdwohVzqUXr\n1395uyrPc/dI0GwUKQG/RfACOpJuL7WpUH9p5ksJCTMwlAyfHD7L2Ocwha7v\nphV9gHb45sfILtR/o0zP7Xq2cn6IK/stPfKnotD+0ngStj3gjbQTDK/c4xGs\nyl85zQjZwHv1ytgd3DTY6zwTO2qLC31keAjP5JLpswCVKpixr9uWllfoKsK4\n9yZ3BpkGQd5Chdq3OYvMwF1KZpRHgXKEBQGQE1h02EPiXXSHBlsLF4k8lFGB\nl6MG53j7HOOAxsCuquSQHTwiIjQSqwY0EVWmOHYMbdrwTLppGbx37Gxty7lf\nwYRw6kLQgybvOE6SaBdZ6AVDdEJDuusFc1HgUyn9dkzd9v1lFJRNdpRtkhCr\n9Y7Y\r\n=u4Wq\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"a4b2b851fa6f3895a9e915d4bdc5b6b6715a4260","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/rtl":"11.0.0-canary.f19c86d13.0","@material/theme":"11.0.0-canary.f19c86d13.0","@material/feature-targeting":"11.0.0-canary.f19c86d13.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_11.0.0-canary.f19c86d13.0_1614036639963_0.466965363188774","host":"s3://npm-registry-packages"}},"11.0.0-canary.60e892d79.0":{"name":"@material/shape","version":"11.0.0-canary.60e892d79.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@11.0.0-canary.60e892d79.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2b281965bfd181d358fb5cd8554b4d4c07af100b","tarball":"https://registry.npmjs.org/@material/shape/-/shape-11.0.0-canary.60e892d79.0.tgz","fileCount":14,"integrity":"sha512-eJR14JXN/jgjUD3ES7A7UY893P1yT9eUtGPjS9ICppOcN8UWHe7YzN1YxgYp6DVFmvvfR9pWRUjpMZkBieHo3A==","signatures":[{"sig":"MEQCIBssSUpDMWSDS6DdmUJ0LDMQB3qzNJYFPIKbO91Kb6Y9AiB3V0RrMv+34LdKdWhIwDQla+qcLfdCWTYEMvmP+boMDg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22626,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNFbSCRA9TVsSAnZWagAA6p0P+wVjgLn5XTe2PE/HqC2q\nOlXIuuaLPGgzIqvNfJ5KHtidQwoDRWnQZSiF0o7eOpURLaDkxWqhE4sCNCSl\nic+7aJT+GyKkgmK3nl4gI2IBRG4Zak2DNrCt65B7AxtuDtrKC7DpG3A5wwnA\nD7oHVh6mTkZnVRwfc0pbKyTmudLV1VWbefbzr0GnBYHUx97kcAaWCBDl5VAK\nBQMIdrvcai+5toUJoXCDcpqUKPeLcp4mj3Dq4/kYb2sPHDGL03uYa5ZYXYab\nvqPfvoVIiB7V0++SkARBWr1c4l1C6yUgem9YAPNa+WCNW8eM6pBudD1TZXyR\nVbq0duIPDTpcjxx4EA38NUOm+6fVNsv+dIy8K3J1XOJVq9uAJCaafDcKDL/V\nQ/zElYsg/DSQ1eEvUCT4Ss43igYjRg9VzgxaRBv42WQcNfIWqqi7q0YrrDBh\ndQwTLo376dSEi+8kQyf2wqOZM9Q7Jv197+uUm6tzdYtW6/geE913n9LSECW+\nLMeyeQf1QERfbLz1HzBUVs2Y/A9wtMAT7oDC57Rfr8lAytojaM4UMjnk+MoM\nxiAK+a98lY76rRujT+eRlH9y3ymvbAwF7JL+2ZXVbewDCKpCg+i15cPeG+3r\nmsXhLgpi1i2ZdhPCSzIkj8nMKxRxsc7H6WUT+p9adjixT3bxuJOnxNgKczIZ\nBHGU\r\n=LdMC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"c94f9f392484897a962a9b7101ddc6d70e5df67e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/rtl":"11.0.0-canary.60e892d79.0","@material/theme":"11.0.0-canary.60e892d79.0","@material/feature-targeting":"11.0.0-canary.60e892d79.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_11.0.0-canary.60e892d79.0_1614042833988_0.18323815192121495","host":"s3://npm-registry-packages"}},"11.0.0-canary.c96bfa495.0":{"name":"@material/shape","version":"11.0.0-canary.c96bfa495.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@11.0.0-canary.c96bfa495.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e98700a07eac574dee1cd2f47f5ff0964b8d55f2","tarball":"https://registry.npmjs.org/@material/shape/-/shape-11.0.0-canary.c96bfa495.0.tgz","fileCount":14,"integrity":"sha512-kBmBbd2+lDs0yiHrbDrx0TouUCGo+/yuQRx0Um64yRDZawgfqT92LoZ36nKZvIinTr8Y0t5L9Iomo3PP2C56cA==","signatures":[{"sig":"MEUCIAr9/xpXuyJffEbJ/WM2DC46k0Wif+8xWdkYNePQvNcAAiEAgfOqZRhYX6tgXi0hMldQ/NV0shx54Fed8GayuQ1adIQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22626,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNVhlCRA9TVsSAnZWagAAYyEP+QA76GTTzkUK2IHctma/\nAbEjQd1XK5Kwq70JkkTlfUs8swjLSyURs0l1m0bbqwRCnd/sc/nKNjy7cOJE\nJK7fLKWXWE8R2Uk0u4jUy95cVlX70+h8IxEUvIPuJn7mRFlqF0+z26NryxS6\nx4adeSyc81ndweMVAP5barqCTw2biPC5dEnBom0GYwhVTWcxVVHzLn3Zz5X1\nd7y0bAcap0DPZ87D5GljDJyuXAp0P8n96AqiAVZViYhWfPL6gbtO/efGcmh1\nli8/kZ5DL8iQmtzobB8aInsuugMUsYAtqLCP9FqHwi9+VSHnnFSVeawkz1u5\nQxjVlaeg+6QBGw+3DZU16agL5KnUkAO4M42KS92ewZXegV6zqCToiHDc0Ebg\n5SEOn5X6PVQBH+qizUfO7Og0ACu+317cyNIxr9m42YeF6VGfhtPFau5P8su9\nGV9a87OtaaDQegxZRZpegqViig1wO40FOqXvC9pO2M/QBfmgXpLaGW/XKV3J\nJTEIZHiSEhkPlgzmhBmI5jz/XXl5zfASesjg1ZCwhkSKIlNmdhh9NYcRAO/X\n6wxZxVxqU08l5BUj9D4+8FfydYtRsOHkCxVlH5fc4yZaApbEhHIyt6V4Terf\nJi5nbdvOD4jH6Z0WyUTHBiGjhQ5nQkmSuP1Zk37M6MJOJbAmd307pR740AfH\nmXwY\r\n=HWYd\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"1fd35f98370bc606c6677b7045a8acf16c0ea7a1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/rtl":"11.0.0-canary.c96bfa495.0","@material/theme":"11.0.0-canary.c96bfa495.0","@material/feature-targeting":"11.0.0-canary.c96bfa495.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_11.0.0-canary.c96bfa495.0_1614108773539_0.2940951913545029","host":"s3://npm-registry-packages"}},"11.0.0-canary.fa9b59f67.0":{"name":"@material/shape","version":"11.0.0-canary.fa9b59f67.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@11.0.0-canary.fa9b59f67.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2e89adb67596cd7c2fc7f8e4aa9807762f0f790a","tarball":"https://registry.npmjs.org/@material/shape/-/shape-11.0.0-canary.fa9b59f67.0.tgz","fileCount":14,"integrity":"sha512-VYeDaoUHcJvEF5YKBi6AWskzP96+baM4Ga93duLD6FI2/KoqgJ7nBjcO/kQz1qOU3pbMiCcTK2YcF95GvUlDag==","signatures":[{"sig":"MEUCIQDQ9B0pyR7jOHxJQ68yvpB9ABotjrsT4iLKQahnAq7jnQIgZubtnVZqugZvq4U3j4GdTddkyFTsJg2NXOYhNI37Cpc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22626,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNVi3CRA9TVsSAnZWagAA58EP/00sYR+6jGiKc9y6BMbF\np5srpm20prR3Y/hqrbvMg1fuYFpF2rrOaWb7sj6hzQX8Z4AauzTTtkuFmruI\nEQcFeR/NdsmnTGmgfH3w5xDGV9bUh5EwoiSw1VUQueDIoIvR/kEowhxd0+nR\nZT62WZuWSwJzl2Tqx+DgYdJnoIgJAe6YjMf/NpeeXW65gjvS2aE290qGPuxv\n3fFb8W2rwadHylRegiH0ms1SWmcvFLxG76K15JpR57XJjRI0m85/TTXSG2lT\ni7jlh2HcBlaSWfNVP7tKnvgbTu9nAIA3IL8TfJIr+A9+s9+XlPiIB+9tjuN9\neq1jFz7rtLre0eWebg2mS/SLlBnchBRqpsUdMtIoCtcAdd0eMZzdgJT2QrDY\nkwa7q6MFNMRa0diH5BM1jb/UK6IUhJesLWZG4/hScYgfngQRd2S3W/Pbdc/P\nqIUNrXghLLXVX84DRWlyeezlmDo/FR+fQDKiOC4LaRIcgP9CpmLBpDY674vy\nd60UG3IuPsVp4lBxqtHi+0pszB3wOQupPQi6exEGKPO1hXingBY29F0WE+vY\nvDGl2CJ3trcTPHbRbLxeUziDLqhHVg7wG/caN8zouR8YHFuuUQI2hc4ngzwh\naf9QgQaLs+ssKXFtbZbc5SaFUf9pJ3bCZ7iEhNqR9cEshf2pPPnlBKxMmZXF\nu8dj\r\n=w0/T\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"5fd97ca8b5906f3b3097bd333237976e3e93d192","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/rtl":"11.0.0-canary.fa9b59f67.0","@material/theme":"11.0.0-canary.fa9b59f67.0","@material/feature-targeting":"11.0.0-canary.fa9b59f67.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_11.0.0-canary.fa9b59f67.0_1614108854898_0.6902576039543882","host":"s3://npm-registry-packages"}},"11.0.0-canary.869e3497c.0":{"name":"@material/shape","version":"11.0.0-canary.869e3497c.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@11.0.0-canary.869e3497c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7e92f19231c0ad6156d0509c62e858afc57eeafc","tarball":"https://registry.npmjs.org/@material/shape/-/shape-11.0.0-canary.869e3497c.0.tgz","fileCount":14,"integrity":"sha512-H4umMJg0OLiwygUKEbeX8jGnV9YRygg4oYZf3Xhbkse7MX0zU/Zvjn8XQxjHnZnG+ZtF4JyZEvItoh7FwFo58Q==","signatures":[{"sig":"MEUCIQDZifjl2Y+C6r84rt2tc/TtrDZhvO+YXXw5xW8wxG6B6gIgTIj3WdkN/hLgR7/IMkIPhRWAU0fabHfXAa1dHjoGfBY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22626,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNVjLCRA9TVsSAnZWagAAUfUQAKGOxNhnPr4fgw+hBHlm\n2Aowwh8jO/hJg4iYR9Vf0bGdQRSV4k5HJUrO90/VkeskGSmNrhtf2fxg9JAx\n/pairvSoOXR26fOLqyBqj9mSlzXzrDkMJN43rEdUyuxN0ymQQrnBULWnk55V\n546R1G82IhQfgVUlzQvtsqb3TdsvXti9A0z6c02IWfIOIBIQ5kkxRMsGvMrh\nyeY+77W+MchOJYisWXu6hDH2FeAFYuQTidY51tdA+nXXuLVoFTjIIvi99xLc\nRjuOXURJYBPRDfmy6sXkokeQIYoM2q6Q2iOotSoszCKjD1GlKQUgfJ/OYW/y\nuMmVQPxOQlfRN4O8QZnyygeXBNV7UAi20lU0+bzY54alPqQisb5/66jePxih\nfAIGdbPOC/aRZTsobkQpXF0dy3ZRTZLlV0Mt/wOB8HRN9u9s2Bs/kHTrfiaV\nHMRFO8KuXi7Xf/J7Fjvcoq3KNY7JiYNq3g+Hgol+5OHhA6lDSd+Zhv0kVCjA\nU28SkSiMLektL/oAGdIlOS10u6XUiNNl9ENsWwHBnbVf6eEh1okG0+cTNWr5\nSYnuvipocoA/cGl/v0K2EIM1ES8np6iZnMhad/gaoYyW6/Cai+q2wo6nQuoA\n8JBf9tmQctGfJ2RrgK/ortXzbQCtQh+ts82F3cZzG9Fghw0pahvPBYXrc10V\nq/9I\r\n=jz5a\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"2e1e116734dbd0e962ee4e11a9952ba9ee6684da","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/rtl":"11.0.0-canary.869e3497c.0","@material/theme":"11.0.0-canary.869e3497c.0","@material/feature-targeting":"11.0.0-canary.869e3497c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_11.0.0-canary.869e3497c.0_1614108875117_0.9238307982476937","host":"s3://npm-registry-packages"}},"11.0.0-canary.8ecd7c9a9.0":{"name":"@material/shape","version":"11.0.0-canary.8ecd7c9a9.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@11.0.0-canary.8ecd7c9a9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f9ec2f0ecf49f4a46c8095c14b470aa6084344c8","tarball":"https://registry.npmjs.org/@material/shape/-/shape-11.0.0-canary.8ecd7c9a9.0.tgz","fileCount":14,"integrity":"sha512-wyyLRObYyG72HsgzvpIU+57UcRhadUm6CwdUM35e/jePtZb+ZvD1Vf7yPecve8YFuF/Q9FFGPMtseJ2EIeKaJg==","signatures":[{"sig":"MEYCIQCgM6Bh0wUBtApT34r80rsHtYKA/0AuoC4AZsAI8f3n3wIhALG6ASK5ipa9hSuMWs1vQfGISXBREr79z0Ugc67uvg7x","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22626,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNVyPCRA9TVsSAnZWagAA9NIP/0ZURlJUcwaMJLSycZMQ\nZzw0tCOOeY8eY1omSXi2j25ik0Ei/lgWBf+hgJiBRMEmbD92q8kj4GWotJD+\nA4isoCE5/IJELAftPJ3MgNWEz1q0uQxhIQ3Pj1SRrQ3fYF+J+6VBI7CfIBP1\nmcCRRNf9QseBULNjX2HXPKLBHxNHO3dheBPDlJiaG+RyAKuXZ7O2oBIoZK4H\nbselgPWGXWykT6/JNKhkrIg/+qjAfAG0C+MMFwxCPlhRKwem9ohnhPqHbpox\n7O5RZjkLlPi0W1yAzHRQOnOauaPnXzCiz82W+YqNRH1oo2aDROG4T5o2Y6IU\nLKJz7BBUvi4nmsWt2bAMgaD+mgACL5yBbwfQJAw9pNDMZoCnj0j1OlNlaKPD\nBdfABqcRkk2pW/QfBdL5+sTssdk/ZAXSCMGEVglMAbBywyMRdeDOoCJAunyK\nf2kqGBTTH6Qqu97DejCXKUPm7sX3YAO7bokoaEupeUSp/c09HcTOPGKmi1kL\nnkvkC75/J9MJu9Lu1jHXcEmpxLIo1MpnhqOAZGDIZ4pFmVsov6Qll6PWsMgH\nfkUOSA3zPdSZW9e1rc7CQUEedhpUCFbUD2qUT8A+IAdpXvWvOsx777/oHIle\nT9Clf32tFGs73yja3r/Bt2zbvZt2n8h4CbV5il6ZB0GHzD5vcihUgs9BiC8N\niw1d\r\n=+EOv\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"ec70d22f543f79f769bc5b509c9dc06cb8114af1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/rtl":"11.0.0-canary.8ecd7c9a9.0","@material/theme":"11.0.0-canary.8ecd7c9a9.0","@material/feature-targeting":"11.0.0-canary.8ecd7c9a9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_11.0.0-canary.8ecd7c9a9.0_1614109839130_0.9471887765714189","host":"s3://npm-registry-packages"}},"11.0.0-canary.9c85d505b.0":{"name":"@material/shape","version":"11.0.0-canary.9c85d505b.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@11.0.0-canary.9c85d505b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b0335f2caaa495e3bff85d7b2812881b92abce4f","tarball":"https://registry.npmjs.org/@material/shape/-/shape-11.0.0-canary.9c85d505b.0.tgz","fileCount":14,"integrity":"sha512-8dCALVtIgTa7H62MR2bOUdbdushIF3rKBCvikJddz93WAgmeTGGLgS6O71zIsYLQyaWnuIVjui+Bh8ez0r9nEg==","signatures":[{"sig":"MEUCIDaoMW7U22+TnWgoR7XD907O/77+tpTnS8xPLswg05RLAiEAhPSgP1MIamlhhfneWPeRuXf1Ve9AHh8CpjawXWtZClA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22626,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNX6JCRA9TVsSAnZWagAA/2AP/2mPPYGmGNjvzce96DUh\nYyOLBEUh2gwpG+8ZQQR5fDB2xchZHsNvCCxFhADtnBSXKDQcLU01wtHigGNG\neeFdp7HXdBxpLMj6BlpT6FL/9vkU7u2iBppqcKuG2VSv9rEZjVWa03bZOdaB\nsE8u6yMkYwsJGkwtDAOQrJr4EuznnrNy+tTN/1LQrt9eAvkM9tc+7OBhNFHF\nZ8qQHabgPlcDwrnnYFo13cFoTeM8KVVHmulyLouDWUQT4K2b4k3gmorjW9ot\nziVv9ZdB60shSFyQGiW6LzO5qAgyYy2rNdsPJkyZzKh1nuhfo7eZe6UO3Jt7\nCXJ8BA/zU837bIjsTi+NP5r38LYlXxtVqfSWOmO2GeS7tFqtrHvu9wTn+ZBY\nnbVYT+vrF+EYpfj/bUpEKcyUGGQYVV3zaCXc5I+xrf/ZPnB8dxpUp/Rv5DG2\n/2yIqPozR3C5me3WN6o4/nBQSVXRiMTF3IQwkpKnp5jbQ4S6AbE7By3RSGiY\nZsx9iRnBEfHRWd4ZC5M9xJyhAIxcRXUXN5tz61hWK52Av2srHcMosX4fXlPs\nBPXOZjpKuyVtB+NDLzdr8QH9hF6FBWBsYTqW5t3zc7Trf2CoiLyOYjSDTgV6\ne3qft7eDVEGoP7fkhxj6Ey9gFF4qHMqXNDfT7Ppz0tvQ04VdigTzepNmG1hC\nA0Jv\r\n=BOuC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"374562c85250daef48b37a0e27a506a7e81c56d2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/rtl":"11.0.0-canary.9c85d505b.0","@material/theme":"11.0.0-canary.9c85d505b.0","@material/feature-targeting":"11.0.0-canary.9c85d505b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_11.0.0-canary.9c85d505b.0_1614118536684_0.5033993213314447","host":"s3://npm-registry-packages"}},"11.0.0-canary.9f2e85fb8.0":{"name":"@material/shape","version":"11.0.0-canary.9f2e85fb8.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@11.0.0-canary.9f2e85fb8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a43b78ec44d8e1ba51a42524c3618f4092572878","tarball":"https://registry.npmjs.org/@material/shape/-/shape-11.0.0-canary.9f2e85fb8.0.tgz","fileCount":14,"integrity":"sha512-5C9ytY6eBmU3O0Ax72JdtZu+Dib12MkYEoE7vuAQKRA+SLCCCUAn1UlSwn4DIfKcBkIeif3ewatAhiaaOK+jrw==","signatures":[{"sig":"MEUCIDrUT85mJsFbtRSkBi2D0fk4GLqzgPem5oeJZ6kIRRx9AiEAwq9we+iPkUAgpUHMgtPOzuddwrzQkFWdvPiPL7SuNoc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22626,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNbBGCRA9TVsSAnZWagAAza4P/12OIB0gGCZmasoYqura\n2ulwZSGOMFZjPaQHVOm7IL9xioax+c5Kxy4xffkdm6kN4vU6WVJ6Ds7KzYl4\nd7Zs84JR+TWQRkoy5qAGVTPPtFWHVkqqwcNfmq6vKwP/0jaOLAYexLANmMO7\nJB91SvSwKrTTKB49vvLSX8gjahWHeEAv2UbUdqvNtOk19Qwm6oifwsip0sbX\ntsbrY+1zDe3Hw3GAzCfyODSyDS2rNuJ5GtG3cSZv7QYbQ45xTOWy/D/CE66r\nz2Gk9eZhtBTI9ovKsW46s5dtEFZokywuifMrUH1XobdybYkGaMHegKH5mpWW\nvl4rj+znZBy07Ljpahc+QQu+5AjcfKAgAybDs8UoQUloiSfvl550EysuFKu1\nsKoUsUzUj2g6NSIJ+A5o/X03rkmR9M++SSh6b4GiMaIt1ooPZUOI60y38pOt\nz9hIP4VENKdbYCH/yw75dinhSqyt+CHpL8S332P1AoqGY1YfatDBytz0AWFK\nX40uNR2hyEfgISK/gRFwZXcXhgwF6bVpLYhpScGgnu/ezkKZT9Mruf1Ha6CP\nzKyH/eyNgnYzeW/sacvJ2Q9tcM1ZL98LQQqsIKX3CM5/FV9j9Q233Z7yZ4jD\nQN01PNqRW8jgrqV0eYDgmksXuzs3JyX9kuBtZHsspm80cNCBAk1U2lUfF/sB\nmQ97\r\n=DU9m\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"4dfe4e49ca9339b2914b3dfd9e5c12642a0fd60e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/rtl":"11.0.0-canary.9f2e85fb8.0","@material/theme":"11.0.0-canary.9f2e85fb8.0","@material/feature-targeting":"11.0.0-canary.9f2e85fb8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_11.0.0-canary.9f2e85fb8.0_1614131270400_0.7368571360307186","host":"s3://npm-registry-packages"}},"11.0.0-canary.19c4f29ef.0":{"name":"@material/shape","version":"11.0.0-canary.19c4f29ef.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@11.0.0-canary.19c4f29ef.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b3207f67e877103ae6c9e6ab1bfc92c1ae8e4674","tarball":"https://registry.npmjs.org/@material/shape/-/shape-11.0.0-canary.19c4f29ef.0.tgz","fileCount":14,"integrity":"sha512-uFldrGPliLL1pEZJucHrC0eXLW59pjr794KwNbBjLudfk0YiWIRHDMqDs/5m/dikwEXzH0VhX15eFlUu7/Rz3Q==","signatures":[{"sig":"MEUCIGL9tRJp/w1JiaQvGEZ8uNEVzexOG4WYTQSUOBZDlwIBAiEAt0vbya2lf7HseydNfGJ0+FYm6H1/RiK2g7kMa1ohBqk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22626,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgN/jfCRA9TVsSAnZWagAAw/AQAKQuWJ7iFXs5TGV3sQw5\nTkuxP3cPiAwuhySrxBytDErcROMKOUEMaRr81vEWCT6Z1SWUmaCagl9BBeEH\ncjtEe7s++0GnKRlCqXtgMQ8BOHH2vQkZBdUk2IXjqctnrMRGsZzxydiUsiIy\nIcAqk6IU3qFeY0ZKSnBtflRWNmyUpHP0cl2u+4TwXiT/AAfERSloga4EUJoN\nTILv44HloI6NwPF0Yo2a8Vl+KfEektqDWTJyvfMXH47x1ja6OSuF+/htagvI\n4p+9/GNkFc1a2Rhmii38V1f10kgpFZjx1qJIH6OrYIUEy++cz47N6TyE2YhD\n5zaobk0o5Z3c1tzP1/buGgEgNsQLs3n5t0el+D7wOrAK3618GTNunb15tr94\n4cpIuP8sZSqt1AQxlqJz1Na4obVRWg48AMyP8E8V5uB4W/u9WPoYmWCZE24W\nyfMRUBzMI8EHeB+r+WWNYOHea7y+m3xzGmvfu9LuaySPkiOURDAbD3YYYU7R\nHxUiDZm22PuygU++obRH3G1S6yTopEgxb+5gMR5dh1NimXejLvcbNusKpSY9\nvQUTvRTCmX5jg3lJggCuTpNF2LSCzkYgcMVBljFvs1mgp88qaWe3mdWHVoUn\nSfSIgRCEO3QsLOqwUgy23ZRv2mCVEubBIO9GhcvgSWjSxmzRt9VCmLQnx6Ah\nP664\r\n=7h9G\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"cf61b54810b37e81ab57d447f7d050104a2f6f46","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/rtl":"11.0.0-canary.19c4f29ef.0","@material/theme":"11.0.0-canary.19c4f29ef.0","@material/feature-targeting":"11.0.0-canary.19c4f29ef.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_11.0.0-canary.19c4f29ef.0_1614280926829_0.3129176852940514","host":"s3://npm-registry-packages"}},"11.0.0-canary.63df6e9bf.0":{"name":"@material/shape","version":"11.0.0-canary.63df6e9bf.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@11.0.0-canary.63df6e9bf.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bf33a8d5d1177d3ab48e7670edb781d14d1ebfe6","tarball":"https://registry.npmjs.org/@material/shape/-/shape-11.0.0-canary.63df6e9bf.0.tgz","fileCount":14,"integrity":"sha512-sUiJdrr//6Rf8zo6OyUyMlEzUGIGXNpuZHo+t6vxCLliSdzGfldWRt8uamnp6gMUeOygPgyUKGQuDI2RQxoCbA==","signatures":[{"sig":"MEUCIQDp78FimJTKhBbSszs5L7V7ZhYq3gQdkAHJx+bOM/NDeQIgPiy9vFQjVLrm7jkawTA6TK88nigkoNtg4g/+BD5EYzo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22626,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgN/xjCRA9TVsSAnZWagAAdxMP/AqGwCOAeP1wS9E35l3E\nIIrnBkNjAm8MOTDKD+dmHJ931PfQiVuUxDhy6CbRjT4Rh4m1ZAkwYu6t46kv\nyj0tvqBZZg5NbSLxS6cq3st60yLqSGylm+McQHppVBbOIWFbyuod6/NCljfg\nmipdvnQc+8jl3Rgt7Z+7prXScrNJnR7ugUOmOk7hyo9zJnoArUlU3TNSpKc4\n7yK3vkftS8W6UBvR1w99Y+MDb0BPpYrgCggXKtfH/RychgM6eUR69qI7WjDA\nNvZQFFlT7fAepgAXphfWoGwn9x/4lqO9wYiBjfTA/SRpMf+rOBXj9ZZHCV0F\nESztwlwTgAs3g+oQmuXYJXHMdYusPwMrDimyplQ6s3ltgV0d0ilNU1VyikbZ\nx0ys1U04RQOe3KoIKgAB8gSKHws/dzp7nlED/9LFWrWeoXTujD2RDUr6CuVi\nuhx0dTtf2WBRElsgqZdOrzNMJd1Ei5Ij6IVMcd3s5b7xfNkpwJ3KgmqxE3UE\n+mFLV6hxRtdxt/FG8XunlLTwRtG1MCWBqMYC8SF233X/gR2g40VVjEfjRZdf\nll8cAJ2aElxCaJ7SeI1kTbTSk+TCNqCx+DkTdA2qkSPT3wrTpT/IfjTH60Yd\n+sbAtZ4iy2qeF4a/bKtsFl4Z54K6Q02KHNZmK3yGA4Vd6tItltrWG27d1r5G\nj3nc\r\n=pg80\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"6d11b414d4ea43b5c780988e2437ee30c9f1c0b3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/rtl":"11.0.0-canary.63df6e9bf.0","@material/theme":"11.0.0-canary.63df6e9bf.0","@material/feature-targeting":"11.0.0-canary.63df6e9bf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_11.0.0-canary.63df6e9bf.0_1614281826842_0.6473232378228422","host":"s3://npm-registry-packages"}},"11.0.0-canary.981ad970a.0":{"name":"@material/shape","version":"11.0.0-canary.981ad970a.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@11.0.0-canary.981ad970a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1b79d64b7c98592687ec0d08f44b12bbf4b4c928","tarball":"https://registry.npmjs.org/@material/shape/-/shape-11.0.0-canary.981ad970a.0.tgz","fileCount":14,"integrity":"sha512-WLMgyN3PfSin422qSzafDnwJkxMvzSryA/Atd93mgNIxJJKh4wWbPLcnh8TJQfcZk4EicSYQMT+MWZM58m5KFw==","signatures":[{"sig":"MEYCIQDQI+WmWplTfhW4gD9O0+EYVGBMWFpMiT6pRtD2XggMdAIhAJmuOi6JvdKbJOEbBgN5nVrSXCSVAMpiFhhdE0r1BP0J","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22626,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgODu8CRA9TVsSAnZWagAAl0MP/R9SxeiUcMBUE/77I6iK\nUkGo8f7P9F6uATuSW9ST2umW2Db28aCFnKGZzkUdmjAuwGptRro1gk0RpQN9\n0oL2fRmwxgT0WDyaUdW8ZOtUbcqVTsYlpOJW1ULvw+PNtnl9yjyOzSnBT0Nh\nwQqarcyQyfspXPDMO+TJpzzJFTNfZVEfjcUuXabMWmHRHzWafvURazQYuow6\ni/z0VmYhYnsK7pFETUsriOEoKjF5uYGjurgxa7zjEpIaV1WAbRP9PK3N6rkV\nfQ84RrDmBu4DDzyLV5baxBrPU/d9ShzjskVr7A7H6B56hF0VbuoMOD2effeF\nT3CIis+mV4wCgMg0eKAThpNN9lyl8V2cgKgxOFTvDqomFkMnUv0IsNjvBG9n\n4YUdrlBTqCyKwwu7NgeXmAIQTiLizG418Pxv/B3ILeLyI7Y+f5bwVPGAn39w\nH5F0DInhjbuc0x1Bh5hbksgp5mnxqHY1HCLH8/RM9maevfs2sn5sF54zOcn5\nc542TvZQz6mTybblcSg9W/irb/Z0OEqf6cb1hpfnjjlGNoYjYRla5hRFfyDx\n/su1qXXH6Dtv56QH0cxiwLldUvB+NGrw+B4PU41/5g6GcTUrJZQ7BK18rQL0\nkDx11o01N3xKqY/cRSCUPBknMMulbV+IUhpRdKDjf8e3TBUG+B5d4t9RPZkF\nCPJz\r\n=FlH9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"0faf6e6b78f0c9b2c63f416ae85331d13aea198e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/rtl":"11.0.0-canary.981ad970a.0","@material/theme":"11.0.0-canary.981ad970a.0","@material/feature-targeting":"11.0.0-canary.981ad970a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_11.0.0-canary.981ad970a.0_1614298043346_0.3373812326763195","host":"s3://npm-registry-packages"}},"11.0.0-canary.f9c9e39d6.0":{"name":"@material/shape","version":"11.0.0-canary.f9c9e39d6.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@11.0.0-canary.f9c9e39d6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d86de84fafc04b327146625e546eec63c39eff74","tarball":"https://registry.npmjs.org/@material/shape/-/shape-11.0.0-canary.f9c9e39d6.0.tgz","fileCount":14,"integrity":"sha512-Bzno3a+KhJcxs1C/LWvXHsx5P0WbeUfrrs6DHd9zasdVU55zbnKC/0QLyh+qRse7njqybtMksULV+HY+KPkgHA==","signatures":[{"sig":"MEUCIFIq6TZmqbFohzg9PTOFqsbk2oQLCH0hXa9DYfB1Lol8AiEAqLq4OY30wc8o2gdMSpk8/eczyGQmfZ3wiBnJDCuiz0c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22626,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgOUAqCRA9TVsSAnZWagAAcFIP/iG8ZWZDViK4KR7M9iJK\noGLbFmlY6O20Ka6VtcjDG3Dt8DCUq8dipMkb7USVY0V7m5zk5K3YxzrgNB+l\nQimyHwVob89jQ8Jsuy+HAskDXeL2GA8ZbMUdKg6HWqX9GoZR/udY9N4fQk+C\n4Rk7krx/xr/W30GbhO/B7OKHwlC1bc9XVZzvZSftMg9HKUjtNXITmNc9EYnV\nlw/E0gRa4Ld58rrlFdlEJ6+gbCEvhnCkqOgMxlg2KAY6C3+V1uWj6fgTud5J\njIkipv2HSo+j1uMg/Nk4EgMRGfpBllZIdmMUAQOTXfJs8Dlsp3NbxZqVzm3Z\nMimAF2KRMbfsn7FhQTDC4Gdz8QsuzHNbsE0d/ZsBqNXwc4hzorRsDA9Za1WV\nTrZu0YV39RaEui0zs3iVtwnicBZh7MFxHOP9zPTnaawIFuhJ+Oi/aupNhHsn\nJrUW8SPK6ajYknvFm3kTEey0625RuiKvhKX7u9cI4QgHtX2Zk3Pm0/LabkKC\n8ra2s3YcCAq7pEYh6eHecVmZLO1fJDRRmybLJ9NLdu4aNo9P5TDzv9k3yrRb\nKGL2JzU/94tSmiZCIO9GGMGdmOCSVEcJdq7X80eEPGEntVSVvbelRMQwTLe/\nMhAqIgY1pYto62m0izVFXHctMQCmDPD2j96zMWFd5ao0AtDgg6l2xYT/6P6v\ndMEY\r\n=0eRx\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"81d489ae3f1defd63ee64de05a2a330040ae6406","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/rtl":"11.0.0-canary.f9c9e39d6.0","@material/theme":"11.0.0-canary.f9c9e39d6.0","@material/feature-targeting":"11.0.0-canary.f9c9e39d6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_11.0.0-canary.f9c9e39d6.0_1614364714298_0.8130971296655314","host":"s3://npm-registry-packages"}},"11.0.0-canary.c97d7d881.0":{"name":"@material/shape","version":"11.0.0-canary.c97d7d881.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@11.0.0-canary.c97d7d881.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"03215d38b8017817c16a39f6d42c61fd6eb01540","tarball":"https://registry.npmjs.org/@material/shape/-/shape-11.0.0-canary.c97d7d881.0.tgz","fileCount":14,"integrity":"sha512-maSa0qqVPEmx3e4kxlnF95z0NjH9XNL3eoenekLmYwahhpORCF7fI0NnKBjJomHDIcD8D4EI0fxTc9nnnnEqmQ==","signatures":[{"sig":"MEYCIQDp7KQI45mfF79gkl3CMX6+ZhBZGIKIoCpxbdLibGiaDQIhANZCYRzwLp4PiSwM44sc0s0QFFOmU/rgGFzNxXf1je6g","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22626,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPVQnCRA9TVsSAnZWagAAb3wQAJHOuYeTm3I8nD6Pl2Q5\nfv79NVIaBBkDxDfB/sPMUtLy9FuNfkTnStFqiJeVS0PofstU43xIE4AtAbn6\n26AvMAWmU6+03ZEInPM9++qtUR9+bIaR98qWJfsD1dXSFumrl1UaXEyKxJA6\nEYLpNc+VYVPOigkRpi/YsqTrNF55GiJrqJ4Q7oH7q2VfSiT2oqpneU0u6h4E\nRZbVuHMoh/luRJEIcHJ64vkWIgxUyOD0AMsMCeaJCPBrs5ya9T0g//51sIds\nwRZ5VQChf1VGlIh6e5RX+mngJznnFfEDwmzpzPMlZ84Ftf95xW1TMq8cRjrT\nj7+IgSl65Y4m3oiH8ytbY8JyE9qXahvNZ8DjQGb5zF2Mhn0kvmicp/WRMYwS\ndkWJMFPzO+3AA06dNxbvES1CvljPAaYrnATKGAYUtPPDspGzEKSN4/0fIydU\n8nM3XKG3/cJ2WnZCvcUgl1bF3LBobn5ZFhOgZ5ZI5aYdoFbAhMhynDod1Zj9\nRvOErRP5JFWBJg/96cVvJXXva2Qc2uCm3L+vn8kNJ8zuj9gyRZ3u4RCHyTH2\nXwR97VYbWsfCDbX7PK7AN4QSdEhJ+VEnPS7T+/7AIwafKrq76xs5WaIXZsuo\nq26BvkDhRZiVnUlZiz2VR4RRw58bN9MHb2Y3gs6kBAUnYPiH7SFwtF7rzeKs\nQge3\r\n=gD23\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"27a49055320511cea9f431f9c62d44a6490bb64a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/rtl":"11.0.0-canary.c97d7d881.0","@material/theme":"11.0.0-canary.c97d7d881.0","@material/feature-targeting":"11.0.0-canary.c97d7d881.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_11.0.0-canary.c97d7d881.0_1614631975308_0.10744262026249563","host":"s3://npm-registry-packages"}},"11.0.0-canary.bf670dad7.0":{"name":"@material/shape","version":"11.0.0-canary.bf670dad7.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@11.0.0-canary.bf670dad7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5c844096ef0a2acef4d5a0ac9eba24098c1f0354","tarball":"https://registry.npmjs.org/@material/shape/-/shape-11.0.0-canary.bf670dad7.0.tgz","fileCount":14,"integrity":"sha512-0jTX7dXPSFkt/YA/fLpL6bh2SnjM63U9VAeGhemebX2iqNOtTR1oOakfhs4Wtve/1QJb+O8jYopKaC3aEnZQ5A==","signatures":[{"sig":"MEYCIQDDOil0WcaCYFbBG69j4gRgSOKssTnOkufBKB+3OUZAkAIhALHTG44NPAOyBAn/1FmXWQYIiZe/3V+uDLFBbctxhkpm","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22626,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPtZnCRA9TVsSAnZWagAAlj0P/AlV06ZX8aoGYb3jWEFV\nMIpLcQ6oP6oYRxrL8154SbJ40jyRz5Hqa0rWPBXK4qpLDocvds4YT8r+dIaF\nbw8UJUaB1OSlBonhmD2++Kb47Py+cj1ABo6Ls72ze3o5kGrvDF0owCF2kLxN\ngo+Kiuy+AuaNt1RInutKw8ZHuzH8DE7scLqt38N/x+tnDIIWqQXVTIZ/rxA9\ni2+11ZhiORoNHsgcOI1mOhELdZOwZWFOfE3DnKCnpT2hNgaZ6tGe3vA6IgO7\nnvlO9T8sEMpuQg0+lOvG+iYM8cTSZLM4F5rLSpqcLcOfgYKOkgyrHlZA83Do\nALhLvCL1I41yEh/yRINu6WZ2eH6ntaA95MjKAT2N7OH43pmRQxPM/9nNB/f3\n+qNXtjJG6ODJq5TMgmpwEbASjBtaiBogVK3UWBlWG2aY6kew1gDxUSyV0hCI\n3IzepLAwEXI3VXnVUB+j5tjdFqrgOV9DDMtJhQxdxqevBXZisryTSz812bUn\n9WEcaEmJ+vqFwGeA4VZccqPvKRty0WWsDarSO1N/b1TQk717LTYrKF9jQxTM\ndkb8Tt7WGdDBF5wIjjQH2YsVhaYPVMgctdxOUlwTarRiVfYoYgH1FwDd97hl\nscLUyj+lkIhweg9DOa2NissaX3BF+oGSB9/8BS466bnH1keiD5OAVaGBwwEE\niblR\r\n=cVce\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"61b03e5331bd5c886de5c4a57a4edc1b53878e47","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/rtl":"11.0.0-canary.bf670dad7.0","@material/theme":"11.0.0-canary.bf670dad7.0","@material/feature-targeting":"11.0.0-canary.bf670dad7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_11.0.0-canary.bf670dad7.0_1614730854650_0.5620857852887806","host":"s3://npm-registry-packages"}},"11.0.0-canary.c7d98fcde.0":{"name":"@material/shape","version":"11.0.0-canary.c7d98fcde.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@11.0.0-canary.c7d98fcde.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d324b8ea29a8413f8f34371045dc1cf7c4d0b1ad","tarball":"https://registry.npmjs.org/@material/shape/-/shape-11.0.0-canary.c7d98fcde.0.tgz","fileCount":14,"integrity":"sha512-KZHQMS6/PYLWoysTeFSVVMt0ETPdUL90KY83SnB7asPm5gbd2g1JlukPpMcfhwlXKPQ/EhUMpD+MpPVjOIl4mQ==","signatures":[{"sig":"MEYCIQDV649OxGiW8Xr4Zf5/zyUBGntaRiDQM9VfhoaP/ymUewIhAIJEed0S24+MHcEZinMg1b9Be4kCjGomKnwxHxxUw+Lv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22626,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgP/I2CRA9TVsSAnZWagAAHOoP/iRJzwlFhbV+9/WqrTZy\ngYP3RFZp36Ox5YEXVLyZt4Xicgeu5OZLPjnHmAhp1zVPvc6cmHxXX7x+NLRS\nuw6HmuHSQVY7uGI4pkLnbrOQw2ZbTIjzQNzy4FaCVvsCz6vzIV+VeFY+7gAO\n2a6TFM2j9N8vIFAg+cZWElSykGdGHcD0HAxGwZcUNWIkJd2LwvoqOfPWvQ18\nFCFY1zo7Hh8t1iUrSVbZ5gIiUDcCBYNuIOhHzW+S7Ji9qyP9HWriXO0YVMOR\nrsaSrYcsnjFeonrGEtUl+BvS7OmXOl3FmuI12KyvrSRpX2EtD7k13FTBXVRs\nbQz5C28PvXccyC2Tz5tOhPqpIY8IV1egAdqJ+7/MFqdb0+v4Fg9bBfwhplis\nQ7OlDUpiYIlcW2T7xL6sAD6mFocDVvdfnQc+zjwePFmy7KYa3fdsrAojuqpe\neD8o/GsGxGD+uzXy77P66YpkGhoM4KnB2Ugwe/u2r38BCmecInnh2g+9niT0\nOUDOOtxhh0QSutUB1Td/rAkCE78a8w7nRWEwsJpiVoMgRsAeyyEmnhzBcNAp\noPykJrLz6DIWwA4FvyQXZflUdUu54BE8hBad8TE/fTC+aYYhoUvTKIyGT9/B\n32f+s1co0l0g9BFb42ubnfUgUQ8utcRF4cKsimKlwAot0RNYkLqsdQz+nP+e\n9p1t\r\n=teyJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"c5c4c5b417df34d141edcb1fd743d83d7a2b49cc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/rtl":"11.0.0-canary.c7d98fcde.0","@material/theme":"11.0.0-canary.c7d98fcde.0","@material/feature-targeting":"11.0.0-canary.c7d98fcde.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_11.0.0-canary.c7d98fcde.0_1614803509774_0.36374706950452196","host":"s3://npm-registry-packages"}},"11.0.0-canary.4fef8bc1e.0":{"name":"@material/shape","version":"11.0.0-canary.4fef8bc1e.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@11.0.0-canary.4fef8bc1e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"875822301b160f224e0b19904d75c0681b9ecef6","tarball":"https://registry.npmjs.org/@material/shape/-/shape-11.0.0-canary.4fef8bc1e.0.tgz","fileCount":14,"integrity":"sha512-hGi4fFblnE0f6HsK4QAbgb2F9g5jGTg6lfhw6jOIfnIx88w8nlZdZ4eCil3hs4EYdH7EpPn2KpHRrYiH5UJNyQ==","signatures":[{"sig":"MEQCIHQZ4PwaKBXxTnwgsyCiBIMxpI/MWXLeACoEb5EiLSXMAiBVhrP0waRQMPH28/AS4EU9mcWFIZ2UM5MUOeAc/t2igg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22649,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQBqcCRA9TVsSAnZWagAA8FsP/003tT4pSp2xqMpC0ry8\nVuuogHVV2fyQaKtuo5xoJWPoTnDl61Y8EAuTYZ03D014WdE3DzsHeEpRL5yE\naFL/4x4smu0294FmfdAlepzaGFZMK66vXHco5/qnHQzf8kjM4aE99XUC/IE2\n867utQwWYIpDmrxgmuPw0oNO8V3+/aiyzhikIjII1/G2IMa1/Frzm7+VDSZh\n7MaRSfyIZkN1LOrkSmJ4QnB05QERuvGYRTCoNMa8kXcHth15AAG94w3wu4Jd\n2XEbYm+YyYROyx5tob1ZODE1vGINfSvFBHMZnq6fxKhQWnzsn5nuibz4aqOl\nxbOAHI4adZW9Gh6xmYD5TndMmHxbcwTYNkq6QnDRhzjZsAG+HnTo7QKQOVHJ\nJ4o+wQ6uy8BcWV8DM1cdiwwSB5KcN7ETPwXNp6I9RJDn8sMV7wzPKeRGZVXk\n7ZYT19oAqznFnRBY5eWDkWSKwAbtxu7DTn9UwCBuwD+cWxhY69nIa5HHxRz/\nhRKzvhobpcNkcTG2Vylv3yjjt42n6KTH2enDQrJ1px/yeM2c1pHVNfASqd/g\ntC1rgCUUx4OFnCAWRMsbui6d3fvg2TliFR/aTm6qfB9Pwyc3EHcJg85JJlbJ\nLiBXAiAQ9a5oNWu9XYIo9ywOFpfNArLjErGa9b6PBo5QkSGeOpYbsdBgp/jf\n/epO\r\n=lcXt\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"933905005f9c16276caed5327bc6ca581afabb6f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.4fef8bc1e.0","@material/theme":"11.0.0-canary.4fef8bc1e.0","@material/feature-targeting":"11.0.0-canary.4fef8bc1e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_11.0.0-canary.4fef8bc1e.0_1614813851773_0.025697949011779242","host":"s3://npm-registry-packages"}},"11.0.0-canary.afae3a3ec.0":{"name":"@material/shape","version":"11.0.0-canary.afae3a3ec.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@11.0.0-canary.afae3a3ec.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aa4c19e7c8e01035b695b2d0737e45caf35aca9d","tarball":"https://registry.npmjs.org/@material/shape/-/shape-11.0.0-canary.afae3a3ec.0.tgz","fileCount":14,"integrity":"sha512-FuSSvIN5NUJHDBHfEXu2XGcPCLlHe035gJULNxpJWnM1YdKNcKZv/9TIHItCimjWvreq/3NYl9+VTZmyMNJfcw==","signatures":[{"sig":"MEQCIATuVD6M9MXk+A1Iu6V3sNXfyxnr3b1W6o0zb6dAIG91AiA+xtBCpqWle8dIRhV0+boWibEqFiik9wyVlAQ+2Y9ErQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22649,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQB7VCRA9TVsSAnZWagAAHA4P/RKU1iHJa4wi2ITUbEbP\nYxqOztxV+kaKkM5oJP/5EhCT+oYsgE3xFOVkOlGzd+nMmy3WvVK6WhkTSTF8\nme2IXR4rdRLL42RtgmG494z19eFuwjoOqXOEhML22KH61zSfl/IbtOTCAEgt\n8SoO5STyQ9oz5VeHn8jMlIr+d1nn1DIA1zkiaMJx/vNfQLo2JJwyLMyXGWuS\nBjrhj9QrKDRaC76wyx+rqacwlSPewPPBSsKs4YYl2KYL4bKdz2Ds1uwzTmgt\nOYH60finWgwtK7HoT0bMKnj3ooCAr40fnmjTNqQ1Csg+2+5Re3cMxOkSBzri\nnH+2RWU6mU7+/bIVGwdVxPTqsd/H5U8uT1dDYJMo69jfz2cI4fzdixsXKLAp\nII8zKE3mC1WSbZayH93UxHvM1Mdx95ejbDW1XudSWoz0rHWZVXCR5Do0gn8D\ndVwx7QLEKse6Pfxy53kVep/4TL3g1dhLyExHfd+vsxVYDKiem3yjJyaQDojw\nMvs02Gsgt3hqK2OV7CBFZPINy5tJf5Aiyc+/8Q64bXt7gu6VJKEc1E5mDZaT\n8aYGCXxDKTN8zdsXPnLC78B1CoxQJ+tb83e8uO/LBbVcpwmvVkRV+lFXUiVP\nOmrn+mYbQhKuDtIO9Rum/J9VtE1D60D7Nhb5D6aP4UdnKimof/zvFc+qKjKP\n2MnB\r\n=BieH\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"054b07cc588568c82346f2cab8aa8948b77a80d9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.afae3a3ec.0","@material/theme":"11.0.0-canary.afae3a3ec.0","@material/feature-targeting":"11.0.0-canary.afae3a3ec.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_11.0.0-canary.afae3a3ec.0_1614814932745_0.8170731948178731","host":"s3://npm-registry-packages"}},"11.0.0-canary.0a0b10f22.0":{"name":"@material/shape","version":"11.0.0-canary.0a0b10f22.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@11.0.0-canary.0a0b10f22.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d48971437acd9fd081d60a1df2e24a6af0a27a1d","tarball":"https://registry.npmjs.org/@material/shape/-/shape-11.0.0-canary.0a0b10f22.0.tgz","fileCount":14,"integrity":"sha512-nZ7RwmQbMNJKC5rQjRkz3mO2ZuGCo9zZbL4kUmlJuBVGAm0SWELvkhSumg1fpQgWEVbtTlpqLu4LjgZ0glKnMg==","signatures":[{"sig":"MEUCIQDJ0Fdr/iU9ZVH4st1Q7D9iZgCLT9/4DNCRWif6poIDWgIgc79GnmURfx3H5Sua07fEi5COTd7yR1VSsBf5eC+5dok=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22649,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQCMmCRA9TVsSAnZWagAAPOsP/1k21hfVJ9/nbfp2Krd9\nxjnjqFcibRKOerWC00a43zG0pvQjeHdyU5VilLWwLka5R7FKudiwqvFqHOHg\nhul1Xqb9xIPpJ+3r6VkxIilbwoN6TquVVX5KIaJcVGpAWK0HWlybfGubLeNa\n72F8AeHYbSV/DY1dsW8nMcVtKuR05WCMQubh+xCULe8dV0LnQQY51AlGL8I/\n9ssoN2F+vwyPgkSYKFgkfgOfBQi1U+kDhxauxcNI2mTldSM5FjebJDPauu3V\nWDYP7yhYXo1F50ny1vwuH54l/EBpfGqyaePvySxHHr8kLK0d/WqOjVA1qjBI\nsy+uKMwAHnBsqPNYiFfyRjn16XWM2tgLxNhHWtIWCbUX0VX492E8vvlAVfjd\nXqMXCJ402hqFFnUM3sXqOyQ9iR2yhBS60knkDijhCrfZZZyuwDltYoXa+w4y\nsWafY2qnZQvNeoMH+dahSTwu7aWZtSEcogn6Jcipa3aRprsrxvlSeBb/xRUQ\ngq34XjuI3qU9ba5486eNZfSKK1aLUbuF4nQbiDEYrsgT+XxfZh8cN7/HNvxJ\nH7zm4IDWGZbCqCUHu6XDEYh3wVet34MVip6+niuCf5B/Je4oB0ggNS4tT/JK\nvKZDaYsmu4FldpPp1l+BbUfM5zN8tkhKlonHYH+w1z9F/AKp0sEYoscIlT/D\nmrJm\r\n=bvql\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"5b560f4bc4c4b50a124c9432e81b3287bd348abe","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.0a0b10f22.0","@material/theme":"11.0.0-canary.0a0b10f22.0","@material/feature-targeting":"11.0.0-canary.0a0b10f22.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_11.0.0-canary.0a0b10f22.0_1614816038333_0.19624147924729463","host":"s3://npm-registry-packages"}},"11.0.0-canary.6f678a91a.0":{"name":"@material/shape","version":"11.0.0-canary.6f678a91a.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@11.0.0-canary.6f678a91a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8ac439a04f2119c31adfd4b0d9c7e424ac210624","tarball":"https://registry.npmjs.org/@material/shape/-/shape-11.0.0-canary.6f678a91a.0.tgz","fileCount":14,"integrity":"sha512-Q22l7kYuA8u5lHwYuEkO9GDn79yWS6noUyIWuYbfa2yMVxcIdleigPht9sCh03HxkESPXb+DJU4nYyXNuu8AoQ==","signatures":[{"sig":"MEUCIFvYN4A4XQoRM3cWRNMnAmxHOZ3Ly/xJv+n/4QTzti/CAiEAiNYHSZvoejnJ3hW2jNUbzOmGRZJS6HeIYLVg5rTCDM4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22649,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQSmBCRA9TVsSAnZWagAA8Z4P/2mNl1RRnQhGotpD1gqp\n+iDQ6NtGIyS1W/wrtQonoPtuoC/deTnppPlUTWnijvsQMw+LClwVEf1NfVOs\niJaJjklByQdOEvc+dMy+97BG0uvfAPXeI8lfcFDhZdSNBnQsMNNmH54v/mde\ns7BghMN00IVn3z0yMi5afQUtStFIH4fJjXL7bgPaypDq4GXqFTzzhtXQG0fV\nPqdIo/NOPuW9heHL75uLMwGJA/B5URwvAKwXfdQodb+c3p+3ICbOAQgeJwtq\n1Ekcs0zEpLmYPz7Izo1G+5X/AGB+Q4/pBbZgruhQQZyAyqg9m1b4ZlEjK4Xs\ndY3FaSLunoxuTWnMN79jRreLJ/ETs3PeJ4+bVrV6MXUVYePRPdcmH84f0Bye\nfs/U3crtnFrTyH3cMEK6zM3ngKT2DuFSKQYxvWdV8L3mS13Ex+iYYiSqb3dI\nxvr2hQLC4k/WbYpQrbJaBAWepdt52uMKk+AVyU4EeoL9IZRN28ui2NeqxnT6\nK1kBAqMzBw4asYn5igrE1rI8PBkuYT7mGokY8KGxeZMjqBkG5uMhy37YKodY\nxVZ6w7zR+6hvYy2JKhf3nwEWJmFL3FscWUW5aONAN8jC4M+oxON1f1zMCuLj\nZne35Ar3KYwqkLuZzQA6ezb8+r4BJd4ub349yzqdG0nm4Fpt0jp/vm4b9pZg\nhbVb\r\n=gN3+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"863e8a04081286602f8b0c9bf446655b9399e8c6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.6f678a91a.0","@material/theme":"11.0.0-canary.6f678a91a.0","@material/feature-targeting":"11.0.0-canary.6f678a91a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_11.0.0-canary.6f678a91a.0_1614883200777_0.8378190823296241","host":"s3://npm-registry-packages"}},"11.0.0-canary.f5f1b613c.0":{"name":"@material/shape","version":"11.0.0-canary.f5f1b613c.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@11.0.0-canary.f5f1b613c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5827c7b54ba2e2c9ef461ba670a63ddae73824c1","tarball":"https://registry.npmjs.org/@material/shape/-/shape-11.0.0-canary.f5f1b613c.0.tgz","fileCount":14,"integrity":"sha512-pt0RoLTd7rlmcpRSkIXWlCb8bSJdAY7+YeSTiEumUbYq85e1tMnzXA6dxLno77lSylBFnyEyP0dzL+Bs2BcPYA==","signatures":[{"sig":"MEUCIQD2CW9pqEfIVDuAxeO+PJbeRQpTG0TzKfb5j05OlRZ0ogIgdippqZywO6+s6tc2fM1aFlri8+BVVuGIU6u1wgPUh9w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22649,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQUfBCRA9TVsSAnZWagAAYrMP/R8RxRW1kw3vYuXaPdNB\n/bFV17wtwH4I/1LlcmiGXbzCMNy/t/zNuV8NzswdqYDHQGJe7aCroofsVZXl\n6ctCYNoZUHW0t+WbD0M5uJZDo+ii5PzgtW6/Cu3N+W/pRO9yR4pfQehXeEAy\nGflNuUbwoOYj1fY3t9+la+o+LdZ2kUOG/VN91VLNvy/Pe/CjpXHoeMGOfqcF\nStBdQ+Iy5vDhr5JbeRjYOQDbNvDRXPy1zEpj7kKZzAty5Or3ClCUoHhM97/0\neT4PsowNx7hGKQO3zF4JNIukrXKIb0MCbYy5Q0cLqlakH7ByHrq/6rq3p9Xs\n9LWp0O7JvjYRV1tgXhrrZRgLLsKrf4Te1sqbv9CNGJv/t0AVex+4IYiWc/ON\njR2AfMneX9sJm/lw6VA4cJkFMZqer9i7tthanjmKVDgEz5gj5Ze/iuWAqbI7\nHWqLasS0Qjt8o0OEKc3OoX/0b720rMjJXhqtdkiz9aJqgt5hBbdJSjCVjCod\nDzrZjqMlNaN9ZOoq/qD8fa35ZOG2mkZJUicOWQZaOQKv7jtOi08jDBUwqs8U\nVe4e4cYUt7F06gnK3Gc6Q6zuoFElnaUyc9xlMzsYVAjh/r441CuwXarYrf1G\n0qPaXSpBb5k9OpgMljNZla0keeWmkgPWedWqwR5qmKZnFopAufJ8ugAskxAj\nqcMP\r\n=wl/1\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"20e2000d9ec732c7cdd0b5c15381f0a55f778036","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.f5f1b613c.0","@material/theme":"11.0.0-canary.f5f1b613c.0","@material/feature-targeting":"11.0.0-canary.f5f1b613c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_11.0.0-canary.f5f1b613c.0_1614890945532_0.22237874466526897","host":"s3://npm-registry-packages"}},"11.0.0-canary.606e767ef.0":{"name":"@material/shape","version":"11.0.0-canary.606e767ef.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@11.0.0-canary.606e767ef.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ce70832517234522c7ee899e2072bf2f8e331ee0","tarball":"https://registry.npmjs.org/@material/shape/-/shape-11.0.0-canary.606e767ef.0.tgz","fileCount":14,"integrity":"sha512-tKMApXjEWMrzmEYooN7R/svfn7IeU1ImKGdZsy1LgT+WFR/irMCAH2jkCoB6OMf0YAeTXzX+WyU4q9fxlU8dqQ==","signatures":[{"sig":"MEUCIAQUjAsBHO2+O0NefqSEulzYMASQvDJ7x8ZmYIsYqIxlAiEAoxBO17ln0TSnIZ2MH61NdlMQeRZqDKWVS+WO48HH7u0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22649,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQVT8CRA9TVsSAnZWagAAvfoP/iuoWphXnAlmts41TdlT\nO3VJWdYVL6V8fuSNg3L2wRubSa5IjsBkz7OsPrN7/64wx73sw5G7475mD3vv\nuqEfnntos05fKZfsRK9gt/L4DobjjL2YzIH+4/CdZp+i2wvThs4wCdUn5w+I\nWGLeAUmwFqQRJ0joxREoC3dAVCcthdIvd51vtR2CTD+7riom6/+t7k/bKuSV\nFJJoIk2DC8wG8uomHh4lJkd6s6OPBaXelRTiL2EMrYFsHKcMbx4thLuwFM3x\nP3vxU+54UKPXeSyD0HLCJDuU+F4oZFajpPf7lZQW1FMlQdQG++RJIrsyw6/k\ncSZ2HFmCV07Ugp69h3FGsKLPSJe2DdkLEp6f4g4hSKl+JyOpNw9RfwDXUt8G\nKD0mk8RHQGA739plU0ida2MWgYeod8Wl0iQy8CyO4gqr6YWOtdLNa0sa8zku\nnjpONzw0lRZSMtS8ga3Ip91YAVrluzgKqIB2V2wo895ml5DnT7Y0vtjol7O/\nnzO4I0jtYfNeMzEnW/Nf+aL+Xvot3/JN+BQ8v7CidPs9GWQDDKQfiY5FDNGp\nT6GB9l1mmXHo8oDkqXRSA90hsla7V+NvGW3UfKY1k1zcjKHnCwX0u7ynjYzH\nlwNgNMZidKFrA64vrsP3LVRJ1FPLFldPYa/VC98NLoVKIDigMQ0NSg1hn2Gx\ncb+c\r\n=mhcE\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"34c41b3553e1ca4ee49c0c36a1685f3f462d33ce","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.606e767ef.0","@material/theme":"11.0.0-canary.606e767ef.0","@material/feature-targeting":"11.0.0-canary.606e767ef.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_11.0.0-canary.606e767ef.0_1614894331728_0.09153513834890203","host":"s3://npm-registry-packages"}},"11.0.0-canary.f77a4dd1a.0":{"name":"@material/shape","version":"11.0.0-canary.f77a4dd1a.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@11.0.0-canary.f77a4dd1a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ac22c3603f44b750c45d9cdad2a605dfc087936e","tarball":"https://registry.npmjs.org/@material/shape/-/shape-11.0.0-canary.f77a4dd1a.0.tgz","fileCount":14,"integrity":"sha512-S4ObzzoKlx5qX4jJ+wigMM+BfhNHfuywv0DBRatKAjlxrRB5CPrYQRf7zgiDGJgdiZitGCAnL9Bgaw44JwTPaA==","signatures":[{"sig":"MEQCIC6XLsH5nS+VbXOGpUghVYM2sNVBy+WJj11kxC2PZg/ZAiAogeNdkLMGZMQPR4aK77hir9L04RYGkziFuojM3D4gJw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22865,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQweYCRA9TVsSAnZWagAABowP/136HyNlyM3N4Tp8Ufgq\nDev7aIW/BymBW1lQLH0EGAjMu/KgfLJ9blCqdQePk8N/cWwaA5c37QkWDxGa\n/NU+20uJA4+J6B9oTxKhw+qoHGcyabIyUnWnVrjyLKqgyvOuY2NGVLvSNMKR\nqfGCRMnFtka8begj0VFSXzLZ/D2asSwj9XKPFBbbP3WyMXnsqXgtcK4IosOa\ndnwaHhWK6CtKD1gy019tnXp9edZSC0ms+S4adLi9tCZEgehjhggSyKKL8gg/\nqX5Wdlq4i6Lz3XF7y/c2ROdViRS+dGB4MMSQdUtSn04RiaG3h871gYslvKlq\nRDgEGhTt9y6jmYW1xuHAkzhFBXZw5dwfgX6+SohHXbeg5qooRsMXWhiWHbNL\nypXzKWOK5wmm0XcwuYhefJcPevH9NPp7XANZqWLR4nI69Y/hWaKkTQsLQeh9\nO18w/NIyoF/tlrRjBb0SxMefKb7lMMBw+RyKQ3pV84rymvSotdSi3/bRaMjA\npKx6k2f4/wMO+lOurdvpz08OOo0uWRCifpaT/Nugg2fY3UyJJSC11aVAdLK2\ne7tWzGa8JchztEzRc+d4pSl1277o+ODqT9khGUDAizGXzo9+U+9xTFwZZXy8\nr5WGD+ahhWUoqE4PUj8uOqR5w7f4hTlbTdv9zLxlbDMDHPPuFYVJiOMtmAul\np5zr\r\n=ssBr\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"9a729bc3e368dfd8685190e8460ffef16eac8947","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.f77a4dd1a.0","@material/theme":"11.0.0-canary.f77a4dd1a.0","@material/feature-targeting":"11.0.0-canary.f77a4dd1a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_11.0.0-canary.f77a4dd1a.0_1615005592503_0.9873356790154355","host":"s3://npm-registry-packages"}},"11.0.0-canary.2d6ba2c23.0":{"name":"@material/shape","version":"11.0.0-canary.2d6ba2c23.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@11.0.0-canary.2d6ba2c23.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"694412607e6d3a5d24789ee7e8113246c8a36d7d","tarball":"https://registry.npmjs.org/@material/shape/-/shape-11.0.0-canary.2d6ba2c23.0.tgz","fileCount":14,"integrity":"sha512-dvQLwimE6ORagY3g6UzMVvSJz0cyRcmwUsoUxnqKcx7bORaQRRgK0lhA1L9Tn4Iv9hUGvzX8BPBPN94QoPmLaw==","signatures":[{"sig":"MEUCIQCV/6D036IRSwxtbWmlp6lLCbGlwQPJ9bXC88rsQfoc4wIgGhZoyjJ7KQCyfzW4ypj5T/232XsvZP9u1Fy9YKU9fAI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22865,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgRqi4CRA9TVsSAnZWagAAuJoQAJnCKSyVxQ2M/WH+1B+h\nrDxxfPsxxp6YIYTHGEh4Z5j6qvkMNEYpAYry+stE13mh4zw6hL6IcJ9v4Bkk\nbTQE6D/t5XiPZSW37e9LM79s3L0mWEWBIkKnfI6mAnZDkRYHlNrEULcXyjhb\ncZ4BE0TUGf6GBbR0xbThjwwth3B9OX/Fl3pXkCMNu5qQ15o55bl00jdkGAF7\ngY9h4zE05OkLEf4j3S8aRd0+bgWFLGqFVILs7NLmLjKJDFOAAJRU5IkCV1ji\nNGX/ELGZ/WFnZDGQAJkps7ozrZYc1qixHca/xBko3bIZ+MY/cyqJgnFdgjrM\nyg6VPVlAueTpLa9TpyLxwVMtj1G6+tal4wE6FTNudrM7oEfXKkhvDpDDELIf\nN2mw8Fzy5MbKfToF84fX8yohHYLdRC6E0CN5kRCE8lmDfMZgoetXK/49kl1M\nkeWwq+GeW1dKWkqt4y9JI2cj6+FEX6TH+RE/+A8iyaatUcgwqaebi8jVccgd\naIvDgJ3h8VIU1myp23lvq4wHjZ/91dMbv19DDHJYf4d1+lzwZO7t3zccwjDG\nqH/gCsCY5Szjbfp/4XqzgRN8faKsgnJREK3F9MaSN4qXp8fV3rZZ1ck7M3Dv\nZHIDLDGYz3pN1oPLlKnVrzWs/zDoPWcSNLedW+g9gmTP+ilt1hOvdrDDsWOS\nH6Dw\r\n=OUr1\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"a0b889753d981e10bf70b9bcaead70c1549cf865","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.2d6ba2c23.0","@material/theme":"11.0.0-canary.2d6ba2c23.0","@material/feature-targeting":"11.0.0-canary.2d6ba2c23.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_11.0.0-canary.2d6ba2c23.0_1615243448242_0.2987666911747697","host":"s3://npm-registry-packages"}},"11.0.0-canary.7522dcaca.0":{"name":"@material/shape","version":"11.0.0-canary.7522dcaca.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@11.0.0-canary.7522dcaca.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5e36bcd88e8b5d7303ebca475b85153e8eb1bf4b","tarball":"https://registry.npmjs.org/@material/shape/-/shape-11.0.0-canary.7522dcaca.0.tgz","fileCount":14,"integrity":"sha512-+LIuMxSWHX7+bFGcrQt7j12IEVdHkoy27OZ9jvBsoTd/qgZF1Na3YHSeJaqZYBovxG0zYQZOYX2qL+Enc7G8UA==","signatures":[{"sig":"MEYCIQCwC+NgFj4wx/nwZ0Mahgihghs3Fol2skCFeRiNIIf1yQIhAMbiNFO3q6K1R5ZbOwb+DqQWE9+kr8ZJOSOLWJyOL43n","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22865,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgRsDyCRA9TVsSAnZWagAAUGoQAKNZaPfvZrjUwp4/6nJt\neMcF+nmDMWiERet1KrVl8lQ6d1o9hU8OsnbcDbedJ9gIyXzRFpUNxbJIXFid\nkthIYMeHBxWi11v7GX9MiK7VppecI81BxkyC4Yz2Y4CUx9QAWGXK/g4HeMs8\nKZhNonm30PfbL/2/8NpyNL2kq5nNaMDmViVBpU5LcwIdO9iJmtKkbmBlCtmY\ndX5JV9jZvZd8JcY1rZWEICBNM7fd7B9TCdM0ogN6CM8k9DfJRSU4jsbOTnJw\nVXO0wQtTHcpp6f/qa4ADgIMgD1Dk4Q4/GbUanJghqPTjPd+Yjnrs7ruvqioV\noURfu6lgvWvHNM1PTJ/ZHF6GgKd+kLsqeQSqP8OzxzJPo9isMMMXQHalQJlc\nv+c6xMGkTK2SAbjTjrMqILlsx/FF+SVcOdqyCY7G/z79m7kG6jtThsBBlKGU\nrr+oN57EpnwiTZX2jx2JLwG0OjemX5D18b8U4KT0JgNTzN87FKAHjOVSxkji\nXRVCoVLEPSHFG0LV93che2kNrAirdU7idDekuEKmBTVRDQJQJKVgcx1ErGa9\nknVzDAXKeeflbRSCknYSc9q3KZIxmYvkYdg3DwN6MUqNwjcyh+QhSOHaFBZ9\nEVzIzMbb2+23sOGpO3+xg68p3cUboOBd67sXhBBBsFTblt/JE+hR23WeaXf7\nexFj\r\n=Wadr\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"6e73ae404aecb0602a5da37f40b650181ac48062","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.7522dcaca.0","@material/theme":"11.0.0-canary.7522dcaca.0","@material/feature-targeting":"11.0.0-canary.7522dcaca.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_11.0.0-canary.7522dcaca.0_1615249650374_0.9094316636830007","host":"s3://npm-registry-packages"}},"11.0.0-canary.5c0ab7401.0":{"name":"@material/shape","version":"11.0.0-canary.5c0ab7401.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@11.0.0-canary.5c0ab7401.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fda1ee352b1bfb30c515b67ab990d095719cd2b6","tarball":"https://registry.npmjs.org/@material/shape/-/shape-11.0.0-canary.5c0ab7401.0.tgz","fileCount":14,"integrity":"sha512-MzWSdoprg8py+QcoCM1P+M8mpUUOsQJ56yarAPp+JZFPxaRmg8OxZVGR2/hLTkIvMbWR4G6MsXy1CSSmjD0hqg==","signatures":[{"sig":"MEUCIEiIZSFiTSIUIblW/45x3vNYZuuu7AOr2iISrQRlRIJDAiEAiy4Asxg9HQ+ysu0X5PL8JuwS3LifNfSEOciDv5CkVD8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22865,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgR/wjCRA9TVsSAnZWagAAmHoQAIIHuqDHamBL10xw4ctf\nzN0S3h0RGFPGG8t29vTQd3FmwSXf4gVne8TkRf6SpnMlwmT8sdXt26Tj22OL\nCl8KwmykEhjtTB5K66Ztw2wCiR9BEHZJKXKDpEi7QjLt6+QhZCNWbJCH+A4j\n3SAWjLpagRojz33iAskFAyhwKnJ9OUadyaiyJMyi4bf4SuF86+qqmYxnHm06\n7VQopZjp92X5UvWu+UE0OtwpZ7afIwxeSWgvOlZDzKAZ26GKL0d4MrbRc4J1\nGbxNp5tNzlHk0eWeHwDww+PMns2p2Fvv2U7auUSV3Bk28Z2qGCyMVZ1uvi7R\nflhNo+RDlRZ3Vx4toQosvfwthOqh/6C6XkRLCsNxzAO8tMeSB/Opa/nFuD9e\nMG77z1h/7FQNn+hLdngw/jiNIg1bzeUqSmegJOvM65atq9Qb9RZnsuzgJ34T\nAxjL8cnqH8zICkZKLguWGnfZGHTB0T4+uBEgrMwUGFaVr3MFhhizeJxJoR5S\nq5BMHw/fiDRJ4ti+n6KiL6FDIkT+PLa5go04kHwwux9JgOXYelc6ZRhi3PZh\nPRXXIgkA1idzSvy/B3xmcPdiYDmycky3QiYJMZQIxF76dcG4nic2Kw7pRm0c\nJdDN7Z/WzV3x3aW4HkC/upCX3PBh48SKSHhlKzNcoE5Ch8++5gc0Zmg7OQN8\nfX1y\r\n=g4Qn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"95ff5a1121ca15128776896b8e4759594ec51246","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.5c0ab7401.0","@material/theme":"11.0.0-canary.5c0ab7401.0","@material/feature-targeting":"11.0.0-canary.5c0ab7401.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_11.0.0-canary.5c0ab7401.0_1615330338712_0.6421501638170466","host":"s3://npm-registry-packages"}},"11.0.0-canary.59010b6dc.0":{"name":"@material/shape","version":"11.0.0-canary.59010b6dc.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@11.0.0-canary.59010b6dc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d075a996824e9019624501973e091e9000944e39","tarball":"https://registry.npmjs.org/@material/shape/-/shape-11.0.0-canary.59010b6dc.0.tgz","fileCount":14,"integrity":"sha512-A0A2m/UxdcweK9zLmAsOooJTo9HPzvT0wDTGUCyTQ9hFUsB90fIlz9phJvXDYNfy4DjKMr+OQANxE8iVBUMR1w==","signatures":[{"sig":"MEYCIQDfkQG2edbr5kQenLkA+ZpE4PJEPVyVjul9BnMl8/IK8AIhAJ+buZ+o1vwqjWUCDXhJ/Rr8cOrGUG+coOpDmGzSQ3mB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22865,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSPpnCRA9TVsSAnZWagAAGeAP/3ReEKe8kUjUFEwiQMmM\n7dkX1fuk0t9VlFUf/YLR2/Lmo5a77ryYMqUaoFtKIjxbTyVzzweHAO9N5Cm3\nRDOuDR2TQIFFBsMoRLoj3L2+yokHLfDxTJGfq7T7DktexzsE5yWsYOdCfVf1\n7mWeNLrqpQt43hkt+19a+lFWWhdpn1BAC7w7AopeZhm9bg/gTuzs1hxgIyQ/\nLWv2eg/p5rm56jgpUwpQNYBxw+h1EdO7XYVsf2Ck8bzK+iDx11g0T5sbNMXs\nF8OdnMG3bacCdDcUYjjJrZVc672oaffhemehzCA91BMp5T+1i/hnHjgoMKvt\nBOYxyCS9Eh5N40OwrhuCw5FMUrXxYAb0VT5jCMrjpt96pUTUjGIoJHZj86E0\nn3f4bku1UsxoV0dLNG+gmH8vwPkarhyHRnLoE90Z6HDEydbVI1gHqt6UOJZy\nPL5bFzkNhWvzpSA3uC4xhvw25kqzyh3ZrJ7GazBGdLzncJhDD33khEtSNM9p\nRzigQqrYmMrBG0iwwuSxu11Jfg5zGDtUoR9MmC4NoEpZ+CvSEhUqC54Ctex+\nRlYpqM7nkV7uRVbSSvDgiV2Moaz0aAShvBkqrAEfOzw+vLhNqyoqMViwHC15\nSPa+j9mXsVK6Vu6cd6Jyc6fbKDjbvhJ8pvaNXuLnVLImp2/Ks9MpC5PvJf5L\nhh6A\r\n=NHw/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"e697574285a5102f4c1e5002a85ae33a3bf2210b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.59010b6dc.0","@material/theme":"11.0.0-canary.59010b6dc.0","@material/feature-targeting":"11.0.0-canary.59010b6dc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_11.0.0-canary.59010b6dc.0_1615395430697_0.3846738466492954","host":"s3://npm-registry-packages"}},"11.0.0-canary.9e52f5544.0":{"name":"@material/shape","version":"11.0.0-canary.9e52f5544.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@11.0.0-canary.9e52f5544.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c5f3fb33db970d591a32ab7fc45e6bad2a4a1125","tarball":"https://registry.npmjs.org/@material/shape/-/shape-11.0.0-canary.9e52f5544.0.tgz","fileCount":14,"integrity":"sha512-tvfaBpelEWWe7ofjo6WmIMUMLFoglf6rZq1U+kUwb616/xNR7/qeva5o/TvLQ668f2vaHvhZvI0GSQMvuc3U6w==","signatures":[{"sig":"MEQCIBJ+U1FBmpvM1APNGLzN+cW0HdK6MnAQlUFrYcamG+9HAiAb6svaNVLStDebfHdh7X1yz2kF2M9TZG3kqaRUX3x/Pw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22865,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSVVFCRA9TVsSAnZWagAAcpkP/Age6twJIdE/q1ULZPq7\nKT8cwLY7mCb0SISiHAE61AS3X7T1mQZy5ISFO5xtHgb0d/VtoUbeS7jEkoe+\nID0cDcEE9oDsUR7RrKs6/o0uJIn08/OYgq/IKAo4BGHoheCNSQklFbkOLJpA\nEv951wSFQB0jsDL1fHoDnHVTZU6jnNF5+n/iRWNn6f6BqqX6QiJLLwo1Q1it\nrPvzcK/D8t6OredKAEnwObnMlQWn/qYZ5JHtpAocHRL5xFFbW7BA5/sKLTIx\nqcIeJ+rLy4Tt7qvoPANTkZMOYDJ3ZE+vOcTKjT24ExfYM4FF7JIq1E5O/uZJ\n2WTmW/UhUkiG73nimTjCbYVC3iIxIIDbtxMVjU4lWMlva0yo1+V5d4ynNInB\nPv3TeAN+KtlanCLffUhbo+rpEmPTCkCvmGY9KqT8w2Pn8PsJg95JEWjEkQWr\nEIkzNxHNa/SlZksmaENgF9BVC0DE+9Ji5jT878Fwy4S8Qj23T7Ws7kMyxrQb\nGKjAAuETudh292IbaaRhNcm/nj7C+h0ALo3KEM/SraLbOk5HVU8ur33AJJEi\n3NSZWBlHvuQNpoectXR1YA54oXK3HWY0oSpEhl+b7KQAF8WUCgz/JahWKrEe\nJLoRkVojKq9QY66N+IgHqWeQ6foRG6y9rTRO4eYdoaEr0EmR80y55kbDrrz2\nI3wq\r\n=phFG\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"4763f125770ec8e3a6ea4d8f1f5f607371847e45","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.9e52f5544.0","@material/theme":"11.0.0-canary.9e52f5544.0","@material/feature-targeting":"11.0.0-canary.9e52f5544.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_11.0.0-canary.9e52f5544.0_1615418692957_0.16147117815944467","host":"s3://npm-registry-packages"}},"11.0.0-canary.a678806f5.0":{"name":"@material/shape","version":"11.0.0-canary.a678806f5.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@11.0.0-canary.a678806f5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a71a5c394b35474201e0163a89681253920e95c0","tarball":"https://registry.npmjs.org/@material/shape/-/shape-11.0.0-canary.a678806f5.0.tgz","fileCount":14,"integrity":"sha512-XAfjavXxX18gAy6GczHXAs1G7uXRhy+WfOVI+ht5TEwCST8DFSdxpkx9AUMmjF4Go5Yb/G8uSllJL8PlNuD0wA==","signatures":[{"sig":"MEUCIGHs784ryzqTL/Hmgv+SOUAV1ZlxqDk0FxstIBifxcfPAiEAlUJrcOIC0uT5RZTxkMCiZsoQA6OpQSGO2GZEJSWpYtc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22865,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSXcwCRA9TVsSAnZWagAA+gYP+wQcYyUvURjbnDVop2B3\nDtKx1c2sfG/3xWI3MBST0tqHx+/V/EdRKDXsYbgo2rhjV9sL9s7rFKiM6WbA\n62yCfxQ81F5uC6ZvxH0UZfPBjY4ET7MbPEIMpk1Ln7T/Vkv6JO/6dvEbMX5K\n1EqEMy5m8H6Y/yJKmPO4qslBsYEHIiuxar3M//3AMYitgeLq4R9x10vy8s4X\ni+MLZbLiqGQS+97gZAt9lDEscwmk9YOrwvQ0h5x/cUTKPIU93UHMT4w3E/Lj\n9fWof1SKqzu2GMgP2DsHaYHYFBr1QaeemQextC23aYXpNqZPOqnIO1EhHrcC\ndJABaEdPgxfzxmwMtV9pcAN54ceDkh5h1A3A4EJpw3y7KTbN15GyPYK+KNsm\n8lHsg1ZEoKX/UaATLATBesPTlRhsIkmLQYSgZBKp3qg3iNvCmCdu7AHUpSzH\nzWkOjORPHdWhwEAAmTD3jJhyZZrYrgGxa90pi1ARn0cpJPJ/50ZTOxuOzLTU\nzZGS0oAimt2IjTLMfwWte84JxDjQKzTUhOVom8UrGT0LgDBYzExJ7uOBIJ2l\n5JFi7Kv1Z3mG/h9YoMrHqnzZtLV93qEnLAb8uF43C/ccdODqTm844JNZWLJY\n+LVTQR2ZbxM56jmyWU283dfsLW4N4d86D2k1Q6muNAVp6mspDe7TENiBvhX3\nUBwf\r\n=auCr\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"a724ed1e64d54989ee4c27c71935f90fd5614f3e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.a678806f5.0","@material/theme":"11.0.0-canary.a678806f5.0","@material/feature-targeting":"11.0.0-canary.a678806f5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_11.0.0-canary.a678806f5.0_1615427375667_0.8954920826535835","host":"s3://npm-registry-packages"}},"11.0.0-canary.b2d22df5b.0":{"name":"@material/shape","version":"11.0.0-canary.b2d22df5b.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@11.0.0-canary.b2d22df5b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7c52fdc5a58fdc5b9116cac0f1900ab7e6b8a323","tarball":"https://registry.npmjs.org/@material/shape/-/shape-11.0.0-canary.b2d22df5b.0.tgz","fileCount":14,"integrity":"sha512-3fmURBecmnQDzAquZfngsBhx34gLA+1hMudg/4JuBOwAW/WEL6dG9ZYAdQoVqWCxKttB//4oLcddWPUUjjsdkA==","signatures":[{"sig":"MEQCIGZE1iPhWIvc11VXuEBKytIfq798862+TTdM7aFugchZAiAlP8vO+pPpHW4JkM0MCV4dtfTYFPNDpROpdUHS+0+MOw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22865,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSk0yCRA9TVsSAnZWagAAeVoQAIlgi3hQgon6+3TnzNO/\nEFnS2Xga1zaDRy3M9hwbO+1lXz6ymIw3lauhfHWSE0lSAyN++iMuBA+0M5A2\nKiDAIi9BrCX/AZHV9Sc9QMSh4+3Jg1iRhd+GhvWJDvS5P9bBQ8vI5ShGeiVh\n1mngOCIVXwsX3aIggQGyluF/MEdYL26UM0KTrVH9OphLuxrL24wWJd70TKwR\n9nh1Ddrv7Q8FmamS2MM1H6bm4A+3hZFOEGvhv5gZcDx532+w0jvVDd384qq5\nycHzizpMdsHu9BQ2g/rkmmiD1CDa2Q2SogEjzDyQaWbkeK7yqkGDf0rB5YtN\n1pJFGkUJJR2cFH1leO1anOEix5M5+yGPe59rj0wOs6KHE0dgozvKkAdkgtZl\n2t4N5POjYpYqWATTVE5ZgLKJeCxY5nj4LXHGc2bAi4XU/T4LM++/m9RXB1ks\nAHYe8vgJJ7iOy7aVZ0UaZ7lzgNl10tyqbgjFDHW/kPKFvXn8R4ywgwCzGcsP\nQS08gKy641SvZO+OWPzj5dNettV5eHkWCFr/pRyGIRBes1gBkbF92ghsuIE+\ng5H4bxjzjgZrIRfCi9SjFcK03SOIXNAdkWYJUeLgB5G/oM2pYE7sWOHY6/zB\nmz9Pwez32Y16BNINnzuWiLRUxB+qYopdX2/aEoU8KGpf+7YVS6QVB5Gp09Ev\n8jfG\r\n=rvsj\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"5c38fa8d841f5b293e55e4a22202bc6ea8220874","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.b2d22df5b.0","@material/theme":"11.0.0-canary.b2d22df5b.0","@material/feature-targeting":"11.0.0-canary.b2d22df5b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_11.0.0-canary.b2d22df5b.0_1615482161659_0.21485267040662692","host":"s3://npm-registry-packages"}},"11.0.0-canary.81911b707.0":{"name":"@material/shape","version":"11.0.0-canary.81911b707.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@11.0.0-canary.81911b707.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a129d6c2f6fcb0235b0d9e95e2e6d3df7ddc7d5f","tarball":"https://registry.npmjs.org/@material/shape/-/shape-11.0.0-canary.81911b707.0.tgz","fileCount":14,"integrity":"sha512-i8F0zsH0d5cTZzg71prD13ypxsSUDE8MoAcCj7yqKGdg5PM9dfrOUH5XTIqpvIDSTpldGiem/i8Z4Ntc5zFFsQ==","signatures":[{"sig":"MEQCIAkf1MVgSW9HxlXMCh+F5OAyuvEf6CelCp+SayNyvWDEAiBs7WJ7NRoKZyNLqjo3XyY6aMpFqsvWBGyZwxASXVYL3w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22865,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSmAQCRA9TVsSAnZWagAAv6kQAIdHaxVa3di40FlCG2W1\n5ohYZ7aucG+UtkUy0fLVIekLCIzw4Oit4zCC4mTHI8Nmh2k6pGGWwkAcxn/Z\nq+h0oZ/UGCfbcbRCN367vXaZLtQajlKptpmnTjFhBAhhih1XGRkMwZIGhXzJ\ntDbGQHF4dAvxZJQtNo+PTcsZdeEyag1c1qa4Ti0Ell/z5q5psJ6qQNQtdo0C\nD4x5QTcNIy/JTVprSL4Ru9Qf/5g76vzLJwFvzDBbGdep2zbVN0IUpXStPz/0\noIT7odXxiT3IBvSEGCYhe+o/zgZ9ZlM3pbfqm5TFzH6+C/ah5rds/rtJu8n+\nf721+db8JLVmUPK2WJTBoCQgpFGzxvWR+szDULpdA/EaE0pSD9n4ZOwKuEp+\nnmx9hkVCgGc8xPb4bEAUebChfhvLjwO6euSTgsyVRoZV7Zrta9u0EYwl0tl0\n1LtB5ZlwHXGmHDOMj43qFCgE+v/pukM+pClUCKIxx17/4NarUNXbxEPl6xx9\nz4Gjlty4U+RgajWdaVKyVzQnKBJrL3R4kbbj2vwTJm1WkFiikuaEkXZGsNBb\nlEjmNfVtGb3wylky55I4r1s2Oqvhdd1KFlUWtxV85AnoPmu0cy6KbQkS/eeN\n7HmSvKV4PxUxc2R6CaBpUzB1Y7cug2iEXd8DZ/NBnMZyNYAzmTWmKwIouojf\n4D1a\r\n=Z1O/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"3c1bd5b1d6d6453c4f616633e1d16b1fe0812814","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.81911b707.0","@material/theme":"11.0.0-canary.81911b707.0","@material/feature-targeting":"11.0.0-canary.81911b707.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_11.0.0-canary.81911b707.0_1615486992270_0.7089745933902742","host":"s3://npm-registry-packages"}},"11.0.0-canary.9eeb35c38.0":{"name":"@material/shape","version":"11.0.0-canary.9eeb35c38.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@11.0.0-canary.9eeb35c38.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9edbfb792174455e597cc3faa32627c5c0426aa3","tarball":"https://registry.npmjs.org/@material/shape/-/shape-11.0.0-canary.9eeb35c38.0.tgz","fileCount":14,"integrity":"sha512-bhDlkZ/fl4/FY4iRdfGsXFKlD/8mM7pvX74+ARfLKs7bdNvzipv1DvxrQR1bX2iieZklhR9pBl2DDzko6amv6g==","signatures":[{"sig":"MEUCIQCD7DlGXdL2aCi2X9zLzIHTPDpcZ10LJkSmC/PeT97ipwIgZ0yXnsv33boNRZ5X9OVRLp3vHwQmNkPoGPPSMoHncjg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22865,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSnFOCRA9TVsSAnZWagAAXEMP+gMYfUN6K29it8YKho5P\nvBE0tcMGgLM/5Dv/ozwjSLj/IQAEse5z9TBEN+ag6X3pDYaKee7ukgIcUF6P\n+tXzM755xqL4lL09HC4UY9nsiEgCY8pErqQizNtfE6ZwfQF4tluHRoYVBeAv\nL6Hie1TuviZvrFiN0do5znCydDdJo7L92GHz/GMne9UL4gvREzJNoMxYBnjW\nvM8qWHN15rsj1DzuXBbYqRDafj8BlS7bJahX0Kp1r4HhmmbnLcIAlomfnNjQ\nwdFXNXCjAeuSiVUTnqE2b0pQehQnRbjIOXUKkxx0TwCdILd1wMQeuvd3/x+K\nIPYS6IJA8rYP4iZ21UbLDoAG1RSccpxL9Z+1A8lB0qyyWmym8+rVCjFMPlTj\nGDuzX6xaf6+uOVK0T0B6V1mDix+EOgwNMTlr8CASBmn/FnisQt/inDKoMVtW\nRd/l8EDPTlSFI1AKcJ5/Bue4dTlxmkJIIKY9i7j7aoU/FGlie1qEAomLlaO3\nc3UEdCELsZ1DN4+3AdW4XY9Oywgla/admetghFL0yoiQhqUls0PH2clYh0o4\ndSLagZUdVqOtRylAzMIi2UMlE1OpI91jBfwias270QZT1zKGSIJU01/MphO8\nCCe8VzhjnEEr3Rq22y9wCoD09SWDddtVSUwMdb9Ablwrvvhu5w5aVR+Odtnj\ncHES\r\n=Cymy\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"147a2a556e5155bedce0b0f267f64c26cf87d0bd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.9eeb35c38.0","@material/theme":"11.0.0-canary.9eeb35c38.0","@material/feature-targeting":"11.0.0-canary.9eeb35c38.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_11.0.0-canary.9eeb35c38.0_1615491405841_0.6240246504454445","host":"s3://npm-registry-packages"}},"11.0.0-canary.12be3e95a.0":{"name":"@material/shape","version":"11.0.0-canary.12be3e95a.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@11.0.0-canary.12be3e95a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6746445b5730aa338178a2f6c09631a842316a9e","tarball":"https://registry.npmjs.org/@material/shape/-/shape-11.0.0-canary.12be3e95a.0.tgz","fileCount":14,"integrity":"sha512-UxDD04k/DoLbZO7nYrewSaT6voW5KtLleQkgi0LDs3xpVpDXA3SC2AVhPXFkqMVwIUaaC977ztvTNdeojH7dmg==","signatures":[{"sig":"MEYCIQDTkEFL/9OtnwNBgf0sPnJ/2/md7oAlC0u2kLtf+C91WQIhAK6pXxqS7MiSoF2OmVLbAX/U+kHDc0bG1zRrtuxnllU9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22865,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSncSCRA9TVsSAnZWagAAmDIP/RKFt2Xgy3UF2ZyxZ0nt\nF/9samOoPIq4o346m2Mkxqp+S6L+Q9WQYNP6/MCqGaj7D1UMvFszcICUrm2H\nz7iAxmkJ8ZdE+7fa9jZKLv+qnxIcJrTNuLZG+uvp6fiwEdGXjlyHXwShgWL6\nQqDv0f7WLmbEhJxn3qBNWxQhlLQEr4kze7UUCkO/cPSV79eXhJ8Ttp9TlJWA\niNxFjBWaMix3L8eOZyEbQ+Wb5hYz1SmppAt5b1VP1FF1aBND/PELMBUNPiq5\n91AvgnmXvx0xlZK14uUN+KZZ3nUNurbA1ihcnMJVdV3lX9RemD3icxfU9i+e\nVHXhZzzDvmL/0Nx/RworjHfnaxnuhQl2XWzPMeswLBRy1UxnTxBd7lJ75XGi\nYoS2aVvHKs7Bxl8MAmQ2mq0LHTpQIIwZeM/gsJhFrXcx6lL2v0aRnANVAQsI\nTvVcdWTdRTTtAD5oogyft1Idhvo/I8lSMqNdVXtHH+HYA961S2DjYne3D/JB\nWNF6qZ/fOofzi5edMb1+Xl1/MnqPw5aWEYWLA1ijcOJWrw8vVf1qLEkHRw8T\nkfZIn/0ULXo2IN3TDCgJTpMpGXcDOI3LVVHRjoQsBDWjlnadqfxLrboAOrDt\nXEVLAq+8veJFmuQczjWReA0x0N4PPJNdcM4zsWcMx2ah76mugQfFbugDzzc+\nk6Px\r\n=quW1\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"883077446617b632d698e09818dc9d5903a7586e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.12be3e95a.0","@material/theme":"11.0.0-canary.12be3e95a.0","@material/feature-targeting":"11.0.0-canary.12be3e95a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_11.0.0-canary.12be3e95a.0_1615492881917_0.5546150120458153","host":"s3://npm-registry-packages"}},"11.0.0-canary.e683bdf4a.0":{"name":"@material/shape","version":"11.0.0-canary.e683bdf4a.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@11.0.0-canary.e683bdf4a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1bd9c798e2b78bf3f3205123bad24e1f52a90e2b","tarball":"https://registry.npmjs.org/@material/shape/-/shape-11.0.0-canary.e683bdf4a.0.tgz","fileCount":14,"integrity":"sha512-8BKjCmawEba4Oi3pZ4wymMV75txT4XYCnCqlNEvybjDjj+IfI3jJ4x5cX/SJ4slnhgnfl8TkDj2nh/mzLpuftg==","signatures":[{"sig":"MEUCIAOF3j17Jbib3kIXq9q8L5K5N1/GIj3a2IBQO+fKgS3qAiEA4m+Nd6mn8wSLoCvnYMmAU99V26sL77jW6Rl4kbgndRw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22865,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSnjJCRA9TVsSAnZWagAAM9UP/14c/xDtTGKLFpRmu4SI\nN01mL7kZOR58jDnR5f+t+Sme6ykr8Jxihx6PvWFWoojQWjUzw0AES0St4dNu\na97Bqn/lzfI+8rhCKhByyptHeG3B5KJPhpPl9kEWlz/HTereC8gkJq8tF2NN\nPbXBF3xhQvqiSuYqh22IWpqz3D3xhj8WxpSGksFr/i1WohVsnFFuHmhRubPX\nf+0vYIvPDM1X8LyE0LOdbnF6VdXaZH8HM9BDr+HvT5NeMSCcnhjidezgAT8Z\nsEQWhL4gZEyRFYH+8DgACBri6WG/CaVju/0Y40Zd0buMVY/uqZCYN4ps4nPn\nDaHI4FTQfMFF6Ji86VM5CaswlxCguJhvyvAOUP8dc2+E7BsuEnEChr76Bx0p\nsM+AZysgQu4K5CpZnMQI3g3aAmIIJ3vA18rpimBkDWzmFQX85O1tGJNBxoeq\nP3aOXWf5JpeqtLlOGVbZ5lE5kvzrhg1y30gpT2oDh9MbdhLXj7y7FDG7c0bv\nzM1GvNrkFRJNJsDxs/Le9iUYnAox0wMiUhqQLti9ZoiDlBN3qA9ImJy0qCVP\nbmKL1j2VXf1xtFb4R58XIsP5c0Uigq+AAFAFlKdVd7sS3LDlsaj7qrEoRUt6\npHr/8PpLiuB6Z7B0hbBMwz2aPWVIxoWPo6Non+zblND56C5KN/m8peIsqb4x\nRKZ9\r\n=wtUI\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"0323fd7f39f825f8717fba8542628d111777ae35","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.e683bdf4a.0","@material/theme":"11.0.0-canary.e683bdf4a.0","@material/feature-targeting":"11.0.0-canary.e683bdf4a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_11.0.0-canary.e683bdf4a.0_1615493321220_0.7050554123030126","host":"s3://npm-registry-packages"}},"11.0.0-canary.a07b6d486.0":{"name":"@material/shape","version":"11.0.0-canary.a07b6d486.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@11.0.0-canary.a07b6d486.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ab75c7676b03eeed0b9262ca74e34790c2c67fb3","tarball":"https://registry.npmjs.org/@material/shape/-/shape-11.0.0-canary.a07b6d486.0.tgz","fileCount":14,"integrity":"sha512-LgF+rLpSfnLlt6UuuQfTQ0tFIa1713Svb0f1Tq1HWarAsi8oT8sPRoC46NM++y4bibxtE+E50Q8+YWkGGtlXoQ==","signatures":[{"sig":"MEQCICaPXxeVGEmxaul6TwwiqBvyqhH4v2nWOGT2mOno6FVgAiArTKqMYaOaTkn5FEoDgkzKEVYQO9cyLf5qEhQ/TwYgfQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22865,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSn6ACRA9TVsSAnZWagAAV7AP/RlIfTIz0OSYrLM69fJf\n8V1pxJuUMKCi0h22BYNagcuIM0gfCzu5XxzHSafN6E02eqHjtS29k2Bmk3uc\nnISH4Wvgg0KFPbmQ6txFCMALBX80WFOioRBg0jD8KfuKKH+gTNPKop2L2SAV\n/wKZgvnqIu8ey6/MHKYw2/8lHnaWmjQdKZ3O3lA9STz0c6ksrx2TGS8Uo0vv\nmpPs849uRnuQUEvm1UEJyq2yEOc8eP38kGtcwv5BjsO2ocPkZ5ka18J8k/iL\nEhvuTuRQAMMAIEToB2UM4ZNcVJ1VpPNEFdWkkg6LydFOs8BKreZSpGdBfBlJ\nwOQIwQLf41lmDY5nezKkLB/M3feIshHYJNxn/57ouijpkCRRLSJQbvNfcNJT\nhN++Vaa5vduUlcZG/W/h1zGO1iJ+TQDF/XxbFyVy95lAHWkZwh32Rj05Ue1A\n0EjE5Pjr6mGLQtgV6gwbESJo5Pv17GjCIms+qJwb6mowVGXZZT0FsI7ejyLj\n5KhgCdAryQpWrWe65yfSSoYb68k+Zyg0YLRL/ppzalQghScybZ524zFUi4fa\nGwLZbOaai0yRR3jV4ml4irujr7C8gb+a/2v2CBpgwqEXxcTYLblkqylqPXC6\ncAIQExA7dC8CiP/zmewjnPlrW6rseriuwS3FqhfyM0MlM/5b14xYnY8As+qe\nfiht\r\n=W2A3\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"425bbecac77849f8786f0a32de18a168e1874c9b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.a07b6d486.0","@material/theme":"11.0.0-canary.a07b6d486.0","@material/feature-targeting":"11.0.0-canary.a07b6d486.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_11.0.0-canary.a07b6d486.0_1615494783681_0.9950653506703524","host":"s3://npm-registry-packages"}},"11.0.0-canary.1e0653477.0":{"name":"@material/shape","version":"11.0.0-canary.1e0653477.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@11.0.0-canary.1e0653477.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b80397e7cec4786c503ec0596b240fe8cfa35c46","tarball":"https://registry.npmjs.org/@material/shape/-/shape-11.0.0-canary.1e0653477.0.tgz","fileCount":14,"integrity":"sha512-UAUCPAyVZHIHRLHvzTC/Fxq7QO3+km0YYy1NHu0vioIzIUlpWhkIfLR4WwMMYdhgiF4JD9fVQ7/H/xpXlHhK5g==","signatures":[{"sig":"MEUCIEacHDkgk6uW72dV7NKH7ojhQsQ4LO9Y+f/aKS7gEsAIAiEA6ohSb9XjyXqHaMbnc/1CruQce9IRab8HHZ6r5PSP/Ws=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22865,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSoAqCRA9TVsSAnZWagAA0EoP/1SXnBW61UALqi24bj2V\nfUtWYOlAgun4T5SUJkNafItZFRoK8C2iPNOv4ZGbsw/a327Z1QecuYgEzx/B\nHHPOPtolHyZQkuUIj167Ml8LfkdOW+KT8+1gg5uZXAycbRMmq89uwSaSPn09\nPvHG2EInp/9ybk3eWj3H+2dQWjyN+l7tKPTX9d2r/718tAhyA+n+LCTi2Zt+\n04psP7WVjIwHeyxBeiWgKW0J2x8Ge3Zr9jl3RLgclD5sciUkvedL4AyPVB/B\ngWv4Ox3DMFkVx0NGOAkFM6BZqzEPdiuOV6PYQxAB2iSoz7/QsIVCiDrUACQw\n9kLE1E1GQ0UfokGFnzhXcoGU4XGCelvIeYYyZrsfgIhqS2Qtd4AW9vHt5dq+\n4v7k0CaLvHjdsxSLaWhQvDIzpJHTBJYvVod5rJ9wVyXNcH3CqBWn8nyUJ7nD\negmShLtef+jFAtUicdVAEGYH1aGNOrLDCUDoPCkkQai8ro2qtPZCTwQQYWcn\noOCOjBxqhEiYK0qJWtzuGKS5YTowrrpCf6cbmJ+06scZgQRdpS8gssrnvJka\nULkKFR6PCX/kvcmfOBg4SmlCe2/fx2Rm+0+1QVjKbPr3+tmVj8YfLQ+P7yLq\nNu7+oEbyC5Eu2veFFM78e9ZyDZkLU/KUhAKFuJcciA9cwm0TDeGY7d5F9ASN\nNhQU\r\n=PJfZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"6130e0fb82d7c39da4ae1e02df8f0851da419fba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.1e0653477.0","@material/theme":"11.0.0-canary.1e0653477.0","@material/feature-targeting":"11.0.0-canary.1e0653477.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_11.0.0-canary.1e0653477.0_1615495210061_0.8148895731623296","host":"s3://npm-registry-packages"}},"11.0.0-canary.148e8cfcc.0":{"name":"@material/shape","version":"11.0.0-canary.148e8cfcc.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@11.0.0-canary.148e8cfcc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b96ad14f9f1426e08ed872816c2f4f6e8f285a7c","tarball":"https://registry.npmjs.org/@material/shape/-/shape-11.0.0-canary.148e8cfcc.0.tgz","fileCount":14,"integrity":"sha512-r9deysbXTl8wimaT+9NrqUYLPT95tmLjeS0WuFv/o18y6pbHFXiubvZ6HUZNOF9UbTUsJIma+J5sDgtBe+LK5Q==","signatures":[{"sig":"MEYCIQC0JOSiegEr5BXPltVZ+M1f9p9iUjAo9jPaN+oXyn8iXgIhAOthJK8iHGi+DlTF4Il7ebA11zG4+xOn5vulnZYrfOKN","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22865,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSp04CRA9TVsSAnZWagAADskQAKJSqpl/nB/Oxnxi3qhj\n1uT3sFS2xLd8gw53j7ag7G5hOW48fpTIcXoSTZU14e58Y2+OMPiLPv2bkENP\nWqNihlr5fa4J6KLDVkycfan8wyV292bgUZHMQyOF4spqXdh4Kj7Y4TOKLh4L\nbzYoZihLYAP+d9n+aPL8I7tfkq4M7FnjU63PS5Go1+AOs6tfBTc6oiS1S7uh\nK3knZoxVDpdOhxNPA+F9WL6hTTvA/mNhRCl7qGiqeYD+5SV2MSdGQSR5J37v\nRA4cE05wkNxUAp7h+Fs3fwDeyX0LYdrpJDsNnsreNzL8TqMu2DVlLr0GVBAv\nqjKoCQpm/prDOl8mwVHfXw4PocdIfhfipgoNl9TarMbNrqQ+3MWQDS0v0WFt\nd8Abf5D3y45doUuRN/0g53uY1PjERbyzBh0TudW9qs6a579IiXqLX8s8GcGj\njovbT3OjTuNfBDz6LDwM9Dr5Em9b4FaPh6lJGMaeYsbreMtNFbWXPLdqf3jv\nJalva/E2kmfYr8VWsUCrhVm7GYTxDdoAfcJXDU3f+dxqxlk5PngyPryPOfC+\npy5zvA/W4bDEwG7WbIDeb8Pt1RZ+xWaiBR72pNs2ov4CKbFs0OtzswDVNftI\nXlJvd4w/7aePUQfP1onNelz6kYkcKcczrg6fTVjOZjEDCuTo5hq5id6V3Ed6\n7eER\r\n=0H0U\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"2e686ac2d72b7a249bc4deb8b09742bba99ce581","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.148e8cfcc.0","@material/theme":"11.0.0-canary.148e8cfcc.0","@material/feature-targeting":"11.0.0-canary.148e8cfcc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_11.0.0-canary.148e8cfcc.0_1615502648369_0.9511903294222335","host":"s3://npm-registry-packages"}},"11.0.0-canary.73a227194.0":{"name":"@material/shape","version":"11.0.0-canary.73a227194.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@11.0.0-canary.73a227194.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2984d565f2450616d01426364ea27e832f150392","tarball":"https://registry.npmjs.org/@material/shape/-/shape-11.0.0-canary.73a227194.0.tgz","fileCount":14,"integrity":"sha512-UamGAiQz8ElNzVPhC6+O9KQndUVEcbtoDipG4aulJqSgs71XlJEpdKuucEIgRcDcIdaRSO0Tg3wikqh7kD78jA==","signatures":[{"sig":"MEUCIQDpNkyxdl82uda4xYXlixXcYTRytxW27rjUW4ZxfWdlHQIgUG/eSI9V1HzuYi5gz8DPUlvLmMUCg1nLOrNh6nhbv1k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22865,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSrSaCRA9TVsSAnZWagAAhhwP/1ecfkQh/Z/d05NdlSom\nuO4o4MA/SvLrK/pTudb4f2Ux8TE30zwlKsnFDn5BBvgDb7weXqyHEYLcYH2k\nCxd9WDFYVpZaJHtPb1GGJp+u44NO/7zw1dnbFpwKKWUD18hN9YDbrySX48kF\nzUsuljEGyITfszw0HX2z3piGrF8OWKeOaySmNfmONR8qSqxx9ECGgNQ2PCkQ\n30BJVKhe3YzDOMaOS6KlIi7v9Ij4RRn+PdIrT1AaYiroCxuw/bD+bN3FkQIA\np8tr6jT80qdtsOQKr5Pg4LaTrQ7zsh21QpJCODK71gB3/fGHnqvQT5242NE+\naE4VsdQyMl1tsFhaYtgcUqb5WBxm+agZbFR6OuyQhy0QnDfqEsJYI/NC+PtM\nf9q7uPkv5idflfD3CVBwdTrFvyj8RPrmD0r3o3QvjI6em8oGqsWOC7UAhbYb\ngY2xFt2KcBSv+Hl4jcjcU5xJ3YiTFb/8LL4eJ4tA5ZmFspHmcNAwtEP0rZ6f\n0nK1PCvMMq6XuqIADJFd/du/Y5dXy67vRny59LH97OzbVK2IM2QKnRgOeOV0\np455QCAGgp47jtJTh4zaRHDlfduPhLVXduLQ0PAL+WiCzPSGbXUIL49Aa21K\n1inaZQbFh2RxkEl6Niy4wgm4Z8pcqmBUXcfgynn2fEWYfOBSnUeEtslJdWf8\nx0gu\r\n=Rdzi\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"3bb5344393057d23abf5414ff61402a5091ac74b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.73a227194.0","@material/theme":"11.0.0-canary.73a227194.0","@material/feature-targeting":"11.0.0-canary.73a227194.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_11.0.0-canary.73a227194.0_1615508633690_0.7582071972865958","host":"s3://npm-registry-packages"}},"11.0.0-canary.f8579b7ea.0":{"name":"@material/shape","version":"11.0.0-canary.f8579b7ea.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@11.0.0-canary.f8579b7ea.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f443c0c8d4ae5d1af5e6fa4124af6ec8a3caa3c5","tarball":"https://registry.npmjs.org/@material/shape/-/shape-11.0.0-canary.f8579b7ea.0.tgz","fileCount":14,"integrity":"sha512-WZbhfaEmv9dPBC3UUwzYbT/lpwljWVIqqTLs8faywIntDuHSce7BIxMbK2nQfMIDdsOfZpyJPTH9sugzXuXIzQ==","signatures":[{"sig":"MEUCIQDIA+zo+LHP+5lAw8g3ep/HHclHUjZl2De0duVgPxSbGAIgB9ogAUb/MoOzxq3HKHGaUChBa+efW8MIBQI+JV7xqEI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22865,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgTB07CRA9TVsSAnZWagAALSYQAImA84a/4nrQK9NBHMHf\n1DvY0w9C/v/oU9yAgxFlXi2q2Uv4C3NzR1lKkt2eIOCR2b1hVx4GuBSnrqMr\nj5HVbJji5/y5A3+SXLybqdhxSfbLBeRYzOLTFtwYd9IE44rJOYhGmfR3Tr8A\nUpep6krLf+K6Ml7PIdnXtJ2e0esppManVkX3yO4XgsrGcQDIEQ09AW0P1fTN\nE+scyghgHQjvElj2E7SspUqO3NCPn5EYFvVtINjdsEkYdcPK2FFqSmyeATdk\n2fBMbI4+HZBdKibKamAMLYSKIthY7pBS9tsmR4lNgZ80tGT8i+lRZiWfBkrO\nP71VFQ6QaJT1WAz3g/qn4tsxOaRrYFb5+9VdhjX6/CHWDQm0PVRuYGk5go+/\nrew1iVD5R9rOCzfIB5oinhiNbRdaif8ST2waFTHAJhiSpWIKquCO4t74UsLQ\n68+emDXdB+06OeFlrprA73F3uzb+VAAvYNFPE3XQo82YYu2krCT+4IGdiUNl\n3JgQjxxIhid0ZYjD8HN9BtXfre34GklhbvHY5yG/GATm6EFZk14denBziRU7\n5X6gKPcILjMJfOm2LgZdYNhqrjXETlEYi64YE1fmosgwsSjd3ouZpn2CkD6p\nLo3fL8vKWgi6AGnBjDJwhEo37VQ3uzqJ8CjNHdcV/14Z/02rq95/cT9b8md3\nI36T\r\n=WFEY\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"8b1a0816c0d3a68a851c5e6a199c4a9ff75cce07","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.f8579b7ea.0","@material/theme":"11.0.0-canary.f8579b7ea.0","@material/feature-targeting":"11.0.0-canary.f8579b7ea.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_11.0.0-canary.f8579b7ea.0_1615600955168_0.5595145229593352","host":"s3://npm-registry-packages"}},"11.0.0-canary.d2a39d300.0":{"name":"@material/shape","version":"11.0.0-canary.d2a39d300.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@11.0.0-canary.d2a39d300.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a0e03874287c813d3c635bf13a870e20c5e0daba","tarball":"https://registry.npmjs.org/@material/shape/-/shape-11.0.0-canary.d2a39d300.0.tgz","fileCount":14,"integrity":"sha512-Uq4wGLBaL0hacZxIBZADlbyDP9Q1ZsmoQ4QSxADesY6UmbslZibyZWOu2YE3CyMblzZTSS14S2ZVzRl0O1KrVg==","signatures":[{"sig":"MEUCIQDVroW9fkcw5mW0gKTAaldRwZhqledXAokn5DlYyHWrRQIgYR8BNcLp+6ncdCCeOBc0cMI9vIasZ+RxEL68/BGl6Ws=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22865,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgT/0pCRA9TVsSAnZWagAAxioP/idX0Ifbgoz5uAuM5zBL\nXdwmnWO/Y9XVjtUQzhwp0T8X6unaZlJCgafvWI2CAhppZaf/AuCMmi1wDFsD\n+DqOvr3czJGFoPFGP/kaJQgwGZRQUQh60I7nMOfKVzDLO+dzd3QYpJS9MDg5\ngdAunAnEk1NMXsy9oeGmzB/cISDr9qJZ4ACiuR1w3tqpSM8kXnLN9ylymTT9\nXzJsGmY+mxmy0Xe2lIql9+0Y9iFeXDXCdgrWxcCIsylcOms1OrMTp8mHJ8Zn\npyVW9odn757g9LfLXNVBq/5re5tGeQWkZ9XF88gm6VTE0xVpcO2rvZcHTWxB\nA/a1G2+aDQBXGasPB3whIMZZyHNsJkmq/lt9zPVT0Xd2hha+BGqweVTp3i8N\nO+7BqSLZmzYnTdSVbmcBWRatVHikn4kPu/zQLKodIRVhQip8yxqPltfynmaQ\nqwKWv/nAxslqkCIAWG4reIgf5oDC92f5gMkE8O8P338y471Cq71J4fktv72l\nya3ugBCl2I4Chf+droSNrFbJkfZEj6gshJC8RaHJI19gFaHPWghJTd5yT5kv\ntDjo4iXGPZwb63UdWAKda1DiAtnJgVUUVOnJNJ0t9uBKAK2AgqvAqIefJiGX\ntz9RSFAfdUCHGPO2lWLHSjUMAxs8E9MSevhWtcbF/Zv9CHTP9uPI8RMqa6ZS\nYUjS\r\n=oura\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"4e928ba6e35dc70b34314c7509f647a6fbc4be00","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.d2a39d300.0","@material/theme":"11.0.0-canary.d2a39d300.0","@material/feature-targeting":"11.0.0-canary.d2a39d300.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_11.0.0-canary.d2a39d300.0_1615854888923_0.11446039682101672","host":"s3://npm-registry-packages"}},"11.0.0-canary.7cf67823e.0":{"name":"@material/shape","version":"11.0.0-canary.7cf67823e.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@11.0.0-canary.7cf67823e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5018d05170c52997fb49a62bb30db4b942073777","tarball":"https://registry.npmjs.org/@material/shape/-/shape-11.0.0-canary.7cf67823e.0.tgz","fileCount":14,"integrity":"sha512-Je3h0ILgg3MuLuN+qLjq5+9xmeieasx1M5Uvacwv3Gt1SzNRzd1cxWpqan+An0Gh8WCVL4hf6ZPR7n2XCOrWYA==","signatures":[{"sig":"MEUCIA1n9i0SLm09jTOJ0rYVwlqtqMg1PcG/hhaSvvTk1NYyAiEA6cgwmHX5LRrt4vCwpZAzxCgnnNtL+GMfX8UiTDmaCbU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22865,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUPbQCRA9TVsSAnZWagAAlyYP/0S5E8UEuslsN9yKvkUS\nEnZqklpR2e2QBnppGVObhhWXXh4MimpWNApdfdydtGBZRfmaT8T80G0XsA8F\naO3AdDQygidkJ7NsfVK3Df/Vujz6SgrIYDhSFwaI50hfKA+Kbgofl/BxsG+m\niyf6YNwHrrZC8RuOkMQ946KuEmB/4Gii1WyndBagDPn1JHIFF0jwwvf038cs\nxKxkVcHOEbZZQ4/MefYNxCGen1F9t/EUkiiP4zCRK+cj+Qclt9ic/M5W37w/\nDm+ytbdU512QStrq4xZOVaFm2Vgj/M0JIE3x7Sz9Zdgi/GiXqMn4uEOuOh86\nEJd40kbYsoA6GriNhy5qy724P3eXkpqphklT5ytqC5Dcw+bVOS2zanVAtB1R\nZ7OCTM6ssxdgxQAzhGMYng6MDMxRorZ6F9s94YVaj7UGY+5Q11TAo9EYTuZs\nxNrtudKB4Sfx7GVLQd6S92ByiiHni1Wa28zOD+Z3LSdDTUI+d2l97GMu+8kx\n/6zn37zslIrndpObSPO5jvhifcqojTPyXqxJoOXaUsaudoodpLYEd1NW38hK\n8pjR3yBzChIt2EUb2ry9i6ylCMgyF391g8L6GqF5xy4nPlY4hYAJEXcAjFda\ntnlruG/JHru7SSsZ7QQbqS9v9240HUDYXHZ4bq0yMZDJiV6ZCpB5n+xHmXt8\nhM0h\r\n=4pId\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"afabf42a48ec8775fa133ab10e023c1b5d2ab802","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.7cf67823e.0","@material/theme":"11.0.0-canary.7cf67823e.0","@material/feature-targeting":"11.0.0-canary.7cf67823e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_11.0.0-canary.7cf67823e.0_1615918799609_0.6980385021966131","host":"s3://npm-registry-packages"}},"11.0.0-canary.67d780c79.0":{"name":"@material/shape","version":"11.0.0-canary.67d780c79.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@11.0.0-canary.67d780c79.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"651a9b7daebdec009b7fcf69073ea4c2ea9f07ae","tarball":"https://registry.npmjs.org/@material/shape/-/shape-11.0.0-canary.67d780c79.0.tgz","fileCount":14,"integrity":"sha512-oF1RaCYNBN7lTDvomqOD7GGPOlC6sLxClXwa0wbz9NB20HsBkW3JhQMSG/yhTe1AyfrQvaMSzYkJP8xToUKaUQ==","signatures":[{"sig":"MEQCIF9wXh6OT1+4Ppoxynmt+7wFFRzgliKNgByWP4eTmOb0AiAy7fPOGa75ctWQ8XESSLiikOxeFRAQCxhjaZHvj7wDew==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22865,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUQtbCRA9TVsSAnZWagAAMd8QAJN0nk3dyEh0RUeqmmvZ\n1275n2uSYIHBQJY9eHHnqfUyQIgUfXxAummPRy6Z4biUVsAuIEAf1zdsEGmv\nOkn+IpUvMTXgfdyg37kuiq4cihGzcdNMErPF78xlLinJz4FwMat/AVXgwEM+\nGHSd0txUvlJhwkyOUFiCGZeyC6B8PkiRMbvUgFIIqOphBvf62qX2X9sWLlxr\nz6yp5km2HfERZrkWb1J1QHkf0/i0HrbKJ2xqKizM3R8sjXK9z1QAvcBRDmXi\n0jUv8v4j43CoaeeRKm1aoEirx58PBHbq2+5KDkQISzmJD1zIAnRjH72ieNNM\nhH6M9+ANDdef6vy+nHoviK5V40W6JWMTYsNCWlwvG4ysikTTyJKnthNKWuOy\nCoggYFnDzs/V//Xs/oq+b0JXkakf644Iqi22wFdp1s9wa4JuUZr8b7UJMaGf\n9R1EXet5BcSWilxDyW3GpHq99rcJqhFv4E3dQivhatp+KbmDbuBPSzXtN9G/\nBWWXM533kJgQ9WVg07XHQhNCB5h7dqBHDbUh1FMRfByS8L0KqjpRhNbPUi5s\nlFUI+tmm0BgwNgUx7H1v8azX+xyDYS0DHHGfembUUu00yodycjTDFFnF3n1z\nr8unZUIm2x/vnlKtk7DsMwylN67GaT1EQl3ktCXnIeYkL5Ip7et88oCWHyMr\n12Uw\r\n=Qqze\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"05a76ad8cd6b15550e685799fb6b9b5643d7e0e0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.67d780c79.0","@material/theme":"11.0.0-canary.67d780c79.0","@material/feature-targeting":"11.0.0-canary.67d780c79.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_11.0.0-canary.67d780c79.0_1615924059355_0.029871797349280138","host":"s3://npm-registry-packages"}},"11.0.0-canary.0f358ddae.0":{"name":"@material/shape","version":"11.0.0-canary.0f358ddae.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@11.0.0-canary.0f358ddae.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ef0dc6166688e168d7954be4632d0bacb9bb562f","tarball":"https://registry.npmjs.org/@material/shape/-/shape-11.0.0-canary.0f358ddae.0.tgz","fileCount":14,"integrity":"sha512-xjzAo4bv4A4TYKP1VsxUntTGu92AhAo9vRS4dsDS0Z2zkLnJ/iGOeM/hyQqBI9LRm8QTlqpRuWzUSZijfMP9WA==","signatures":[{"sig":"MEUCIAX1xxHu17R4RONME8L94VL2YXXZWR7CI6AJqrkt4oj0AiEAgrUdBtplhBYyZFL/n63QH5jaokKhwY3qV209gGzeEMY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22865,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUS08CRA9TVsSAnZWagAALMUP/3/U28hPFw1lutP33riK\nxyycVewEaE0Z6fbXzvJOIhDXs6kV5HtCUczfAa1zMNvU0DoOI3QRGyaP1HBS\nKrKLB97FpEqkH22iRulE+MxRHOVO6UtMGoMxP6G6/cjIwUstCOrGPQi9A1Q9\nbEnN+MVym0X9WMTKPRlt38JqZeZCemEensb0kCTuIECwYp1TIMDsjKmX4psz\nWDTofZH6L/EzYKZ4DRb94jeD0AIontZP9DNt0woE575yp9AH7c+xQA6LwXc2\nxckTB6bWuv+PggVDkTfnxu8YcVVP85lwQzQazjqB1k2mO6J0qU+4Ay/DitD9\nWSjjYqu2V0SX5LMD25UQ9domx5g4t9utGTsyJH/HC8JSrJhjlujGfpnaMpWN\nA2S4qh3MFmxQmw+uXM52HpfcJisM4sQ/v/GWwOp8rPq0UVu7KEdDcugCFTqW\n144Sah9r65HRfbQMSaMk7OTfqtWHqRl42dR0EnjH3Y3vJs8JQAaTXwoJ/nKY\nP7ohF7cVLfzajDN9RxsfozSI0M30//yBvW3Bj0wcmFW/J1LfuG9HBDA+aJj5\nvYxn/JHNiy3pm4cw2hbIgq8ktdovlcB6ba+mSaTD9ab2dl3pJ7QtL6qkGZAh\ntkzupd74j94gL2eAia6XRFE1g4iKZ3AW83ud5iONp+MLud5tjmTs9APx4dbV\nkcMw\r\n=J37s\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"6acdc7677f01b6502d0b491a9816d6600ea9cbd7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.0f358ddae.0","@material/theme":"11.0.0-canary.0f358ddae.0","@material/feature-targeting":"11.0.0-canary.0f358ddae.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_11.0.0-canary.0f358ddae.0_1615932731985_0.4391665151857225","host":"s3://npm-registry-packages"}},"11.0.0-canary.67eb0df80.0":{"name":"@material/shape","version":"11.0.0-canary.67eb0df80.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@11.0.0-canary.67eb0df80.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"16dce56619f0c18ac2110d5b1fcd36c75268581d","tarball":"https://registry.npmjs.org/@material/shape/-/shape-11.0.0-canary.67eb0df80.0.tgz","fileCount":14,"integrity":"sha512-787t8P8nk9klD0ZGnbBN4Bbt11rSwiX1OJfnD+ZIUh5RB29QjnuPyEVCrp31RgFAg9qaP4H1MDzF42eef9q93A==","signatures":[{"sig":"MEUCIQDZ4flf4AOjmHis+cVv+TnNxDxMvJ7uPkha/HCbndXeJwIgE2qjClJEwuZPwMzFz++lA0EgRvms0U/WM58DRp04fsY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22865,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUTOaCRA9TVsSAnZWagAACLUP/3AlZkNxHr41O3dmjFwV\nwELCs9GPb+h/31kg0ytlcZlCMbOzL8iLL9hWP9Ana+r2l2B8a4bN5mYe5v51\nhIprLTAa0Zl7PUFPDGQTQGrHR4Bp0nWpxmMN6a40jZUKX7EgSwJHjhXQ2q4w\ne0hqjbG9cJgWRLG6N5Oe0Y1tpF+v8OkY1/gsuAse3AeQJW5/KbflomBP4luI\n5MMYM2ZX8XWN8JGz9vdetRo358BOC7zqD4oyxjYSpIlP/wUjEeYLlsV1XDpz\n47pxKZT2sxM/qxXtOzqikxXSr8mUXZCylCggfUdLQD0GSvnLCd7ssX4hnjaQ\nacN4q5NbSHpiTB9tQPScDG8R1z7iPl8HI+cV/+y1KiwSb9I0hYeOGlii9fdR\nw4GU59KvgZHTQbVoTXg34q//+Q9DZnlpsLkgTTpqBFFXTD/tuaZRTtbruAuO\naw04tGqpszmVQqVoXt9zodqPT3DbTfJpfjYlTIUTKwt1eWSk8iSCR8Tbk3Hz\nCYCfK6apsJ67sHF1NQCn6ZuiQ4WNzIIDVbx1bZTzDR7vaMnTLR/cmPQJ0kc2\n2Dtol2MxG5NXgz2v+QLu4hCe7bVg5scyAgGHXoijcmfc9GiManhzjBOa+KeD\nrnaq/yrQagQvkiYAe0opdaIctpBxLlW2EXNzGWHASCWTMpYPMgbriEFx3S3B\nWW2M\r\n=9Oox\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"5f5e9d259d95bf3abf565622edf7345e62993020","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.67eb0df80.0","@material/theme":"11.0.0-canary.67eb0df80.0","@material/feature-targeting":"11.0.0-canary.67eb0df80.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_11.0.0-canary.67eb0df80.0_1615934362170_0.3463672148965862","host":"s3://npm-registry-packages"}},"11.0.0-canary.941ca3b3c.0":{"name":"@material/shape","version":"11.0.0-canary.941ca3b3c.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@11.0.0-canary.941ca3b3c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e2e0cce62f06cddcdfe721874215f0d538369669","tarball":"https://registry.npmjs.org/@material/shape/-/shape-11.0.0-canary.941ca3b3c.0.tgz","fileCount":14,"integrity":"sha512-Yc+8/2zd0jlrmyTFsduQ1ffwFvSSIDTHYFJTVy/8RVAhvgHhIXmzDQjORr6lQEpE5IwqyQNKpag2YQ2PNBrPsw==","signatures":[{"sig":"MEYCIQCo3p+3X68APh5PJe5TcrUGiRHSI31xVq82S/3SKUwQKwIhANljpMzxTa5dpv2w05sMrO1QxVVxILJ02IZ/Nyj3fR3Y","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22865,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUTQKCRA9TVsSAnZWagAAynYP/RHCTYXeM/Q76fK28KiE\n22xzgtuVHIHfJ0KcI0BRaJt4kAWWP2PcQU26iMH6LddoI/C5LhV8+C39tOmF\nJlNxoOoA+Fa7U281H7r+JeeCQSgLg7uewXo5bqssPOx1T+VTAm3rL6bCLBmx\nQ6xbOMBr1Z1QHCTyS/0uFCj7euiG1AX4WeHAjR22WVgualCydjD1ehXAlKc2\nt3FmazzxnbvTpOHcA8TnUPvOTikhJ4LBY1mfA5fGUwpmNLQcPpw4Kpughrax\nPOjTnEkJgTaSJdjq6IRUQUPqY+YZJvjvZyVOCTn5B7vHaDcT5nnvwndM9HLO\noJdZWfOaoOGCz7gTwunMohAzUrzeZSo/f8aHU5U4r7yRSIdNiecdVM8jaIiT\nrkJfhuqI273JHpM1Qeacr/bMZmi/4ZX1VXv1NXlmX98CB7vFl/5oWF0s5lV/\n3rGsYyDJ3Ghlc4pd3xQUHk02QzLnIC0ifUAtLy+IukY5IpjvVk4c7WOlOgGS\nD5HZvIuGwnu9v6y4rykXrIxrlwKu9f6dehSj5aB2hHUkkLsxg+UhCARNW4Ri\nwI8At5+y7wy8a3phbbp7/7/cWDIFOHESXXvwLZ45SXentw62nhnFS+JeKHq2\nhkyClroaS0a1TRpDBXXPPx1iQPut6mXGH4NT6YxlB72PgFuiQGAa4qczdno9\n3biZ\r\n=cl9q\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"27181e4c2c90af170c9149616613beb6599ff94a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.941ca3b3c.0","@material/theme":"11.0.0-canary.941ca3b3c.0","@material/feature-targeting":"11.0.0-canary.941ca3b3c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_11.0.0-canary.941ca3b3c.0_1615934474421_0.5405034933440316","host":"s3://npm-registry-packages"}},"11.0.0-canary.3344d12ad.0":{"name":"@material/shape","version":"11.0.0-canary.3344d12ad.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@11.0.0-canary.3344d12ad.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c74f2b7849d3b8caddcf34f13398effc14b41b8e","tarball":"https://registry.npmjs.org/@material/shape/-/shape-11.0.0-canary.3344d12ad.0.tgz","fileCount":14,"integrity":"sha512-MvKAATbrx6LljIaTdjL30OVBpCWB+pJ+etIzk6YPUQy2ffdtOdtXSHuz3VtvL1tS3RgETdPYsqCDMSKN4O+TUA==","signatures":[{"sig":"MEYCIQCjvDqVO/VZNMzpikhPZVd/rf/WqNqeCgOgbtyuNKRJzQIhAJEZbFbUT+W6ygGqAnLkI3KlcbBIp6o1K4FIN5Freza/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22865,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUdOBCRA9TVsSAnZWagAAd4wP/0czt2uaVFJz86i/uoyY\nQRRbbzX7TdmXKtzN3LYtKtT8DxFRR4o37fbj4FOB1FSErmIi3F/RKAipKZOs\nbaBtiz8a0+Q98RD7/YjtZ34DfeEEFfcaZFvaZx3By6UqV2sLzvnjzSYMI6Bb\n8xpaB/WIvjiIKrbHWEMOvg4xR/cJLgfgwyijarRM0pDlOH9zhNggEiuKzESX\nIz3lQ3KL5MlJzVxu6/Ajy1e+W4h2DgJbJjgpMip5cFCjxgVFQ5kqhxwvVuGH\ng1fYonXrQDVwUaUyhs7bVx8XKi3S+I5czQW/Whb/3MJFEv4cjaKy9DYhVj9y\nEJ2vYqR8hmUx3X2I0QR/Fg1zH+Y+DpFPmFJ9auTpoSqFNJwjpC1l45Acvvls\n0xbr11N37I/S6FMeTs8lTkulKAp6ONrZqzO1SyPsBRNDe9F6wmPflbzkl8ZN\nLB+zD81GLrBMY9i6svXm9wD41qHbONE5PQwCfc2Y1WPHfQQUaQfLQ4b8Qoef\n+8LSubUtZjiEJFcfisWy1rzUFdVIcr7WSB7PmBbIGhtq+f71oz66mfVPZazR\nZ/6kYlluu9hLtOgP/gM4KxpnEU7BR7NFcI1FE9ANsTvpJZ5bU6IVsworSyjl\nn/J6jkSWk4K7EJf0Fsmv0SV3WpIJuen/8mwNhWmmjHc8dz8Oa4UE4k/GFC7H\nZESs\r\n=7lOS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"fc17c547b4aa66b6412c0b0b56b75978332702cc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.3344d12ad.0","@material/theme":"11.0.0-canary.3344d12ad.0","@material/feature-targeting":"11.0.0-canary.3344d12ad.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_11.0.0-canary.3344d12ad.0_1615975297114_0.426352020756273","host":"s3://npm-registry-packages"}},"11.0.0-canary.6072ed604.0":{"name":"@material/shape","version":"11.0.0-canary.6072ed604.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@11.0.0-canary.6072ed604.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"552cc37ea4205c96e36a835765d1f314b7a3dad7","tarball":"https://registry.npmjs.org/@material/shape/-/shape-11.0.0-canary.6072ed604.0.tgz","fileCount":14,"integrity":"sha512-HQbFfE7alSOP0kVnam7VBeD81u76IaCZ46lLXXh4hX1K/lFCACxoNx+jl0aPmAgIfD5huSbqtLeRxSwskc1rvQ==","signatures":[{"sig":"MEUCIEht508XdWD7ghDF3lqhhUZFdQmKoAYCnWDppe3tlPIxAiEAjKunAx/IxtVt/j7iTYagrYsq6nYxa5bv2nkFtEn7p68=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22865,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUonICRA9TVsSAnZWagAA9WMP/26L++IC1+eKzycUBE3b\n2tFCtu25a0bK8zuv5WWWgMtLw1phza9hKeC4BywCYnMJ6v/+fNFk3lAnEq6R\n2B5Q7/AWlndR+iUpddN5muC1IMb2Vm7f028b5pOvTMaQsgrofgJ0hONWhEWD\nQbhi60FmBqr3X5WeqVOwlj2r3kK52SttK9opv+b6nucRP3tkGOwm5MCklmFM\nNBxFJpRozEEh0KDLXOiz7ruSZ41QhFcboyvu3DMu9+EpaNUPHiuFZB/RYlKr\nXTe+97DeONoxHvWTd/0jykX0C06rVqguOwPYwOe+nYEQlAgwGMBe7mZVXFvG\nKY9QH2QzkSIaTLruCQQteRUwMpcY4OkOfI4pBn0Uieh7WL7v7FnpUc4TyZtZ\nrthOUgE40Phs/Lc1LXQn62NAvDa1HW1WpXYDN0Mp6Ei9+NWO73TpZe1v7L1y\nEGQI38OmvG9JaXpCVDcxd9xRuXxgkVbzDbNe9+lbZtFnYSnEcXcRdVpv2oUh\npxjhr8JPfA2G8lcZj9nxNlTufB9P+3NlIL7cVH2gtkeINWH/vvanaGqI/5Rg\nPRulHSKeLPelurAbvrPBlvGli8NOupMLZJJlLnYppcyLMe0JVy9UESjjqrPj\nGaKKhS5FZIjLagGirz5Eqt9Yt+etAKVtCtc87xRu8Q3w2MPaLeqrYS/3Eh9P\noeBx\r\n=Tgzb\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"219b085de7ee97c7b75e5f25dc757e7b5240916b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.6072ed604.0","@material/theme":"11.0.0-canary.6072ed604.0","@material/feature-targeting":"11.0.0-canary.6072ed604.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_11.0.0-canary.6072ed604.0_1616021960195_0.9737078469083813","host":"s3://npm-registry-packages"}},"11.0.0-canary.d3a6862af.0":{"name":"@material/shape","version":"11.0.0-canary.d3a6862af.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@11.0.0-canary.d3a6862af.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"48c87aec0057ae20daf375d728c03583f2d5fd5f","tarball":"https://registry.npmjs.org/@material/shape/-/shape-11.0.0-canary.d3a6862af.0.tgz","fileCount":14,"integrity":"sha512-HnScR0wtCa5Z3Sm3jVAtr6Q4g4GTOg3I1L88soSsE+PRFD8KzBJNsa3FTEUNDRtuD8McqqAfEGLf/BU0O7Xulg==","signatures":[{"sig":"MEQCIHsQEKviN27N2vADERzxYlU0wLTqUjRrXbBfaFWaNiAsAiBlGc+Cb8ouSqxMwjQZzSeJbmZYvB0sHtQDaWCvgdnmhg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22865,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU32VCRA9TVsSAnZWagAA4HUP/jOTtXpyJmDkWbPeDsgu\nMNvKgcjNaWRZr3F2EarhxnY1AVgfXM8lRvLkRnw3ZDE1Htai+Th1vLueXHiK\n4FKLFf1ParX5WRB2TZZXdPS1A2BcSsQtZzxWyVnNsz94dnoufoP2wcHl+8vZ\nI7e4D2PFk7vUKnWYEsVJMum/zlSOSs+sxk3boDsj/lpMVNoJSy5NoBkNaJ4E\nME4JTsJxgRv9+jQNjaVAYVXsWd1h1MwlOfVvkX+yOdaJkL2ux0P1LVJL2QqI\nxXpWV5F5FcQdrLKP10zROt2PKimk1HW6QWhqsakuj4Hyqjki8HfQkvpV6Bkj\nCSPtzZzJ2QQ3asGf8RWuDnubLmRMEb1FQl747ulIzO9AlNFmpneUZW85Vtn6\n0zI+OTsg9UBvQiP2h7g33figaKBjVg/8yF4la63f7/uLLQXb9ifpdTZDBx5r\nZ6rm/csGv6LIiVzYX/oLpGc4r2HXbxSfcxV2+5hLkJ6Yg8X76pC3Wdu0Xe98\nqIJ3/F7Eos8AD6w9xNXjYArB98eYL7RIgURIFUA5CaR6VaZaaxMizac8jRqY\nZ6zkH5vXG5YXBt4lidtV0Qce3X11tmusGZ3t4FHiI5N/4HnLWb4maQaOVmpi\nJTe4+8Kp0OcuPo0NGw+yEhJOMcEYCJjaxYtnuhbfZN0wGmcGi+miJihHRDDC\n0bFo\r\n=GaDP\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"ab10f53a050cbeb103a3ee070a9134ff428deae0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.d3a6862af.0","@material/theme":"11.0.0-canary.d3a6862af.0","@material/feature-targeting":"11.0.0-canary.d3a6862af.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_11.0.0-canary.d3a6862af.0_1616084373437_0.6079451430910598","host":"s3://npm-registry-packages"}},"11.0.0-canary.40dd242d5.0":{"name":"@material/shape","version":"11.0.0-canary.40dd242d5.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@11.0.0-canary.40dd242d5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e2c105204080ac869e76e6f0b031a82922add701","tarball":"https://registry.npmjs.org/@material/shape/-/shape-11.0.0-canary.40dd242d5.0.tgz","fileCount":14,"integrity":"sha512-VEeIcaH4pD6U+6V+buYlDNmIHulbi/6BZqKdIo2CG/WTkNC7VKpYBBh949ODorbSq23YxG5nacoGuJ7NYkAocg==","signatures":[{"sig":"MEUCIE/OSIVvNePi3IoqAElOJeNc8LMSEOWb0Vrh4p3kLMsGAiEA5mNDjvgdnDtEbe306L7QZkLb80g8Ii9e1mRVF8t4/ac=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22865,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU8NACRA9TVsSAnZWagAApnQP/i5f8i5XgN4oEnKtvr9t\nmrC2901YCvq9VzbBo1IYm9Ei88fuZLjpQbcn34iUJkHjylVeD3GlgrrrT7l3\nedEkX1fPcvCow93q0oXAY6hDFYVsPDfQvAXAxg+4xB9YkWfqdUsgBJPEWYly\nwBx2+0VedLXSkixUY5oYdqXRz2nW76f7UNDNMzmUHj4YjeWp4qveYoNloj/P\nLJGF1Z/fP/0PVYW3nMbzwBEHysPFRtNMNGBH3qkg7KnxtswYCspSN5Qx+XHT\nkl5BrmnHdh7GLwWb1CWzKC4ZEOvakm2/YjmtLKtDOHv++zckG2ThkRGzltbp\nqFE6rMd48M+nA6sXUJrnS1ZMofVAOQyr44LtYUfVI1xoutDuSFH0IqSIuNSL\nLsRZtYxcIHc74vodan9/6zr4hG6KbNrkGmhF5USrcfn+KLoqZjP/7FlkTDk5\nURlSAb/5yLfz7RJ3+NhT1i22vIV4D8LWOkjWaTRJw1jKW3li9l9WNjLCb9c6\nxzxwbGufojMRtSvMKB5yrAp+xmSaXFVtI6WDMqOsp/64Zi7EovOcRsBJjUlo\n9Kfjlk1iXktFkDcElyinHnQvMWDsPhnzJgbb5qPuIVCbnZcSVd5y3Pl696fa\nLNLQX+c+jGndDDhmY7V+9Xcvt25/iYWkU07Cj+fmU9qm6qe5fmOZOBCCZD99\n1Sjm\r\n=0goz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"07de383ae306cbdee42be69fa0a06884d97ec259","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.40dd242d5.0","@material/theme":"11.0.0-canary.40dd242d5.0","@material/feature-targeting":"11.0.0-canary.40dd242d5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_11.0.0-canary.40dd242d5.0_1616102208332_0.40909799588072593","host":"s3://npm-registry-packages"}},"11.0.0-canary.ec8f8465f.0":{"name":"@material/shape","version":"11.0.0-canary.ec8f8465f.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@11.0.0-canary.ec8f8465f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4cb4a5d265f827da5f83d129c297cdaf28f0040f","tarball":"https://registry.npmjs.org/@material/shape/-/shape-11.0.0-canary.ec8f8465f.0.tgz","fileCount":14,"integrity":"sha512-V+amSDBwAsGATF/JVtShMPSN9E6hqipMgADfXm/Kjl5ktz5QJLeUOf2fRK3ToS1jKhYX1v23H0HKuz8yAUEj5g==","signatures":[{"sig":"MEUCIQD50sm1lrFUbB7D5kiuO55vV8nbyP28dn4b1voMgk7/MQIgLP8jNlzHlCh5WhW9cWzUSlrKs8sbQMnGSX1iwdm8SEA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22865,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU8mSCRA9TVsSAnZWagAAelkP/A1hK0356LivypChWKf2\nOs5a89p0N8FVAsMSXg7pf7euaUBb+ZMQp39mTWmlApwIuykmUV1SpG3ucSj4\nYtgYNZZE/Z7qe2ZYEdGc408OlHhe6lVPWq+MNA5nXDzDG63DRGLmRI7lG7ck\nOWD9AVJf6t8plTgd7RXzhoVNBQqkW1qoKr/oKuzUD9w14wdRDC2sB9pFL6Ee\nVKHIwOHLUv0wH2B6/wxmumbaI/HhCnI/WfbD8NCnrp/26bWUB9EjhlEG34IM\ns1EDBNxLDHmdWGqg6eT0QyS70KA/rkDTy1N54x3dBnRQpal1mlp2J7H8ZIgC\nbzAgKI+dxdYcBvp9qke7ppDFaCUGJpqDrfR6p5+vCkKsEMSOBx+Y5ZBc0ugl\nL2rk0kUmdpnUGBEpBhTCEYTW+oQNPlVkzDV8ltp2gp9WefgwwTHQUPfeUGsw\nKObVzfHvkHshm/4BjZ0UE4s+lO3OGjsY0PUFVym+Rc7+DwgxNVKMlAyw7GSU\nj1BNx22hG3DvyMAaUrXW7sADNGF8FPi5z45kIs0vrKFp8yTaBHLt9giLkCA5\nQD0H82/0/NNoT3XVz75yW1UaDN3VWW4WShDOtNCVUirFBC509qRpYRdJ7gJ4\nNkfmQAubY65HQaY/eAdRbhLiSkJ7PNS2T7xz0rWFR6MG9+FPmmaBAHMabJ/B\nJ4dJ\r\n=0/bX\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"896f8e45effbe3c44209b4542bcd3d10a7f8421b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.ec8f8465f.0","@material/theme":"11.0.0-canary.ec8f8465f.0","@material/feature-targeting":"11.0.0-canary.ec8f8465f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_11.0.0-canary.ec8f8465f.0_1616103826205_0.5378608021190163","host":"s3://npm-registry-packages"}},"11.0.0-canary.da38969ec.0":{"name":"@material/shape","version":"11.0.0-canary.da38969ec.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@11.0.0-canary.da38969ec.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"717d2988bf0574105f784d6ef8b916e02e11093b","tarball":"https://registry.npmjs.org/@material/shape/-/shape-11.0.0-canary.da38969ec.0.tgz","fileCount":14,"integrity":"sha512-qFA/2aZcAuUBKc0FtPYtwfoKghfbI/ztwtPzikKtsmlbyGYEoiqolgsmxLa6q4UUShBnm3GnheGSf6w1y/piSg==","signatures":[{"sig":"MEYCIQDflCVylQhf4I9zYaVmNwKu9Gr26EQXeSO/8vAxKNx9VwIhAKaUggi85Cb4GK8yBgE+9lD5SdaL1FzWAIi20ok/3MuC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22865,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU9F0CRA9TVsSAnZWagAAEX4P/iq2IWC1TX/wVVrGJP/7\noUZj2h7KZYCkf3QM3itFCTPe15qncCr7uS/4qOe0NkFlfhXFCAdqUEB7FE6s\nOu6Y7Hp26Zf6depmWSUGULA6mfnrlu9PSgtyEb+NO2QlwJySvPsjPmWVDzIX\nPwXmsuPkWNKeXNXTchzvv79ejr+x+pBUY2shLp00gBuJogRAiJ7K+rCWaJAI\ns5iu1UcgLNfop2Vl/6qdICN5lHrF9C16Cd9x8WYcjvgBwOJaFdhnjoliZsi1\nG8nkz6pCxl2YDmKdg52DAv/6gRhESRyD2I6esKpGc286XaKVkZN+4EgdQ+DF\nTGbOhM/g0pPXxDPMf4dKp+XdKLn6lihUMdzvw/EycjY+1HTKaiOiFJZkTtcl\nV/kwAR0vv5BSfQTOvTIskAQ+YXv+dwUD/nz0VAuWvG6DRga300Lucc2T2fY+\nBrA6I59BJ47nZYVx7A6sHWoUw1PsVat9ULPDUsMZkIalqBGTnhchMYF5tkEx\nBy9pEFq8CqqOVbyJkxuiRt71jdU5AYyPxdF6ojBIovfEfdQT1izM4qrfuOWJ\nxHWluFM8dk86T9wEDJ2+piT2EmT6KYiOGucIV0yGFPVZMy7VJWenuLRJzMiB\n00OHhQvGzHM538jXNXr19adCbcyzKmKB+7V5SjKnvuGhh7CWxP5Hj01lJQe/\n+I6d\r\n=2kfe\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"b43d112facdf74c62e02576a918d522587133fa9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.da38969ec.0","@material/theme":"11.0.0-canary.da38969ec.0","@material/feature-targeting":"11.0.0-canary.da38969ec.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_11.0.0-canary.da38969ec.0_1616105843938_0.6706350646945134","host":"s3://npm-registry-packages"}},"11.0.0-canary.f5246264d.0":{"name":"@material/shape","version":"11.0.0-canary.f5246264d.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@11.0.0-canary.f5246264d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c0e01bf04a120e26ec1fb6f48304982e5c035c3f","tarball":"https://registry.npmjs.org/@material/shape/-/shape-11.0.0-canary.f5246264d.0.tgz","fileCount":14,"integrity":"sha512-GbyVH7itakDtfmF8s3h22nAYOqobgYjM/6c2d/IM4VUogW2MZdGsg058+wmRzggE0zvsChQ2y8nrXbt7VibsIg==","signatures":[{"sig":"MEQCIG0Dn4MMS5HS4MXX8acFKIj6u0Me+be9uBU0KL/tL94MAiAJbAihIo8lQLjp16K2Ww4l/yzrh82l88yvAsyl5bfDnQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22865,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU/JdCRA9TVsSAnZWagAAGTAQAI2Heg1F/gIVytOBcr5U\nRGvPyhPVW7UNfOCuGqVKIAOomtxu/3ayqg36qA8bmVCYKPrzpChgkP20mkpu\npSgPPLbm58nr7zI3uQRl24tL17qFwQS1p6Nuvtj7P9qEKaLGrrgcU5DGVyZo\ng0thw3mjCYNv0/8XoNqq3NbUtxaftPn9RdW0Q5k+nNGL0SBx3DxOEO6fZu4H\nWSQ1502j6H+UVKLSLJzV9UtyZIG9e6bINKmJuigfFvS0lmy9Yk1dhmXkkIYc\n6A6NcQceMzrYhmDrZSU8vmRnkG5Nu9WJ+ys6In42lJX7+L6Eb5wlvYaGWToQ\n77Ozbd+VtCL/NedR11MofO1eaIuSLLhC01T74BKgqh56Fx+oZOsyJCJeBAkA\n8ErWVdXFd1WJ3Lz+QljNOGuPi7lEnyqZAaUt9jAkJtC3JUg6cyC7Y1SGp14d\n8z8YMtfEAaCtSIolvidzB/VKrbfI177+qTvRBQGLJ/tcqLb9DKIt9h6kLmD0\nkbhhs3BVCe15O2VneWYSUSvBtefut0v3v1rgDvEqOFfAPieCMOYgfBmX3HgT\nhctES9Uq2XEJLgFICDwf1sOYCI79FJu9aRsCgE9vi8fgJhQjmEMDUJoKsXsL\n8Tr/T93psLnH0ducRrE1pC3f0xeBwZs1e3WG1744C4w48l4F+5QdF/RzNqOh\nFUQb\r\n=JPtY\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"e5bc1717405750210bb9d7e3572f0cd36c9bc0cb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.f5246264d.0","@material/theme":"11.0.0-canary.f5246264d.0","@material/feature-targeting":"11.0.0-canary.f5246264d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_11.0.0-canary.f5246264d.0_1616114268676_0.48423297006876287","host":"s3://npm-registry-packages"}},"11.0.0-canary.03d34bbad.0":{"name":"@material/shape","version":"11.0.0-canary.03d34bbad.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@11.0.0-canary.03d34bbad.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"af780d7c5a609c4ae7e7a8182a6624652e3bc979","tarball":"https://registry.npmjs.org/@material/shape/-/shape-11.0.0-canary.03d34bbad.0.tgz","fileCount":14,"integrity":"sha512-YNYU6nOhFR80n887PQUaS+5UJkzE6z+EiHwquWKJJ1QSo/KdvinawtxnaQ5EaoyHrowJgRqT/Ip63XgBdYPtBg==","signatures":[{"sig":"MEQCIHfb1z5vAaUoT4UFMCZ2a/KLQQfOTsNtQBx9gNxbGllzAiAFdkKzlKzB/JTBEKtz9NslEMMOw2g8x+hxVEsbVZHNhQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22865,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU/V2CRA9TVsSAnZWagAA0uwP+QAKa9fIHiODTJ3gIvzf\nz8PhW6kthdumE9J3TEQNPHLO3btkVHTbOxMfo7mxSd/XlZInhjWC0p1LXTcU\nak9yPKeyiQqYePP/Zq3xcRHl9tsPGrXyZzmOoyw2t/DNyOb5a7YCQnRVxTEA\n9Xbwwanc043RYVn6TwRQxaH+kdHNj1ik+2MTK3HIw5X3KjSH0+fawTF61p4O\n6Qs+jLI8pxsjsb/2BSyTXXR4pIl2N6VBW7MCwPqJ5uc63bc6vnPj2qxLXbrI\n84Fj8FfPn/fGQa19i7NpbU/JBkxJLUsVkQEzNGfG6t6yBWky1SDLzSGvcgJI\nnru0o5wrfaArS4uJ4gWtCXf4XIVpMcUk4LgJwwphTxPCHJl6sm2qqcnQiFuN\nN6aCQOh0X39OQ9ymSCjeZXQJUftibM6mYd8Y63sO8AsP38gSkQ1yQAbeMFW3\ndN7eQC9bebYr8ZYxX9qApwLNBbL8Uq1LiowPQ+hEbKGmvir6Ki8FGcWNE5q/\nJUAHYS1vb3QB5N4hRWSEg+lVwLSwMsRLSJ4MYby6CsPYJzpfkl7ad3E/qXtg\niO9jyToQpjWzn16RmbvUnscuuCbb9bKW7oV4DRLRdzzg9GGnijFtP758xSDA\nQTNOIstMMsxo2dGUOGCACvXhLbRUz89TSRxIDWZMOaCnbQiv1lpOBRLGoWgz\nHX4T\r\n=OIsR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"650c89999524e7131f5808d28c8ea2fa15db0c86","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.03d34bbad.0","@material/theme":"11.0.0-canary.03d34bbad.0","@material/feature-targeting":"11.0.0-canary.03d34bbad.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_11.0.0-canary.03d34bbad.0_1616115062010_0.501569931744182","host":"s3://npm-registry-packages"}},"11.0.0-canary.cbc57c600.0":{"name":"@material/shape","version":"11.0.0-canary.cbc57c600.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@11.0.0-canary.cbc57c600.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ed3e317c1a5939d0e755ab0110ec9ea8e6391767","tarball":"https://registry.npmjs.org/@material/shape/-/shape-11.0.0-canary.cbc57c600.0.tgz","fileCount":14,"integrity":"sha512-YzASjRqyfOYS4GmXv8wHT+LW1qsKP0/z4Goa5tz2e8OzE9FnIUJsA2PHNhtTkVqfzsQtXUsvTjTNj+cHDryJjw==","signatures":[{"sig":"MEYCIQCDKgigFUCdy/dRhz6rp3xWTVMUaQkCQIGLruhEAIxTEgIhAK+8R9dcN4lrfU3G8QOM/0Iw/BlGGg02G7GkAZkjyd5V","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22865,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU/d2CRA9TVsSAnZWagAAibYP/1rXRDBFuN8U2/ljr8WG\nFAGwR1U7NA/AR59Oi0ErSvbdt8+uQSO7ctyWKq6w+va2izsnDhbZXI9Tdhpf\n0Bk4OXpzt2xSDwWgJQTEdjFaiN1Q85C5dLYv/fl0BtUi1JNSzxE3OPyclFBk\nOcUIgd0p54XggFiiX+wkAYTsox0gQpwEe6miQwkbVhQuMSgn0HJ+6Y8470T0\nZqLoS5rU05ZsKE87yWwhvUpQ/OXzphnNgX3aSJ+gOdC8Z3c8CDa/es1OOk3P\nYjMqhT18jLbEoquHhOloKaT2SSUm/byXY/7cJJRDDeEGfO1j7OaQ5SXNWoDQ\nWpSycIaMY/HyFJbMoSnyoo2/AzyTXjKzpehM0x2z1kfPiiHcFI6GtJ5GX8UK\nsJlwFF3ldF1sbJP5S0nMDDsXUf8JChUmvLjottO6TIYHctH+0nsVCSe/h8kg\ngodAKA5FaZ8SOuEqjXvwvIao08Kelc1U2RI8kouMfgdnR/PUDD6tJIvqk7cC\nwG3xRIM2LL4vmgmt3G47rR0T9LCal37qkXfWT7vVjeFHWwW40vRCDUJfICvI\nHl9FlGT5eOubIlMZ1IdSdhVhPINjHQJQH8tdNBNSBGo3qv8srS+PGNaxxbO1\nXOxZXpHF/OrlZMDpGUx/BzY/JOiRdDjl19WRXkhwo3x85//0NSG9BMr4pPBk\nY9m6\r\n=oMRU\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"c16ee9654e2ac3913ee3140dbc31e34bbc443c00","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.cbc57c600.0","@material/theme":"11.0.0-canary.cbc57c600.0","@material/feature-targeting":"11.0.0-canary.cbc57c600.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_11.0.0-canary.cbc57c600.0_1616115573731_0.3422304583506579","host":"s3://npm-registry-packages"}},"11.0.0-canary.d6c5bcf37.0":{"name":"@material/shape","version":"11.0.0-canary.d6c5bcf37.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@11.0.0-canary.d6c5bcf37.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1537909a85e7364db7d0936ddcecdb7355461b83","tarball":"https://registry.npmjs.org/@material/shape/-/shape-11.0.0-canary.d6c5bcf37.0.tgz","fileCount":14,"integrity":"sha512-UmDWFZa2eYcgmcCAlcNsO51mopPxs0hq01lZBHOb93qJP1iHkPMFHN91pkRWAPArOlB/G9Th8qwIleK3Ztzodg==","signatures":[{"sig":"MEQCIC1bmocr2+d6qfdPxyIMs61BCJvA93t5H/B2ALEnUz2bAiBPqdZKw0N7Wj5h/2YScn+w50xGbrnBdXcGNRkFSJ79mw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22865,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU/pWCRA9TVsSAnZWagAAhKIP/RvCJWMWueMf5xz+AI5c\nF9BOOfNlEpQxh30CnYqQRA2U1ncfaypAJuxZdVOJo7gL+DnoWwDzXJLeeyNh\nOwjtDIoZ1Mx3t3EKAaxUeRdgxbOAnR/3dg9aT6eAeFI1PguWeDiMUocWU2lS\n9WWScZvxnK9ohRZJK6r8Sw4q+IgIHH0d44gGRiblX6tYGcjflyb7aR1B+0kW\nFvpyKGvjDSoRGz+njQD7iG9R7mIs/MB7QWxea6M2W3Ckrh6Yte+DsC2iHxJ7\nh3flaaYZkFzI2qKTB8ji/x4xhEFB6Yofai0mY1XJrT5J22alJDtwtG/+ibEQ\njYx/hshK9mhzKdWwNDDfmv05fK6c0ZEipqGFIFcI/yePQrEVLr2QGY42MIdU\nHb8LNBH4cjHHJOaSYhrd9+4gU7p3YQp47QSrH/mzDl36NzHTVvxYeX9Oyc8g\nvX58mEsXe52GjRWijoAK+zvmzhX3LkqGZE4/IGnxmHYiS9QNC6pjnM7h9PJL\naE/zRA8rY0dUgwazj4o514VjzlgHIP3uBTXP2qczI9vTCjRSahq7Z0I8UTDv\nBODRYHb0Z1+SjybbxFg2zlCQ+/ArQKZznV/Wwq278kXoJ82tjYVH+7MTr1dJ\nqGinwnckFOfEGO96/WQVjwGcjCb/mLfTZB1vRAuAEIcaFTkfcW5qq1ksS9Uh\n9KAh\r\n=K8v0\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"7ed31c18c565964157fdadec7c7876ba58c6dfff","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.d6c5bcf37.0","@material/theme":"11.0.0-canary.d6c5bcf37.0","@material/feature-targeting":"11.0.0-canary.d6c5bcf37.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_11.0.0-canary.d6c5bcf37.0_1616116310477_0.4931727521897069","host":"s3://npm-registry-packages"}},"11.0.0-canary.fefc668d7.0":{"name":"@material/shape","version":"11.0.0-canary.fefc668d7.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@11.0.0-canary.fefc668d7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d08921737838fbddd972fe0bfdbc45c6992712ca","tarball":"https://registry.npmjs.org/@material/shape/-/shape-11.0.0-canary.fefc668d7.0.tgz","fileCount":14,"integrity":"sha512-KKywdrjj5dA/iRjR7rnv90I8P0zdmhMIS59j7fIT+CSA7UlgQMOB9ExsRcJkWFWj1U4EKKgTJq8hIlR8YF/RCA==","signatures":[{"sig":"MEQCIGPTao7LOvj1IGGRhcz6sVdnIl5YUI1AqDO5obCIVaDxAiBmDWfqM66eF3ezRd59zTb33H4627jz8Hr4n4XEZQJXFA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22865,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU/9zCRA9TVsSAnZWagAAlZwP/iVxNrULpirhNzv2JGxU\nwOtdszAfEc5ZqOL5flAccByPxPI44SBPfgT7zCAhSWZdBl1MtyQZXOT81Lau\n+KttN+/k7asxsMnI5MFouBBAbnynO49V8w3OMrBO285FUhazOzEreyreAg+H\njqkRhk6pzwUNgdwc6S8YGZf09AxHvHpMFN9NGNz1WAYAZaOghdZlmpNhgNGg\nItsz6sg4ZiZDy6HWF89MY9FInfah6DaLAWuB7GClBSquzxfrpQKJ8Jys6ne1\nzk6aJN8dHPqk0EvtcB5G93q2DHMQ3nxivQU6Y51dxmNACGLyHC1HHzQkJWHO\nNJidv3Nzb+jpN1bP1/k8SyJNkvRRyGw5T2hwMb2MLAKkpJzhgL+EXoTeYAHo\nhSIIsKPuOv+G4G2tMI/pN6Mf4QzyKYQAvjGqK6HC+yo27wTw+8+T58CYJZy0\nnwd62MSSi8KO3LWGpDujrk93788K1bWRIbxyMRTMFD5eVrOU+NmyJLNYDUVU\n4cPNLl/O7VlXzExcgi1GRN/qAUEv8zElwotgWt5sPr1ttq17eacItAoLph1Z\nOyHSH3KiVKQcbVLOrkYMVA//VeFwddesgEojT+agX5LzHDgNRnqG7zkRzlfG\ndN5iLMw0Q2AG8f5G5Zb+xDda6oiuSWCXBAn9Dxe7pi1lZQisqW6aB1gDjYq1\nvXbb\r\n=5X8+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"7c976c590b16e8f3a000dcf5cf2b4daf6269aa21","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.fefc668d7.0","@material/theme":"11.0.0-canary.fefc668d7.0","@material/feature-targeting":"11.0.0-canary.fefc668d7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_11.0.0-canary.fefc668d7.0_1616117618702_0.26409134573927506","host":"s3://npm-registry-packages"}},"11.0.0-canary.faa7d3226.0":{"name":"@material/shape","version":"11.0.0-canary.faa7d3226.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@11.0.0-canary.faa7d3226.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"095589ed957f3b21552881b80777f0e3c992d7c2","tarball":"https://registry.npmjs.org/@material/shape/-/shape-11.0.0-canary.faa7d3226.0.tgz","fileCount":14,"integrity":"sha512-170/iZMoIwAeRqZw/mI3yzHNHvOdc6H1XTeDFYAt7IbPl9tP/zvhkpDIKyQy23GMRdEph3wog+TcxJ8G5sk4Cg==","signatures":[{"sig":"MEUCID+sT9p126Jl0M0oMoSgn18h+tb//nQRZ8e7XIa2dSysAiEAyFJmgh0TPIxVHDdeyc54e2tm7oDQy4jNj2/xwNt8cqk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22865,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVOLWCRA9TVsSAnZWagAAH9AP/1ZVJL1VKMAIvCNxEhAi\nftpsZ61eETQIPGUrz8ow9zI8xUMJjLUBG/hgrVX+LnGBT1mgzsmPjLJ6orSW\nIkBloyo7t/NkEOKai3Xvq4r2hbqUDznfTJ9HOM2j+ZrwpGihqcN07rpVtN5G\n3GXPQEIXFB9Fdl0D1EaFB9s5Qtjm4tkRfX9PVG8H7MPlQs80nJfhEFoJFKek\n32vLCmWzvFIIBZ2ViDN1oPTBsbrsiESLARsi2Mc11NhKURbDwmaY6aYL8jOl\n6jqs7DzNJ8GpqbNMl74TpKFN5rf31JJOC2f+gc1SoTMzadchTjea7/xKqUlz\nEwvzrngAiU07fpV4s425mEZgzHxs1jhM9SDcIxWRE2ywC5SZsF35hZJZwEDO\nTxVzbM2CeHAkCDvrgeY2qv1NVC8EcHf1ILMKMDS7Ur953bqSeUHpytUy0km+\nDTmwOGQCvgKw0aeOhQ2zZpuq2gQ12IHb9AJKZgw9jex7J2pORFsuR3DgtI9a\nR/UJgBGTFuiFTvLGR51Z95DDQbuvWB0AChGFMKBcVQFEmmkA8SNgq0Z8oV1U\nFWcQOwLWFY4/8j454fhhFSdNrX4CS12t6kfB03W9je1aUVNk3mr918HtjgE4\ngHrIN0/3E2YpCt0blJO1Hr6i5+xANo/Z1zt4wsIQTJasHOIJuMKkjiLDfctR\ngIay\r\n=MpzP\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"c6038c8b2af85b70f2434939a69416e1593d5a36","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.faa7d3226.0","@material/theme":"11.0.0-canary.faa7d3226.0","@material/feature-targeting":"11.0.0-canary.faa7d3226.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_11.0.0-canary.faa7d3226.0_1616175829419_0.36594742298477345","host":"s3://npm-registry-packages"}},"11.0.0-canary.c60449bc8.0":{"name":"@material/shape","version":"11.0.0-canary.c60449bc8.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@11.0.0-canary.c60449bc8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"44fe59426aec060c6d40f34a1bf0b170b03dbad7","tarball":"https://registry.npmjs.org/@material/shape/-/shape-11.0.0-canary.c60449bc8.0.tgz","fileCount":14,"integrity":"sha512-CQ5qfqfDS6r7cmVeKbcAMVL/4fpPjEh0RKZSvWCqnc6P1tpVzxFyNB1Gd3+/03jz6OViAuuxq8WeL26Gm8mDRw==","signatures":[{"sig":"MEUCIQCwWvhbZtge5HWF5SQl5GIXbfZ20XsvGrV1MiQPMplT7QIgfBCC3q0UQFAax6GlNvL4xNYiR+rtRsFezwDT3qLhpys=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22865,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVOfKCRA9TVsSAnZWagAAWuEP/jP6MJ0pHuVl+NALnArR\nn0/8G08Hb5k+Uz64GER6UZ4ZebEQGAtidNw6tr9mq6qVpSZ0hEfgRPtGZQ/C\nGIo8AQHgWJhg8vIoHyDIbeiSos1Wl9CYfc+94plEOmw5j0PFPfyTgFrl+Aqs\n/RiDdx8gWRVE499aX5U8OP/gfNrK+hQXB2QSWNCONZR2Hs0TcIsnx4PXrQHQ\nFLWfTnBYXZYo+S31mUgC81DZU80mcSv0uFEqjam9uzk2GK+pyjfBWPcCmQtU\nZQhYjuh09Yr3cFUwjADsIkid1KKROSYc3IAVy3kqjwfP7cTUAhJZZn3v+3cZ\nwUdnxM9V4ELMKJCmlqqsePrUGOBYQEIaKIUoXXjxyvjXGQQCXzaePUoB6Ai3\n6JyZYIk3wXew1C9AzSp1YpVFCmIetXC56lHhfS5q9KkcPLdovj5KRC5F/3gw\nIOTsI/pUPeroUBQJ9cMK9pQD11/UtBDtTmoEHFmnIwix+UOIincfhQNmMpjN\nzZRsL+AUQNjywJ1LPWoUhQOqAlrRiGbnJhwZ69EnlLPpBggCS5gqLpNkaFko\nYgUzRUcZ+ljw6qgwfyKBiGcHVBtM4E4p7+JWto1kPlxeD2b0Wx9zsU5MV3Lo\nGHEyEs5U8+eMztG4cyk5WGHJg/Bsa/k3wO4JWm/6xKCTaf/5drA5NSAzWei2\n1XVD\r\n=nSHj\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"874083f8b4dbf457158a7eaf9924ce1143ef6fa0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.c60449bc8.0","@material/theme":"11.0.0-canary.c60449bc8.0","@material/feature-targeting":"11.0.0-canary.c60449bc8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_11.0.0-canary.c60449bc8.0_1616177098444_0.5961232042885309","host":"s3://npm-registry-packages"}},"11.0.0-canary.5f0fc444a.0":{"name":"@material/shape","version":"11.0.0-canary.5f0fc444a.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@11.0.0-canary.5f0fc444a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"250b6aff4ce0a261efbe8bdd03c46a77099ee407","tarball":"https://registry.npmjs.org/@material/shape/-/shape-11.0.0-canary.5f0fc444a.0.tgz","fileCount":14,"integrity":"sha512-eoEbFFAwLWvTlHUN0TxLQl1ODpPuAVU7B0AkYOXK6LX0j74yGLjNFf1bUXJqBG38FxrEj38m5GhnsoZRuckfDw==","signatures":[{"sig":"MEQCIGWl8HIOZlOshxiFp84T5F4A6s5tmBChmjikdjuROuqsAiAjT1mKTAMUm8uTZjIIRW8DLjV5bu4dQ6rPeyQDxr9BcQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22865,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVO9rCRA9TVsSAnZWagAA9zsP/j3ETgmFQgkD/Sgzox60\ncqTW9acw/rL7quCREVhs9+7ep9OSGUjZRW9GAb5uLeFegEv0Xzot/QxiqoKj\nq3aPVR4NI2e2eV4FKx2wQRtzS9AgZlt81ck8YaGWCiHXJEj+CoIQfYrwI8uG\nc5kLamDQltN0H7ecKZrCtIPEm/QnlmGpdMxCjzLkzJgmtIVFnLrFswuF4UoM\nFfOLCYUqR5+19gBZV7r3DlZk21HQXT0UBJXpweiB6TndtPQZ/tZko1twePvF\n/gjZu7EfjPNVKpEC0EgHSTdGCfMJyWl6yNwm+0iDZpg7JhZxstuwQVPSVCKy\nun2qLXgpGKsjFQSF80vvVfjMaQujdSofWSQOlUqh11jwV7c0JEwJZmGfdhbN\nFNODbAKi2qQB/OdKLCGNXACwUgau1jnDypbUEtZzGJzkV110lLBU5CJrTFy2\nd+UD7/khbEhSCpxuueQo+pXc7XLc/Bno4OtYzy2nEHBzApKRVqUTTsL4Q8dQ\neIVrVKuJf7nRzxTVjLql6yx/+RGbj0SjkYXfhHbpzP6FtZ/Oxtn07EQuLWIm\nwrdbsAUDcJHlxYBpGOGpV81aUVP9sRu9L9+DGklJX5RtmzUgpmX1jzi9UjFg\n55eyiQ2DfCI1f/9AieZ58BVKqSuGlik/Pq0Pm2xWIrNrmokydGbLIkSyrTl7\nu8TG\r\n=QAi5\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"122f31622300f5877c850a516d74f7c692d0718e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.5f0fc444a.0","@material/theme":"11.0.0-canary.5f0fc444a.0","@material/feature-targeting":"11.0.0-canary.5f0fc444a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_11.0.0-canary.5f0fc444a.0_1616179050956_0.4226002060310339","host":"s3://npm-registry-packages"}},"11.0.0-canary.4567a750d.0":{"name":"@material/shape","version":"11.0.0-canary.4567a750d.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@11.0.0-canary.4567a750d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fdb3fb4918fda2751b73df7ff31d3359db8f639c","tarball":"https://registry.npmjs.org/@material/shape/-/shape-11.0.0-canary.4567a750d.0.tgz","fileCount":14,"integrity":"sha512-Y3TDlGhoReIPcCV0b+rtT6L6zlnQpi0TDG/AYj6J219mx+7WKyaAocBPQ4to96U3viiJm4YWw+ttJmGsC2/SYQ==","signatures":[{"sig":"MEYCIQDY0AoEastr4pBaaVVqT6bHyec4rxwJv7TUT+jvjcrbZQIhAMTjY/ysK+oMg0gZxa/ZE3nXAj0paJRjf25hu156w5hr","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22865,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVVjnCRA9TVsSAnZWagAAUtYQAItuGHgyMVpiPNXDgNs4\nApferv+Hn2KQs+qBwGgE65fzGLPNFSV/Fct+rc5Me1zjaZZ4xV7Uj9rmsAqk\nVFql8e/F+4hAEY1s3kyAw6/v24AzbmLxGY7xldN+n5vyK14K2zVTRbj7dJEK\nSQggueJ1gS3d4GIpFRkhzNMfPm3VC5OAvYOLhlI9EqTH5edpZGl4UuYx6rh0\npaNX2q632MS/Z41icV0Froi3lX4MPM3mII/ND7Ob02c84RkeIT+wCXDN76oF\nDzukSg9dSDhuyAXWS139LL+kaofaKtK+gag1JlE3zmchhZuY6qBw/xVIis2X\nuz8R6qGwAc0RdJi0vaO/GqFgSluwSHKt/w5sR8LMgJ2RykZPcUEFsrJknwgA\npQSeiHcZAzhHYDGqAHMbQVTWsWng11DUwyjWFT+IDaHYZDUo6DD6TDYrZeFW\nsIlIQ2K596/yeDofaBAxeuWOZMTP36xIIbtShZfKB2O8TChh6hHDKiYq83jN\n8cI8r30e2IqR2R19prAcfurTLVGYMsgYJg7PjkVn9rZGS6DB4rytHtzaOcDQ\n0UsplSQFe4MkS7BdPniJsallRP5/Fv8QVOv6At/kZ02cktRboHOPZMCmorBY\n1kh33494RdtTGxDUF004WcbrpdDSHYedTCtwEFaMijzZbmBb+uWC/xrFXdoD\nHLt3\r\n=dGiJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"e165b3e1af02e963deb71d6f39a7df6962710c30","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.4567a750d.0","@material/theme":"11.0.0-canary.4567a750d.0","@material/feature-targeting":"11.0.0-canary.4567a750d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_11.0.0-canary.4567a750d.0_1616206054540_0.995362556430877","host":"s3://npm-registry-packages"}},"11.0.0-canary.0cde52f5a.0":{"name":"@material/shape","version":"11.0.0-canary.0cde52f5a.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@11.0.0-canary.0cde52f5a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a68713daf63dfd29323a20090e63e8d43217c982","tarball":"https://registry.npmjs.org/@material/shape/-/shape-11.0.0-canary.0cde52f5a.0.tgz","fileCount":14,"integrity":"sha512-d6XITXtHBqWpnNb+OXCz8n63sCjfwse49yNHpJeaETxKRhbPX+A3UIxZ8/zEtKA7jpFeB/dhdjV5wabdbEuNkw==","signatures":[{"sig":"MEYCIQCvtcqESXIGF60kYlpWs9gnqNToBQpOvzNCXMbBarcCgwIhAJgeQ8zvtNups7XRWq1rFS5/ZgqPHdyVtKskK6g3KRvF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22865,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWTAfCRA9TVsSAnZWagAA8PoQAJ6DeIN91otoCDvH/10e\nQnBQY7wODqOdChYqlO0FUwk601GyenkeJN7qRZ20msT/WMOzg5PCrOaWZVZU\nFkoZQF35O4KmOsPkwO4X+oAkYWZQbEt1OfVstGywJmG9SCLcTO2d/jc7liwy\ndsvpThMRvk2KYMzc1ZNKZi0inNw38QdmVED96feH4EpcXl+Tfw5JEu+3wh5F\nUTDSEwrd5ADju3y9JmfF1kIFDA6PHsT2b86GcEOeAJa3tydg5WM+HYKUeImL\nin/UMu9GomFdpCM1Cmoblqr7XWHfGASJ/GFxCTRak4tYEE3O+BCU8wOQYgRP\nADKPdTJmsldWca0a3rVQw0bG8NRsSI5m8HebgrpMNKP5ld+oDkLVwm1l0HoY\nSnWG4gZJZ+mbqtOzd2+O9fKFB7LTMTA8o1zuHikSMFx1AE+wqvDP/TxTt9ur\n2fMc/uTaXzP99n2NeIOnHYzlDE3aEtL4kKEDxsmEo4wt+gP2els0aIov3ztz\n+kFhKFSeZ2zSCImlWv7o2TdCHLi8ktHVmDJPaYyEEMC+x0t99fPBBiBHFGGh\nu8yvowKtWJiTFF2x5KkRL8Sb55bV6HdU8pshozS2JeftvucvrzzEq/J3N1Yu\nDRpclllwg5e20t0dOPfTeEXSCSQirecy6BUwd6k1Qg9bK6AlaObXvBexVfgp\nrfEG\r\n=Nr48\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"6f6719c5270f569fd2ab44620e89ccd53a31f98c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.0cde52f5a.0","@material/theme":"11.0.0-canary.0cde52f5a.0","@material/feature-targeting":"11.0.0-canary.0cde52f5a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_11.0.0-canary.0cde52f5a.0_1616457759427_0.44633138047973175","host":"s3://npm-registry-packages"}},"11.0.0-canary.48f4b67fb.0":{"name":"@material/shape","version":"11.0.0-canary.48f4b67fb.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@11.0.0-canary.48f4b67fb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"faaa5030a1c24e85820a2847e0fdabad9dc5f686","tarball":"https://registry.npmjs.org/@material/shape/-/shape-11.0.0-canary.48f4b67fb.0.tgz","fileCount":14,"integrity":"sha512-Oo/2NKTp6ScBSlu9qOyDz2qvMUs216SENHZWKzpEGRgeaJ4BOHonlKCKEBEfSSjsGdm0JFGrEyGVNY6BGtEkkg==","signatures":[{"sig":"MEUCIGl+rnnUN8hUD3JluScKnp8cOOfF14s4YvKCZgzHbmz0AiEAvxJKYCkKerwXPgJTk6Qy9SMPD+Lrj618ieSWE/pjYbU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22865,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWkc+CRA9TVsSAnZWagAAE0IQAIM+qgWOVzpUELkWQ27N\nYlcllekl1DZk40RPaGvTyTLyWM/Xfc7FRq1Uq9RhAZdLZEC/UD5/q5SHCr40\nBScWdpKFg1FVU1S9GzR5jJYeXiJbxBDNFiPes3saluPoPTR5uhB+Lyqfl34g\nt0BY9U7u7irVTN2xpEvJ4awsUKMOsrdxKpsa2p/8x6oCBgQ5WsR/YdNk9kfh\nTaXwisr/Wv2z+7bqKvLDaeRfZM9IjCEiRBufaPTksikiHNLC4v8cOlgl6Lp8\nac7V91ZqPwdTpKEijdk/XG8zlTRXRWFCFEdJrs+bFKlunFhd/tp7gQwjJ/5b\nXjyqD/AvGNi4nAsJK1rD/nQwHJEcWLRMv+kEcXDLRTZpek2WoMvtloffRgfC\n5WK87qcl4y/nLCotp7EdIoKlxBRAwIfPT7LCJHMZQaJukfqCQGTQG58onmbK\nrQXsWwmE4x8V+2H7vPVuZJw+Si9u76OpO+B9DlfxhVpTJUz0IkDNrZkr9yLm\nG/g9xzCEb2/ssqJxKgXst/wY5z7Y2xHDEGsSItNAyoFaTyRZUsQl6SvT/biI\nilb24hq/L64IrC/KqU0alr0VnGXdtweBExajefjyzjGBaGEHK9cOqNqf6bWU\nQK6VtkhwUnHZO2iX1WmCs2z1Dt1QhcGtKfbhE9LQUt3ruEkVQzWLaxOLu162\nmaCJ\r\n=2F1K\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"f83669b240feaba73206d330f10c80a9aa31c1f7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.48f4b67fb.0","@material/theme":"11.0.0-canary.48f4b67fb.0","@material/feature-targeting":"11.0.0-canary.48f4b67fb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_11.0.0-canary.48f4b67fb.0_1616529214389_0.12813351277046814","host":"s3://npm-registry-packages"}},"11.0.0-canary.0b8cff734.0":{"name":"@material/shape","version":"11.0.0-canary.0b8cff734.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@11.0.0-canary.0b8cff734.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5e302a9db885726e6ede94fd653f1ef56a5cbe91","tarball":"https://registry.npmjs.org/@material/shape/-/shape-11.0.0-canary.0b8cff734.0.tgz","fileCount":14,"integrity":"sha512-4/gV6nsd9X8QUDa6ntaPlMyqMvk3eG3VXhAq/WyoqzSXbISVBbmioCGpDMQJye8LwgLvEic7vWE0oJy1I44EWw==","signatures":[{"sig":"MEUCICj3gBMEVfFZu+eYFTuGcjXaa/JOrcV48wmwoCG0JAWTAiEArwesZTk19GhOuSaHSKJ/VeuZO4v9PtOQLe1jps/9d9U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22865,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWknMCRA9TVsSAnZWagAACSwP/1Fa90cOLpfec+Od7xLW\nZCY+2zXK9pdyxxI8UzxlXhuxN4LaA+DVV/viZaBWecuGwxEj0jlRcx0QrKp5\nojM0RCcM6CHHoXHShlhPVx6bwj9dVR+coiU6XZ/rBLzmGiizc9Z7XvdJGWVA\ngwxxwL6pz6cg9GzXupuU6LVS2qDXsKXgYyQtgOFD8WaNybhdlMQ4Oqc/K2PY\nIbaVK9Rm5ALFsI+7T/CNs66fJlFgMciwUznaYiz/yNO6sfrCYPLtQ0Ioqv8X\nXeBpsswTH2PsmQ7a/wvuCS0k2b3zoGZy09SxHOlDvHRnw8yOyQsTbybYQjdN\nVqcRJeNuNzqHkhVneRdY31erKPuhngvPDL8+dMC+URc4rRWppGLnWFQo888J\n8WOUDvmT2pWJxHHJwcRMrMHMd5d177H0MeEzJRnMjyhVR66oQT5wjPwiyxB3\npmdI24vwJMhrb155+Y0e/bPBxH3eln/xozq7oeRVPVJ4DII3OxCUhn02/mKV\ndhrDBTHZQZIj2uzKPaF6jsfzwt8O+IFZd6KkCZ3vyFPKJyBXO1wi6d5sTYFO\n5hCv3P3QI1x14S1ZU6kVgk2uOfo7qtHzixtODMduoRzEuNAjq85Da9A/zguB\nP7Egs5L+zWT5bM3pabbPuUsdyqDLXn4PIJd7Ov4dqnysNM5Hl8z+ZCeq6Auc\nOyK3\r\n=UQRT\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"0371cb1671557f9e1d8a3bee3ffce11bdea058d8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.0b8cff734.0","@material/theme":"11.0.0-canary.0b8cff734.0","@material/feature-targeting":"11.0.0-canary.0b8cff734.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_11.0.0-canary.0b8cff734.0_1616529868392_0.8109964100925857","host":"s3://npm-registry-packages"}},"11.0.0-canary.8943b991f.0":{"name":"@material/shape","version":"11.0.0-canary.8943b991f.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@11.0.0-canary.8943b991f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"933bf98c9cb48b4595ae8eb8fcd7c06bfde1959e","tarball":"https://registry.npmjs.org/@material/shape/-/shape-11.0.0-canary.8943b991f.0.tgz","fileCount":14,"integrity":"sha512-4LfWp7sFKrRqLA1NIgTG5CI+qFdMMDYVcOOspAeQJhevez+o0WDfx6lKnmZTZljfEuSNC1OTHR1DSD4AWblljw==","signatures":[{"sig":"MEQCIH4R6f2snIxN2PluhPtx+XTN08Zf7NhaP1hk8fWQHoD6AiA8K3ZN4h+vS14BBWKgvo3Q4PrZ+FgjDZL6ULhXVO6O6g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22865,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWk+oCRA9TVsSAnZWagAAOPgP/An0RjYOY8pgXDMe7Xmy\n8Jq+9YucowpXO+cBHYqTMyOr/tSipYA1WnhyYbuBmj5krx01GWBk2//JmvAK\nxEw8W3+/DYxMih3l/mPEmWAfTPGzecAk64K6yCHV5uaIU4ktzUpCwnuzpB3S\nX/TyWGniHgaJBmaRCoSt9KiQHFGT2veTB0AIonbv7iRIJrmRU2GezhoDEfA3\ndicu2q/rV+Mo5MCZeO1PTYkZG4g+WylKY34qNGDPKks7vuYZKML3lrppBmqC\npFi7q1DNVCnUWGAkJf9gmd2dooL95q3OV3xMnygw1CCFu2ngnTTTMgGjjcVi\nACExPBOGpWFGA0wFK4n3aJhPDF5GAidiZTMBidis1TDa0P7X4nGUHTX1fUg3\nOTIujysedhcsYbBJWKq7so7QbC5B42mxBEdSvHrwcQ8R3UMmxz7aH1LSqS5l\nOSaqFF0mKcNXnVkAtjm2EYodZuuS3L7GRzRs5Vp3PkYCRDY/4rygDa+HD60j\nw7NN2L4/55OTYdAs7W4jQAxNbnv0Ym4gfuzY04/xDOBe4yBWq0wKgWrgB4k2\nY+WPm/geusx0buhUTm9wTpszOb05dBl0zQM3Hb8AecnpCUkd/zkSbP41cBUJ\nV0vMle0OLM5ucdjYR0Zloj6n0Klu2I8Mfz9swutTHEFTkNaXqIk/jyvKr7Z9\n7bB9\r\n=lne1\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"85cb2528143c5117974441e499367a5fc252b745","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.8943b991f.0","@material/theme":"11.0.0-canary.8943b991f.0","@material/feature-targeting":"11.0.0-canary.8943b991f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_11.0.0-canary.8943b991f.0_1616531367818_0.6064741887120024","host":"s3://npm-registry-packages"}},"11.0.0-canary.3955d8d3d.0":{"name":"@material/shape","version":"11.0.0-canary.3955d8d3d.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@11.0.0-canary.3955d8d3d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d2b05c6697c124ae42efe410659956841dac55f4","tarball":"https://registry.npmjs.org/@material/shape/-/shape-11.0.0-canary.3955d8d3d.0.tgz","fileCount":14,"integrity":"sha512-VIFPD36SFR/humnPPQptdB1RIG96Z2B9wpJ/1JifmIjnn/5DapAVylzgWWLswe2IRqPswTDl1JBcQop7tDQ+qw==","signatures":[{"sig":"MEUCIAC85LEvAdyLpqyxcR5LUqnJZAoPdQfOc6x0+tDG279YAiEArrph7B0752jDdXzg8oGi5BsHjq7Z/LQuL9PhkXnY3/4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22865,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgW4/5CRA9TVsSAnZWagAA/ZUP/22WUj83J5CtjCz2rhW1\nuSol6t7bDJ/OHTLzOHvkLdSFVb55AkdcL0NkG1k1lor/agUry7uVBo8FQ/rx\nPTgq62P8hCxAJ6u8chkVdqb0e7elZWcIJVoi9Ov20B8eKPKRWxS5II60k2JF\n+VCeCJSa/reid5tz2olH2FxYCp4PV6wvvc+y7k24NLz4foWzwOeXEQXnGKRr\nKLhSzMev/lQU54KXu10XYy0QXAkhmaWx8+/NcSizZdznd2jhv1J4QGFb0+Ma\nu64HmXZ73q6EbB+k/GPj5IvtuESNknUP5FGan9TzeT/h2osri1fqZmX5Z2GO\nFVhoE9Ly7m7FADW1MqMCgDhsMXALlky57FDsdT+5x9qipXiap59mKW2p7Ts/\nHHeH//WlCdLk1/oh2PU7nDvrynGZwRHk3ScOiJd2q3c+7xb9QImRDB86N+zF\n+QNSOHayI2FNVOn29CzlgvUJRERhfEucgO9kVffkMu3OsdBqmhxMtiohRvY2\nKsppV2de0LiU92w65WGmLIykkHt8KE/0M1MEtEN0IGW6oVBZgKllsHhkYN6J\neiBvhnFpbOOz2fc0KaDo+GTsi+V6ZmCQqCZfDjqMuVDFqTeH7laVWsuaSKy1\nZXHJynwcPJqrlGdmzeSvUiCPZbD9crSCuQICSET67DSg8+4/2UhfhbxSatJf\nkU56\r\n=S5Ot\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"2679d736975b17823079a52aad1e329d8c2a3b71","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.3955d8d3d.0","@material/theme":"11.0.0-canary.3955d8d3d.0","@material/feature-targeting":"11.0.0-canary.3955d8d3d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_11.0.0-canary.3955d8d3d.0_1616613369358_0.7734905891545585","host":"s3://npm-registry-packages"}},"11.0.0-canary.23ea2d85e.0":{"name":"@material/shape","version":"11.0.0-canary.23ea2d85e.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@11.0.0-canary.23ea2d85e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9f7f177162d933df74cb33110fc8f64e495a5c09","tarball":"https://registry.npmjs.org/@material/shape/-/shape-11.0.0-canary.23ea2d85e.0.tgz","fileCount":14,"integrity":"sha512-dvFD06WAUBJ7YNi7INWbCjCGfIJVAcCqsGMvA67WwF+2VZTw6laJmRczFiOdZ47SDNrwEK9CMTbvwAKRPs90DA==","signatures":[{"sig":"MEQCIDzEm0OHC70h+dzvGeAF1doa0ULVuGlF0W1F4XRHZRZUAiA3jarPi0Zojqt9oZ0x8Dj5/Iw4Ac1r2bdlU8SCFT/r5A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22865,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgXMkvCRA9TVsSAnZWagAAOzYQAIoTP1Sg3t2glwGCSc6W\nPK+Nw6FTrOMSxmYsAO+ROJX8G/NoGzeVdp2BqIbqYRsHla6iH/Xkg8136dkh\nJdBdysjBlnWbmhx0upZTEhjUZlB3TYZlGh1IEz2buHsmQGmsiMhEPVEF5A4Q\nPh6/wHYX6lTCPxSY6Ze6YNRStxy/DRFWcRnylVAjvQbfWnQFaaDWxLm9BRg9\ngWHHKlY0s9QFwWaf6PEPx2zXkmWcBzvUVDwvvMAdHuJu17ycGu/PVXuBpQ+1\nXtJBTcBL0ZZDzjy8Tq/QfhAjAbm2ZYhrE207/hbkJI1aC6d4zzQmk04y1DaD\nU9hL24vWmF2oQWIB4cyAozBeOSE0GqT6+/PH+vWR6hb6cZ15Zk8BRKS0g6N5\nwpiTM2j6x0WX3fPrtRza5Izckj0PcbpFMrT1nudTRl2MRBg2NSB4p8ix4ojR\n6Nh0FXcw0XwklTIzT4U1twQwpjdfzjOJ+/gKY8/VgGim2Isb7mc0I+fIl9N+\ngtPx971+HWZ/rTjAcV2m/dXujA8N1XNrN1QTWKRc7Cvf3tNVlMszt4iI19tp\nW53VraAWWi/3lxSAfH9/WE8EyeYW64INqkujRohl3vA8lbnPqgQs2BbynznI\nwREVI2STKmGh3O13wVRqHFnPmPk/QlQfTFavc/REre6fGocxqv0z7Rkf6nJQ\n1+mD\r\n=NdRN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"705a9cbab9462d9e300da18c26d7992aec452ff4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.23ea2d85e.0","@material/theme":"11.0.0-canary.23ea2d85e.0","@material/feature-targeting":"11.0.0-canary.23ea2d85e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_11.0.0-canary.23ea2d85e.0_1616693550509_0.16118459320597944","host":"s3://npm-registry-packages"}},"11.0.0-canary.e3ec22f45.0":{"name":"@material/shape","version":"11.0.0-canary.e3ec22f45.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@11.0.0-canary.e3ec22f45.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d4140f83b6bdff58cf9d19bb4c74e2134bc83215","tarball":"https://registry.npmjs.org/@material/shape/-/shape-11.0.0-canary.e3ec22f45.0.tgz","fileCount":14,"integrity":"sha512-EB5kFnO7zuyqUFgFVdSmkbx3MimfQ86t2sLTzrwIi/DNapq6uGFUbwi4xY63gij0kHGF4HLx1yLgDBcYJ3dckg==","signatures":[{"sig":"MEUCIFDF6clB/qj1OT/Xjo+r/uyO4jS+AW4KHqRWywJeBn0KAiEA2SqfIhoZAP5B5GhltjaFQ9pxVb0TbS7qnJCwFaSzyWE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22865,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgXM6+CRA9TVsSAnZWagAA2mcP/1+UUm0todYyH9U0Zcx7\natc6IYobbswKI6r3yzWikru86rP1nqHYLCjLlrdgl6P4sMzSIHv10QUEmMOb\n/2YuWqe5NFkk4GxxUq9CsJS/W0l/fnnq9q/9Sn5fzV5ecZhMF2IiTVEcJ5wT\nNq3EE/2t0LyoiJvWKnKxKdkiZfheEjz7QZRJY2z6yjC7KIfZlI/j03xtg+eB\nzdsrFCSp+9dUGgyWpNEm60tuiYziVg6VS4YjZkD/GTy0oL6FWytiA43X+wNP\naOSI9wratbSHzpMrByhuLSito2Wa2KpivN1h60w/9Rhg/0RXGU2Cad/eWBBO\nMXmEtpP4gBea6m4aCr8dngZbrvty1+t8H0Z13kdCS4GZFWNOu0wu0feM5zwn\nyRWC0z90efH0sGuADfUPhzj23Z7aDQya8gF0B1BTqJvE0IfuS0smQts0Ti+w\nnMbRDuA7uZ74HiS5qtKWJ9rySxVxhrthOlDjIqFV4XK1rEZghUB5dyPDZb6h\nuusV6fLiVm5f2LfbWk2xet7uwjmhmK5WIipfkCG8fPsewrRAKUIan+La82lI\ngyPxlM1QgVIdDgkinMtNHtCywK+TnSFpzDa8aJsyer/wMmQo1fHqhPyw+baY\nQXLTB6zUWEMPp3jRmTtwIP0LMUBJd4W8ikCXKYN+2RxP/nYTPuEzX3wObPea\nDrpq\r\n=Q+p/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"2827fdf50a2ab264554f8f307d61fddbab82c5cc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.e3ec22f45.0","@material/theme":"11.0.0-canary.e3ec22f45.0","@material/feature-targeting":"11.0.0-canary.e3ec22f45.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_11.0.0-canary.e3ec22f45.0_1616694973957_0.5017450723772914","host":"s3://npm-registry-packages"}},"11.0.0-canary.4ceb42220.0":{"name":"@material/shape","version":"11.0.0-canary.4ceb42220.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@11.0.0-canary.4ceb42220.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3099ac84834bc9b522050aa5ed974194fa24e738","tarball":"https://registry.npmjs.org/@material/shape/-/shape-11.0.0-canary.4ceb42220.0.tgz","fileCount":14,"integrity":"sha512-cVyjFNMhwemK4D8TTHCnDVTyKZr+QwTeHWjCRWhZ9jhyMAXPaM2pBT1w1WjvhIFs0F2jGjzFvlpN7iPlpSx2iw==","signatures":[{"sig":"MEYCIQCk7bZykWRlnY9I2G+5d1z2qEMT33GQ1m9cu/KA3IAsywIhAMm2psE+gfp/+PFGffOLbwz3/1sElpyk1gehK/7UOeSA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22865,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgXZPdCRA9TVsSAnZWagAAj5EP/1Y84PlhcNaO4F+g86Rl\nrh/O773dQmYzQ1ip+yPcdUoFSPe2fDk4ypG3JWJN0Pt/9dGmNuVzl6US+yQz\nvf4ZFKhnCjSSSU23isKYYXgCFaPVAbZkiywV94JbbQ0TcBbdFlJmazp/omgV\nnZBfcNyEhvR1dC8171eUhsKwKbTVAvvVWZWd0TPggz1yp+NqCG+QyhppvJ0k\nSHSsVg+7+T0tUcWGNGcDvafZi0sfiDjPNSdo21Rom7YTGikw8ZffMreIQnZR\nw6tYAi27uUbTh5dF20VkKcFtxUPL8DV1sHPCojWdk6N+0DfQiPNxbudHPfHU\nYBbvn2fCyXw5V2vB/McH+++P8+ewMsLFDktLxknL521GgpstIb4UuoC7sBOk\nb5ixWmUJp2BpYA+hio5IE3v9DzgX0HjShwW6+a2QavzAMKILLzMxYq6rWDXZ\nh1UTPTkbLDWe1Oj7jKc+j0RBw5fdP0H4WcciEo60EcJDTOf8QECvuXUv5qMA\njAVpTks9yIJ1FEqKTZ/BmEZX9nn73WrHhTRk+Der6X/hkbSFyRvGCC3T3pX3\n4UxMCJG1S2oooC3KEBjzPb3tJhVfscG5wCTHCtde52ien1ScA3YfxqmYlvrH\nF/rxLLPozaLcuWLHYr/hNu08j5TUXNXN/0POsPtWBBjueJfKi1yEv6Kx/80V\nil74\r\n=umO4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"75fb611f33737c857d1b59245ff5a31676d7f3ee","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.4ceb42220.0","@material/theme":"11.0.0-canary.4ceb42220.0","@material/feature-targeting":"11.0.0-canary.4ceb42220.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_11.0.0-canary.4ceb42220.0_1616745436706_0.5930699084697499","host":"s3://npm-registry-packages"}},"11.0.0-canary.dc9c84023.0":{"name":"@material/shape","version":"11.0.0-canary.dc9c84023.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@11.0.0-canary.dc9c84023.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"996e43ed998dce9c874e40620534b061867cc34f","tarball":"https://registry.npmjs.org/@material/shape/-/shape-11.0.0-canary.dc9c84023.0.tgz","fileCount":14,"integrity":"sha512-Ke+CE+iTy1VzzPmv0fxyIe20ZmW4Zskh1xDOZSbPVmXIGIirLohXJRof5gsfG0clZge/wZwWwGFs4QHdG8WBIg==","signatures":[{"sig":"MEUCIQCi2WDBpPCrLlejHuJe1WixsS+nAwNLgdf3FUFGSG+YWwIgFOI0TAeJhnZFGIixc2vfQ/XpJNv7NgYwdiw4cyQ3nlw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22865,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgY2RdCRA9TVsSAnZWagAADFIP/2YlRSfNRbYpPpHHLpSY\n7u5QIJV5CwsBWtzpEHpRHsiiQqIEE2pMkPxjzSIvLAU1M9GDix74Z6Pz4XS8\nvpGG8DdJAgwuDQ5HxxHv8qULG45OwydyKzUkUgKYwSyZwPI5GYUNl13IEzRk\n/qP0yhtI7L6/7XQBVkN1VvoD2fMMAaR9YX0LWlCJUC0OLZ0c3qkzM09pijVB\n/kcVZtjg3einX90x+//g26cVklm9DeONHcG72QbJvIDHF4I6BdiRr8gewMg8\nYsGAmR3J46nHdNrXHbVppCW8lIa1U904NY29/GLM1wlB1qmSAnMN9/3dcrl7\nAlHHuJ7e2APTiRTOFBcDvbiFc3wXjvujKtnONvjpVJoBAelSpGT9YlW0N2zs\nZ/t1Ail7/Q3FKHgqj1XcOWVo2oMtPrppzVi3vycf4wurhAHne0vqW4+xGiSv\nImfj0LRtJEvghatfHpqsDRJRLHa9HtBPGBUp6hS1USqr59Bt3RzhxDXsvSdT\nTdrSIdDhfeNs7vNCeCQWytWOTfCVuJNHnNu3DOgKyQpnhW5KiLzKbSKmN1Xz\nLHZahLrgwWoy8XeAqTsMCO3cMi3YUPsPMYi0EK/r3L5NXa557cWCfDI7PeRH\ntwukxB78G9yu5lmP3R8LjU85HtbYm+FIHGHKW/iWIqiMHg8lAmwEVSDR8lhg\nrzfV\r\n=q48C\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"d7f7ddbc4309b6a8ce5cca3772255dcc6acdc701","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.dc9c84023.0","@material/theme":"11.0.0-canary.dc9c84023.0","@material/feature-targeting":"11.0.0-canary.dc9c84023.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_11.0.0-canary.dc9c84023.0_1617126493272_0.03868199825491203","host":"s3://npm-registry-packages"}},"11.0.0-canary.56fc26962.0":{"name":"@material/shape","version":"11.0.0-canary.56fc26962.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@11.0.0-canary.56fc26962.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8755b54c09f9d6e52e9c0c69743bd5be63674a19","tarball":"https://registry.npmjs.org/@material/shape/-/shape-11.0.0-canary.56fc26962.0.tgz","fileCount":14,"integrity":"sha512-Fbc5zfbuPytiAU1pJBQljf5z9wKm1mA9pvmbwx/8IKc4XXkWBUQVt1ziCfLZV9zAtGCckfqj0i1jBTCZaTMKIA==","signatures":[{"sig":"MEQCIF6kaCmu2iCXUyMjoa87ignqaiXjmhFhTZSByupOu5JiAiAxU94rraSBAALYfPjsl7hrNarWI79KtG0+224CrHR8Zw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22865,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgY8BbCRA9TVsSAnZWagAAzW8QAJoekaCrqZnFdo5RCHeX\n5x7tsA646SU7YoJMvwW3V0WGW4+yIjl7qGsOLfxDGW5IOIqAGmI7aLAP+rcu\nbrM7Z1N0CSQmivoAm784uCVpnzQs7hTWFfWM0fm0VAO0uFKA7Xtft7boTbDS\nkDye01mnLxKNOyodGHzWpvlwRq1xSa0gcFavXbBFwTN/yerKKZSP3XJ4PBvm\ndBgNuf759MZxF6Iumprq/oZbWib6/k+WmmInz1V2e+KElMwHbTntsSN+PsZP\nbX5ye02dJNp/gMoYBCqV7GJcUfJNttkfw9ml9XbVaL9pzqRhYz3dpPGRM0aW\njA9aqioxEBZWAvi+Jq00IusWH+EYbjMM+M1/r6HrT6dc+KrlDHZi4+lsPlnZ\nzrj2RgF++Uw+/UHbUHUki8qmjc8KuW8ujlQY7LdBc1IekLtSAfTjmbYGssQt\n9TaU/Cm9co3PkPOrfQXl4OvY/ezo/5UnZelceJFjraf7lTtftaFGsMy452j4\njIX96+nhEXK5Y2vU6zMjxIuK+/Xp5idSOtNs/VVnD7avJI7F5uewsxfUWi4I\njU5QWyHDLVKctVgCNK3fxMe5AtV182HgYtIq0j08PhcfhjuwXquyOqgagtBZ\nvwdhNuqSFAGRqCMaResP67z6uBluFNazuSy+0Vjj9ezWKiGtq2Xeug+0eMFr\nidPM\r\n=fQvi\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"dfdb8792d4ee8bddc61386ac6a8e7e216c1681a3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.56fc26962.0","@material/theme":"11.0.0-canary.56fc26962.0","@material/feature-targeting":"11.0.0-canary.56fc26962.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_11.0.0-canary.56fc26962.0_1617150043019_0.9239586917007625","host":"s3://npm-registry-packages"}},"11.0.0-canary.bc318250e.0":{"name":"@material/shape","version":"11.0.0-canary.bc318250e.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@11.0.0-canary.bc318250e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e1fdf40ebef2513639f8f164023ffe89f51e5feb","tarball":"https://registry.npmjs.org/@material/shape/-/shape-11.0.0-canary.bc318250e.0.tgz","fileCount":14,"integrity":"sha512-rSGqapdkxuus4sgJW47WyXh3y3LqnDmChRI15GEOLL5JqIZIwxvBInzUVvY7coVj3ka/A7MUchZRcrN+eZmRMg==","signatures":[{"sig":"MEQCIFwepY00CtwHPBSiXF5fKp3opjH/uIggSLlFQr3rXea5AiBOXTSUccDZi04C7qV4R/Je6QUAranLymTl1UGz8nGMYQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22865,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgY9FuCRA9TVsSAnZWagAARasP/iIQPcaERjaDbj9DOJYe\nzX0EL4a03sHjk7XJ0qeqONyVe26I073PJ/NhWbcHGc5ATrRuXfILtoWrY+eI\nHTGo4H014DViTB1JzW6ejHzB6WATn9b4kUXulp3rg73m7TLaVu2i/GV+pife\nkCXnP04ltswDzqueRfIt44a+UicXUXB1KtQ20MTTgky7Yf+IM5U7lUBR+BlP\n8Th+BLpV7d9kTA7x1855UyaAG9g3QWwaOGIK2PaRhGL+6SRP4T6UYUw31KjN\nx8fMkPorZrnnmNB31jqop0loRDn80gXrf1jOyRB7ZpRX6ODqHWnq5X9PRvPQ\nW/lMTsIgL6xtItJ7ppYKRobbiMnnRWoiydWQstoj8NINab1cZStbs9VVMYoj\n65Vm2munifkcFsXg9CRTcrpX7GC8ngylLfwkuREagiOGxAEzIE53ZdiUQCAp\n3tCflDh6eBbr9ExDEW/XLPiKg5eng2YLlLGhDkqW0iSLONG5V8RuFQRxN2GM\n7iR86oD04D1d2d+c9Ftobju7wPNp/hSyhMPMFJQMQodNnPg1LJcLFIbcR2Cq\npRtXER0qTH58C7J6VAE4h7SpWqpmBkJxrO50zH//NfcB7zi5/JEQtMn6mUDq\nKFE54rkovLHo8QCXzjicAb/viDg2NNQsvgUojJVeNzQJV1B/uVqB9aMqmkQY\nrtx9\r\n=J4sB\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"1de1daa9e4e0ee7a779d524a027b9e7566841b56","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.bc318250e.0","@material/theme":"11.0.0-canary.bc318250e.0","@material/feature-targeting":"11.0.0-canary.bc318250e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_11.0.0-canary.bc318250e.0_1617154413953_0.8602115391443035","host":"s3://npm-registry-packages"}},"11.0.0-canary.edaee19aa.0":{"name":"@material/shape","version":"11.0.0-canary.edaee19aa.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@11.0.0-canary.edaee19aa.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4ea9f74bbba0a3850303003f20a309f2ed137f3a","tarball":"https://registry.npmjs.org/@material/shape/-/shape-11.0.0-canary.edaee19aa.0.tgz","fileCount":14,"integrity":"sha512-GsQlb37kxUny5yzxmtON4lFdff/iI9FIwj6iBGzwtIMhYtHaHwco6TMeh+pJy2SbLOSwit2E+zetMvdCHH5e+A==","signatures":[{"sig":"MEUCIQCQgLr0Pssn7V4unXAMsATLHwY6/A2amnx3CofjTLgm6wIgXlJkPOv1ltXLGGhzHaVYUn9cgROC3oECAzhjDCDJUgY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22865,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgY9pICRA9TVsSAnZWagAAs+0P/iw/NMzx0CNSa0rV6J37\nRALolF2nHfnp0+Uw+W9Zis4xX7Y458hpQaQornz4N5+YGlP60BO2sBORWy+i\nQfDRMVHPDtKl4NldevCYe23Rwv/SsQeAPZLAl1WRzgPe40BcVXrXM9593Gt/\nFCQZDAO/lzRLH0CaN5GIyQqgvwdANkoTGv8QrnGn5oIHlihlepEp0x88kZVe\nDps39TnLPA2sCXUaSbaFy6Kzav+yjotRIsVdv9g2cLfPNTU3a66EdLF8wM1x\nPWyBXo0+Dsy/9ZaWqIXB0+nziIYEyTdychOnZ/Bv1TqTkW/rjaBGXyfg0prm\nIY8XEevVfqBQa1clBqbChilamrAQqzYe/MbZ8ySwKJdttWiHsccr0ohaswdp\n56uGrpktu4/OrDXVJritkiq0c7MWJRu+juRALD8OupAkdlctdqMB0NNuv4eZ\nhff96KKI786KlVDE/Tu7fdmDRy9MaWkm9Tk4ZyWs7Nn7ZjqvxepwpYJaOjRz\nEWA7tFgWzYSFn8MTpbMEYkA4a6Tp20dltRBbCLAws6XRd3Zdi0Bs6ONO98ys\n6RqKXBsgjWXGiiGKwgzO1Rh0lBU/4gk1MeclbxZFJ2jCyGRslk1bC6Wwczkb\ndJ3KYPp0UnCZdlxGoUaEnZvDBJt1RwHX6ZbWmSngqIaTTqq9ipc6EN/ou/W8\nZT+y\r\n=PjmZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"e2249b4be4cc5bba6887f28ddb9a3b9cc8ee09de","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.edaee19aa.0","@material/theme":"11.0.0-canary.edaee19aa.0","@material/feature-targeting":"11.0.0-canary.edaee19aa.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_11.0.0-canary.edaee19aa.0_1617156680001_0.6050547595047586","host":"s3://npm-registry-packages"}},"11.0.0-canary.24609b822.0":{"name":"@material/shape","version":"11.0.0-canary.24609b822.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@11.0.0-canary.24609b822.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7c1e4f8e1a2a073f540616d28b2476ac6abe3b99","tarball":"https://registry.npmjs.org/@material/shape/-/shape-11.0.0-canary.24609b822.0.tgz","fileCount":14,"integrity":"sha512-V1yYdg1Rm6IyZHGXgaArw1CopvbtWqMXTqQvbDfGEdg69foyZmT3dnD1wRfQruQRwPuMgl/f38A7d64/uMmjtQ==","signatures":[{"sig":"MEUCIHbKlwLy/rvgLB7aS9d2wZByZ/WaQYYHcauGj9+U/b4VAiEA7ZOGweoY0+9ikHGI8kg3vRqqVhk1SfX5ELdbzrIvYI8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22865,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZOINCRA9TVsSAnZWagAAPcwP/A/JTBmiLq4D4x+m92k0\npoQ9RJWjU45CyPPZugjAbp9z+gdDxzcPtoy2KBxrmZ1Cd4f9htUu3jvEM/XG\njN8yLlT1soDYDlpRcyHk/A5FibtKeUXJGPnZtJ84iVQaYd3A2lYNjrjxMopG\n4PNyCyV8AIY2BXmY3/zWjaSs65JquYizcWwbJchuxU+QStns5PqMK7Tcj23Y\nCjI7+MD8lb6A1U2MaU+/3PSC07Y87hi3dbaBxD03VDuHxcvElhFNF+8PWDn3\nGujXXplEdumBc3lgK3RxsgqN09OkQfvryvn/G+OPszGm6SEv0xvuAhxb4TxG\nwayjTbbVoS5+PLjjLk9mMYZTOuXM3wjfKVNMmllgCRi+Y98PhPQlXAoldmmg\nfvLcPp13ucKrpZW8kRLiqhsa438F2iDsV4pfK22KfPKIv0gQUqEw2/DP8cK9\n6k4zbWWXCPEP4FjwWxM+SHVRUImB0V9N32Of6PoYFF/YaPWGx05OVpVkjCGH\nXVSjC7guHUTWyy98F6tKQZWm/+MWyh3m0lSBbp7PYBhmMFX2LHGNJgaqY6jH\n2pjWAqt0/1H7cLPlrV5p6eEBpgb8Ot3FwH4vwhuHs6iD+r7FBV66/1rEP8bu\n6H2gLQ68Fvi/0OIpcVWXt4YXlsZ6Q0mtIMW0OqtkoZKyO7cPN00T57hmLSg8\nlTe1\r\n=AHJa\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"50b495134dae6937c2262389aba694d7664f78c9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.24609b822.0","@material/theme":"11.0.0-canary.24609b822.0","@material/feature-targeting":"11.0.0-canary.24609b822.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_11.0.0-canary.24609b822.0_1617224205067_0.27204706603404905","host":"s3://npm-registry-packages"}},"11.0.0-canary.b6cddc2b7.0":{"name":"@material/shape","version":"11.0.0-canary.b6cddc2b7.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@11.0.0-canary.b6cddc2b7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8e5d8813c801ed13d70757a118ee3205b84a3e50","tarball":"https://registry.npmjs.org/@material/shape/-/shape-11.0.0-canary.b6cddc2b7.0.tgz","fileCount":14,"integrity":"sha512-j/ZSJhI899GhFCmrU3AXHHimSSRmZqA40HTetVX3k7aARMSQ4yO7t0Mz2V17rFjzzAhl30AmmOhYPX5pATH4jg==","signatures":[{"sig":"MEYCIQDcegf7xraovX6jm9Crk3yD3vOLNlLhfNvJzhQvdU7kGAIhAJ0IP8P2TU4n0dBcuTgr9Q6b/QzkFGMfOHDyp/Qxqs5q","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22865,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZeEKCRA9TVsSAnZWagAAYuUP/0hjGxXsir9LwdMarvxQ\nowuC8dIDpHVUN3LbQpJzHJh1x2UPjOzhRXxTo2OxHpvyf6KIHXt2EdU+/loa\nFJppK3Ao3iKFOWbqCbdzf9KPumsJjvDVHcICDHN8yWWE+Vxjjxch/p8LGSsD\ndErnOHceQQcDtSMycKuqtX/pQGMW5TX52hxtS9mSdiKiC4k/VD9e6hT4RWhp\n4otP1Sy0dFUtoQa8MBj5ZYyKpfd92SVgf8O5cclTJduQAu2F82o+CojLFvw0\nTrjL9mDPcFVBqXKgbMA+mq3zGawo/iSVNtSGCO5UjN6pm/yk8WFu/VohAp0/\npGA+xEl9bAWAMGGfI1Q+CSyZJ1T9Mvk8v9sZFyyB0pCTfokYyZk9NgUlB4nQ\nHjola8r8xgUdG4MfRVXVX7Wvus2Cc713bPNkKBybVl46zqqnRJrof50MWKVa\nfXUH/H07yLCiE/HvMqaa7OWCdX+W78Dsim3rCiQV6iB66y3zeUhSyCh1Mtq2\nvEOUiAEynHSsFj4bWvx5WCOuUM8Bo6FvI5UmahjylXYuVuIn49YyWcOXfy/s\nmKztZaUQbc04nE58w/Fze2plrT7rqnrSRso9r5vmoIexh5qCgmuKbSPDoA7W\nFiUKhaOp/CccpU7crtdKtlVoX/QHdh95UO5jlYU2nexjjTd7L3C6uWM2NZgo\nbKMR\r\n=2R+U\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"dbd92fa1a28a9b31a1e4eb476b15f4cff38986b8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.b6cddc2b7.0","@material/theme":"11.0.0-canary.b6cddc2b7.0","@material/feature-targeting":"11.0.0-canary.b6cddc2b7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_11.0.0-canary.b6cddc2b7.0_1617289481555_0.2731782155743365","host":"s3://npm-registry-packages"}},"11.0.0-canary.94937c78c.0":{"name":"@material/shape","version":"11.0.0-canary.94937c78c.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@11.0.0-canary.94937c78c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"438c3177c1240223e9fd313017de25f49aa4abbd","tarball":"https://registry.npmjs.org/@material/shape/-/shape-11.0.0-canary.94937c78c.0.tgz","fileCount":14,"integrity":"sha512-/Rcez+dmgd7NmpOuWK0mvjuyy64SDJPsLfmlicWCf0yu1prXfwLml3R36erRcnLuVACJlIsBZ7u28py3+kYCUw==","signatures":[{"sig":"MEUCIQDoyqyOMELyh8QozfAhm3/mUBvedH2ML7kfnDGHHCucOQIgTzHhTAbmeAAM4O5NBYaSytvuu7gUXMhjCWs+vo/adrA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22865,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZjR+CRA9TVsSAnZWagAAOA4P/j48HROLb7TUpPYSBesv\nTQ70dCqH8M2LlmUq82kskAjdY/ZytU8MmKu8KhILGJlh5yba5kBRSfaci7Dc\nENzA1CGRCC97+kYFHOCRWDO8edsPdQVutHOcxZ59T+8bWDwVPMmj7M5FYAQC\n+N96rYEXV1Ylwm4cXycCQpbyrux2mJirCLwSemukbENeERtPhEUdy0iIIryH\nKZBqcjSoWnkpelDdEb9X5Dz4j9djenBxBkCpnstIGmYbW5r3dRSQNRzHeYjt\n7QnA/Nko/0ElsmhgPbxVdhnioCBtaRUIauhVpcg+uWcAfp6QMCDO/6oC3mdI\n1+pIrrZozRf1IcxNNoIYtnj+wc4p3WTvKDJRPzWk25k8zQJv2308Dwag7eJ7\nZjG3mmNrHL2juX2XArSC2eyHDNnujXar71wbjLzcciY+bbFpCLeebKDF1sFk\nlqSa8rNqgu98ya32scs4EuXLaqbovqa/+qPSLTDNA9KEV7HUGkKkJagBqD+z\nhp48DuXG0Pcg2OBmsk26uvYUWb+8e2GXjPuGa35K2GdPElACbsLgOaqh80N+\nOOyg54TBAzEGcqVB/kOm7Hcas0VguNvcFMADB1wJeTdiPB7KlZgQBGqRAUDJ\nGJyNRgpUp3j3tWTz3++CRK/rHUyktaHpHViK4uMjo7Awg0T/45wKw6EsTVLC\niDOM\r\n=VDDq\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"ada608c773d2657680fffa3be444debd83967f00","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.94937c78c.0","@material/theme":"11.0.0-canary.94937c78c.0","@material/feature-targeting":"11.0.0-canary.94937c78c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_11.0.0-canary.94937c78c.0_1617310846099_0.2757434486059298","host":"s3://npm-registry-packages"}},"11.0.0-canary.e7202cb57.0":{"name":"@material/shape","version":"11.0.0-canary.e7202cb57.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@11.0.0-canary.e7202cb57.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d7be488ab727f2d0c5eb3f3a8341dcfb666b4cbb","tarball":"https://registry.npmjs.org/@material/shape/-/shape-11.0.0-canary.e7202cb57.0.tgz","fileCount":14,"integrity":"sha512-Y9AE3ywMjpk2nyueOYIlAw9gBxJtwhOpjrzA9k7M46X0YeoAgenKrB8L2DNxQKRVbtK8f7K30E57uquamhzEsQ==","signatures":[{"sig":"MEUCIEzNZB27DbS/DygoFZO3OtTd8YzmiSeHge3JHNt0nGwtAiEAiw8deOPIBmN3Dnj1S/xIsvAN/b/86dOMbSfWHaZZ7GQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22865,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZk1xCRA9TVsSAnZWagAA9KoP/R9VAeAl57Yb+89krKgl\nmjhzqcKXqWBKDh8dZzMBX2AHgczv3EzIJ5D6yRSjVVJsMlRdjV4ffsfmJjtd\ntaIeZ4MHhRFYjPK20t7V71MXAPeFRvW1B8nul0qdpJsVIO1CRdbdxm9brJAC\nWjzSmN/1AzqmqtQhYislkH2Yw3YxCefQn8GKNBvzN8z7xH4/LntUy4IWhUh/\n6hPK2C112NknYygc5g0wigcHIfHYH/masgLfmQ/flNsxngAIh+R/WemeGH4h\nCXiBgq/dbl2ueA2ilgS7Yb8s3nuSSzSs2LoWNmH6LbDtmrdkxqMMpFs8xtS6\nKaE4ZJf+czo6/eL/eBwWTemd5oKG2fwRBg5ushY7JDP6UpJWVu51LHvW8Yv0\nm0oqQi4cD2r5PWZzD5ehk28tj8ZCp8qXfAI3EYAdcEmtLwdqmYdjKje2awp2\nOFSBSPT2fsuaR57mQC2dTIL9DqN9Vvm5gG1FUtiF5yE9hslePtbtxTumXKNs\nraM4txOoeg0q8lkDokkuvOZq9uxHErvt23JTcqEzuoXMz1q0P4DD8XVowueq\nDkAK/Meq/4h7tgKQ8DzZJ0tEQERYAwL4ifFWHk8yTszIlSfsxu77K9L4//gZ\nFHxnUFHuErrG/qIBViDZn+XZHULR2JtmrbU8SX9hGl+GaBgaST3oD8L5PBuN\nvrJi\r\n=rpcZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"113d79c2879cb1503ff12c8064eeb38ada16b472","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.e7202cb57.0","@material/theme":"11.0.0-canary.e7202cb57.0","@material/feature-targeting":"11.0.0-canary.e7202cb57.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_11.0.0-canary.e7202cb57.0_1617317233239_0.3803534490606304","host":"s3://npm-registry-packages"}},"11.0.0-canary.1f636b205.0":{"name":"@material/shape","version":"11.0.0-canary.1f636b205.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@11.0.0-canary.1f636b205.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9b3c85a794b655269b6f5de7918378d93615fdfe","tarball":"https://registry.npmjs.org/@material/shape/-/shape-11.0.0-canary.1f636b205.0.tgz","fileCount":14,"integrity":"sha512-W2vlhC4aJUgND+IdulJiVna/y1o2NPJLWR9URSNZIHkOG7hlhnbcpsJ8ivLZLFwLGxwdaQfmWXeZwa1+606RRA==","signatures":[{"sig":"MEQCIHCzozmqYY0D4rZa36S/K9W5ycArhtpgy4+4qXsESETbAiABcsM4lTbF6zXNeZtnup7gUlpUQtUDTKyQQH2IB4AmWQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22865,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZ5l0CRA9TVsSAnZWagAAMY8P/iQ+B0L3ZG0ttsNLxhFk\n2MHv7iXzkpehgUlaWAPp6i+YWKqy7dPcZkb5NQ0WT7ftBiX9HnuS5Jy3C+xf\nZMwvfYpeOdLT9KjxVZG24mYuJyIFmzrIusbCof7nNhVSi8d6U8OyiHVkcsH7\np28t8JvsLXW3VYy4cSwC8/ecTmgcJZm9c/7lKiteQ1fcZIjvl/ma3YIFzRFV\nDqNqEjBPZtVSuHSC+eJyeughoolNEi1YQa84NIUwoDDTQqp9GY1SiUo1wbpr\nc7Ck2KaxQXkNlckCWvSTosDBzj17HjR4qrBXtQnTQxxbNSxI9z7b3ONKdVPl\nOsAxzzpnZOCMrOk6MimRgVIiMzvq6hInt9+GmGZH92/vPDa+67S2SHjb2k52\nWErloFw4+GEY6dQ/96SOMnwHaDUoGqRRfagQemSZLRIAdokLEuKjE9nd2k4d\nm91TNjr8OHANRBlY0hwkoFCS3VslyE7ESewgemd5uptKrFBGzgQreZvmcd3p\nzVUnZR26URY/gTjvJblk3OfngPBnqsd/pkdF/P14g8FNhmywaDHtJVPugSe6\nbZJklYpA2CoIADglX6pnHOE4MgUj+V2IYIhrTSdD2rPemcRLOyrtlneE1Pfz\n07c7G4ZevjnFh8sLbP1Zso1WbkkzZGEv2xEUbg8hPwll2Zgn5sOg+OFo0f/n\nTclz\r\n=ehXK\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"a523c6467be13e8aeead7e4e2e5f20c418871bb2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.1f636b205.0","@material/theme":"11.0.0-canary.1f636b205.0","@material/feature-targeting":"11.0.0-canary.1f636b205.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_11.0.0-canary.1f636b205.0_1617402228229_0.1487171516967325","host":"s3://npm-registry-packages"}},"11.0.0-canary.94f50b260.0":{"name":"@material/shape","version":"11.0.0-canary.94f50b260.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@11.0.0-canary.94f50b260.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4efe9fa840ab1623c0deb6360720fe09d5062738","tarball":"https://registry.npmjs.org/@material/shape/-/shape-11.0.0-canary.94f50b260.0.tgz","fileCount":14,"integrity":"sha512-IzsUtHzWAyGh4aVKhI9shiwKqxStTOLubCVZgfZYIlnN4S80POX83B7cOqfQwvh5XaDVhPRCEwPr6QEKIHvxyg==","signatures":[{"sig":"MEUCIQDNT2lkw4f2tX6glndWyDE0fa+dK5LLhPoIhb4j/44W+AIgCy1zXYINc8bZpUGua8O6XGErMaRs2tayCEFIKCzPRVU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22865,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgaycOCRA9TVsSAnZWagAAH6AQAKJgXjDVkgebD70JnBMh\nNbPILlCTkRcf+99we0OCtyC9NZM6sQiRTTbmk+sVDL49e8+E+af2wm8kV8R0\ndZr03qesxWMwkwSgypeM94DKHyMCFap1VJNxxDG5HUtKrRvO70v6c4WYqxRN\n2WTpqFLnsOLstwTrdiu2zWushjzp97Gq2RVs4IiKC/mca5l1cqSfCm+xAivr\nivTHBS8I8LhAQYVYp0XzcjIK1dy0G/dCbijAkOgPil7j7XW1ipFUGUxII4HE\nU0jtyrX+wBkjsJndIZA2JVPCxkE36+sv9rnfUhWiHDkvRZio82dvin6S9eYk\nzvQK4pedYZG2iqtDaJUNF669iZoY8ggrj5W2zodD2b2RSTUk0hmg4vYLY2o6\nMuJzhWhUSOjykt3yRChbQFzWYMiIzqN74CpzkfKS6hGREXZhcON9A633MFTJ\nzY51/tt/oVdIYZrlVIkmSbECSieMskUEpsy7gKrtZsMaWaqgC+tfFM9ze8Jy\nQQIBoPl7Mnr5JrO14YmpmjPVwNOhIEkQiaID2E8Qzh/3jETwGbRdjQ9nd022\nuOAABRL0mBjyd/7RNreRPTIFvUXHXBdRvo0l5qS3pIJwuYSSx+uXbvyfWiKu\nwlUjYojqUwhBdc8/PQ6fjoNTeVhCJyAOIk0FKDZ+ZLyImet8bBeVmGlcLSgw\na5Lx\r\n=ycHg\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"b5f84c677cd669d6958748a69435b56ebb640bc6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.94f50b260.0","@material/theme":"11.0.0-canary.94f50b260.0","@material/feature-targeting":"11.0.0-canary.94f50b260.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_11.0.0-canary.94f50b260.0_1617635085714_0.08411990277842185","host":"s3://npm-registry-packages"}},"11.0.0-canary.a4009b80a.0":{"name":"@material/shape","version":"11.0.0-canary.a4009b80a.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@11.0.0-canary.a4009b80a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4d5d63008f32a725f81247451534e51e75fdace4","tarball":"https://registry.npmjs.org/@material/shape/-/shape-11.0.0-canary.a4009b80a.0.tgz","fileCount":14,"integrity":"sha512-11crmgX0oy3hYVx1cRwn43stFxTrCUrllkrs5GJpqBN6VdOXSn9EQ6OL1whPaSPpNdBDlA8nSB6zrjIHbgY1dg==","signatures":[{"sig":"MEQCIBSc7EiJVqGKKrfik/HxfpgjI3tH2nrCFMSvVqRA2RwWAiBoIOYo03M2UzyDmd+V0sYtCW4j1m+cquksNrfGRqJNRQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22865,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJga4huCRA9TVsSAnZWagAADFUQAJ3wir2WjHR7p9E9AQNm\n8h5/1WB35ul3yFDJZyl44Z3zDPktVw/jE87J2xvbzcIkdMVVF7OtQ3rYw5cN\n2xxHKpRLB4WvFNhQECKkc91Zn6Xu1udtZcRhmbivYfv1ywNlypAkxSgips3Q\njObrbul67tgfbwhx5mMtythej1xBvg2O9QLGyhQ9FjP+tesj31GiZJe8E3Cr\nUtRNvZeuh4tbc5prWQk0qOeTJ9lxUKFttCZbA8QqlO5UnWebVPCaBCDq+ZZC\nmLsbzYok/8+GpZ4sxuHoGieOXOswmLvWJJZiNjXSiTCtNaofrz/4dzGa5rO9\n2V4xl+qkpZOK75BPMAl1sa8BgBluz0xWhySCXjQPqc4wdL8fYLQuhKTWkqwA\nCu8dO/JT8X9NaA20iyEXfm8cvvT1UIz3TUnrbBBxKNs0RvSeKc7yMDrLd9nR\nJgFDNSgiheKC67wK4/1Xqo1KERyKqsIvw1ONNn/TtX6Ku0Ti4z+rjj1uG4y5\nIKfH75G2Mua2TNPjWO2e3TEgyzP0xmwgOTdLCOSofS68X0Pe5X0tuCvg3lFw\n8NT/XMAy27y699SuvvD5eO1y8OVXMt7vOy4bOBa/vmKLq3JuAce1tLGEJjyg\ntVGDpcExTODt7e3XjTqoFO3V/wP/57ihTmXNPwwGA4ML0x1gHcE3e1ubOm04\nqgHy\r\n=jV+i\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"35eef76af32a43b61b6a0fb725dbb83cfa5d3421","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.a4009b80a.0","@material/theme":"11.0.0-canary.a4009b80a.0","@material/feature-targeting":"11.0.0-canary.a4009b80a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_11.0.0-canary.a4009b80a.0_1617660014148_0.8695838033451442","host":"s3://npm-registry-packages"}},"11.0.0-canary.15604bd0d.0":{"name":"@material/shape","version":"11.0.0-canary.15604bd0d.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@11.0.0-canary.15604bd0d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"878420c9002e09d51f7f72b8a1dac12216ef9eb5","tarball":"https://registry.npmjs.org/@material/shape/-/shape-11.0.0-canary.15604bd0d.0.tgz","fileCount":14,"integrity":"sha512-ndd2JaSurZ8lOTdwvuXh9nGV8cCiL4qk9vUg9/aOy+5RvW5iZ+ZxISfzWFLrPuld6FInerBQKMUv5tB42psOTw==","signatures":[{"sig":"MEYCIQD1pX2QZaaGWPrBx1hzXl12WnNURUtBtiIkfQpwNHhnUQIhAPUP1MLwgBHp/DpDpOC+RTtsDViUF/uZtWhwp40hlK4f","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22865,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJga5I2CRA9TVsSAnZWagAA7+UQAJsyftozQXLKH6+IFr1l\nfMjPoWOAfraOLbhRo9i3gLiv7q1ClJWgHrZWXj5UFuj/MRhFOpj3Hkuk6Kis\ntbAh9CvIhogEoKSH52w/2aEqsGTVUsgHOgnxKxgvtjfYZ44TwKOolmuXTcjE\nWMlRbqQl/gbgeW9NdFtByW5K93WFN6nryqSiLA6xK8aiK6+DzoBJaMz4h55r\niEoI5ejFup1UodzAT4qjrw/LTJ9nLE4LBKI81GiQn+aC4Z2EtRL5wbsgdzDo\n25cFilr5ZT8mqu/uqOJOc4Z9tV9BOgWm1gJkQf4OYFregePUmqeY5zlsHPu2\nLBvwLRTaMY+r/V2GtG1nziCotmp4VRXHUAGuUJT88e0+OYjvVB0Y1mbpsQTx\nIaVWtUJ4BuAi69XPZ3xxhpR0jTUziYSFTt6/cOGt9Va5NDDYG4lpEBbKm59a\n/T773ClhoTGr/TCd/zUsl64UO2EwP3S8sM/fFM4FrkjfyvCqrHmxYOf88a8T\nwLw+bkMWXLcFdDDPRbZts6nMYuQ7XKe6HUNkN4hosPsK8ANAr90SSZ2jV2zf\nHL6ng5op9b2mIAXONBabbOLCrr3MXZMNxUdDlwhTFrirxORRDFngJLGU6fs4\nNEECXVIjcp04FHFDrujNGtRTOV1xnQj5flcgCrfpifkF7jabVLcClnDe/LOL\nZAhh\r\n=LDZB\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"ea3949c02ab8da1a812a2127f1fbc7e7a3c98532","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.15604bd0d.0","@material/theme":"11.0.0-canary.15604bd0d.0","@material/feature-targeting":"11.0.0-canary.15604bd0d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_11.0.0-canary.15604bd0d.0_1617662518096_0.5059034710031789","host":"s3://npm-registry-packages"}},"11.0.0-canary.76da7876c.0":{"name":"@material/shape","version":"11.0.0-canary.76da7876c.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@11.0.0-canary.76da7876c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2c5327938acd5e7574871c38d542e53ce628a9eb","tarball":"https://registry.npmjs.org/@material/shape/-/shape-11.0.0-canary.76da7876c.0.tgz","fileCount":14,"integrity":"sha512-UIxtEJNPSc/RpzD39oljjUpIOsgaDKKLj8gItF74LeCSsVR3/s/ixKglFGxQ6wfsss2Ehj9RqdfLAzOEC6/LEA==","signatures":[{"sig":"MEUCICLARptEz0tOR7GSQ1uZUaMCmI8ICd/FBye+cuLFNCk+AiEA4JOPBmNPw+XULzXQ/qBaUcdNckmi6oKu9ICj+QUf9C8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22865,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbQ5xCRA9TVsSAnZWagAAa7kP/0AnAx+8X+MNYXSLGfZD\n7Vorj7cpXcmsSEFGvtYXb153i/+Ts/cEKovOKZt81xTHCbdY3Fm0umdjJSM6\nhmKwQSfbQs+YnGMjUFl+Vxg/TtrAZxRc2oHfEj+XyGuQ8h2uyCw7iX110/NK\n9RJZPJnEg+ElLfJfibPAIeqsvgx94dj3qVgH6Jbmvz+2TRDKDT8tmkhlQGyy\noY0vDBUg+DRZsd9GCvIkf0vq+xmVZR6hF5OQC+OGL6eIqxg6m6xpzpqJui7C\neJAbJrixNRk7JF1aJIgCDsCnconqYlKjuJJ6zGYje4brOvljsOrj431zD5Q4\n0Zucf1MF+KRaCoGvsqCcziNcghN9tTovk5DoWlnMjaA/7yeWkCkRmB3uRjYi\n58Y2Mx1fgtoi18FF5AbpaBru+EnKcjghPFaopnqwxrqQNwM6GhNNcGs9lDvM\nEbpPTXqnDuVQ8vHDFStvOxl0wVFdJKKDCPOFbki7b0FaLFNLn4vaNpQi2iCx\nsHRnOrk3gAbXIKt1IYMbMQ22rjNQmJdY/UWZrV7v/rJLAOejJuwTXh2sDgDp\nc/yApYJ09j7IR3SlArq80ImBqenAqT/RSNgRZY2YJuwEyj/v1Bo0KM3Z3fev\nNAVkUGOD6o3zJ4H/6u/vFvzgJhSkx543njCGqLPRRXuAJdziq4I4Egf9P0lT\ny3Gc\r\n=R2me\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"4bace63831a45c0c9e6f786768b2aad0d79087f1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.76da7876c.0","@material/theme":"11.0.0-canary.76da7876c.0","@material/feature-targeting":"11.0.0-canary.76da7876c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_11.0.0-canary.76da7876c.0_1617759856528_0.7152815896950278","host":"s3://npm-registry-packages"}},"11.0.0-canary.6bcb6cbd2.0":{"name":"@material/shape","version":"11.0.0-canary.6bcb6cbd2.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@11.0.0-canary.6bcb6cbd2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dae3494258e9353d80f29387c9558f0f6189cf51","tarball":"https://registry.npmjs.org/@material/shape/-/shape-11.0.0-canary.6bcb6cbd2.0.tgz","fileCount":14,"integrity":"sha512-e8dHEzv//hfqLlF8c4CE9Ge8M74j/CB96HelZRfoM7/KOyXdGdctGfVcZYTHH8hWUdV6HMwmnl7t0/qsDDl58w==","signatures":[{"sig":"MEQCIDPkCK6XuxVcD9pq6uZhqnb+dM3Otr+C6L/GgyT+AcQzAiBQFzkpnL8frQ0bhtmMkFw3Y/mBkmoPS1DnyzjPrYKteA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22865,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbf+8CRA9TVsSAnZWagAA1MwP/3sEpdoS5IKih+jMHdBi\n2giSNCUbhkNUJ0jl/9Iwf07+pQ4eljf/glzfBkMSEmil9FB8HgnUMmbR/cBw\n6bTwapsThvWvm5Pru55md+jdDT8BpUI/SG0F6i/RcNLdfCwtFbq93q/Xko3/\nBxFBmW1y0pA0F34UmKtIC/dO/YrooLkVHC/4sJacQS3u7oTWThzzeW8ylnOB\nKRHze59YcQyr/VihjVaNqueWs5ZeU/I4XFmqDNOtaFOq5lfxTd9+OpJlqj71\nbIljclKXidDDBgy3WkXmNWf+kjcTXbIkyzSS2WKFMwDaMTv4bTZ0CNLrQ6+h\n+XPHdtQkmhFDVrg3pHAwYzvLsEJLFw/jenh89jTHMsIV6qQfQx26+ZLJ/y4z\nrclvCx1ECALp2Z759FO7FkGMKNwYTwHS1Cx3eBhuWbVA3K5f1L1d7EdYE+K5\ns/fTuf8umzL6jt0AJVbYNdA+namuXCBFQ/jnNS4uX1QTqhsDRsBx3pgT3Gmd\nEol1OjaEvfalZcnHkhQ+M0d4NUhZFg+xZQNFRpqnfnJHyJMWuQnMTZk5Yqfu\nj17UwyZ96MMCPj6GyfsfVIy2jiTjpMNw/NUnSp03/SAtoD07KI+t4xjNSC53\nhZkOeFoAfCEbkvj27PKK/O9E3JahrrANObVRVNkyjChsYpu6Kksc4zH+jk5a\n9O5l\r\n=tjB/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"f3ec57093899a7f082bd51cae05b398c31619392","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.6bcb6cbd2.0","@material/theme":"11.0.0-canary.6bcb6cbd2.0","@material/feature-targeting":"11.0.0-canary.6bcb6cbd2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_11.0.0-canary.6bcb6cbd2.0_1617821627698_0.1133619132357313","host":"s3://npm-registry-packages"}},"11.0.0-canary.c91e8d141.0":{"name":"@material/shape","version":"11.0.0-canary.c91e8d141.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@11.0.0-canary.c91e8d141.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"295af3b769b8909c1d458bd717edf6f6dfe27b9a","tarball":"https://registry.npmjs.org/@material/shape/-/shape-11.0.0-canary.c91e8d141.0.tgz","fileCount":14,"integrity":"sha512-HR0+6FoWdS33WNR69GdcA8yEcXOHnSKREX7FK+ioIhvsjumQ5ciG/weaAZwZnxSH0eD2eo/owPEuyYLW1WufUQ==","signatures":[{"sig":"MEUCICWmRMn7JajCU2KbMB/2fpeahdeHsT6qhKqE0ndLgMTnAiEAqXK6YhtQH5QstNxFV/FasOSb0uQQ9AK8Sr74bU/hSgs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22865,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbgCoCRA9TVsSAnZWagAAtG0QAId1hLlXoFU4y3oJ1Ift\nf2Bfm2suBr005VK3jr6ygzjYd+JwIwm9aZWbEJMRWHiGqJifyqL2cJruXhEQ\nNyzXFsTjrWKzm1GSF9wcrYR2ZlXI6yWCRnuvYYCuK9AerX/zeaoWaWoQNl/z\nBN+yPlR+0VBt/rzs1YW6VLmwo43OgyOuq/zrSVUjFCXLpT3IwvNVgis5Ztbo\n/CT9s4PU/ZCx2DXTzUGoSCTG8Gc4IzTf5d8naNz5vfu5l8Ld+DyTaDaBUN//\nIX7BJNWrvWb3g8bLGDQ8p4zGK1oba0hC5c2StLH7MjmahAXLAiFAGGB67frJ\ncYFKeDNfYP4SuxlSAv11vEv9gJfiH/8JaA6dZZ8BJBWmu2kG6TxoWdJgJFLt\n2WcEZEztJKFJCGLT5EdCnfAoOadb/uv88fj+UXXaTSBy/vJQm78Acg27Bw7y\n2DTZxvKjTtNHJZOF+fD+Bp1e4GT9NYU/grTV70hI4hMVu8x1MwpUBhXmTPzV\nCUyk+jmZB5x/lBDLhiGYFRB+xNXY1dSYYk4XVpK0WBlh0Z7evMCok6agvd2E\niYpggy0jsscALAjq+C+qyHBPqmTSWXaH8JvMfkAjPUxFtEbNqxxZNNp+4bOO\nIXIFrBLbH9nqpyMxUFvrVaZiDoPMwCvw0Mv1igSmepAXahm1BYmTco6YjJMb\nvyuA\r\n=9DAE\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"b13009a2b12843e6eefaa0c3ae66fc519af7bb29","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.c91e8d141.0","@material/theme":"11.0.0-canary.c91e8d141.0","@material/feature-targeting":"11.0.0-canary.c91e8d141.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_11.0.0-canary.c91e8d141.0_1617821863538_0.18446495845798205","host":"s3://npm-registry-packages"}},"11.0.0-canary.f77c50860.0":{"name":"@material/shape","version":"11.0.0-canary.f77c50860.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@11.0.0-canary.f77c50860.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"606abc86179a33eb5452a0bd55a4c7c7bd50513a","tarball":"https://registry.npmjs.org/@material/shape/-/shape-11.0.0-canary.f77c50860.0.tgz","fileCount":14,"integrity":"sha512-k3RJIaBzp2JTMDUQJPx3wZlq/un6dhXrPRFqDd60iQFBgANAAX1IAfMpxPmuPCZ4Vcf5SfrjV7bZlMIxBAEvuw==","signatures":[{"sig":"MEQCIF3IgrImYDKRnXDOJnMQ8XqIJAEuAFG8A3axBaUZKaewAiAGa/lxlDFKJwHKPhwcOEMG/u8AE1Qn19faKQVuXQLxnw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22865,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbyLLCRA9TVsSAnZWagAAcwUP/2+yhn0pNoXsG2qKl8B0\nmYq/7Fb+KzqCHnqibSIG4uy0JHUHKO+ZRhHZIYYyOY193aZyVRoYadKZMfUB\n3rst6FjmMLAAyeos3sMdCaR2o3dygJlCmkMwJj44hvOzUUcysoOB6eseK64L\n8i7wbHHQ3QK5cUe+pyomanIp/tysnk94nWzC/BHoXUutbFHA8Nrvo+NPUbkN\n1vBWk52hPkEJYtlyHtGMxw3IUIfKRNXGyTGqjDNfu8RK4QLmZd8qUpv/Egiy\nSZST82Hzabc6UeLOKPwUTUFOB7E1bbyu9bVmRN33fa1JJERhswRt/Fh/EI1+\n9sSwzPWu6MYX++jkBgxYuq8+DZg6IUJFkG2UlkmzvfJXuNKmJt+bYvGLWBDm\n6VRgW8Brx4hN/YSGplz2pS9AVZQyLMe//C11Xk5R93yPsO8i2rMPlXsJAT4F\nB2tZL8leZ9auFAjKUDnozwUqx1cr6jXnW+BUqL8MBYhHZnx3h3H/7eC2mVVj\nO4RqQZUu4YFigveaGdYsGEoq3iP6w+j65gF++dpUUfyLs1sXtJh9VjLSMYCM\ngOQ48eCZkQAD2lt19mlHtCN480b2O8xcQyoPUsi4YvJ+hpw5z8yJlCFntf7v\nKsp1rOEmwgb6rUHK57wQy/DKmy1pwv04b9mLxO4nH/h7doebcnlszmKfJxI+\nt+ZZ\r\n=TJzz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"d35db9665d4a8a4f385b134c9c1a23bda8668fa2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.f77c50860.0","@material/theme":"11.0.0-canary.f77c50860.0","@material/feature-targeting":"11.0.0-canary.f77c50860.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_11.0.0-canary.f77c50860.0_1617896139334_0.7571322690851918","host":"s3://npm-registry-packages"}},"11.0.0-canary.367d88bdb.0":{"name":"@material/shape","version":"11.0.0-canary.367d88bdb.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@11.0.0-canary.367d88bdb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1befd5ba828fb573ec9949722bb462ccb62e75ec","tarball":"https://registry.npmjs.org/@material/shape/-/shape-11.0.0-canary.367d88bdb.0.tgz","fileCount":14,"integrity":"sha512-P4PJjHnPpgJ9jKDeMTl/7A7WTTHPrys34QStib3WhLeFweW9AKw1D841Kuh96dkkDPSChCs1nbnN5gQnbM2UWA==","signatures":[{"sig":"MEUCIGbNMJtsL5xu91LcgfD+Hv3GSv637mRPoRHB7RJb75HxAiEAuw2upqZlw+4UVpPayvkw2paMkjztGh/RB6KP+ZwMoNY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22865,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbzGICRA9TVsSAnZWagAAbv4P/1tb/tgtibQ672JH22ZN\ngezX1hzbZ47Sok2LQcD5AwLODxSxBfcgJ0KbXVU/8z8BsFi6mLfqPnrYZfED\nxp+u/yEnOg61oXx7fEdpGFIpVcQ3xzmOg0/fam++PSKiNmvbMpyAMi83wgeU\n0kwSWwXMqySYgIqCGfVVHXlLGdaObkVBXz/nXZ1zI+GZsb7yfSz0wGSlp1vf\nF4WRilUiFg/F1wqfrl+XzLk6DzzDHr3w9pSH+tSWCg39Pp43/NN+LnMg1lVg\n7AwSI70iWuNAO5x/vxyWIWHsRPx9J6jyYqm8V8cJSF8rGzUGMNh6zzMa3puU\nEig493p13z+jhMbfIdz93q47+1s/sYkkXqF2SOcpsJs/CWbd8hxH1i9FHS61\nVMR7oFQloHDf4q9zuRCnNH/nRCaQxWdFbtx4kvRAGkiwGmXqxHDlLcCAOlXg\nI1EQW5NHL/rv334ucFZAnW4ekxgnuzYl9TkTWVrTDoFiozZIykKC/ZB/HpVK\namsaz2i7BP7u52moO6uBfo4UkOA3LKamE4eDbyJpGM7p3AunG6XAY37UDvCH\nL+goV5v2LDVqRLiVoS1iPuCdZXo1penmLg82cl8aO6jTsukO4e9WR806ypLk\n/AGmuE7WYbwyYPRnz3nff6WZUCqgq1DSoYcyK/CIYMATHI/64Os5RfPV1k/Y\nJ9xz\r\n=tF6h\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"ba9cee87fe351c7e76ccb32f2572bf3ca91e88d7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.367d88bdb.0","@material/theme":"11.0.0-canary.367d88bdb.0","@material/feature-targeting":"11.0.0-canary.367d88bdb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_11.0.0-canary.367d88bdb.0_1617899912118_0.03505876068751479","host":"s3://npm-registry-packages"}},"11.0.0-canary.0ec437d3b.0":{"name":"@material/shape","version":"11.0.0-canary.0ec437d3b.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@11.0.0-canary.0ec437d3b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8b697ae82f101f5385fb9d8341bc11bf0b31af82","tarball":"https://registry.npmjs.org/@material/shape/-/shape-11.0.0-canary.0ec437d3b.0.tgz","fileCount":14,"integrity":"sha512-7HEfIlLcrS0iq7lbbIaa7zY3JWoV0kBZc7aAvEQ7sj5MsSKPT8KYmKo7PxC9VG9wp9+6YBjPkglCxpR2PXjRNg==","signatures":[{"sig":"MEYCIQCh+Nlmxxbpk00GMKt6cmz8E9fMhSdm+ufwFJHVv+mqkwIhANUjcFE/yQboAcUziEOg1x4gQD+F1wvUa5G9msuwb+PM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22865,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgb1r2CRA9TVsSAnZWagAAJxoP/2aMO7J4q79yUzv1RPiR\nkklpUioQ095iWsZmZcXwHHGDSaLRXqsbQ3LvPKq6KEi68wvwgVoWWhrr9nX8\n03pBPuUAU4I2jKhczmil1cD83lxRZag9THbM6aA1zUFW+30WzWhCvFMzf7R1\nPfNxOKu0qcDySiiRzHLOwA8VFGQ6fFulpNkSIx/7CCeCUbQ33T86WWQ6OXcW\nvdeO3Y4U01nxp9mFQKu8HmkngVo0XZlk8aWm2fxp7VToIxFpLsOzX3orkZ9a\nX2nA1kQqsbe0wVlIW3VQke0Lq11dGTe2iw7LyiM+UQ6mPep7Hji6VM8lGa2L\n8wXvs0t41YOIQ5xgwT25i1j47/drwJ0AizU8tqZivoQJDlB59yMqFDG26wmr\nnAE6CWur4BbQ3kBFXvfW2NIiMtFUtyJiiu0SXLhvL2ANoCSWzMdhepDKSwLG\nU+wUIeDKee3l20f0BrgeELPJqlVHFfwuDRaHZNbt+tpZjL/n4lr9qF8iXxOf\nZWfu1Ou5c97ucv90DN+EEJPbzoWSY1SjO7wRjVEeTxLDoX7VDv7eJfOQy+AM\nyb1gwpxdIkaHDhMzhQt0yjKhk7uWLQgNVUGstLOGBbZZHu4JQ1we+dwnfAgv\ny3XQP4gGzIPw1WePau7qxpzaLGUcAggMY2Fs7hyoFfvwGx9fIJetb8rWafCW\noXQd\r\n=z8dZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"50ed2429a570432fef9747a954d7c31d2dd11f0a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.0ec437d3b.0","@material/theme":"11.0.0-canary.0ec437d3b.0","@material/feature-targeting":"11.0.0-canary.0ec437d3b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_11.0.0-canary.0ec437d3b.0_1617910517603_0.8776995801036911","host":"s3://npm-registry-packages"}},"11.0.0-canary.b2fa996a1.0":{"name":"@material/shape","version":"11.0.0-canary.b2fa996a1.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@11.0.0-canary.b2fa996a1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8997f4d1455629c74fdda3be8bdfb3801c74a47f","tarball":"https://registry.npmjs.org/@material/shape/-/shape-11.0.0-canary.b2fa996a1.0.tgz","fileCount":14,"integrity":"sha512-/IktAOQItlrqe9dA/RSGbav5xn3KFKscGbpP8l1H3LUId/Mg7bYUUSd/jejycgNo7r1kYa5wbRjhfRCQPCQmmw==","signatures":[{"sig":"MEYCIQDFw6OsnRh6XYSpbt7YbHtN47y6FwYpwFS2nAaG8DadLAIhAKPzLYlRXvfcuHRZcEQ4aVBYuFNTZq3c1kePJnDaZ3Wu","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22865,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgcG5zCRA9TVsSAnZWagAAZR4P/3XDvCGHFeTuAwKVA3tF\nPC/8ohbYntvQsKg+kkfaPNw3XPMsZXpsvT7GagXAitHoNJEIMSLZb72hNnbN\ncIQbhWHSqxX/pFBvsz5IooFufUKDmawBnIwFPtkGY0FLdEP0wBycxJDeZEiM\n+CqAjoTO6waCZFkN/tKEzqdA7TGhFuFntISevL7BThEosc+deazhvujOBjed\nFi2bc26BmxJR7dAqGSsPJnyTcCylgOOHrGLi22+wK+JkT4fWF6tolQMHiTC/\nHOu1tAAw1G4ozcE/gtrd42M6vA2/6V6ifbkDMp9xsKLtDIkEnHePBpgycAhr\nHZn2uwkqrqovQTxS8i9pqHTNSxXPmZfyXS4ykhhboqjpaWs01Q85ByHTw6T3\ne0vrlnJ1Uyga0wm5FGUXHXVOsJXeRRLKI8T7WCe+Ve23FesE50Z0CUNU/wLN\nPL0L2M8pBFhnTUfuKSMSh66yqClT2UMBcspdw/WwnFoWBKrGslzNFPVtKSEK\nUFpfvvU41KMXr+T10AzEzjnyb3jgYwYB97Q8MCKXEqLoCLXNRAcI2DhpNbtv\n0AVgNCnhiuEArXxhEkzNcIaaVE0txYj4Fk3vfQ7XcRyKoZZejvtuHVCCedjW\nhPb25zVIBV8C3u9D8D1xuLlPMdRpeVwK23UcNDXqJYA599z3qAaOlDp+tmSn\nYIFH\r\n=346l\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"0b4eb5b2d30d6d9a7b20f57164a2beba3c20d65e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.b2fa996a1.0","@material/theme":"11.0.0-canary.b2fa996a1.0","@material/feature-targeting":"11.0.0-canary.b2fa996a1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_11.0.0-canary.b2fa996a1.0_1617981042787_0.578635744901296","host":"s3://npm-registry-packages"}},"11.0.0-canary.24255c408.0":{"name":"@material/shape","version":"11.0.0-canary.24255c408.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@11.0.0-canary.24255c408.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6d799e2a9148977074e05256e9c99fab5f52c187","tarball":"https://registry.npmjs.org/@material/shape/-/shape-11.0.0-canary.24255c408.0.tgz","fileCount":14,"integrity":"sha512-wlwRtynf89bmzGSroqPwn8Z3QG1J1PQ3T1k8d+eEaaKpCnCCKDD9PbHmvHOkRMDVVZdCaudPgMbt7ghQg5XjqQ==","signatures":[{"sig":"MEQCIE7BJTDCKxLNLcvj5ApWwvaoT3EMnTP7Kibp7xOk6Jc/AiBLqqJqPNrxRIXRqfFZIFUawXqDIZ/d6i5EejCBl6YVYw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22865,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgcLUWCRA9TVsSAnZWagAAZ0QQAJ+5NGLOgrw9T46kdVXm\ndRClQ2b4wcWUcA+DhCGQD7tU6AOBj6rCJfoBvyae4t05haDfdzGSjRbA/9Pn\nAxJwszYgpF+F5VZZgmIr5IkR2SXVNhUMpPrcmlsoGs400hspbgGwyQkXur7I\nHUNinobcDBI81PogOyAnnWcnSQwLmN7uqvgy4SJE+7ChTbreQdjizefgRiyS\nhz+jdiuU9IcG/6+OhF4mT4Qs7ova3QffjR2isr2CWfN4KDZQt6jIJ8ewXA/K\nsTTaOolM6Nlr4i/fcnAM47sLXvTBJ8CYSNfGplz5wKMR0bH4oQoj1svJl6XS\ngwub73DphNOLpka1+k8Z35LygeCoG/hn1/2sxwhRCD73IACDehSDRYYw2eig\nkp6Xs9YEi+LM2L2QHdTre6yjKN+3eChLy+ktT0+tVXSMX0riiuqmP5+yx1uO\nucUhgGxCsfaObF+J90FNGDOLdVR3dbmkZLi1mPKxouFa4UvA2rQHQdOpr2WT\nbJ4Nz1tTnt08XSKYizjqX3r8bl2mqlXK6JQ6o/eJlGf5g7Wk2JbyTla3ofab\nKbncHDoFOsz+STPmpT8lBGs7F4cQFfnhVO4PalMQAtuDzg10+0efcLC+Vgg2\nXev1kIRqJBoKNGr8aWVDSvpsymDY26m4AJuCCLwKRzlX6ubapR+LjXsLHe0/\n158w\r\n=sDJf\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"5cc224c5482fd736af03872db458f031901bb693","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.24255c408.0","@material/theme":"11.0.0-canary.24255c408.0","@material/feature-targeting":"11.0.0-canary.24255c408.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_11.0.0-canary.24255c408.0_1617999123073_0.6811853739967229","host":"s3://npm-registry-packages"}},"11.0.0-canary.7d6a4bb72.0":{"name":"@material/shape","version":"11.0.0-canary.7d6a4bb72.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@11.0.0-canary.7d6a4bb72.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2959abadc18b3e3b09a241af699db807dd0295fb","tarball":"https://registry.npmjs.org/@material/shape/-/shape-11.0.0-canary.7d6a4bb72.0.tgz","fileCount":14,"integrity":"sha512-S6ye9YCQnGXngEyQCXqqoyHHc3I5Uis4U0SbriM3eR4ZwbKbbOrNfpJMXHoD88dSkq3s5nnYP5c8yqOvAwe7Ww==","signatures":[{"sig":"MEUCICYCsTWep93sc+P+zr6u9mgMxakV6N9J1cu1ZBgMYXxzAiEAi7TJ5YSAW/6rPQ/fZKQrZQuvRNYqqZ17sahb5Po0FGU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22865,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgcNroCRA9TVsSAnZWagAAKSEP/3aTYECp9ida/nuS1nFQ\nmHWQrnStp2wq7+3BwrIrMaLpzQHr8rJljLgF1mqrEFLenVFTeeAArBPFnmiW\nBri3MJTaHLOFIeu/+rh488F6xV94Tm2JighswWLKun5merFJmavDFeXoJ34O\naojMa+a5LJDSxvLTHlnVr6R4py5f+a/j3+Ftguj2gcrQ6rttYv1wBcD7Fh29\nNVIGx+UZPhgIkfCjALlrVQBNQsvPfOxDk21J4lTLJ0HpJMapZ1VsDdXZNYUB\nM3umoZ9VuDdr5Srqv1MMX87J4saPnzvUqo/1YwbVZblJP2jfj5cawEw5wFNU\nYUwTdLeM0S1+lizpdPCBOgiGXT4HOBfjgscivEXc0e0721iM0SkQWUjfIbRi\nK9OXPe6Pq3IpGkL87CeOO/6HewUY2qAklqdipfn+yd3GdJL/AawRkngqL1wQ\nKMehK71tEMAzdrntFufLB8xIuxM3jguWk/ENpqmlaV8+zZGguXoVcIwHCxPU\nGkIX28v1GIBAtVxm+lJIAmsC7U02Ia5XW8zvvMgkyj05R4SCuwbIPnkUOgkt\n5ux4QSU1lerupoSm10HZy3SZrkgSUB7H8GcEEzG37q7sRtAOQic0LYiafsrh\n85O465BRKL5LVz5MWF4IgsG8L64JNFRayAd22HD69yuRc1og+qMwWDrTBkdm\nq2id\r\n=zsrl\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"1e1f0ea898fe101863062b7a760600cfb1b095e5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.7d6a4bb72.0","@material/theme":"11.0.0-canary.7d6a4bb72.0","@material/feature-targeting":"11.0.0-canary.7d6a4bb72.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_11.0.0-canary.7d6a4bb72.0_1618008807699_0.6344334368289357","host":"s3://npm-registry-packages"}},"11.0.0-canary.352b295c1.0":{"name":"@material/shape","version":"11.0.0-canary.352b295c1.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@11.0.0-canary.352b295c1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c0050fa58a345f38e60f5f31509f3a8baf8444ff","tarball":"https://registry.npmjs.org/@material/shape/-/shape-11.0.0-canary.352b295c1.0.tgz","fileCount":14,"integrity":"sha512-V4EmzxkNyaA0J45VOA94NwJ9ndbi0uNrY0HKmdHByhAjivX3C2cVQGsxt71BkqZabx2pQ6Vb5uReHHewe+E/EA==","signatures":[{"sig":"MEUCIFslNIO7Mvz0FhVyMc2SV0aMmF06aK5PSDJbJFSqe/lOAiEA/xULT+S/u9d+XUpXP4rUfAMBN5SQ3NJ8vRC16IrGVyU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22865,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgdI5CCRA9TVsSAnZWagAAPtwP/2CPTZtldjaehyEemFVa\nN5X2R5ntnSIAASA2VMbE8x+nzmM1EACmeLxRuuFLj93HGeAYCqL6ekMpZGI1\n8NrrrtUSfFfdCvfcvLsMb2kSi8mJIj3Ih3uJgWETwbQ414RYCDkGEaJwug+r\natewQ+Ll1Pp77UlltkiOc0CIovClljQ3CptxhGG2lLtmr6tjhzt1mZcIiKUX\npGMo2braJz0U89JbreWkmP5Zr2A/rz5zyUxTLJFi4mAPUaRlPovKPyE+gqzB\nd3YgxW1RU6qWzJjyPpbbX8/e7w8gZvec3dP9pb3lHRQtKvhI1CoEzQ4aUQjR\nRV2wa6hKZG5rw/T2KqP/D5A01XeVEpTqDGso5UoJuVm1X504tIMxiVGXB4iw\n+7ROZdy8rf+Ocv5r4uKGgYo8Up9xTxsSZotopBP50FnRpxVkfmpGdo9KDqqP\nHYPDb+G5+TRvpsi0m94HBccFLnQ4WM9KZNH7uhl9Me2l+aWFAm9HDeFNNTi3\nzXxni3NF0P1RFM63yHcyaQ8PvAvzQ2y8r3CcHzadhKiYyU0CjYpi45SvpwcV\ntm3sx+enzasmOHgJzLk0bc9r/TCNbjt2LoPtOiDMWES9adnFPwg0Tl3ZD5Fi\nt7mfvBuow8h5sB3Ib0MlNktKsrzzn/jAzzct7ty0K9x3sTEM9MM/BILqM6nB\nKu+R\r\n=dWwF\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"472a00ecb08e85ff1b602e3bec15d38f2a028f69","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.352b295c1.0","@material/theme":"11.0.0-canary.352b295c1.0","@material/feature-targeting":"11.0.0-canary.352b295c1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_11.0.0-canary.352b295c1.0_1618251329917_0.7612159674919428","host":"s3://npm-registry-packages"}},"11.0.0-canary.ab99b8064.0":{"name":"@material/shape","version":"11.0.0-canary.ab99b8064.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@11.0.0-canary.ab99b8064.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6e3cff0994b49152e441b30fe5bdeb967558f122","tarball":"https://registry.npmjs.org/@material/shape/-/shape-11.0.0-canary.ab99b8064.0.tgz","fileCount":14,"integrity":"sha512-b16wNh4bAWC0tbkSQvFtdOY7a3vAT8VN54ycxsEp/781EyoHdoYfZjeAYpbiCLI2ABasVsjb+SG2z5VtOmZ2ug==","signatures":[{"sig":"MEUCICP0BwvSn1IDhOedzu064fTYEXNesFTAc+Dlaewf/HxUAiEAjwWc3eSI6fqOTbLfx9WBe5kNytI1z+zUnOfjTJ4UQxc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22865,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgda4MCRA9TVsSAnZWagAAOvEP/16ciTuyc9cYRvucPa0Y\nkKc7oVVW5K1AgAywgN/oUEeNVnGT4GUAtR2fyCgdGFd6HVdnrWbrzkkrBQxE\nw+2/0m/3xG5TEc5/7Vub5MD7ixx7e/3DDT05+zk10lu9ZDm4e1/uBjI/ufJ5\nJtX2+jCv6gtmQIWtys+3RTiSLOMrsvXC6eerji7hWPFNLXIL4rBGqw2TvVF9\nHEA1Rf2EsvjOiGSB1mAOtQokdJqehh/k8WCAB4Zfa6BnMkK6FCPQzUqsO+N9\nb4uQ3FhunRgrX9hyYiEvsl/TI3cVPLJGND3O21Fj8GNOJ8gfEbJ4cDVEe/Ep\nE/MMOUwMLwE9tCv4Hjdz+0+1CNwOsbo+o9Jbd0RMg9Ua2catgXoUBtgY3i/c\nv7RQip6JLD+w5YncWKu6MbuoIjgwPMQst6Nz36cRfpdwnY1CKiLFy114hAgm\nYnu7jLiNhUOWVhK48tFeoCxkAbdEr77dlvX5L7x1BsYdhre3nCtcMgnp/UMl\nTqQj3js1cDbbmGNXAWGCSke9eT+FWflaKS5twDzKzYlWZCQs0PQFIsS/7bBb\n+CdmqnA7kmKYBuyfBiif3JCJvBmJlDQoiTRfLx5IRazUaIXATEqJrPBFIWam\nVGQ+pvOVM3Sug3UBXFtQ1Qzsxo+tzSdGl8ydKkVSaOoq4mAHV3SV4r/aICra\nh2CS\r\n=QNP7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"7a67c09690e367ad8ebdba2d551f6432c20ccccd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.ab99b8064.0","@material/theme":"11.0.0-canary.ab99b8064.0","@material/feature-targeting":"11.0.0-canary.ab99b8064.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_11.0.0-canary.ab99b8064.0_1618325004304_0.2991767546933568","host":"s3://npm-registry-packages"}},"11.0.0-canary.8f0a11e32.0":{"name":"@material/shape","version":"11.0.0-canary.8f0a11e32.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@11.0.0-canary.8f0a11e32.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e42e499cd2759fe3ed8ac9140b8e752055e0ec67","tarball":"https://registry.npmjs.org/@material/shape/-/shape-11.0.0-canary.8f0a11e32.0.tgz","fileCount":14,"integrity":"sha512-RX8yp4DhR7HF/msZOgsQWtlGhyy1ZOwALLYoLMZZSKQH95T0HKjCB3LtFx8A8nPw406bHQ3kWzrZFVCfwipbxQ==","signatures":[{"sig":"MEUCIQC/AaWV8bCBUv+LOi8/pPh2c1m0tZfizI4PExXnsHCLngIgCQckYIdQVlYIpsTM8peOMqgLdmEB59Ftns8fcD6UNaQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22865,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgd0pxCRA9TVsSAnZWagAA+dYQAIZtemFmlpy0M+hSJD/o\naQa4WdY2u6Q6U48pMvJtk4EmOcPKiOBTENr6ziYlgz/okdH+qp+RFwS1sc5I\nyAblhyRvTToZ2tUopNeoVNmfV3msf1sxJva4TItdw2kgDiwMw/Kukr3zEQzi\nzUONrXml7uY3Xlqu02ap3GUA9vTlKtdbMnBsWGCVu8hpl+2bnyEIQvvY4Y3O\nGedq4ZZdRUrsQyQ4o4MX9FPe1Tk9U4PUGVa3+AJ9qUtHgDV8yG9CMpA92Wr8\nD/Wu4vM8Qv1jdvvgj8o3ODsU2h/RyU6Qv6MEkbjq+Bzuzb+goEJLUGo6E0hs\n0gdOfQhJ9c0G/XGR70G3pvLx4kehfGAYwxyXHUmaMUvHLDSOLT8pGI8AzYKz\nZgNLFSwKL/zO6Y/dvghowQMVhRLzWTVVZygm6gs6uFt7lriSivoKBKQCHggB\n98xIOO8BK5J7cm2WEyq5flQvvrBh/P8xjUEr1cETj4PoyT5foMqOcx/MZz8n\nzqY61Ybx0JfnF7pBpvGIKCf7/GfMVsv23rCveQFr0cDOrwsLenV8LI+akUCX\nc4q05r8+uMs2mxTzJK3m8F4GRXyD8H920RlmGpodxX+XuIT2F6ymwTtWuEcK\nCy4t7Gi387KVCLeYhKXFTbExxqieQ10JnYre/RtHG5mvXxNAKV7Yb+zGSm8d\ntWQo\r\n=jVcn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"f09b2c0c350e2f684e84766c95eed5c92b5afb0f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.8f0a11e32.0","@material/theme":"11.0.0-canary.8f0a11e32.0","@material/feature-targeting":"11.0.0-canary.8f0a11e32.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_11.0.0-canary.8f0a11e32.0_1618430577231_0.6426722276196322","host":"s3://npm-registry-packages"}},"11.0.0-canary.f5c6db8fc.0":{"name":"@material/shape","version":"11.0.0-canary.f5c6db8fc.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@11.0.0-canary.f5c6db8fc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ced0a8975cab748353106cf0f017ef261fff3d67","tarball":"https://registry.npmjs.org/@material/shape/-/shape-11.0.0-canary.f5c6db8fc.0.tgz","fileCount":14,"integrity":"sha512-Md5eus+U81xKKmit7NJdIz6k3pZd8IIo4AbdNbKaO1fbSCOU7oZw/2xCISRBx7suBIoyKyS6mr7kv+TBhiEADg==","signatures":[{"sig":"MEUCIEQhEEtUq50xbEOiyG03RTGn/PPUR9o2aSWaFwN0cy/XAiEA5jll4/vSe9oz3xMiAzX7iZH7wsAZeYZHdWE9cOPm7IU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22865,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeIAVCRA9TVsSAnZWagAAdQEP/1KZ58/rKqFP+6jjmgnr\nc2E4Nmj0gB981CYSAS/sOjVe8bjm6zlWgPTNWzcAfZ/EmxckJR9zL67rQDAj\n9uanCKCmuXOXI0PmCHpux3QXtRZ+pQ370KCZ6ouCADZ2OcTv+NeZRkURLr8F\nuXKlouegM8HvT+M82iChRS3HrIJ/JjjXBaJFBP0CajrJ2ia6evPXN0/8woVb\nR2uP2hx32OzlsMb2KZLr0KQGlXPCyRUe4yF4BuT5njxC+jJlr2J43d1uttrH\nM7jkyp0eV4pBCGSxdg7n/oAZkqC4lIko3wfBekZzHX+6SSpMcY0gXe7LDpnX\nM5hZoYgNxG8mtrI6OoD/POolmaUGXQ+BLD1CEBFOKwp/S818xgnL/po0JFxv\nVBu0vAr1HeyzVu64XOan4vS/jseaBv4E7kRl0lc4bIZaC3cE4N+jjyGX10Wv\nD2ahz140OgiNSkPan1chG5IbVhBzzWLS96RCptirRlUbz3Slp5GjA8y+3QhU\nG+xXQzKJC12UH35dmkhJ8rUHLz2MTsEkIlTYFj7LE3WVmBiTQNzFIi8goW1g\nVf/7FHWIC4kT8Wl28t7j3n5HizgnTyUbjMYBAOiaQwrdf+j9RgIQ/6IhLKCP\nv5ECEQviJb5EdtIwkEh0EAYGfRZjNGRhoLo+SLPoY/dv0/t5FQXp8ppEbZ4X\nFTIN\r\n=44uw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"eddcbd64f4309f4bf5faecb13428405a28774f15","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.f5c6db8fc.0","@material/theme":"11.0.0-canary.f5c6db8fc.0","@material/feature-targeting":"11.0.0-canary.f5c6db8fc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_11.0.0-canary.f5c6db8fc.0_1618509845509_0.09709188794160206","host":"s3://npm-registry-packages"}},"11.0.0-canary.3793a3143.0":{"name":"@material/shape","version":"11.0.0-canary.3793a3143.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@11.0.0-canary.3793a3143.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"86aa4ea1928e675717c0e5d3e200a461f0b5cff7","tarball":"https://registry.npmjs.org/@material/shape/-/shape-11.0.0-canary.3793a3143.0.tgz","fileCount":14,"integrity":"sha512-yqMQb5k6u+TuP7EU+6Ig66AU1cnKE2hpKm5Gvm+uVWHi0JrSioPXMLu38H4ixthliyKTqpIZuPfyW62WzpaBEA==","signatures":[{"sig":"MEYCIQDxBrxE6P0xskamdoGZt5uO9JOLmG6YJdPjPJVtKKMOEQIhAKZzZnWf/+RzvjMZs+UJKboK5VN1RHPSX5dUGvuFcasS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22865,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeIZnCRA9TVsSAnZWagAAV9UP/0s9C5MkYXl8rFDMg6Pp\nS7VMY94NizsDF7CL6P1FrnlDWdVpMXSxAgkE9Qdfiz2V7TfvNd5NZU1dEgfQ\n7GEvrXVY0Idg2yyYRyOwA3aKKLQjgAS+IP6i9Da4gSlOfCugZBv3maY8vces\nkwQqtY3dlLlaFVuL26Les3hQRUHXCFSzJIZ0SMobQNyfSq1TDR/T0yQ8Ej5k\n+CfoO2nf+ZqMEnT6py7r31TS7uLAn1n1iv7j0sTKF7XdhwHfy4dQJxFsy73P\nEmE+1C95ZM0k715uPf/zRKgaLh+sK/956MpHOMKA/UbnTTKYXkJ44gOVJIw8\nFC9uJpdLmEjCqwRlvcoQfhPbvc1Zg9M+JNyGi7x4ALZJledTnlfCjnq9cnhK\n73/lLX6kf7e+XTYyFnNjCi75XL6Ue8Ljy+wql97Sn47ZRIrwLadnEWu0KzP+\nYpxo0Jp36VbJg3GohiLEoguwkdaymHMMKY4iQXw39zEsLMyilcXBwLTLgXCq\n9lZJ/5sy3Lct+M7J/mxWUgp/+tsF1/vPaKcpOepQ8tTlqEDByem6TbBiJ9C3\nmx9bXN+7aPe88ep4u8HVrPSOsGiGg471e7UKjSnnU+Sh3HxkzCgdg71Uflcf\nNKAcVCrWNNdiFagbUyiGYF7g5hFQa+CuXMYOoDrvh4h0zjNaL25zq12X4FxL\nkNBU\r\n=KqfV\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"3cfbed34975d8f2990425af21414290a96e2240b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.3793a3143.0","@material/theme":"11.0.0-canary.3793a3143.0","@material/feature-targeting":"11.0.0-canary.3793a3143.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_11.0.0-canary.3793a3143.0_1618511462800_0.053394848658641525","host":"s3://npm-registry-packages"}},"11.0.0-canary.bc104bae7.0":{"name":"@material/shape","version":"11.0.0-canary.bc104bae7.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@11.0.0-canary.bc104bae7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"25fa2cd23f32c9da168860d7f23176a26c561783","tarball":"https://registry.npmjs.org/@material/shape/-/shape-11.0.0-canary.bc104bae7.0.tgz","fileCount":14,"integrity":"sha512-q0ad8flbojgEuiqWLNicU/Hu/dvky7Lm9gm03UaGqZOu/0EtjCSD5/vg7iNuySU1f+zVJAZeYRluul9eIHB/Mw==","signatures":[{"sig":"MEUCIC6bWOdeixqKKc2YrrMF8vt7uswulPgIVbL+n+t9S4+wAiEA7jdL6l4I0Y28depq/2amDKeNiGrtpZu7aG9q4oCEgRY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22865,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeJf9CRA9TVsSAnZWagAAx9cP/2IyoKJ45vbGcO/VvYBc\ngujO0E/NDAC/NOIbeF9EgI4APxJJu96ZfOAc00Kl8fKhHH4JFvnpZw+RAH4A\nncjnHS7aZNc5I9C0SAtPOwqAKLesfXaIb0KIXZXLzmtQecZNspBjWVMp5ttt\n0NINmo0HiiDVsJvgwTXgDGzttiTpdYTgqNlsy55inYuDs5I9bzo0ZLXXSeK6\nYY79/F2AEMI3VobIzXUcYhA3LWjB0XWzQwdgsX/eTxRDPKIn0Gsbpx5AqE8t\nNO6XF5gwRyYpu69X3jMD1kDNhhWN1bKC5crHmSE3A8m5BYHZccvDlmCNyCG9\n+sMd3V70QabJ4yTsxdbaard2gCYNatP7MNd8/MSdOfY+x+9Iva2+mYeq9ixV\nMCymZ9aXaHlWG4owPy8TE5puVR3N8x7oyiXGgmku0wpcTpKenP/4cMD3RlRC\n+1DsT89ix/tO/vjggl6eu22Zw47mFO12Gr2cD0iQh6vx8xZs1amYXZj6pfev\nVybmABwS1mPVAfK52LF47aihdRyOOJ/yUZjRh2+c305Neyq2AaPL+VbxuJ9O\nTa22+yhrAjw/4oElbLwL9Cre2U+7/uNkyQbyVJ7uBnk+7jweDoewVt+Ikk5r\nFrYq4q/MgfjSLRdqq6jq6Df07o82fn6PcBKE+uJBlw/AWdpaxCdNnioFE9Mj\nKF44\r\n=y1ag\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"fefd0309d7bea91a430a20913f05f501364f2ece","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.bc104bae7.0","@material/theme":"11.0.0-canary.bc104bae7.0","@material/feature-targeting":"11.0.0-canary.bc104bae7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_11.0.0-canary.bc104bae7.0_1618515965199_0.9426922698237012","host":"s3://npm-registry-packages"}},"12.0.0-canary.3f342c3f4.0":{"name":"@material/shape","version":"12.0.0-canary.3f342c3f4.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.3f342c3f4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"43024b73688de86b16923c3b117a441ff8a6a721","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.3f342c3f4.0.tgz","fileCount":14,"integrity":"sha512-6OUBq1eGp+R+2koxMtnD0p04mNMUtMugFq6NU2gJvOgyClxO2d3v4LIcm6MYJlqv2vUFRGiIZgLm9nYoCtAP7w==","signatures":[{"sig":"MEQCIHtyxGD3POZSpf2D8hnPc1GF4bT6rXXG/0Lxa0m0f55RAiBXiTe+wvGorg/IJTTs/k9OD53uHEUjAQG/R0nofnmQnw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22865,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeMQHCRA9TVsSAnZWagAADVwP/R14Wmejk32yuvwBgNHm\nCC914O12teCvua7sULEqxQKh1Clx2PGXnzrw4XAe1GvbDLOj3lMUtNihIYg8\n6CFfZTGOIhXrD86ehAtanZYtiIK7VvRhxMIczcxv/3Cg3xDqpfq04rm/+bPb\nMyvaaKj5NwC8PFS7I1x3vAZDeHRpPztjfemWEuSr2evjlbiCwHmwxNhJ2Sq/\nHvzUWgwsGTIVVL/u6YoE9Lzwc2bzyKufQOe2p9ZcIRB7J3HHJz0/M5L3q1LP\nQhfnbaddG08VOGQyB3p21AzA1Eet33VTzwCbqEFSSbiW2Hw08r7lTX496Jzx\n9faHg3UqHbCdcCX0tC/Yc6ZhcC6yPr09shPqK2JDKnypL5f5TtTdoNQugXnC\n8FqxPg8Zn6iHU7ziRNd2xhHMWM6R7v9+JNZF320m0y5W+lKwR/+NpK2GpIXE\nTgkI0RKTTh5+oTHOQgkWNlLoZX0yQZwPQ5syXVGMND37tIsKQrRgiJmsjdWo\ns+VYaJYJCuK3BZPnixWmN1r0clqaTwagN/N8m7t4jC/lWSUgwk08kpNPLyAK\nB6/cxCBvf22qLq3qnTQ9fGCmUPYrWWfw7JXSoibX83cKRpGJG5j/svwCHcTL\nJZy7WzT8//DRtSiVwpqn4fKCdQAMyXTvpBB6yamH4hfTY9CpaJS+YLfoIqLU\n1wbj\r\n=3E5T\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"d82c002d3f314f99c3413389c77960016a48bfa7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.3f342c3f4.0","@material/theme":"12.0.0-canary.3f342c3f4.0","@material/feature-targeting":"12.0.0-canary.3f342c3f4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.3f342c3f4.0_1618527239384_0.007360544390587531","host":"s3://npm-registry-packages"}},"11.0.0":{"name":"@material/shape","version":"11.0.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@11.0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0a1da3855d58c9261f0658932265bc54804e2377","tarball":"https://registry.npmjs.org/@material/shape/-/shape-11.0.0.tgz","fileCount":13,"integrity":"sha512-O9/Dt/9Nbum1IvxRd4u8gCF4ghk9E55UNp2TGe+RN43zpTUbChh2raOFr3sQeRwLIzlb4wstUG9AxmdktrkDUQ==","signatures":[{"sig":"MEUCIQD1VSRmUfGqItYiFrY4pDQx+Cv6nKX4daS3kirt0K3atgIgJZJDHR+tj4uKqpK/TMp7oShFbM35a/96gjs/XCmGswg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22106,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeMUKCRA9TVsSAnZWagAAvdAP/3hnTCDaCurc25BX9dA1\nt46OzmScbCeOCUex+xOV4S1SOOsxG/uDXf/ELybyf1NSezlm1eroukEEvWVm\nLNHuyk8aoJCCzo4lUaxvr4zksoVcyZ9Cl1cQi+6k6rBulHPoxJWIqbWXysO2\nrShRnwpudm6Yf6NIZqPuOrN2VO5cogB4ghduqD3DPUwhIDZ7lPASN7JLPTHW\nTa7h8LYpyLxo+heZzdzYDr1fLpFpfsG9bwaZqqDWspOaNYGMRFgVkO7H3jVU\nMSZa+/ynbGrjxKXZYld6NJ5mQlM85JBiI5nBdxtlxp8Vd/2oAyPmI4QVXs0+\nh1LYG2xj/w4SomvdLtNgSnBTQn+oRmYU8iTwmlwdEHKTIBGHZdGuHN/kOAYC\n1Nx/jknyf8NTSxQir8xA0Odhgh1+eds1lWqPrffSKud9YN4BpZ4K1+JNJZgk\nizHYpqroG1PfoJcjcBA6GENk5Gys/2jcnMONKw9I1e8ZMBItwFP4Mx0tcC7P\nRUBBVSfCc334hc0+QruRUtBPnmwnntQ0IQk+/XfdfVLEkiKeMyJiepaBsNCv\n1510UMV1zKVpwUEW4IbS65uli1LkT1+2X6HmR49YXkK4USVL4I2o6bY9PYD/\naN9P0PWcZX6ghZ7aLC1FN7UssOWQao/HylNoihCPK3K0dpQeUJcwszeNVBR/\nwxn1\r\n=9RWd\r\n-----END PGP SIGNATURE-----\r\n"},"gitHead":"3f342c3f4715fd3587f327ce4ea6b5dd314c5c55","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"^11.0.0","@material/theme":"^11.0.0","@material/feature-targeting":"^11.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/shape_11.0.0_1618527498000_0.09208198314672034","host":"s3://npm-registry-packages"}},"12.0.0-canary.2ebfc5374.0":{"name":"@material/shape","version":"12.0.0-canary.2ebfc5374.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.2ebfc5374.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ef3df56108bf6b65635f0a73e3b1f40d7a44096f","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.2ebfc5374.0.tgz","fileCount":14,"integrity":"sha512-tk4Wtmh/bS6oz53nABZLffoCSu6OUmS8ygFHYqe04Ji7GaP9ZwrJ9Yg9xd57pTgBhuL15KYRDThai8A5xJ4MgQ==","signatures":[{"sig":"MEUCIB2ZGfjNFPMcTy3mv5MPvG8b38LfFGBMGMrOuka0YITOAiEAv5bTL/3qRJFLpcNPy3LF51r6UOXz29auuQd0Rhu60kc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22555,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgefdICRA9TVsSAnZWagAA2IwP/iI7DIWoSiyifpJHC3je\n32astjvTQmNF9Br6oewuaETiNcjr2sLkT4d+9Tqc9wbXifpoOHjMmfnp1wQA\n/z9oZTzZlYF6tFMcvTSavj1jamMWOCUWY35YDD1iekJecumzxP31GgHRudRh\n0cvwaWdX71/NmCxtX0gz7bVAItWg6GJnwqi81vIdQcL2A90etM5prG9jfdan\n00ZLK/D0ngZe9SpkPbQSmMpYMCJfwhLfFNaRkZwzsMVoEOiFGl/TlwQQlM08\nmXTrFXLlRzXqPMIHTowLjLlOjnEkIOonnK9C0igTtKFrOAeYsd4hb0nO2XG7\n2IPWGNq9oafomGKitYvGEK2ZVcJpDeYwaP74DTWb5Is4fBZjHwfKS/RKRe90\noCVXIp7wcHeJXM+IUIuDCJ6hvFrLQgyzBRTH4HQkK4Aql4YOBdEMuvKo+DVB\n5glkkdo0QraZ6lq+SOE/WPJ+TTyP5CI0wjdN3d+xtuN1V/c0Qv749n6R+7Ym\ntHXXxgEfa1jE0Mm6EvlDPt5FSz0W3nHQ9aKigFnys1hLgepLZ+iM0CCe+UuH\n/Jb6fjmAIDvUP+2qnpRS2jFyhSnEsyeTJNvPX1TtHxJ18BIwq0aaHbcyCB0C\nmrbWVnZ9UvNLuquzowfCq4Xa79RGNfEMD2vShu7Std84ySTQfbayIK4CGMiI\n7dc0\r\n=Cm7m\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"603bba9493212a7e1b6350d2f12e7488ae1d9594","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.2ebfc5374.0","@material/theme":"12.0.0-canary.2ebfc5374.0","@material/feature-targeting":"12.0.0-canary.2ebfc5374.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.2ebfc5374.0_1618605895777_0.9929469318013957","host":"s3://npm-registry-packages"}},"12.0.0-canary.5631828e1.0":{"name":"@material/shape","version":"12.0.0-canary.5631828e1.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.5631828e1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cab10bc48033686f71729425616f804380f7e847","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.5631828e1.0.tgz","fileCount":14,"integrity":"sha512-P/ODugpt26QgaP+8xZVHQ9/d5bCJI0zK8TwaenibDXMxSoMMr6+LV8jNzkAwnRh7GS7tu2P51J0XSfLTg2aAHA==","signatures":[{"sig":"MEQCIDpOFC6igsxD/3TPiE8TQdI+0NG1J2Mjk3y2H5BYzzEvAiBgctWutLMcQe0IJHDRCOdWcfv+ggmke1fc7f6JdLJafg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22555,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgepJoCRA9TVsSAnZWagAAfqUP/3m8Xp56IylVx79I9EuC\nmKHtZHT5Xj/MS8ZLd7yhTCJX0q0038Y/CRp/qm+JoaTCEZ3DB3KDrH2gcp7p\nrYBd1S124T8Gexv0nh2PZn2xvKswf+1kTFxXJX/odzNA7OrayyZWyL80ctT0\nqJnV8mFm1CBjE4da7VMDomZQwFleluF9/9Ve7xWXTj3iR0LVFOvGcwtQL3R5\n60rVf86AlaJGAWg1iDx+7jpXwW+J5jACcod8AmunzcGwfivpCpehiLXtixQ4\nJ1/A2BPUtnsN8/OTSUFB8Pl24QNdKLYl+qTvwXcyjxuVHdQphs8/R5b9t1MV\n40tgT0x0naZwE96ErY+L2EZknJq3u7+jR3knakL5gBsV/DliW4REP9AGSNLb\nyQ+RK0NrOAJkO4DzyA4F/iO2ODERvy5iSeewEv0DMOiTvS0TNp2jwJClCQv+\n9BEnN1c8a+OAV52Mb5TK5uiLq5AZA8m8X45sZjizCROvN7yHuSLFa/z3Av6X\n5IKZKKIkE60QQI9vzUv8DIu2wpeG2QmIkHSKX+rRg5nPpH0efCBd1YBxC2Il\nct+ui5Twu+s203p2m7ypysbTRtYz8f1cC339I6/S9TuL/cTaMWrUr+30I/cR\nhXK7Ne4PSQY393nxUKJ2Qrqc7MeYjK7i8oK62OXJAKo6o+xq4gAxZ07d/wjw\nt7BJ\r\n=f+7U\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"497e1a2527ce0368b4038766ea4893675ced3523","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.5631828e1.0","@material/theme":"12.0.0-canary.5631828e1.0","@material/feature-targeting":"12.0.0-canary.5631828e1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.5631828e1.0_1618645607852_0.3893066207916229","host":"s3://npm-registry-packages"}},"12.0.0-canary.bd685395b.0":{"name":"@material/shape","version":"12.0.0-canary.bd685395b.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.bd685395b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"089ea81b2bc7e580dacf1988d836f900ab3fc339","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.bd685395b.0.tgz","fileCount":14,"integrity":"sha512-5oNkRKAeKLW+YDjIRyb4g8hDWX8OJM0P0Agd1Zvh/fzINeyPk2if54PgkcUEl79KjT77FgbnLDDaHoHuMSXKVQ==","signatures":[{"sig":"MEUCIQC/SCH9StuHXmG7Ed6LOtVU8ur1DOy3zJ6zcqYw0wnY5QIgPGL2rdx0Yr4adFmTsNSzQeqjGiXCmbok47F/Way0h9A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22555,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgfc7OCRA9TVsSAnZWagAAodoQAIFI2/uyUISYiE4yYlNA\nuRHWfwVkzdQNOtTzx7yGSx8rTbCfDK5NhAtLH82+SUQzKNQtmFwt0/Ee/Ghn\nJZpaId9u1nzNpIZLIUC/q5oVd+uOitvIZhQbr1j6MRszmYsvHkOMRJONRbdj\niCvFHvZjQzTHGgTTffy6wfyO9W3cqI3wW8ssnFIfXq3E3UIjV0ho5emFVueF\ngOO9SvdoqgAJzgwfmidon0OcugIE5jd2fxbVjKppGVgwsSCCUfDpeCbnNnrA\nVZFf1T/big0wC3un6wzvAjYiBzuSCL5VkFiliV5Izj/ARLXJV2xzRp9Vt3xB\nv5x9nufFiWFKD2MdewPgqJI8nFB6Z8LDclJQ1Z+9gltNINYZ060Hzo2AsY0u\nsOgmq3lt1FC0Hq/wkzc7ieDa65vdS5k3IeFzmdvM/6OKTY93bassQJ3Waiwk\nZ9aHNVDDT7mL9lqeiWHMenMzGT89ETjryHKk/Ho2CWpvVLJHCZIcD12lB+bz\nzjHUaAissEudifL3Zlanu2d57uJpOGOZBuAKyyQXnWOmiKjYzJQjdRVpCyKl\nl7kdRV/svDWbRT099UTvmeipNjeg89iOj2L+kbLuH5UMtslhZjJzPgKeF7dC\nqITutW+vUIxUJUZgZ6ZKc4Q9igHQdEtBZ4hwcee6i8z/uRSXKpVLB0s6nxH9\nny6U\r\n=OLXy\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"69c7d9ec7c5de65144c3b2a9b283b6baf7af107a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.bd685395b.0","@material/theme":"12.0.0-canary.bd685395b.0","@material/feature-targeting":"12.0.0-canary.bd685395b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.bd685395b.0_1618857677627_0.4158784284507482","host":"s3://npm-registry-packages"}},"12.0.0-canary.b52196498.0":{"name":"@material/shape","version":"12.0.0-canary.b52196498.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.b52196498.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6b6ffa7763c29a1da447602e38959fe6828f9768","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.b52196498.0.tgz","fileCount":14,"integrity":"sha512-Y2KqrpCn6k5SYkkfjc85FKqpAnFOg08ofX2QB6bK1npf5qOqMMaL9I/jK46GZZvpbrR8CDEj62neASKPMe51wg==","signatures":[{"sig":"MEQCIFsZxN2xSmhVZmJl8ThhhuM12COCi0cXIKEOg3Lcm3JKAiBoXEpx87uo9IYqh98T9vmBHyvs55uJvED7DUaQYFWQpQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22555,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgfeC8CRA9TVsSAnZWagAAwmUP/3S/XUemMTXCxFQrKUZ8\nqpWv+2CLCBYhi6GKbYqeeGpEfEfxkyZ60Hhx3AyMox4x8F+UjOFQMV2MSkna\n8hfoy5ciRB46DGasYUpJWDEG/CTz9rV1Jruza1BiLjs2yMjPi90Y2hepltcY\n3yowKVfvtQPTvweiAxre29Qs5EQXhUVz9i/jGrUzK5e9QzkEEC1LzjXg++D0\n8NU6VgpBXdD10lMQ9tmdUwHCMAfDdhhcuzzXmhR2xQU5xbW+xi36SEeMLwlQ\nwFDDwTGFy4YObStPDqVoXavdsMYG3oFKpQcnzs3SBzGE23tSgGluQe5n4TzH\nuD+HCdyJARgVfRryRvTaU8dpD42eFGoKoSIobdyLvsXBt+86HU1rGe/3KTzw\nJ4u29USZjXXrKd0IjoX4VE/FFS0C9IYQn6JSUrDR9LUY5rEr8+R+x4fjaAwa\nerT14Q01Iuhz1FkrQ62fmaSKWsyp9RGfvKNIHcg+oOd5dzJMWTabu9Hmi5Ni\nYnH+jMqRR9/QhAK07UDPkdqK2q4AIv8yA8hlXrEx9xtNh6y8za5gnkpIdKXQ\nJR/AzgafAPV6vVdS0XAd49+w1WbNhS1EcP6xb2c4tMwdpe4dLi8AmYsf0u2V\nYpowVUZWy1M3KD/0EkfJ6+IxKyXPX31Oao9XWpdcMeYlMfQKLeulWURhrxwt\nfsze\r\n=0yTx\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"953cfdd3bde4c66a4b6b90171d4ee702958ae1c4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.b52196498.0","@material/theme":"12.0.0-canary.b52196498.0","@material/feature-targeting":"12.0.0-canary.b52196498.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.b52196498.0_1618862267847_0.6223739385901685","host":"s3://npm-registry-packages"}},"12.0.0-canary.8ba3e298c.0":{"name":"@material/shape","version":"12.0.0-canary.8ba3e298c.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.8ba3e298c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fb35efbb86b73ec68223f2f2d74dd804cbbe263d","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.8ba3e298c.0.tgz","fileCount":14,"integrity":"sha512-70LpqbKWVqpfCnvxK2JQeaA/w+j3DDeZc5T4320eJajWH8NW576qXxCN7b+xOuiIlK6lwaC0sRZJbFeMWNdDMg==","signatures":[{"sig":"MEUCIGBjA0PVLJMbj49E3gM/WMCqrw8gIiic3JCbjpFpuEj1AiEA2GzUnPi9GhSNsTTKEgxTtbmFYKg3zGaaLlAmP2nbTaY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22555,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggDHeCRA9TVsSAnZWagAAcGAP/0L93yIJRMGhAaEN36w8\nOtlFtZ4PdncZ/PN7Ex7G3A6dmfNKvax4iuWJViaBg1/XMg1P9I7BZ+9+50G/\n2ruLJ6iAiQ5ohX9fsyLl1SH2d+jKsix0xsUFN3Yef4td+V1XEC1j+oOxvI03\nvlsdWrJFByxoYbAr5gobOV9hRrDHN4fwmTmD+n+oUb8YMXTP2EpdI830x3rr\nHCIGKe2WdOAvEhm6fWaE3d6SCr1fqemLuGoNqRCIGIFTEFr0s2GOnfXKHEsx\nyuDEVrcEmLv/aK09poZQEV6k+vgp0CuRhtPio2W4pxpoIyE0JQoT5IMlncUV\nfgZtGFu/m18Z22TxLykVE86Zucw08WZtLRBEE9a+BuYWDC+a5JlgH7cGDIlE\n42z9/oOxFxkOZoJB+f2kYk4qIQS7I4Gg5DHJbLhf1JMw+rC01dhVKb6SPrsS\nl7e8NN7ip7hF90JqCaRy+pDSVjMD4lmxOBUDLapqipVRxJ4fOqhbq8nYge1I\nNxpACAU5CS6/j4damsncvDKWy4S2T6mXE8msSkR0YlVwsm/kDDHhJMQzdz95\nhRlI6zcrsI1omUUE6gEjOcSnQ7t9exv2PUTVO2ziGJP5IhAXU0fRVXTRhPd8\n5ISZyM+ClYc3sAAYraA3UkKhKZaa/qF/4lw0wFb/3BVU2BYPd5Wpz/Yy8T6w\n2yTo\r\n=xU38\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"206fcb6cb686d5de97867cb4e4005926e2a94501","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.8ba3e298c.0","@material/theme":"12.0.0-canary.8ba3e298c.0","@material/feature-targeting":"12.0.0-canary.8ba3e298c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.8ba3e298c.0_1619014109804_0.3225239630216137","host":"s3://npm-registry-packages"}},"12.0.0-canary.c629eab71.0":{"name":"@material/shape","version":"12.0.0-canary.c629eab71.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.c629eab71.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b52049ff2f329032a4c29265bf4853509aa444af","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.c629eab71.0.tgz","fileCount":14,"integrity":"sha512-SHT7OcrYW0jH8UbuMmSEhJ6B0QWI3cKDU01ZgVKRRF1m98JGtjwYusNwo1OyHMHBsXPqDQx0Fwzeh7zZ05KYig==","signatures":[{"sig":"MEUCIQD72xlhJcMV67qYFuEbc4T7BekKX5jiGzY9Wsy0Dcj54gIgAsvbujAhNSBHcbLRJhdmx1M9bGs0Sfmz9iVzWgo1xpE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22555,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggIOJCRA9TVsSAnZWagAAuq8P/je3DH7KrICpY6Gmm6o9\nvjy+FD9ayLz/J+XF5WsafzEHu49XfKpA6yZAQQE8AhtWN2yZnweDa4qa8vqz\n33PmRxNpSo/sy9Evg690WLa8CzmsGq6UTAEQBLgZf5iPDv7gaWxU7Xz/NmK5\nv/YGfr5A7ggjOqA0FVYqjcKYjJ1apR91NLUFphGezvz2muc81bJ7Fanwg7xu\nZQgv4sB7pYYXsRPYA/uX91Y32b/s8+Mp0M0RaA9HgQjACLf3BMTxszb+/pWn\nhm6qcL3cW6oCsdW204zkwwiw4cDnZDjII5Oexy37nCMB5wsSn4LLikCFWDoY\nBGVS43ygtl6Bew240HbyfdncV+N3WAmVKuy/80QLm2Yz4vPzGU/XT8g5F+Oi\nFnJYw4omebCcNBxHDMMMqgCDcricOzEy6DnZ7VcVcEEl2Qst+a4pLOm3+PRO\ni3cu1LxgCrjtWcp8Dwi9PgGVi0GCNlhDTl5bhi8rwbqfggNDwT9vAuxi7zWg\nWz4MNoME0/YPrxpQwfpXPyDAhb3NLOtSha6uwvyUKE/265GjkX/VI0jdXwka\nXjIF9u3bwAW/BuZsMWH9Cp9R2f0w6epWLW8K66/XcXM4lHr+DS+LbeiQZysC\nFUzw4xRLGgFYjiYOae4hutGBgtxKG7Urdxzt7naBIAkjmbKGBmrAt/qBssHG\n8X/U\r\n=5Too\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"13ae4a821cd20abff4520de3f38c689af7cd0edc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.c629eab71.0","@material/theme":"12.0.0-canary.c629eab71.0","@material/feature-targeting":"12.0.0-canary.c629eab71.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.c629eab71.0_1619035016844_0.8871514567831247","host":"s3://npm-registry-packages"}},"12.0.0-canary.8ace3b810.0":{"name":"@material/shape","version":"12.0.0-canary.8ace3b810.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.8ace3b810.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"79fc02ef0d08254d9a1f50ff7b1f8a3ce7fcfd81","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.8ace3b810.0.tgz","fileCount":14,"integrity":"sha512-jDfipTdEKcBuVA0ZIuxwTI7Bns//S6yu8d9BvKvMMcO+oO3oF6Uq98LNry1mXcuZyvQZbbznolSCZneMLEvZ/w==","signatures":[{"sig":"MEYCIQD2wxV10Z5odVywApjTydgd5RXvetAovezFQYWC0UonsAIhAMM1tuEZbq2dslJ6sKZVzpTQoehR2l4HGLDO+wEIKHdJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22555,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggI0cCRA9TVsSAnZWagAAjCkP/AiSpskb2U3iNwLLwcgK\nmxmCl88KvMSQpnAMlANTWODE08/Uy1goS7PYNBE/0kfZsg82oh9hEdeuf/k9\nuHuEqT/Tt7RbrXWTucgPOag5J/nsvdrWZb2c7Br3WuMdTqlxf8uPcmsCGkqw\n8bR1yoUuDGANx6YSaRkIzKZAUDaqoqnTIdkbEWVHhdmGgegQRgvd9P4FHYT8\nHIsFAgHxGA7THIV4Os6sSlRKbaFb33lRGk05pMGmktX6yAXrAdqU8pBN2NW0\nD/8y5+39QavB1SjvhaK/XL8SGxRHh6e8L/Q2QRDUkLjDAP0feN6bb4YGIWpG\nnlSdLayjitpwvOM69FH3w2RhqwY7ErY9L81st/cB70WXd0ZNCE71mqLedwAz\nQ7B92rDIh6aTHpE6w4Vvt7Mi0C8YpHsbKxXjtqkncj8rsCUR7uvhHbXsBcl2\nC4Y/OMRELrEkCA4HTuq9ubNgfTW1mGa+OK7J9LTssKsq6UUrsa0MSsM/SurD\nicJzvbfNuDZ7FyHVXIGurrCihhsNeU6O62KhdTpC5ydNaJXNjHbTjcvVGouU\nLjAEnTqTgHk1xITnqaP3/qOkTduRDBjayYCrzkXcRmyjMbeoMCfbuUSueB5K\nKq2fscqGhKqorpGluHFwwT6YP4NCzUUiHpU5V9/6e7Jo9/NrXOFUsJOWbH7m\nDRBU\r\n=Yqkd\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"622173e8e2308a6104e06bf943b6423381a17e5e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.8ace3b810.0","@material/theme":"12.0.0-canary.8ace3b810.0","@material/feature-targeting":"12.0.0-canary.8ace3b810.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.8ace3b810.0_1619037468114_0.4892473343166093","host":"s3://npm-registry-packages"}},"12.0.0-canary.70beaf42d.0":{"name":"@material/shape","version":"12.0.0-canary.70beaf42d.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.70beaf42d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"44ace978ff0418ea06701ad15e6bc00296f9c4c8","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.70beaf42d.0.tgz","fileCount":14,"integrity":"sha512-iGPdCIwA8sui+/s/jg5HEaVqdxHgnXVVxXBXTdxu7WWF0IW1Liz4r9dRUCFxDdmQs5xiAPiQwH8HMWI6bxK/iw==","signatures":[{"sig":"MEYCIQDvSOZq7GsfszRowWXoVoVMGfQ5iI/B6PEuGa/9uvhwrgIhANMYQ5so7czFdy5tvwCFr4S/MYkXeDENXyHpb9Z+bHns","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22555,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggI/VCRA9TVsSAnZWagAAMUMQAJU7b8LASi3TcIAez2au\ngQ4uP9hUqF0mG62k6SZDhABNqgpcx8YY6RDck4Dx4+xLD+zVJwpz1vmI/gZp\nxUenZSm38Y/v6Xt5/vvkKxxnGHQgEE2D4o3Uo499oMprroe2ev137UlPQATC\nM4TN45waMaxagXZpvn4QzRJzKFTKc6u1DLx/Ap4k8yrh59tQJJeBx6unMt7I\nwuHGW1C68qI6BN3qsmD3Tt51c8J09LjU6oWnAtBwaH8I/dLmBEZiATkSPoOs\nrnRCp0jphB64mX57v1J3EhytxZyG4DMLs7JhpvTzNRCzPcfhPoq1euWms+ye\nNMlo7sji7RB62OSSLkls5BVtZl4ZXvkF4axfGR6JX2fM2M7JDHxCIu9OW+Mg\nHcPR9vXbiTjBf7pVWA2XmSQfexYH6mXh1hcpHmz1LDPl3uIDOAbB2RrDA2ku\nI1Y6CnaMvGa1kXmCE2mUXvBLFA7VoOfa6SPw/ZKxLbxrUbjcCc1Be8SKP/I/\nvx3Lv/BTWagsBQHMqH/by2DRCOMl5M+1g2ML5/oKOX41rwqVFIxBSJfwaJsF\nCDC4VZT9BFFP3YFIjS76vRDuvRl/2LsvGKatvONqACbYYcsBUaomUDxYiilN\nCOPFskb0xr3yMHKafd43zSQy98dt8cjA2HZnHBH5DWJVd5+Y8ADHtaUmJTJs\nutpF\r\n=bHqL\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"c5b29092fb8fcd0102b908417d8ed3d61c3448f5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.70beaf42d.0","@material/theme":"12.0.0-canary.70beaf42d.0","@material/feature-targeting":"12.0.0-canary.70beaf42d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.70beaf42d.0_1619038164863_0.7584824178855889","host":"s3://npm-registry-packages"}},"12.0.0-canary.cad489689.0":{"name":"@material/shape","version":"12.0.0-canary.cad489689.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.cad489689.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ccbde8cd21a92de36948746d1262b3ec4a4dcd96","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.cad489689.0.tgz","fileCount":14,"integrity":"sha512-I4JofZDnVoKA0q615bDC81KAz5xzv/GcT2X2ZboUCvDh35i0q0EGd4kGhexeagp7pfEHe6JU+UN2qlTmtoH93g==","signatures":[{"sig":"MEUCIGjbuLP6U9ttXe6y22OdHqgY3haP9dHFrKWiyh3bWGZmAiEA7aqdL0x0BNABRYX0+k0767OHuoqnMGCEDzq65tmcpm8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22555,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggakKCRA9TVsSAnZWagAAuNMQAIdP9HRxhTXoiSTFMFAE\ntaOhGJ81pjgdrZDzT3jAu+hCK0s7qhGmQAxNyIHLSdILS7KUGRvPLmHrB7qs\nt1TboJISy7QWALseI/y0/jYTMRoV2iIHa0fmqmyfATPfuTQemJz5BaDYOUF7\niT6B4bdNieMhH0h3T/GVfNgp3JeMEARwng81pysTDMDqcxEl10meG+nlJ3qN\n/mGEQyMpEPj978348dW6cgLElaSDcbbDW1e5Jta31I+VXp8kbnBWcPZ7Rtx/\nLUL++5RoezSvskpmg+rfHvDVsUTrWm82I6faJusBalS3+AKyYz5PBYTHEXDF\nKOYrI8NTvo/kk7NW9Kf8WOu6NqGrVvDpeqiCiZMni7is1qqa1UNEXnHcMT3w\ngaJDZIpd37PnV00AQW+OgD7s22PbBfZwAmyLjA7rSSd8hoDC/sABwkTF+Ke5\nT2PaI5xFBrCskQ2Qn6V9HeMEebhSzQmCAuFdGMdUD25nyW3CQgxY4HOWuTDw\nB0BbsROcjSB6GQvYe91ZmiFQN/N5qSNddLxCnpf2FhFSqJnVooRcE68XUTYa\n5aS7W5WDi8gboUmhUmRjNFuFZ+MipGtuYi4bMEBhCeVyJmAyQIHpwmHIiD07\nHnGmIIDIR10UmC6SU1xbeabyXRJvo+KGol4kgv/xZZ+ywy7O3Ba2kDQ+0pQz\nm2S8\r\n=1COn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"3e5c20e059b33965b63d0073bed7e300c57d5781","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.cad489689.0","@material/theme":"12.0.0-canary.cad489689.0","@material/feature-targeting":"12.0.0-canary.cad489689.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.cad489689.0_1619110153919_0.5393477738372436","host":"s3://npm-registry-packages"}},"12.0.0-canary.d928692b5.0":{"name":"@material/shape","version":"12.0.0-canary.d928692b5.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.d928692b5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"15251611b6c8df5a6b975529bf3f743afca75854","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.d928692b5.0.tgz","fileCount":14,"integrity":"sha512-JPTesF8vSiVU/u/GTsRTFG4G3kGkzaVcnLJpwOxdLO0Ftf7OyISmkuiaNVApJZlJuw2cgH6UsS9D1Wy0ZhVFkQ==","signatures":[{"sig":"MEUCIQDzb16O354ZxIpwH46gGx04FhCPF3D/37MlIMUXgHC45AIgdjrsiI7n79UoxzOeJIZLtWzz0J4+FEJpwd04W4aA6Ho=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22555,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggwUfCRA9TVsSAnZWagAAY6wP+gNM/lcaxTp6QeSDVego\nJft9NkLRTc9N6YWcXE3XLWUr1VymXpAOohKKRni/l7Pwfj+6gONA5y5gBjS1\n+TzPvuAs+c+OSb9UIFlc6CeulMGPddYfVpgY/VzyYbpUO0XQyebPCBihO0o6\n6kk+kbPgkktp88Yhpbhf7n/B7bbkhAdT/xyaSep8c8/NhbRZYAp/y3HBn50I\nDPfzZuZr/iG3KzWKPVctqab/wspA3NVOroe8tqUn2QfoNEmdluTeBTfnQcIG\nO1cbwTxKxQKOUOS7VoxJ9B1/xoYj9Km3TgytFhLAzXE+RKeeuTcHAjsDO8/h\nV8wZ53QxTZC5V330dQzUFMpVYTzxNSjs8YwljgghZ+Obu1pH9cV8AwuPMGxm\nTWFf8if+yyV0hq70r7V0+HFBnbfob3JYt7iwBuXKz3zUlrsevq3XSFY8m4Ex\n3y7I/55cZg3YtRdosEeDeTeF5ZWPMpaCde5O/aP0kboRlFW39omKq4FzQawz\ngNdeCPTq0RmnwzXaLhtBazE1dSAkkwxH0z4uqjlP9XJ9VrHewvt7BYGl5oP0\ni5txhfLm1Y/sYcHdiaB2aAl47+WAqsM3dCzUuqwMD91Kya5VbcIBNbRzFbWJ\nyQ0hDduQ3iZFjNR+9Zmbb1tFoWPSty+TOwR83mgLH/ndfHGb+CH3eS01pUxr\naCRv\r\n=QYP4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"ced6a0237d36ed84c4d277fc25a11d9453108e12","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.d928692b5.0","@material/theme":"12.0.0-canary.d928692b5.0","@material/feature-targeting":"12.0.0-canary.d928692b5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.d928692b5.0_1619199262947_0.651410410602687","host":"s3://npm-registry-packages"}},"12.0.0-canary.8f68de8f3.0":{"name":"@material/shape","version":"12.0.0-canary.8f68de8f3.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.8f68de8f3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9ac6ea1b2bc91ed910543c9d7ea8ac42455488c8","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.8f68de8f3.0.tgz","fileCount":14,"integrity":"sha512-N8xz2+X1bGQHUPR+3JSL/8BVoJOw4ZIEtHEKpJzRWkfqjGYmJx9ziXeN35RdJm3lLf8gKEloDL9WuyqsCHug9w==","signatures":[{"sig":"MEUCIDg5hh//VMNJAZKD95H0mbZ7DhgFrJZJ6Uk2o6l/LPoNAiEAmYNvosiRndhpDYIh2I9FPfVXVJ/RO5VumIb3gtE0LPw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22555,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggw40CRA9TVsSAnZWagAAHJIP/0HD7MLnUH8ApYnUFfKF\ny+fPrv2Yszo3dtpSy6Fj9ZoaseGvLajMAPKQa5A6laRJaDIbQvk1YuNEtdtt\nnr0L8gWZuIY+mvBW5YSdDZsRF+U4bwuUe5DLeIs9xVLbAl2pEInxR2N8On+t\nfdxGwOXd4rRJCulrQAZ2mtCHGxe+T5PbvJf4HuM8OZSUqgW6qlXSykiE70bh\nOLqgmGMFsrfbkwvCrr2mWieCkHOwTjwT030sVpBquUmny+aT3zuxoa8IdX7B\ncYvlBQJOJUXl0ROTnLeMzR+/r69GfuwfjA40svBg/Mpmq36z1u5eG5+jmTDt\npwWQxiLYhR3iVhy682er/FSNNG0+t62XS/D17LYfnh9JT4BKR7u8GdMGe7Qd\nlJSo9bNyyUTaq3bU0sOtYyqI8dUudjnsokHS6DOE5eZaCPBM6YBJHv8pTZ9h\npz4zi0Zd9fK9MVei87mU+QY3XVDFcPZ+7uQjnKejlpyxMFujJ5LKPpP18vSl\nF8ISVQjGLyC2CPQcOxZ2DPP+yaudj2Qwzij/o0ygkEt5GbimO0RNmZzdaFKO\n5fowUCgSCJBhOwWK2Aje8RebGD1h9MbOBOXYgbS4Fo16443c4KJyBrS2UT/M\nMitEMtPHyroro6hLsZlDV9wtUv6ZuQzBq9ehxyertP9w4eH2CMyHHFJV8Sol\nXCh0\r\n=1YZM\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"5bf06e910f57a544c428d7559d72d5fc2a5f30e9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.8f68de8f3.0","@material/theme":"12.0.0-canary.8f68de8f3.0","@material/feature-targeting":"12.0.0-canary.8f68de8f3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.8f68de8f3.0_1619201587756_0.72965696570704","host":"s3://npm-registry-packages"}},"12.0.0-canary.05753cf77.0":{"name":"@material/shape","version":"12.0.0-canary.05753cf77.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.05753cf77.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2d459da460b459c2574fee9e969458f5beefc746","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.05753cf77.0.tgz","fileCount":14,"integrity":"sha512-LK+bTIGbNtLpnt4XowlClnTnOHA2/NYYuMckS/dstqlyh0xYZ97VnWaGN9rHZxQyRGLZCZRfTKMpx6Zt1H1LDw==","signatures":[{"sig":"MEUCIQCqznNnb66ftSNaW/ik989jYBUZ5quEV8pL5gSDK4qjKwIgJgRlgqfA6EgpszjUtjANZRUGfgSl8k4QBQnye4ArBUw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22555,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgg1uKCRA9TVsSAnZWagAAXF8QAJ9/0Frx2r3sQRmUfsSt\nxXCMwTwlNp6ji/Sy5eMgtmBPfmy+zbI0E4xe5Nvl9DB//QjUkokIxtPbWCt9\nP1cplJgtvukPBqvN5hAK/9G2LJMaVxER/V2O/BMBRbm3RbL/AVOOkxLIPin+\ni+8Zf2iz0RfOOx51gpencLe2co40MdQIKQOZuMzyYfBg7jq6TQPbWZsMNgoL\nIxTKsi4nM9cBqjcZcq4menh8lsEw2KuH+DPFQrikA/WD6nWAsTRDLYrHyLh8\nbHj4TXX+leC6cjYLz4mUqUOrAbBQvod5s0mjy9DPc6OQ9xPOAbJ6r5HQqBP2\nTnfku9Tsxl55YSM3IjT3BW6Wf4VLijwMgiGcpXalSVt2C+r6tjZEHBzXCl29\nCzSyye7ZceF7jPQvifw+x/PBASSNdHiTiEbJQolhDSHsbQ3NZgGvMWXz7fkZ\nil6LPBiavChDeN8GVPM8OyqY7PN4Ulr/peVGp69VJ1EKEMS5QM91U9xK09Yd\n8VIb5FmUZAt6DPyQ8oUoSCnqVqsMH/ubCd2boWlU9rxdqKD/ADY3NnbraAa5\nm3vnSyHfY7dlGrRqGy4P5d0z87WSr3g8dBPfmQx7Sf22P4MrshhI4og9Y9Ex\n3Ekly6mcxuYiDUd4w7kewDOXCFIKPzRWbCmjVpi+od/Ez77Y4IqjDINhR3pM\nqkLG\r\n=p4i3\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"3557c74d7c4f9400f0a8d2c88bc2610c1d600199","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.05753cf77.0","@material/theme":"12.0.0-canary.05753cf77.0","@material/feature-targeting":"12.0.0-canary.05753cf77.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.05753cf77.0_1619221386137_0.2044871436913278","host":"s3://npm-registry-packages"}},"12.0.0-canary.ef43e6d96.0":{"name":"@material/shape","version":"12.0.0-canary.ef43e6d96.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.ef43e6d96.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ecd29622a22ed91d053ff470b54ca59839a63203","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.ef43e6d96.0.tgz","fileCount":14,"integrity":"sha512-ve80f1rXBIahd4Vg9YTLNhu9+ipWXw7WLMP1cCbHGjxvTHxHulPSan09lGskelwMtxsBo5ziodWCdu/ZKML8RA==","signatures":[{"sig":"MEUCIGPAUH8mmpfLMue0l2ygwIvqrj2wO1Md/BXg8Fcs92eMAiEAmZ/iPwZh/LGD6qQQwTp2Q/+hxoN5XSmeZ4/A/0Ke4Cs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22555,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgg10HCRA9TVsSAnZWagAAIW8P/0ZG3PO5NRCR1IGS8EFU\n7u0xXg6UV9UuNzA3mwiLWOdTB7kog7j7LDUQwT2RgXXI2RFAzR9yq1TEaQPU\nR99te2nv8FJ6LeFSokQzoonpVi+JWx3YD/kxV75CpHgSlqLXb4KsAZfhI2DU\nv7bpcIDh1SRZO5OSfjSkNw4G20c14NjozncdKogVAanY9dsbFrOLkg+8hy0I\nr+U+xUt3UKGFTVisGgPUD3eas9kHQFGa1RNNEr4YIhz6CFokB/j8lPdCE3YH\nD5+0jfUh3rgrbc/x1YBkSaTSQU4nsSFw3JddrblM5pew3lA9HC3TqJLWsaIB\nc4BzQ7qoZ7MLm4mt3qjctm7RqjK3AfNLaXcAJSccWPU3MXLeAST7VYJ7Rpuv\nPAIE2zJ+rtDp2XaMaqw9L7HQq7JW57NFX5U94w0XvoLOViCc4QZkGd4J8yAP\nveE65OrflIZn9Y0dzeEPQSGkhX35CT08BNtL7c67xw18GrMsBgKiozNLiZwd\nfWT6J0N+k2nIhmSfE5l7HnVsTv6TbsrJThKXgDO/yVmcv9Do3wtMrGIbNNI+\n2nVBBoVXqrZWQZbbWIYANFrMGQzzhkaUJfdrii0EjoGXZhc3fB9K8Z5LsduH\nzE+CKkUs8JkiZ98DcfzlHf+X5igYak9zcmGuCvlonbDt9r2VUzoMucmqgUvj\n/KBR\r\n=uoQM\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"bf61e37f943b49cb1c3287501ad6fc31f8c88687","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.ef43e6d96.0","@material/theme":"12.0.0-canary.ef43e6d96.0","@material/feature-targeting":"12.0.0-canary.ef43e6d96.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.ef43e6d96.0_1619221765317_0.9217581755949023","host":"s3://npm-registry-packages"}},"12.0.0-canary.197f64fa2.0":{"name":"@material/shape","version":"12.0.0-canary.197f64fa2.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.197f64fa2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"76b01b497e478ec8f115681abef8dd6acc3f8891","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.197f64fa2.0.tgz","fileCount":14,"integrity":"sha512-oeA8A1EhSf6XjSidDpd05wvCO16LpL1nl7Ba00OnSR4tgRza/bNMQ5snOCDOHbOlGKojXI78KqUKX5hTjojnQA==","signatures":[{"sig":"MEQCIERzxo/XPibLalhIIEpgfm3I7jn61fqTXa84PUXJ9/7sAiBIPUqfyJpWpCtl+6oAJ/ljDuKh4n8rHw67XP26Zxc1Ig==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22555,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJghvPcCRA9TVsSAnZWagAAOlkP/R+AP046esbzImlYq11y\nevzv/DQDTJlNn0oOyh6L0/dQAgcCT5vzL98+bxyp8z9PYyqmWDrDvHXoc6ex\n+JUR9S7mlTlpQhDOr8Ea9OCRUu5v/CAlaPH/Cb5NVfobDOCyR4A5xlALNVxK\ngDeLwjQEyc06YYdKSRm56VAVogo5gayOSm0nGnnstRuVC3+rf3JA8Rtn+Td0\nqiTPQVfg3JzltcJVYy5Pc+PdRmAnbmEeeTrhzoDppGUcOWEsDUpq4/ZFzDzP\n0JQKwX1YcN+8pehGlmTFWsRlE1w3+VZzXrcD9Ptud4e5S/VQPH9e4KSDuhcR\naQAj5uGLY35/IfzFAA7z82zL/EfT4xr4oaj/bDabYs1DpPL7NgkVYEKmyuYl\naVx00xXJplPh/li3wYnfBeRr2wNyD4d5Sf7Tnl1TYoqL9KAIPsuPGpuqca3i\nvxeEHIv8bBzMmtIPsn98TzQ9fJe73RYftEaIo7E4D4FeqoL79ZD50NnmzpoZ\n6HAKtnuM1S0O7zXXIP/VyorXULsFU2eWB2aP2wXGNpicSEseaDcnUhr5t37w\nmlJIQwT9dE5XhQNYdagVF5R13sjT0mD8mMa8Juw4zR1VwaxBRc/KMQUB2F8Q\nwn/bwjIc+ayhgKQCg6YYF4k6bJyMjdNNrO1vRiXWQfUaTNdwS5VO4cSrH5jw\n1FjO\r\n=pWmK\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"8ddcd6186c353b0d99439cebca29eb95eebc705d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.197f64fa2.0","@material/theme":"12.0.0-canary.197f64fa2.0","@material/feature-targeting":"12.0.0-canary.197f64fa2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.197f64fa2.0_1619456988303_0.471067141458007","host":"s3://npm-registry-packages"}},"12.0.0-canary.55ad2d7d8.0":{"name":"@material/shape","version":"12.0.0-canary.55ad2d7d8.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.55ad2d7d8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ba383ad34dc8c66c014db4907f548fe8192738aa","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.55ad2d7d8.0.tgz","fileCount":14,"integrity":"sha512-OHW0ygzbI1R7813SKgboExaxV3dgX0Nen3GTXDsRn0Ls7GrXuZfY12ZFZWi/Iwy23HqZ8m/G+A+aqOeQBMFong==","signatures":[{"sig":"MEQCIFCmo9g0AhIQEt2w+h3AkYPY6A1wKBeVpg9TryQxiBulAiAn5QZuSoQcKQBpN103ZnI53PNjfG4xAvvfGb0DTjA2sw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22555,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgh2a2CRA9TVsSAnZWagAAHboP/iC/R1+A0MNs84z7f1oa\nmc516m06IcT8tKPge+naFH4KfL9DgYjKF/bZKur53kutj2FlQPHGc+6gi01b\nYnVaQINrHtMvXh4ZBAs4mv+2IBjwdLq38OfxVqId0+1M3/TnPsRb5fW9P36n\nkUIF20mLJ6apMdw/BZt9aJV7YY4hEf79XKEgKhOneZeBIaRKwuRmGwZaQ8vt\n1r2DxUdRJ52hTquitM92Jkl7qFCaw15DmGGab6lTm27yISNXhG0+ldKsq4Us\npnC24ycVYpofFI/5YflZnEmTKOvvBKf/rJ/JbYfZ2zujrUftNbknpsiHNOE5\nrPcEBvw8ndXP1oFjMsj/6F4Urzmzjm7uDUj0hmdVtTvXoBHlGrZw4xZYg70Q\n1c8eswlGifW4r6lYRIxvhUfKUz2vZ3hTHVGzl6oOaey/Xj26fpLQKJ3J2Ljr\ndyl67G2d2cYoH+l9RG3Ya8s/ftjFzcyBkG0TJxQC8kALJYA91sgRB7AFEUVu\nvvxCC4MfLexnz2TtZTX0mo5cZ7XnDiFM4h4M5S0p+GE1b1n1aY65aWAHf3Un\njyZZgJEFfy8nQoRHDJF8+eCvAyQFOtRYZ6E732m1eirzGz+EFZMeZsr/aIIP\nHOJ+1XwU1ZoDnSfTZHFkw2KeS+h52zDMzrxSaMIGi8ousdf6HKlYCPFwczfE\nekOE\r\n=TS/K\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"ed8a5f8b1756d56e3973815a51d6fc7e51c366ab","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.55ad2d7d8.0","@material/theme":"12.0.0-canary.55ad2d7d8.0","@material/feature-targeting":"12.0.0-canary.55ad2d7d8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.55ad2d7d8.0_1619486390311_0.1344264607375787","host":"s3://npm-registry-packages"}},"12.0.0-canary.ec4ac5234.0":{"name":"@material/shape","version":"12.0.0-canary.ec4ac5234.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.ec4ac5234.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"64bf7cd322bff85f3da2969202eb67ce8a33a08a","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.ec4ac5234.0.tgz","fileCount":14,"integrity":"sha512-0mTyyfc3XIW/9j0Q+wiXBYnVGBx+2c7ycw/yvHts2ZBzd4isfq5lz7Lt+htVJgCLvTnId/SU4rmqYde/Vujekg==","signatures":[{"sig":"MEQCIHVnRdudDLiyliwNI35sKkaNBkp9hkfzdH1oGMOxJIleAiBs1ezSYYnyDTu5sCn5/yQQId3z1QVWRFOC6bcH4CkUnQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22555,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgh8QrCRA9TVsSAnZWagAAAmIP+gLrfO8I8fcGSQrp2rQR\n5wxCNja3i3x/PCOJewdras/YFukM+sqE0VlbbzZTinaxup6vWRojA1UGYUin\naiAx4VnJJ04B8vwL6o6WKb7dlHUE3KxU6GDoAaxj1iQoEUZn2hYnlY7xZ25f\nL6ukMSDmS/MAv0HJpedM5vcLbUAWddso59OEaYSYT19L+JKooYCkRhmJjC3r\n374pnrd09mzTe5p8BbbdBPl5KD6/+cnxYqz9Wjjvv8gR0mIc8V08wrXXDQtE\nrWlJk99AtNPFIX/o6OEkZdVCGm8cRP8TXLOSgEg5fXUglm/CPNcj2J/i++3i\nUpJeArZGez5P6xjegx59E4z67DxxmXi7ZQr7wj9CElN+oEQhUPBtMyvHK+nq\naG/ZVNgHRib+wmz+1QT2pwo4VmqJ+vYeYS6Jocj8VypKMCs/nAGQRw57IRs/\nCrc1SQ7INfydZd4ja7yIw7NjfuUNrPbw0qPqAp3TtyTBOje927fBI6RX7+Js\nhFp4ank5RNymSyD6bZdogUBy+nbceFo2EohGkMfO4enHDucKRSXanFRHT+5k\nSpujo5o/67KXODKz2V+CuVSdNZTe4IldJ1yNhB5q2i3aQMEHhTwwxt9kTfyg\neF3FZf/x6kAaprf1Q0YhkSYTOw0q2eRNPmPlpzz9+zAzvZkl4h+XskmpsCJf\nStUZ\r\n=9P+h\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"b189e0be8deb45b4e94790f21c377c3884f551b7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.ec4ac5234.0","@material/theme":"12.0.0-canary.ec4ac5234.0","@material/feature-targeting":"12.0.0-canary.ec4ac5234.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.ec4ac5234.0_1619510315104_0.16634979096538505","host":"s3://npm-registry-packages"}},"12.0.0-canary.b0579acdb.0":{"name":"@material/shape","version":"12.0.0-canary.b0579acdb.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.b0579acdb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6ea98504ada8cb819deb2db16d5a0228a2412c52","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.b0579acdb.0.tgz","fileCount":14,"integrity":"sha512-zvKYPg6JzG5Yn6G7rVu8KemxSgradjQlNLgFj3+hXPwZN6NJL98PeyO3QfdhigGVFGrpmO688ktBp2jH+wKGIw==","signatures":[{"sig":"MEQCIEKVg8UuYYbk7IT7MZJG5ea6P8JNrbHxnsiMoA+g0N72AiBEWaGhbQTHlpTDMN1SaMT1fh8rHM7uDAWkkT0hbmh9qw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22555,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgh80ECRA9TVsSAnZWagAAVB8P/iMV957+AF5VmRlSFCyy\nnu8UMhGLaz4oTmAU3bZCKGfJzNqJUTssZyKPOV+aQggWEZKsxM9mMUArW/Tb\nWr25J4Xir8mL2QRT3XulzlMCO7YmDyXsGZn5dyD2ajOLE+ijLA6Je2Rn9TxO\njgrLLF010G4nkRRzWmqxsr5ne8RSYSw+qRPJPwtXnMdmZ4MVzG/iKg8ddIDX\nWcdbwoRqE7CY0CUi+MM8EdoJ9DiGK0Wgpy24qEC51+1t7AISkogeA5EgmD4l\non/wLjldoSVcC0+Szy7rRWY6mnNh/jiuFoLetQrTqgsnwckEYKDrkwPzBrps\nF9Ibo9Brxzm5ntBO5ZXkJ2pgg7bezI4NBGguQ9OMsiOGcRO8GI+RQvzeY8AC\nabvPBY9ozY9yU8qyt6qaE6UGpPrSzfFFztNK+ux1vyh1PgCoPrCM2WO8Pfsj\n+bSCRvUIC9Sw4h0OnePK9X0CyipcROTBZ+l8UP83rRQlRaOBT2yRMKLnxyC8\ndRnE7/kK29YlQlpAlGcdb86fOr0OCuwJAXYYh22wsNRXvLjIXn8h7j1tXBC3\n6/zQI6+jcUez37kZ6uB1uMFsgRRAuIn0qMn9tWvmi8E4+mXz0HQVlG7UoGEL\nGdR2ijyXlRyhuaZP4GI0ul3cbzkzJ0wBoFOTh7It0Q0yKBGhIKMidmu6wZ6L\neKSr\r\n=6a1G\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"d1f704610766e7d0c46b8a40beb1848121809a41","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.b0579acdb.0","@material/theme":"12.0.0-canary.b0579acdb.0","@material/feature-targeting":"12.0.0-canary.b0579acdb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.b0579acdb.0_1619512580395_0.24002272644707134","host":"s3://npm-registry-packages"}},"12.0.0-canary.81e2d4ff3.0":{"name":"@material/shape","version":"12.0.0-canary.81e2d4ff3.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.81e2d4ff3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"85487b170fb450dd49bb34018f05ee5afe10f2df","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.81e2d4ff3.0.tgz","fileCount":14,"integrity":"sha512-IKEAE8JEVQ8XLEiELVb2ci+yrqZrcfLTXmh1mjc1Rt3OtnhqL3dRgwYLtwSXMzsrbkSWzrdaW9vvLNGqKsb5og==","signatures":[{"sig":"MEUCIATAxLM5fxZx/bcSEWFPe77x7lOyny0lWXilTJCStWZdAiEAlnwCesP5v2c+en8eP+3WlaS/fNd4MPnzicR4MEY0fiw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22555,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiHrGCRA9TVsSAnZWagAAPSIP+QC3sMs8WJPpw63hZlWc\nyccbyQpwSTUeiXj5LW9073zQk0FwC6fLXjViSqLl/QxiBDHYEQPGNEv4Jasc\nejCYVGfDk255Q62t8HUQB7LWYd7qC4lUFz/daxPgnyjA4dFqQrc/yIelB/oE\nX/5CnJ783YHhv9d6qPmsGOrzhPxls/97DokQkuZvHY1L23mqs4mvykQ6uUmX\nh7ZymVHLzAksRaCDYU9V3+ynYImQmJvk/H5me7l+PzkRF6qw/HXo/iPwvDOm\n+xqLHRrsljrHaa1R3QNaz83zzXqThWgduXFzPsNYlT7J6wQvzMxuVY4a1Vgw\nnRqpmppB1p44qUoRChn7heyu4M07rmtcVfvEe6NFSWVRXpPUD24B0ytXwB6d\nWAZcwwZi99Qiw2W0sz6AbV2YsLg4X0WbxmaeAH/WtP3sn6juwIovBs9Ohbr4\nj/1TAek+zsiJo+r2F0eE1F8X/reiT09AloOL9qGHBljIUrjhGeXznhkClvS3\nohuG0CCVALcSLx+QjIBwzk0GmtXbEoe0jaLcaAy4IaAaWdkCLv8C4vkeBRTY\nF2p0nrmTA3jYHkgClZ8GcuznJ2Eobc3DND1Od9YdlTkMRlct27gc7mkvdDEr\ncNNJJFwlgK8jGiRM98IYEyoNlm25NEXZbiMUGfGe6U1IsjStpJGtjMNlslx7\nmi6y\r\n=evPR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"f55512ab74610e3f3cd0db70822ad9b52b9cfefa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.81e2d4ff3.0","@material/theme":"12.0.0-canary.81e2d4ff3.0","@material/feature-targeting":"12.0.0-canary.81e2d4ff3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.81e2d4ff3.0_1619557062142_0.4760814103688338","host":"s3://npm-registry-packages"}},"12.0.0-canary.c8edee52c.0":{"name":"@material/shape","version":"12.0.0-canary.c8edee52c.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.c8edee52c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3b93368d7cb3ff37e5a51d5b2d159ab1fc290141","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.c8edee52c.0.tgz","fileCount":14,"integrity":"sha512-fyUXPaPaWzIGUXjo8yy16Kty9EJzQ9qLn3y7hNiJmBPS926m5xABNCWMxNQpI0pPwfHg2+/PS0GqfQXirpHh5A==","signatures":[{"sig":"MEUCIQCVoNWk2tEvOLN1sPA6XIkhjpvyugicw73ALUDJzjjuWAIgMQ540awJxbdGj2kT/VatSl+pXuAadY+8V0NYqQ2dPS0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22555,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiIYfCRA9TVsSAnZWagAA4iMQAJLM3KShgKxYAuE5D2PJ\nARbsFBqq468qn6/uGLF5i61oiWwE3UWbs7+k2ZZQZtRm+C1WhwewO6asalUR\nf5U92Pu7QJaI+pd+YkoXcB8wdH7jPmnV6rO3cxVElAOMHZZZoijgOqlkW1vh\nwxaeoP9lOdSBvINTY3EeKSZ5mqmMMCNZdfVlJftntcKEl4JBDJC57Vy5sX7i\n0EfTdbhgazAbZZ8e2aKmti0pqy3ZmGXcBiLqfo9bhy1Qq9hObEgmwEp/HVzU\nkc+KA+8dhARfIH6fWqJMajawkG3V8whxiVkTyU25YTjmzlGNgxAGKE/A+87H\njm8SNbCVc578Itzx1xVvM16JbnKscQceYZtYez6Ee9uHBKmxlCQQJNz8HtfV\nfDqgpp75je260C1wGcdl5psoaVsPDK1wsDQr2FQWd4bho2EdbwrPg+J0n1kS\nIqrqlDujyej88qgQsxlbEPGjNsmzg9Jd50vx794siAT6tr7omVJuecJCNmhR\nDk8YRcN4Z+j9LKp2az81nqDkfWv2wU9AB4R74/PEIc5yxOE0Pj+3WVGkp0w+\nTcBfoJyBlcHFnCXy3q7TyD4ukxjTdA3dNlXJp+QCEGRG6rwcHHm6VAHv57Rf\nl4XHPU5OaJmjSPTkNXx2+7P0+rH65hkE1DvRu08oKuejmmccbmByWaLeFzGr\nRjbc\r\n=IUWo\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"e8c7902721c81225e1c8b750094cbe6ac4666a0a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.c8edee52c.0","@material/theme":"12.0.0-canary.c8edee52c.0","@material/feature-targeting":"12.0.0-canary.c8edee52c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.c8edee52c.0_1619559967121_0.21052329647506252","host":"s3://npm-registry-packages"}},"12.0.0-canary.f5b6110d6.0":{"name":"@material/shape","version":"12.0.0-canary.f5b6110d6.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.f5b6110d6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6ed83c510c44d73990b2b995949ceda9ee6ca312","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.f5b6110d6.0.tgz","fileCount":14,"integrity":"sha512-fPuf0GiNZmpUi9wa+00NxA6aXPCGDOsk96bjh7P8D8Ik0RMpzv+VuIil3i2xadNORB+xHkpXXoqQMSzPF5nZIw==","signatures":[{"sig":"MEUCIQDq2LmWAnQEBrrboEX1VSyO8OBo+y0Kf9swjxeEwS8GSQIgVpoR1LZBv93zaF5lvPNV7UgQjsx149hBfHUbMpI4xkQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22555,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiIsXCRA9TVsSAnZWagAAiWAP/1GM9D1/j8fy+tVUHFMj\n8xfx5yLswsRtPjDCArtKoLEo4oVq8r+1PEZr/8UdV6x/MNzcSqxTPrjDDhCw\nOwVoiXCCHkr72VnNQ1VyDAIYZFkDqtPsCX2ThmlWUscWM1jOY6lwGl7pVtGu\npBlcNB6VvkO1eRXVZfEHDX2YANKmLcBUU5yprNGgO+1ZJ70GhwSpJJb1GC+t\nVlarcccpeWN58dUmol32m4VsKeMh4dwntj71dxbc7h1QqSqbaT5kPOXYLth5\nOst/hoTOhlsru7KiRmEkOTPwyChu2AMLZtBbfHZt+j+XrsQBq9E90+QlR6Yn\nEhfIUUBHPjViXcWdkK0XvfWYxVlbRKIaHKTY96AeJe93iAp7QlQ93VE07KpC\nLaH0h1AV2IzBXNhcjxcVpWwDqmD2Wv4CEHoJ4tW/OvHemkQB2qQHStm34Jnt\nNNwmMfrj6txCYzZ91H+Nx3zerQDkVioBUMs82JHvL7w23HxkMKdlbZx+wQ3D\nhW1Q7kOPPwONuO2PhqPpU0dytFX77Q16CeDF1zjEJ6Z9fP953gp61knDyhHg\nq2/bgQWub2QT5qZuS8XoSd36+5rXjlrTqczAWw9CENRoVNaa/OmiJU1gXPz+\nmAL6KGTP1SGnOkNVkGC8n1iRWWeL6QZq2VlEwqdwbegtzxuHNamX51Vw4DII\nkM1W\r\n=W6bW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"c7be6486c9ad6826105a70187add5afee2a6b50a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.f5b6110d6.0","@material/theme":"12.0.0-canary.f5b6110d6.0","@material/feature-targeting":"12.0.0-canary.f5b6110d6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.f5b6110d6.0_1619561238898_0.6048115603550981","host":"s3://npm-registry-packages"}},"12.0.0-canary.cee9b9e22.0":{"name":"@material/shape","version":"12.0.0-canary.cee9b9e22.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.cee9b9e22.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"118025ce714889923f12988c15e97e14ef7a5512","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.cee9b9e22.0.tgz","fileCount":14,"integrity":"sha512-fiK0wsai2OQZBDfktaEbcENlMc5fu9GX0e5V6pEJX+1hSLbgz5mChSdR20B2PBoAJEINT0cpfUKYqWdF2ao9mA==","signatures":[{"sig":"MEUCIAtTM5K8kNvBV1rU/BzXazFalyfIaNMODMlB2w8mFMucAiEAwj1Y1ypSibn2MMIIt4KsDBi0Mo2nQJsgdTNcVYylynQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22555,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiKh0CRA9TVsSAnZWagAAe7MP/0T4WGd9iWB5aC042Xbm\ncTDiYfnjlzBSCn6amWWovV8BMHZXSLO7/tEQjKq9zxjL0Cu+H+t5lKAyhZxr\n2yPEoXawzvevsek6beH5bWX7o7d9gjexGqxhsLI7Llmo7gpo/cP2GuSMaboU\nE13mBpPM70Li3Mu2ZHG95QaRZuVMbF10fk0N48k1wPfN6PtDxOFlFGMEsQKH\n/uuqgZTDZRhrDfya6ffOwY41rHfNJ/YvmxfeIHosm/j/YtSlHEX4R6vzP2WI\nEzWenwDcqTnP+4eEO+OqfIUbJXVgjTzGschobZmBfz5E3LM27pmstJTe+BZN\ni+grg201aS1Ix04AtX0xT70cefI2Hu/MvlV6guRjb8FnZbT5RparMidXw/hi\n2Ik/ACHrBEHIAkdPINCvX1N014cvnaIkUTayg+X8r2zs8VIoN5OursuYGKDf\nB06Dz8RyLfY830Hp5fwvQcE0CSQJpiFMSsselh6AEFOYykDJenwk2uGLQkXX\n0do77IX4C3FEpZW1eppJYrRt5RgBruXVT/JEImEGI0nMovn3Y6n0d9BI2XrW\n82GUqGAw0vOhVu7VCJ9t5oAEIH5DWgF+c00hIkszu20iFDCL4BjrWe+Hkp3m\nwp3QrahrE/RkDwdFizv9DEqCelpD98dbhNGQGeg1KvFgGyF8PBRrcvaqdG5B\nziVv\r\n=TPjK\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"b0c779970f0809be4565910c1abadeed4dab0377","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.cee9b9e22.0","@material/theme":"12.0.0-canary.cee9b9e22.0","@material/feature-targeting":"12.0.0-canary.cee9b9e22.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.cee9b9e22.0_1619568755716_0.8575193432966961","host":"s3://npm-registry-packages"}},"12.0.0-canary.96e83fca7.0":{"name":"@material/shape","version":"12.0.0-canary.96e83fca7.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.96e83fca7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b5b4b9ecc50e8d0496cc705d077caf90e70b187c","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.96e83fca7.0.tgz","fileCount":14,"integrity":"sha512-eztf8iA02FQCZiYyjgLL7uvYJWH2mMLW/ygPr1PQccOWLGwRS+rrBc28/CEstO0faw6QcL7z+ZaoxL0lPq5uRA==","signatures":[{"sig":"MEUCIQCqw4PKv+K/3ZRLqPAxW1ICqN2ymRUkL/PSTeuAuHYKnwIgH1iJM3naaGb8raLUs5UeBn3mkqwhxDAm2shYI0bGaIQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22555,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiMzZCRA9TVsSAnZWagAA7V8P/3leZonIi/r37VckI0yt\ncBnvflwY5X/pNvwIwdGuNitRnOGBY6XMRob3cqQsZGx0v4+gUW7VRoMxqmNh\nxsIw8VF9VR8W4pK4/k6OP8chHcpUJ9PaTBbu0rGgOHWtkO9EQfPGU6Zjcgdh\nDIhSaQzgSjeDLkMORwZzccRjz7uvK61bSJerA2JotwSvZG+C4G+vuBkvQwMz\naCx1NRalCYjhaJRQNs5MGhm4P2fQJ8skfA2tbCKXr3t4pIsTnoBqVhoa7s1H\nPjKfeEDocD6MiwsWAgDa6vnXFOL2PHMQqTB49QlwCCwEFOubp1Y1T50e4K8z\ntE2oDKQf6awJzmDbU6CAL/iz1/8EjBgYVHH35f8FMjoSJcS+z12XfhUuTGQE\nCV962ithdRhnu/LjOs1CAowBrKUm/NIoqIGMcx1JeJo2+d2F+E7sIBEiY/9H\n5paiwPDHYP1cD099rVUOFLkVxCTeUaCIRqynT9bZTI51LWfqn0O28PhBvw0t\nNi34qm6F3yfmlAtXIjMWKIscUnYwpT/iM9+bvfOXDuTwAnVbYpVbuDlC1/mL\ny9SURU3WIUmYbzdqhXpMgoKaGhSfnhYcIJ505do/tghHxz4zqiEDK4N8J7pP\ncHrtW3St+Y6LdTLsSYtjUx+HQ/LknbteXZZfXoPpYHiXWWRL4x+1id0y6n6/\n5HwK\r\n=aB+s\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"377f0025088676d544c1393884e5f27e96143f16","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.96e83fca7.0","@material/theme":"12.0.0-canary.96e83fca7.0","@material/feature-targeting":"12.0.0-canary.96e83fca7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.96e83fca7.0_1619578073440_0.8285015153312507","host":"s3://npm-registry-packages"}},"12.0.0-canary.4c497bd19.0":{"name":"@material/shape","version":"12.0.0-canary.4c497bd19.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.4c497bd19.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8d809ca389b75740030895b740b048fae23a5c97","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.4c497bd19.0.tgz","fileCount":14,"integrity":"sha512-jHC+H4gU5TyDDGFYoYYUGcDZ0XSRlySK6x81S9bgZUbfo5z/+r+mVkJGGO/NwAssWDL96bB4U5uhlQOPSFfwMA==","signatures":[{"sig":"MEUCIFI4FYT1G+JIP+U62nnarvyjHN2W+QP8Q3LEuy/JeWJmAiEA/AEIwyWpmHn/jQFWCYUGQvX2F7Uu9dm7pFUg6TnIUf4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22555,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiaEfCRA9TVsSAnZWagAAqg4P/jraZUC8N1cFUhyjJ+kK\n7Ary5RpbmA30Nckx/bJNPu6emFDYUbgb5gF9N1L0JhU5zzSZ7MR4zWuEJu0e\nHDj14Tkw7wjujEM/8RC2Q3U7y+zOrNljIGge94oNTTZpnCmjv34Je0+zDyFB\nvSNusI0d63hi3Nu8LyS23KMUL9ExEnE881rcI0Mnv7FhSNEiqOWKEHzTJUfV\nSMO70Ps3uKv6HMitxASxKZJQnZPJM9ggAiiJ0HP71oxmv20iIiVFZQtAaDmJ\ntbA64kW8Vyp60C2LtTwXb1EbUhSfmypy10PL7kYYL/YuMXvdRbtZ5dmQQFgw\n2DKYwbS/69RG5Iu19ja/159o2wBDqJbv8sHxV2nGp9Qq/81WxgV/XHApyngO\nJ0kMKbwP96qEOYsvUfzIOvvESQCAd79rZ5eGZwpJkvKQUr3bDyjeN5hZFTGD\ngDQ1wVwU/KeC5OTZ3zu75c7YGbaTN06c/aMsJcMZ+t8JKI1S24p3+zPzkbZG\nwVrXRS9uyUd0GBM1OFUe+Yq7R7j/lIyaig8rlo63sSstRFr/UNgyeOcXnXIQ\n8uNO8CTa5YNHd6zdVyDjBm7i5HInJnu2dV/Ry7k7wL/bTk4EPAiAyoyXdwO/\n8R01T5p/goM5Y9YG77fl8uzaUokL/ZBJn3JQOC/6RAfAikyDrkt0aLNAY+e0\nw/wb\r\n=hG+j\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"beb4a14c8f43815a21024c26a96e3c53851a9b41","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.4c497bd19.0","@material/theme":"12.0.0-canary.4c497bd19.0","@material/feature-targeting":"12.0.0-canary.4c497bd19.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.4c497bd19.0_1619632415544_0.4596038074054505","host":"s3://npm-registry-packages"}},"12.0.0-canary.105b15b96.0":{"name":"@material/shape","version":"12.0.0-canary.105b15b96.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.105b15b96.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fc84e7f499fabf829ba3673768727ebe0401a533","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.105b15b96.0.tgz","fileCount":14,"integrity":"sha512-G0sCp8H0BYDWEhFGcSlZNR34yA64yrAJYMpbgSxyaWlhFtub8+6v5omult7FujHcb5svSaNjwIw9HghBG9pZjA==","signatures":[{"sig":"MEUCIQC48KvFwzyEU/3K1YmScYVAzo8oawz1LaupIhChxih5nAIgUhX8xOmM24KSJnZst5AYro1aRaN1KJ7WGgHC6ZcqhjY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22555,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiddNCRA9TVsSAnZWagAABTEP/REHZqQ8KXgK2eMKHCVC\nq4C86llUeQ2gF2OoP+tAuG16ngZCLc0Bb7FBZElPh8tt6z6Gp+1ZIz6UxtwQ\nlJdNGtx/7MhhufAuBFoJQYMp56TxygVVUvDKIFLldy/XMUp2AaZWOPdURico\n53qCxve3Y8XzKXKbUpTNRpSHXNsVyhWmfYTQrBaqMDOdLETI5bjJzTFiXRHX\nIE+a3K2zF8LGf8TnN+WxGA/pLkMOhOuxG2XmqRcCVBJvXBQQkI64z8CeC5IT\nMy45EkQdmSF5IQ3PjtyP/gGdteqVQyau4ne6GUNE2eA1G1ungXBnTMOs8fpV\n9P9SjllvFlblVerPy/gu3t41NEf6agfinLg94xcZXtawPr1xkFfFIwbin9X1\n6f7EZLnGksUi/Sm0HlHmK2aCftX3mmbSDTeX/g3dNz5k4zeh9/UsNB8kL82G\nwhlMec2mN/VnTIlrEmAvFKe+d9AEv6OCV69lsZscl+isVN+AVECGASu/T3Wo\niWMweHBP5Alg5Tdn6JMqnaqEEoobJvrvjfu32CPxVKCl0eiOrzVMdTLkhoPg\naql+UWnBuI51I19kOTD/BW6GSTEcro9DniJJ1HYu8Sus671IXjPFylBaK0qk\nWLFW4En0TXonME6CTJZJF/8y5jaNBPQV7QEdOeWbsqPMStAtrUsi8hgfcikZ\nu1gc\r\n=jWp3\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"762e9351a26c1968c772104d6d64f7874c81528b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.105b15b96.0","@material/theme":"12.0.0-canary.105b15b96.0","@material/feature-targeting":"12.0.0-canary.105b15b96.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.105b15b96.0_1619646285503_0.4444953484365872","host":"s3://npm-registry-packages"}},"12.0.0-canary.6e20259e3.0":{"name":"@material/shape","version":"12.0.0-canary.6e20259e3.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.6e20259e3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8ed6bbc101bc3e0bf45942a2f23c697bdd812def","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.6e20259e3.0.tgz","fileCount":14,"integrity":"sha512-2cIvznZYIUh8epbpLdhzxqOXwklW1DU6TAukrrmXQrPu6/mNQiTom2O9twkJjJ0tjkZIpAHk77CHqXtLpjPWMA==","signatures":[{"sig":"MEUCIQDaQc7/r0eQg42oru1m/mFc9IKS3RcsuYJvKIIU8wOrzgIgV0Qj9GFlPRFWQjaUVfAejN3oSQtrS4Vqo/77OCXMHvc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22555,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgidhbCRA9TVsSAnZWagAAOIUP/R8mdP6isqgUjoFi9oYK\n0Avbz6Ngb/hSIEi49Xnors3xo3sHLljMBMSvcDKNdjiLVIF5+4crpn6/5Hdz\nQauFQjMUyVusnyUOjXs9MGBC7RxAlVJnpubVbcWXoihfAxV5Dpq7akJ1UFJH\nmjag0hmhb94pOohNW4nAcdDgXkYseiqpMqaiUf+j1V6PzSqQvxDYCiVGg5sx\n5cHcYxsmVf3TC4IVOK72q2X4jPVyDTyBk/8pgkMwQ66ZgB6LuCsJnbuLatRr\nMP+CdKnZI5KXsIx6G/nDR4UjHHguCwu1c9S+1S0u6FKEXyI4pr+EIfbkeokN\nU1r9u0iejJj2AlrznkZvEzAumc/gHhkqB8nv2jY+NpBqZ5yxcO2Pg/Lvo4dN\nJeJM82lyfUzblms3ErwhjqKTL14zYCLqZ0AdaT854fOJ4xjvv9ctadzzyTBw\n7XHa7Ul34d61xWkcZ9T7PvSTblC9tRFWnjSKfcwMtXMvhJ7G10+Ta0Dy+zq0\n6xlHAnTY8S07xfZK0GdSx9DiYbE6ijXH+IKZrSBryTA3Fp6nT+MWdspri+SN\nSVgqSCOtsP9gIClAFspxzaibmIz5eLyIMI5WBuA6mCxgeKPwiTzSONdW2fYk\n0nvdDA1mE76Hepcc6UPgldP10/3wXQflqm9+9YM7RQxPvikCoqDwn+47sFOE\nXYYO\r\n=7vqn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"8e07864b42f463f977fbd0f9264b8930da72711f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.6e20259e3.0","@material/theme":"12.0.0-canary.6e20259e3.0","@material/feature-targeting":"12.0.0-canary.6e20259e3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.6e20259e3.0_1619646554659_0.9367063339119508","host":"s3://npm-registry-packages"}},"12.0.0-canary.0f79a5d74.0":{"name":"@material/shape","version":"12.0.0-canary.0f79a5d74.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.0f79a5d74.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"27c253207bab19256e9593fff6848c7d375a5172","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.0f79a5d74.0.tgz","fileCount":14,"integrity":"sha512-65fveV36jKShXiTxBgSuKE8EXzhCdL6ioVILvlecJhKidedtPYk8/4rRn10+EYzjae8ONtoUiK2ys11gSuKX1w==","signatures":[{"sig":"MEUCIQCn7xVFisrn9uCRSm6+z7Kk+FQ1s6LzJ0MPvAuqW3qW4wIgbzlxPE2QvLvjQrSfIcDhfeTLrrzksXNH+Xze2ss8MH4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22555,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgieT3CRA9TVsSAnZWagAA6j4P/jWMU5lPhNUeo+OGFBbU\nxgjzU/RtLngKSEJXiYNCgQxnE78hxNLZLD29kAFQ/j+b30rCNAML9VUIMW4O\n/vW/DFFWdNSYo/88eSgiGbWdsT+04rMkR159zNYlZsiPb+VfvxjMQWoQyAVz\nf4F4imKqkjqR5PeeSECCkJQckEmWG4IPmVSsX5+Mb8OUfCKAlUYQ4DJETICL\n6BSfbZRAC0a0mntay1suAjbmHkmTyv8ZUh0KwNDivYRzM82VHhXRDSw7XVbL\n0rGV0w6c4NBglq4uKRsuDAS5YWypeijNK4mWu/ZIPnebMTSPmcbNTVXchvLh\neaRRfjeQkcu9m5/2C/DcS7VuKiQnQiIxlhLXZjKrrt0mfu5YaePARSnlQhZ4\nA32ls9VKZdUFhsyIfkc4dJl2+r8eZ4KBFYpdf58dqcJoYET4Dk0kuDeBJjUo\nkP+x7iDRiqFDqeagaDMDsl8P4KMqtiP/SeKKPmOheQjXJuiGiy6NA5V3xb18\nISFAh5tVcbVkUs1xBX++NWD8XEf5u/t1aylaLMPMwclP6qAxU/MnQtzcao9k\nSW0hxOUbU045pNEVg55ORTUesZX1pUogkIoV9dXwH9DmDltte9IAigrRF5Wo\ns7SDNfHepXJogZkQUqsN22qvQImVFmxgK25htrYNr7Tw7Lm2ZIm97jXIsZOF\nCDsE\r\n=c8tb\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"2fcb990c07fcc62dc025eb258f87a8f04f08fee5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.0f79a5d74.0","@material/theme":"12.0.0-canary.0f79a5d74.0","@material/feature-targeting":"12.0.0-canary.0f79a5d74.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.0f79a5d74.0_1619649783023_0.9973354903575202","host":"s3://npm-registry-packages"}},"12.0.0-canary.84f3db9ed.0":{"name":"@material/shape","version":"12.0.0-canary.84f3db9ed.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.84f3db9ed.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9b6542d8c087dfa7a23c00cb7e9df5574706b5bf","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.84f3db9ed.0.tgz","fileCount":14,"integrity":"sha512-lB2094lyNg18tQngjkgs3LDB0w61vbHpfp7+2cwDf8oLGrRmqrAewWdbLIFQY/3cY5AgsVH14Gs5iyczwCmt4g==","signatures":[{"sig":"MEYCIQDmqs/42Ctz8ZLyQ9pYKdukWaWekHYNs2d3Q5WUt2dV1QIhAPv6V8+7n3pzWuPDI9DrglPuyCY9EapwJ7SqdJJf511E","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22555,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgisARCRA9TVsSAnZWagAAC1IQAIGuVcL5nQq4rHWzDoFB\nfIWo6WhoYw3mHaOp+HH4pMCK+1oNtteGBUCmQGhkl5WRaF5YoXyE/d2wvKap\nnLPJsjDVAVs66UjVzi1D43ngLAniWHjkOtcJhkjvH19uI/uty/8RlgiHRsLg\nVuIJWtTeQLgMs7WjgONrqtSimQjW9QXzq0rfGTYueEMVnmWYvSYDeESHbaa7\nqYChc6zVc2p4geUNC7Yh5+OsifJ5KB4IgY4MPjkBg0JVYpxFGBxkM891NJJy\nDdOgimDZJOchD+33BP3a5mUFgS8Ufa6ipamk6cFvnHElZJkpALiADLM7P8zM\ny3QAZov78w8ubXYJyraGqzwHFSwAT2TVyJkEiWdvbHwdmRXreoK4A88dFBrA\nAyVS5DGD+AqqJr0BLT7IWyWlLLg3rj4YJ/GZXuJ9Yy4htYQy60ePI89zALBH\nglN6RHgsseJ4+WBEoPZEeN2vkt0GJuZ12QAajZTyGgjMg6tq6yxW//yNu5Rv\n2vYTcOBRK+CmWuJ9B8p5pQ39XekVzS91sGzPQ3KPaGSo9gxTI0xShMMYlwMx\nYa4GcWW1Q9N5r7dEnVRhXEsrwe6o93Shr1eMmREeNcHCLCCkDrJm4MM+2GeW\nGLLRt+ZFTnBdR5Xyji/6YIjwt7jZO5D+PbKneWvqRCKqsMYnyAIBnO9KGGCF\nmrn1\r\n=jwVs\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"7c4b7e41edc7737412479194451432cfd33839b4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.84f3db9ed.0","@material/theme":"12.0.0-canary.84f3db9ed.0","@material/feature-targeting":"12.0.0-canary.84f3db9ed.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.84f3db9ed.0_1619705872645_0.08658909131728554","host":"s3://npm-registry-packages"}},"12.0.0-canary.8fc29273c.0":{"name":"@material/shape","version":"12.0.0-canary.8fc29273c.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.8fc29273c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d937f40dcf924e91c196883d325c733e1a1afb70","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.8fc29273c.0.tgz","fileCount":14,"integrity":"sha512-DLrgDQ0T4/SEg4e3fNCzkxZRhrQ13rk1W9OROHNUs0tYb9qE69pVdiI3YmcRRRxffbrBbYbHBLmefin1zkHczQ==","signatures":[{"sig":"MEUCIFAsC+wgInhhHQYeW4bXSAGd7A/Nvufyk16SmIdNs7wEAiEAumuUA3BVLrZWPNbXu+P1gQu3VhANs+Jhtwdz4hW9Eto=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22555,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiyPdCRA9TVsSAnZWagAAnHAP/2k3wZwmLZR9ig/hKoUE\njxUOONZYmeB3uLMSzfuXC8F8IpzRW2SDKEf0gAHFa+nybtJaZr0QRlOxhVtZ\n6J5lTbr6eBBRNZzfai9avqFVhX7WsCjxTsRvQ48dSrDVHHP5cck/qzJIr8vp\nonZ64DYLnX7kqVFR0Mau1a6e1q7dr69GsIdOxCobhepTiogTc1m1+TDmfujL\nBtkvez5PRhL8GCnGPcj92+U1EdpmYWqQ89n9ilf1ttn9bfU1G5IlxC5/UTwl\nPiMp1xDJlJahGShklI/yyNSLQNI4B1BAeqrNe5o+wi0v1tt3sUSQpFSQwoln\nfXZG1KB/5aZ0YG3nUrTmIExpRTs8rFRJWy/2Ln7pNtRycwjr0CxEVAlOag/w\n7qG/oj3wOpFzKIWaDJzOcTd/mcWLglriJuEqWZMAU6mGxlazpB20L/8x55Ks\nsDzcFdJOH75/fPQfarc1uk/AHWS9N/VBpNZhMgH6YfsmnsnJ8oAm7r0y1S57\n+NR52/qUZW/4SqVwZ+Swf5WoyjvIKi2nry8KwUq59rTK2SJ/1LyBObc/6KGC\nJd+NQiQeJJHWL1wFAb28bnmf8ycGaRSGk1/K3scS9/BSwDrVmMXRaTy7ToNd\nqbxYwP2XLhOlfDfcP4FfifiQ+VY7pGGGRSJ6lpynsO5LAyf1dTvzKFUAYK8N\nfarv\r\n=Yo6G\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"fd877c3e50788fb95663fb8213bcd66f347cdd0e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.8fc29273c.0","@material/theme":"12.0.0-canary.8fc29273c.0","@material/feature-targeting":"12.0.0-canary.8fc29273c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.8fc29273c.0_1619731420706_0.8941811311285859","host":"s3://npm-registry-packages"}},"12.0.0-canary.c50d20bab.0":{"name":"@material/shape","version":"12.0.0-canary.c50d20bab.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.c50d20bab.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0f21e1cdffed6b64d3c2e43dce692cdb71eba2b1","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.c50d20bab.0.tgz","fileCount":14,"integrity":"sha512-LPDMGtqUibXb09rFPy8ddZ1N/eo9SkwS3GEVpBcPeOKw2U11cz61WMNPTZuLr8c7mtujo7lHT6tvD0SzGFP0oQ==","signatures":[{"sig":"MEQCIGCXuw1+cIbUsqZZPS+uJ/2yoc7aqF38/+A9+6sA50vDAiANLRWaraxrnQ/vDEj2FPqJyapDWCnFcfhDXDy8o+4KTw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22555,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgizrUCRA9TVsSAnZWagAAPQoP/iIBOmnymosDZ0muRN1H\niiIzLiUbKf058hA0kSzG+2QRkLGOeIcYZfVijzweO/W1gsaB2SUDFbKqJmW3\nccewEDCen6NS+oyVKx+5o8EfaREgkwT3VByZr/gG/mgbEQMpwfdeF28bvXBC\nrrJC5J4K8DB/9S0qMqiNaeDLXr7tA1EnMoCfFRASW+Tzrq2tFcxW1sv2iu7O\n00VvYS9pC0S3bv0QpiuW5cMl6hDNWxRguJjPOqJoN8pxJRU2vlOctN9O9UXr\nJYUgbdYvR19NKOkwb+KTPdw3bwDcn3bVB6+5dfIIEA1zRIryEAhN6GkWtXpI\nKynBYvLoDXoK9D3z52r8TAt/VINEvpyBRIG6cPugOuxHs1QEzKcDwYMbgX0o\n7g1XGBTkED0Epnbo8Sq4vtpteex+8HdvyMVwx227FdPSLxLX+LcDYWWOKOuP\nCNFQcEScbS9CwgN0mRslGG+bOtaZDgNs4mQ1CvQW8jUDzbEbiEpNP8YI+QT/\n0cY9j8oD0Nb3w4ZD7xxRXaKCBBwzYQtM7t4Gv/nSpmvmasVgsgz60T07HJZi\nmLQIjXmFGViSDfcc0vAFenpbJUYKylvsDke22g1M0S4dTi/1MJs8hjryoWGT\nlRPXAFtj7Eyo66WmYzewfxgcY3UyCv8KoW6H9lubkkHFT+TMxX5fkW9e4Q5l\n7bFr\r\n=c1mU\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"2aee1fe5eaed5267b0e67f1610c29dd399d323c1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.c50d20bab.0","@material/theme":"12.0.0-canary.c50d20bab.0","@material/feature-targeting":"12.0.0-canary.c50d20bab.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.c50d20bab.0_1619737300446_0.27527973843325837","host":"s3://npm-registry-packages"}},"12.0.0-canary.474836ad0.0":{"name":"@material/shape","version":"12.0.0-canary.474836ad0.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.474836ad0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"833a0833b53cc4362d9b6c258ebd0c5bcfafa8f0","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.474836ad0.0.tgz","fileCount":14,"integrity":"sha512-HvXA9pnpR2oGqg9e/D/Xg2WwafSyfW3FNnDx6umI1XMaGf0I0iMgW+27z4zQjnWVv/wynNMl9xIZYP5oael0zw==","signatures":[{"sig":"MEQCIEBhEEZG4BD15f2c8jeBgtICysuHzak0algB5Tc8Y5CsAiAVcZt5+0IV3uzUxXghJMPcCFDDZ+T8f4USjC6uVvxW2Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22555,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgjM0ICRA9TVsSAnZWagAAPCIP/i86PAPTv5ftp8uo3e22\nJRfi63nv7ZwGpoQuu0ZWswljoeMj941dky0yEEzdBMBtOu/GRoqfvt1DvpWq\ny3hwK8NWfMHfas0cZxbKoTis0y/SHww274gtcC33foi/leur3sqxJ21N9tO8\nZ4IFBC1j0CZfudBaIyx2YYzDBT1YJAsS1cKjSFX+MalurJj54TizH4pt7D6Y\nvN8dNaSFJKhB/RHF2MUaOMQUJTvJVOM8/LLEcj5qTlSDRkL5/ENV0qy8oRgB\nmhdZINkk3SVOisuMqPKYdpkotlA5Waf/lUXjFbJK276xOdG6HG0IESPFi4hq\nZsFnsbV8NMePEx4xaDCYpjy13/bfrc+lA97G14BDNNGSH/fJx45PbSEvLrEY\npHSWfyV30W6hAbzTmNx5/Ux4bxCitHCQPlcrPliYKd/gGxv20C7YDsW03bgb\n97umNodZRcRkW9gSNbVyGLNNVqM+7dbHKz5XEhKiKa0kiR5kwPWQWjCRKeJL\n3p2VEuGijiOuPgG1ZJhD6KIcRRCuz9vny7yDmoyUmDRnIQkPZz7u0Nnqd/hB\nr+G8lF3YBCrt7ZneFWxBS+tDU+aV8tZCzt3vgLq2acGhRaUhaGB6PKO8AaRG\nEmRJ7UFSm5ed+aZENiOd31ttTjLTsdPh2p2Df/HiGTm8dGeBr4WjNCYTGkkX\ntHdX\r\n=n9PR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"c9a6db3013566afb165bda88b05607f2ee398718","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.474836ad0.0","@material/theme":"12.0.0-canary.474836ad0.0","@material/feature-targeting":"12.0.0-canary.474836ad0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.474836ad0.0_1619840263691_0.09257879930867818","host":"s3://npm-registry-packages"}},"12.0.0-canary.f5ad92287.0":{"name":"@material/shape","version":"12.0.0-canary.f5ad92287.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.f5ad92287.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"222db7c5645e21b111d220e782bc9caedd8a5758","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.f5ad92287.0.tgz","fileCount":14,"integrity":"sha512-R/N8lPpQ7g/Raj3BNZegKE9NKIcTIZVDC2bbjk4a5dQ/i1tu/n72LUcRNZU8NPikWtsH6SJvZvmxFaNxb9be7Q==","signatures":[{"sig":"MEUCIBxnkAbgQg3EKazFgzBNuoFdiXh9BUGeoNZ0y5ThetaRAiEAtvjNJgy8v/oiMUQdUNNz6mb3JqOlirDtnadbcOguY90=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22555,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkD9aCRA9TVsSAnZWagAAsr0P/j4cA6w3lZtBlsSWQsef\nEJziWQj/L0eXvVudHqY+adujKahd5scPcaGvUP+EwvzkAOb9Aucg1OlL44i+\n1uX+Ith9plxiwhFVj3hyvj5JsMtPFA2sZJxSidXfZeb2GgZBvIliAKBLK1AB\n93F8hNgQZg1yn8WaOkEchawIY8l1gSj0imcZU+QFcdLHbBr+5rrxrigthqmW\n6JWoB8M357ggxUh8yfk853vbfXRFoNWtCmuEHtSf/twBlVnOO6bRq4Ra6lHP\n52AW2JVwC78VQoAvNrtSBh6j4M3kWe+lMHxbYfWMN9bgFPOeLqpLqyZ+ZPB7\nKUTlbX47ssW/Nmi1JQu8oEjyTmh/Uik1DWK1RkRc050IB1EwzTrSfaxQH5AM\nxhLDwzCOrLvRzNXxsMbXSZDMU8QyuHt4kfia1nMrhOiF6/ooxD831ABR/q+v\nAMU/q1wpkBhMTc1L8cP3hmWPQBXjBKJ2S5/J+MepneQkpc4iJqvUMRAw7K3F\nVd/iqEUnvJEtY9BTst0Ryjk+3dmS+s2bIIuo29Gxyf+0P1pU6wHZpk6IadaB\nW9VhoUI4pxvcSwmrzMZ2sAUVhDvE7E0r0fIKLkfVaYAjv8iPiTux+PZoN9QY\n8CTex0LQTIaR5JPxTejYlkardhh8D2iisrvdEJkqzypw/gv0WrxxqyjSBaMA\nWYTO\r\n=dB8O\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"493c206bef4cedd10981093c61731e1c1547227e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.f5ad92287.0","@material/theme":"12.0.0-canary.f5ad92287.0","@material/feature-targeting":"12.0.0-canary.f5ad92287.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.f5ad92287.0_1620066138176_0.07423818658884418","host":"s3://npm-registry-packages"}},"12.0.0-canary.af453daf8.0":{"name":"@material/shape","version":"12.0.0-canary.af453daf8.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.af453daf8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8d39adf8a1846a09c24a2edfe3c0fd84f4ef6c6b","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.af453daf8.0.tgz","fileCount":14,"integrity":"sha512-iwnu7B5G0Uk4JiRzKBNh34MshMp+6z2x6hTX+WVh2dQNldKiaO/ObVHgLwDN9seaHCHx1GgqfT+TCaZp9lNQhQ==","signatures":[{"sig":"MEYCIQCBwDl0tUAFrITuja4+PKo+UREyzEo4hgA7mHjYlwAihAIhAMzdAkRROzCGfGdcv1hrFqT+/41I4fR7b0kMROofS2Hh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22555,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkEaoCRA9TVsSAnZWagAA40oP/19fCRl6f5hOMM6uisax\n4c22+FqtpCA7EVTZVHC/aiwZCt0Ig5yleCcgAPm624iaRZFgwAy6xHDcgLA/\ngowiRd7Cmsrct1CtW0MXIOFZpc8v6ncNv2BKS8f9iEDjxSZmKhz8RAPsh1uX\n2vuLj3+WusPeESTEw0IoRzxih5n7ysxZBehnzPDIr9j8KX9ginUWQX2bVbYP\nc6gA/NcKKYcOEMDDDDZ56PhKonNX/cftjFqfJfjdEZpInEvnQ8cZA9tCtYG+\nJNjqtzy9gA7Bn2cGabBk9uBAQSz204bl+jDJ3FFqyxHjiefPit7DNjFr5ONT\naGzyywIYXm0vMe+8lMB0mii7+37kntF0WanGVkNf4ocuN6sZjA9VepbyWMzi\nYhMScjgjLPCVXy6TplOvi26wagFIBkK3EM5yXC0+vABOA/LNsCLJCiUVfxE4\nQBs5ocyu9I0676kjmOzZbDE+/6pDWs4Zj3rNV9xE6f2Tti1zDtDlLjrPQ1sU\n6jWqGKN4PxfwY+qZxpdeHa3PzOsHO0sXWCbTIzO982dMrIcZ2m2SfrA6BbJf\nB8TZkJkVqBvSz5F4mZhValXwdTf+0zvSUW4TmnKoCpq18koQM12pZChIXqI0\nPGPnchZ7AoVg1bbaHJLpwHA8cFgz/5VV9LEqWvdy9IqSc4GBGT4gqfLNb+sD\na4sW\r\n=X3++\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"d55347cda19a4d9469eff68955185d9d5e235a16","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.af453daf8.0","@material/theme":"12.0.0-canary.af453daf8.0","@material/feature-targeting":"12.0.0-canary.af453daf8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.af453daf8.0_1620068008542_0.70305351271379","host":"s3://npm-registry-packages"}},"12.0.0-canary.1f1918c24.0":{"name":"@material/shape","version":"12.0.0-canary.1f1918c24.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.1f1918c24.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2c359b87cdf96c3b5be32024991856cd61ad89ec","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.1f1918c24.0.tgz","fileCount":14,"integrity":"sha512-pCJbiliD9MngDTbDqzFdpqToWwqZ8bLA8Sle7ryYdce+HJKpOHPubygF2FRq3Chk33i1Egj0m/vT1mdhgQB/og==","signatures":[{"sig":"MEUCIQDXGw41Og8duxtscMidNYRRD5zs1yMjigPecejSFzIdSAIgNPboWx/3OHGGDYdcgYcW2t7gAdpwzpK0MDPssF2YlGY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22555,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkE17CRA9TVsSAnZWagAAbGwP/0r+GlqUz4Pp+x8hgZUo\nAZ1x6zBBAg5qmgfU+Wq9Pm89Wt2Xo3rICOXyasUdSLfbIK5KPXatQstXeFnr\nWOP9kvq5DNp8yRlWWlphNJpIzgQzN99yMHRq0HoARsqT1VcC7q/csIcisiqQ\nm3Dr3IpcRWKiRQEQOzI8Wx8k2BMsVlszg1eEhtgujZrwgeRg5Bbld4ljjXWV\n4OGdIA9usmX9aKLDo57exrmPwBMShp1+wXWJ5w15FeOdDH6z/LghDs+niUQn\nPkxvM8ie3iaynvNzm7W/ynM8quEwo4mkwgAhrNGTCdAZGXWFFbSbqFpx07cR\nV0Tq5BqkhBI2RaxuDyuan6cptKDCy0rtVLRZW+rf3unlJqoSn8O3ZPcKr+dl\nozhjmZmWJmdn6GpTNgFhjq0QSZpZUyHxhlskQCLV2vejxxKP1rPksrOgDnf4\npEXG43Qnv3fG4h34w1wWcEBGdnMQ+VGIKyH1Xwbv4oCYyvC2gmJLXQMY17qr\nhAutizsKEDcoHK3Ns4CEIfJQUMTRKKnI0f9jx16787tLXZXdv6Nw/E8l73+N\namKcz4Xyp+tsoB2vvJWnUmBke1aedjICFbQqHg/f7c5UjJh5uV5fPjUVNU7T\nloK6/Z74hmOvyretQg/LmyuinXK1W8oevX/joosScyl8VkrvhjbFHeHvE+gI\ns5dp\r\n=A3ae\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"cda2e786bcb73ac46385a1c6459a8ab7bd9ef6a9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.1f1918c24.0","@material/theme":"12.0.0-canary.1f1918c24.0","@material/feature-targeting":"12.0.0-canary.1f1918c24.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.1f1918c24.0_1620069755216_0.647657447878798","host":"s3://npm-registry-packages"}},"12.0.0-canary.33148231f.0":{"name":"@material/shape","version":"12.0.0-canary.33148231f.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.33148231f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"61828e349b0fff966cf8d7734679dfed786e01e0","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.33148231f.0.tgz","fileCount":14,"integrity":"sha512-0xdf2rzqNgQosbhDy2Bui5ilMvhi1MXeTxv3e9Wj/P6lzPw3TdS7mrM7Q3c3SwzHfZUlkoeixQp35t3vfDflXA==","signatures":[{"sig":"MEUCIGIrOs/s9gZLRhOhWHmiUfjoiaR2HloRBulmdbItudl8AiEA32lJftyTslRoqa2doqRLRdpwhnMyX4Ufa9gCYyri4P0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22555,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkFFJCRA9TVsSAnZWagAAbVMP/0o+HJxn0gtaIznACqBI\nJ+wl8aYpalZqBmlm4GcG96cPctK44PjWgthDDeE1mfktFTz0uojv8WSFiuKn\nWKY9hPfwR+L8Q4M4pHG2kDB4tfnfCFe7m0bF1EjSXxz/xhjNn86Jhe5Y26K3\nUJL6S20qw5VJAJZQHX0P0VUvG6cdfPs9kSambFQSAegn+cJHmHHbW686Tu0H\nqQDkjtrbD1fyYYMtq6kvRlBiGwu0p7lbsJzaHQD2ksuwRGyguZ0iHn7I5Khc\nLju+0//C5J0Jm1JgGT9pCDIeAuxhsUOoFsLERG976fA4vvz4fE+y0EK7c0ne\nMvAJvd5Puou/IW4eQHO3ZpdPdPdBVS7KG04miSaLlVSD1h1E/xh5XMy7lTx1\n94DXfJ27hAVONpXHF0Qn1JTai2yYfkMcFl8/P4tSfxCnovLnrDPHBFNOJJIc\n+azPhDD7Lzvb5tJHtoU0FyLHTeZ3Qf6Hzra/KYoZxCqhZnh7BWJv7YDZ/uhP\noauvNQqIK0L2MnV8gqs7lboeTqfY+aRbCH1KvYDPqgKrSEdJrHJJzgXsVmI+\no1ohp/k90mx4Ol+nFNS90NeM5fKMg3rHUDLXfUuFH9+zizoaY/K4BpXzSg6h\nALMDKz5m6J0lWeeLlTLxJRmMEvu3AseWBYyOKpMIwCyXd4sjcqTeMPqB1PR/\nG9dk\r\n=V89H\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"bb5a14b15a74fcef265050ad96f737d0acf36987","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.33148231f.0","@material/theme":"12.0.0-canary.33148231f.0","@material/feature-targeting":"12.0.0-canary.33148231f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.33148231f.0_1620070729492_0.6091218579430091","host":"s3://npm-registry-packages"}},"12.0.0-canary.06b76fa74.0":{"name":"@material/shape","version":"12.0.0-canary.06b76fa74.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.06b76fa74.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bb90d11a3292a8d8dce20becf0a94d2aaf672a03","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.06b76fa74.0.tgz","fileCount":14,"integrity":"sha512-AJVBkCrX0zu5P+U70ozLKfX92NbuyWDf+Hsc4HhXDw0RmmH0tE/HiZrA65LcHE13Rm1mV8BeeTr8eEX+7ZlHUg==","signatures":[{"sig":"MEUCIE1GLLEj51YSn5MceY1h+EoinfUmZ//YxxZVR9ZDMQWVAiEA8A89Nor6fgYcnr3zLWTcyptDMEiD2EQor525EaeK9wg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22555,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkFLrCRA9TVsSAnZWagAAGXAP/0RXG52WqQDwWZx5xUax\nXOWUmaSBLNU/Kn3yFElzmAB4N8vy+vRQ8x/o6lY6leFZr9862pSh6onouM1I\n9AiNVqIS87esJmmFdWOm0JyOFHEvIgyo9sBDA68ddLThBEL1QNtCh5cTvdoX\n0qFTzzL3B/tDe5/Oft0GDAHRTS1dzPU6EEu17f2LTC/X6i7LVQELhYZh9OZm\n/Ktv4nEpsGgs2XXXtCvRqyeigjDiCEVDtvrKHi2ahFfMnUC5lM1phv+qIzCs\nDfwRZy5BrH8XCVTCxgYG/P/DVybo9eQ3k7tSjd7dJh7U9DXWiATuS3QD9mXd\nMaLaWa5c3eVWk2IC8pPFcCnCEA5J+hjZ1wtkxraqcKdm8inTgOSgZ5vMHqYr\nBsTPMOm0MVWibc1anLRecMjoHjv0XN6VFWGaT5vlokwuZT5vXE8cEe2E1Cic\nIAwbwf4T1ch+6R/ny0tHtS9Kx0PvzUVDoMNywLyC+1K3IGAN9JvJoZrrZRse\nt/6Nk+BHYppMAZDmXTwvAGzul6/6oOq4+obZ5kDLJ5DdCBY6IPtHDVXJIdxg\nChJAsr96OzFV9511ARRk0nxrfbjM1zBGBg9VekG0NIUnBeRqThKUBJr8/SiZ\n2GwPFcjuPbDy0+JX106c07ToJ191KIjCy8tvbANFuV5aVhiF4j4ffTR3X0Jf\nveq5\r\n=wrmG\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"6a6a73c9687e196677329640dc1ed025d13b44a4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.06b76fa74.0","@material/theme":"12.0.0-canary.06b76fa74.0","@material/feature-targeting":"12.0.0-canary.06b76fa74.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.06b76fa74.0_1620071147532_0.2634009055879112","host":"s3://npm-registry-packages"}},"12.0.0-canary.7c5000473.0":{"name":"@material/shape","version":"12.0.0-canary.7c5000473.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.7c5000473.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ab8d1ce14f3e9dbcae8246f6120811bcbab99383","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.7c5000473.0.tgz","fileCount":14,"integrity":"sha512-f2jgLrrgHVnkNruvPVDC9c/6rieYsGMoDffT+stP08NVYfnX/yusojgrSIizbLKptFlxiK3eVkNHM5fbbry0gg==","signatures":[{"sig":"MEQCIGEyYnnOaJ8uN/FuHUGQ+qvCqoSvyc62fTHAZcy2AIEHAiBhMhSaBekjviUQ5exGpOmcu2snaostTD8LPaSv/u0+Ug==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22555,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkHwaCRA9TVsSAnZWagAAk9UP/iu0MviUu86FTmx7QWQB\nvrQPh9gyfQSLJAJESy1QuRLBnM0ngribplYmmMdMFI4Iob3VjUn7FbNpI2HW\n1rGUKnJBGYF/MHPZKiI4exK6pwRMou5+cZtH/D58UmOrbSrkmwfyrRkUI5Xh\nWGiZOUM8TS8AAokloLfPGC+M4CwoLi5zYZUbsHLkSsbP0qhKq+QevWA/f4Ua\n+mzQv38NJnhojFfglYPkQglr57phEdiUhgLF58OuYrzebY0Yi3FFrUCtFvrI\nesCrXPpgdLRUc4LJZQ3X0/ZF4MoIp4QG7ZNt5X0TuiKBLh5mtV+xqz9geOXK\nzNknuK3RuT8i5A+1rCOoC4Nvr2indEtqvIst3Vr1FvKBdKOOXc7T1rnn2fLn\nuE2yyHR2uwP4CsqHi4XRQDDt0vg8t10VlYZeQEmoNBxdIJk6GQWZC2RizXNT\neHC4AXyT5JV7bDJhk62cR4xiwU9P6zMj8Lt8ajvYAJAYV3qzX/2+r3UqVsdj\n6sHLpIKcAnSERMICnquPCHIZw7ZL4iaMGK2W5GbKdcfnWff2ZvQQh2Vw8+NW\ngI+frTYnmv7hkpC9Yn3LsagAZuofWJs1HKvR8HOe5TDFGEvgIfA4156Fg5KR\nmt7dG23J7ocUrylzv9fXmjdlQZgkjaAbjUEL35jxZTy6zrKxp0OIe+4miMJl\nRE6a\r\n=bNin\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"d53e0032497f2efb6a42d541ce5cd2072711f86c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.7c5000473.0","@material/theme":"12.0.0-canary.7c5000473.0","@material/feature-targeting":"12.0.0-canary.7c5000473.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.7c5000473.0_1620081689986_0.10793244663575896","host":"s3://npm-registry-packages"}},"12.0.0-canary.de997644b.0":{"name":"@material/shape","version":"12.0.0-canary.de997644b.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.de997644b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1058dd06cba34c0da06f3f8697d381c884cd92b8","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.de997644b.0.tgz","fileCount":14,"integrity":"sha512-1UpJquPyEbruwtE6Pwd/9kTT7TF9gwW5N1f2oSBvHbcwuXTqxbtiH+C6JKWJJ/ZEpmg1sqnSvKE3fLU6MP6JQQ==","signatures":[{"sig":"MEUCIDqDrds/PP7BfYJoTYJSMnl7VNrphAdu/Rkvz8dI2lTWAiEAg2qNtq//uImXgc4tF6TVPoi5Yc0hiIrq2okImmFnIKU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22555,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkYQsCRA9TVsSAnZWagAAbQ0P/1NiXjIE2LgJgp38/JCZ\nEdmUPsy8WtztTh/GD3ZCrDVT4wfSGFqs8ZInaZXTcIW69eHZFCxuYskdlMkh\nU1JiisuJmQXX6zOISbV43BHeYAmjRA7cND8VaxsjRm0jXkrMz/WJNp75TFnP\nBe99t+JnvRQbBjU0izPVrGDa+YY0mbuW2HcliRBU+7dmLsa2/vrymF0abA/U\n0n1oeL0LM18VHQfEOiqqHKiNLV9efQI8WnwIOc2yf44BgqRuLUP6QXQ2mVAw\n3oPodAuV7R+Po709UVRTYQbR+Dn5aYNhTMJ10AraIe+QbuqwNXQfUvKm2YHC\nvlUB/ApfA7RyXyC5LeRCgAtKyLVOXm1ALxieiwnnNC6okhoVPNMvvL17O7MI\n38SnV7tfTCq3waKXqKGOaLU7DX4HjCslwGYn1fqxjE5IT0MGSmB4q0UE3I/a\nN61gDwC9lshSdkNggZY2N3UC+QBOaEdDgjN+MhoxaQd/TU+Mz6DCxFx1aScZ\n9uTo2jG0kkR/09P+2W87OlwgH/Sd/tdcDk+k6jaUeLS0HhHfsZ+gHP1Q8AGX\nBy4akvltMgWV/ww0id26X6QOye8N2bI0NOip38F0l2Zw7LVFZ5xQFEPgce1Y\nAPtt9D3kOfUP73xodIVaDWg/NhStCCiqfQI59TyLnw6a3DWiL28x4OYy3Ew/\nAWTA\r\n=zFup\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"efb97e2ef70bfc07ed9b429041e4f201bb0d3a53","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.de997644b.0","@material/theme":"12.0.0-canary.de997644b.0","@material/feature-targeting":"12.0.0-canary.de997644b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.de997644b.0_1620149292504_0.11240123437308402","host":"s3://npm-registry-packages"}},"12.0.0-canary.d4d7f1cc2.0":{"name":"@material/shape","version":"12.0.0-canary.d4d7f1cc2.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.d4d7f1cc2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4cb4649033eac28bf5180ac648c19baf7aa68bae","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.d4d7f1cc2.0.tgz","fileCount":14,"integrity":"sha512-s728GV4dmf6FdG0PDlUX9O9bJzrUWZ25AZbgQoKBYtMtmrG9DgSYkxQURon+GuQ5qfj5khZ4YrwrWzJEuV1Mdw==","signatures":[{"sig":"MEUCIEbeXWZeNI823zxmMG7OLM9nhQTgXWT7vy6xOU6QG+EuAiEA2kmtLB9y+8uRAr+9HiWi89+VTwL6CGet45ithbueTjs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22555,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkYp2CRA9TVsSAnZWagAATKQQAJUMzpKCINiDuAKPDepJ\nHDmQDv5yLulcdEKRvJUj0/or6Qrg7IANT3YLaEkvBDPI92Zyrk6kqoy0Dib/\nMJRTbMOx/sUDV7gFCOJh6PE86loItpODKK9aEF9J0QNr3tH98+SEA6bdh861\ntdfbhJyQ2OZXt4PtTGIyYlMYP6TARE4/CH+UjahAdDJ1a1XdxArXMWa7ptkk\nLkzIhvpL1lITsNI+V68eZb/e+VEPGMl0rwUILarGW1bB6sCjt1hVp7kFIwhD\nGaFg/Lq1tOpY5KfHKrYMJiYuYd59S+QurV5P0y1dKIHPT1vwrJsNXwHHaf3F\nxrTDh9wbV1Cyrn3C0nibrxPHO3Y/khskQM6+QruIX8cyIetxUX+I1hYkiUWG\nXV6kaOa4jemicALAvYnR7tra2jBe9ypA49kqHouKyxu7UHp8vNMS4n4CgWVZ\nHlGREVafJskAV8npuX9LKW054luKAcJhC8bgDvSHM6bQ9Lh4dJCXDFUZ142Z\niN2OYeRGGUOfdfmYSSZk5IcrQiMG9/faOZW/yDFG2MTvIu/aeSsPy0AeKPoq\nzL76Wa7YTwfYoyCx1sxtAxArjyP6DVUmsYy6cWYlU8DN1IpUlWINu+UCR1qM\nfUeo4QyV2WpzTRImc0c10NawcWG6k0drvgUALaTKQLo9ckptieJnfaXXyRKG\nNmbv\r\n=P1GQ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"473ac5e3a11b87616a0dcb004bd5a9411a271f6e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.d4d7f1cc2.0","@material/theme":"12.0.0-canary.d4d7f1cc2.0","@material/feature-targeting":"12.0.0-canary.d4d7f1cc2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.d4d7f1cc2.0_1620150902163_0.03173351826883053","host":"s3://npm-registry-packages"}},"12.0.0-canary.be999eb08.0":{"name":"@material/shape","version":"12.0.0-canary.be999eb08.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.be999eb08.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"949a8cff25cf164f3f16818dee7108e93374e081","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.be999eb08.0.tgz","fileCount":14,"integrity":"sha512-hyxg63yk8Ktqxwh9A/GXHieqLOObdzyJIex9WeFR2PSIC0KPCaGxmLvdTpK8MxabHREv6e+yPOgRAwph59CkKQ==","signatures":[{"sig":"MEUCICZeQU3tN+d7Gy7QCmDVtn4wDA6gJtLNz+8A9yITZt3eAiEAzV3M3EJ/Ry6RHHV84swQrFsEAQKquQXNnrxxEOe//ik=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22555,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkYumCRA9TVsSAnZWagAAfDUP/RNA/jYx0V3D6TGjeqlm\nUztbdWukCZOQW6WHM1Wg9KJUQMMUPeb7yJhrV/yGPVyMFqQUL7mrjScwfegq\nmYleKDhlM0vxoY8phRkbk6VD4bOoke3USEIQhml6Ff/cGDiaTmJDCtI46y46\n0IdVdFpSQjuSVNkb1fEVdfoXhIsVczFpr1zGzJZoy6YPyaMCYjrF+zq4hduW\nyXpH2+JP6ZThOEqQ4H3+nEgv1pceAxN8YXTCEGbpuGztCOt4Rt9cE3iHquam\n3j4D2B/19tJp/tBdvXMnCcYYhwW2xScuFiNZHmYppX5PhLdpEP1eq7u3dbBN\nT8P+hIhhL20KVzftNjgMTbMKQHbB+ZSSh+rn126dpSoU/v4/MZV6Meeq8Qd/\nojbDJ5MPH66tyQj7QyAy7AfeAAUMZEJQor+QwYriy4zo6TS4dLnyDctr/dY4\nrNLjHxkEtpTSa8ogdCpCCs7EmGJsEHZxV1HtKWRP0KTgaEe1K1svF8i44Q41\n2E9gLAYSisG4A8COMdPkCIgi2o/8qN/r5z6CceTpdndDKrT16WkEYLgiBMK0\ngSAp7S7MO0i9atV9h7GGgYAaGFt3GsBhn8CdzZJ8lzztOu4ffTCnMPVaE5eR\natbr6wE3wR6/qFQO+QKOd6lhAnf4JEe/mvndM6LyoG33neCdbfSFXVTozcMK\n3Xk8\r\n=JzcB\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"78911f7ba4a7d68ed38f554357f8f224ec7a15fd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.be999eb08.0","@material/theme":"12.0.0-canary.be999eb08.0","@material/feature-targeting":"12.0.0-canary.be999eb08.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.be999eb08.0_1620151205905_0.8322320264158825","host":"s3://npm-registry-packages"}},"12.0.0-canary.eda1705fc.0":{"name":"@material/shape","version":"12.0.0-canary.eda1705fc.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.eda1705fc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"49b2b4324b838055be43c4006235a4131e0b74b5","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.eda1705fc.0.tgz","fileCount":14,"integrity":"sha512-hJFN7cTVrvCyTl6qABg0MocniHZZ0t+al4UMq0C+P+Rq8iUgHjbqiEyeo1z8KYa7KqnmmXOOjwvAnNG+g64Ykw==","signatures":[{"sig":"MEYCIQDiKGwNUEiycHx5AZR6HYRYXFGppOBDwsNNNs+uddXipQIhAJ0wjoVFmpySRvLFaHJestboY0XZxRpiMLnkVNdWPNr7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22555,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkZwdCRA9TVsSAnZWagAATyoP/AuBNzUxCBvyRy296ir8\nyigJ2kW68ZPBCFchWfViOg4GFCERthwIa94Sfiz0WdbeKj2LjXJ8b/HrdwAl\nZuQekL40dzhcKJCs0bjqHimKmsNOKC3ZFGQsD+bCkVWc6ByPNyheJZAZLZ/x\nD1PuyPVk5a2mwOO3VmYqerPrIQnL922butiTinIVmTLewzZQcweCDMGyv30j\nYt3e/K0q3odQg8WGyzNis1zH7wNVp9a+NvwPmreDhI9JbZE4VaGjYZdGeIM6\nIYrmLncE8V4TMd0g4oyVGVQhuf4quV02Lz2V91aZ2dN5Ik6QKZ2dFu8oQ9nB\nj0CzQmWwzZtU+m3rCBBWqImfN7ut8Bmti8D5Y8PTOev+Qrb1RcJKltiUSP1k\nSrozn6W0IhGljK0a7Gx4j7NRQq4j/t6yY8Igo/BITwg3240L6lm/ORPTzXvr\npA/sKlaArd2VjsLsPOp2RR4guHOgkNx3FIEcQB8qq2RRyOvHUeF1Jpenahkb\nUTimqvVLYik9SAAIAnpmDlPmqQ3YmtVp5NbOTnodQjOjCos1NCrj3azb+kR0\nDOMmd57xhL4T+OwwA6Ghhdmqune8mMq3TyXbBNOwIC4LWurgcpOFuI0AOhVN\nlZ+TW4JtryoBz65tSj8vADrp5njPZZJqOvMNoJCLll9whzwwdBvTlVUqYru3\nFvhb\r\n=EoRf\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"a4c7f355f27d26cb39ac4876510254d165a5645d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.eda1705fc.0","@material/theme":"12.0.0-canary.eda1705fc.0","@material/feature-targeting":"12.0.0-canary.eda1705fc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.eda1705fc.0_1620155421309_0.9872894373269703","host":"s3://npm-registry-packages"}},"12.0.0-canary.718c90178.0":{"name":"@material/shape","version":"12.0.0-canary.718c90178.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.718c90178.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"79024a972de984d5916d4990d91eafd9c95cefcd","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.718c90178.0.tgz","fileCount":14,"integrity":"sha512-XZOj0MUptfPt710gUtI2a45e4XtH9V0plT5kRj9J9SexcAq29ckS+t1b6OJlSqLuIW0zR9oXyR4rBUkaaOeGdQ==","signatures":[{"sig":"MEQCIAEW8MbyYI0ExPIFAmVlB30aoesL5EftFxYbSjg3da9JAiBmXnJ13EdaLdKJXGfyy9Dt6dSBmXTXiHo9+jpGOFajTQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22555,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkaAxCRA9TVsSAnZWagAA0yoQAIsN8i+tTwYX8JAQX92K\nprDZOnz1tVMfYDonGTO3Zrgck7Jz23ylSdZfkJK07pSxJyIsSMxC72JoarR3\nyY4OlDHFcAZY5ws02SFW9/Fsu6q6AIf/QbgDSENjGNGY1vq7IdSRQ6QjB0NY\nCXKJnp5zo8AaI9czuL2nkEPwQ6R229J3lyUo4aeFNhVPHB3Z5USKiUqnEqxD\n128uNQ847tX3j4TkDgpE41mzDWBCh5G7fvhOzJywCfUZgGXJL11h4lU/42go\nfIsOrC4dLdlTCgSpRxQ6wPN2xV6xCGEc3ERq1TBXAKwYrJKUyHqohd226/P5\nlFgmfh/7Psast0DNywv/Rjg71qKUTiZOY6/snwVB6ZcImQabdV3h7qK5ujtM\n8G1DfSJmNBt+AdtlymxItmcFHGhSjJCymuvfhXs58ALTJV5rlEMHDqzWED4u\nACaOfjzQ1NF0zEjG/gWXscvsVDw1ADjlWhJs9DrchyFJI8FXVsAbuf/XFIJU\ncLf1iffH/hXJZFuL8uxeLG0PPLWrbmNmMARIojSYLj2fT/94eSjUKo923gO7\npID65J7REPwl73HqNZTM9QnKLnQNwzIM9rjP7dPkzcX2961ECNwHbLWJZl+r\n85uRV7UgJ4Lc+YC0ivTdxHqGOo7mpfFKKvUkRmNIOX2Cr2vK7WTTgVPLPFmt\npXgM\r\n=xvQX\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"38bd77e93e567329d390e9784d4f591d6dd41191","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.718c90178.0","@material/theme":"12.0.0-canary.718c90178.0","@material/feature-targeting":"12.0.0-canary.718c90178.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.718c90178.0_1620156464809_0.05808109483132484","host":"s3://npm-registry-packages"}},"12.0.0-canary.0e3917299.0":{"name":"@material/shape","version":"12.0.0-canary.0e3917299.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.0e3917299.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"43f2e8b504dedac0ee9130f74f6e211ab14773cc","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.0e3917299.0.tgz","fileCount":14,"integrity":"sha512-APzdqxiAfqhYh7ixgmv9RYtjAwbIQXoiBFkk03sGfntx5yO3L5Cz7na9MhuOZRxZK0mJxMNehUZ0fUlNQsmXvg==","signatures":[{"sig":"MEUCIQD2c4WkXxcyyUZEQ3Ce8xjjt1NkF9vxIHQ3gZKTQpWgpQIgLPQHLXzjbcIWRBbDVNqn34gJzPmGJ7HettGIjJVZK6I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22555,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkaDTCRA9TVsSAnZWagAAGtwP/2su+NyIIgel0gkxxOgc\nU+E5C5J6iDUcAGSfANTQ9ntkeEIov7XZ3Zrh/WZMDvqobzbgylr8PUfk7xlR\ngADOxZQXOhngDWx5wGkpofQXOjlPeexXhJ0HukVg2COdSwW6fj8QeWTuCoeb\nWHECE7X+iT5LoM2L3/c5oOrifqm5O3Pq+gPg3N1QilEzacGxC+Cr25TqIW+L\n4syIJgmi2c/Q6siqZMIEVcczflBB2XLdhPgJGIWwgQVAhXkXY8XYyMtDahkO\nyLVonaBOeAAOdNcFqeyoRwllWAWpTj+wUTvZEo5W5UbbQwyhxjpOwt1fXiG+\nAoUw3xqjdS0pB/R8vqLCTJTB6mkLX6I8xMsOpTScLpln1+YkIJIx1ygxgtxG\nzG/Y+iIbW4vd2JJdRTSRQkNJQMz4emjpjAbg/NJbD9HuThtzj1vCq13g9pUg\nvt26sHSAkGeeLUVnGcIwy5E6ulkLi96rZVeBnnx9OjHxdBBZnZH5OzaG2Umt\nOL3YET7YqtEplvPeyrHrxvzSjlM3TsCfkOFy3t6dvRksd/LIsgojKmG+yIFL\nX4gh1dMJZek8xaZscZVqBr2Dyr+BrJsXDBg5SqBiifmPOADdjCeFAOC29qjM\nSHeeKBDwcDLyo1o7dE13NrLp8aHBlLmxh+/EguHVmGYOes+WejXELxdYEPGj\nSEf+\r\n=kKCt\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"b53d9d2ca98f518aa071c4933f2c0046916932d2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.0e3917299.0","@material/theme":"12.0.0-canary.0e3917299.0","@material/feature-targeting":"12.0.0-canary.0e3917299.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.0e3917299.0_1620156626883_0.3127884363618978","host":"s3://npm-registry-packages"}},"12.0.0-canary.836b3c7db.0":{"name":"@material/shape","version":"12.0.0-canary.836b3c7db.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.836b3c7db.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"282e7f88b5a6472107f6a7c1463baf301151595b","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.836b3c7db.0.tgz","fileCount":14,"integrity":"sha512-yF3u/W1k6K7auOuMovXNSlzYrwdqzoGJbk45rK/NFN4LE8WEzeAlYESkq5nLhn3WAlHO/Ez8+fd3F0lCkxryuw==","signatures":[{"sig":"MEYCIQDBUJuRp+r23yvj3boyAwATXzMa1v8LAO6iXTB80cruhwIhAL5d41kIuacjpGQcFa9KaDy8Yj7qJfKY+uKY6QNEEebR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22555,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgka+yCRA9TVsSAnZWagAAeywQAJnQiFGIIwhWnyimM7Jr\nE3BfQ9AF7jz1HM+lcJm/I1g1xmcLlwrvWUhbzTOmyHlfrtKQAN2l3OLgp1+L\nOy3D9VEHiJi1nxblG5Dhxmy1YW9WtuEsyhv1KuxUsYiDk7H52rdFi6a6gVpn\nDP4HkGvnylf4VPNRA6RMxwQarOANr2Anj4fTtM1Z/pQ5pySxGg2lnUOxVMn+\n3iWwDXUbdD/o3krDWsQpAVqLMm6VyIoOh19d5O+1w/T/+QGQfhfNW++sInNP\noAq7v8LMoArpHfkX2X0Yt5dN1sshDvvwwu22ypkjBEjEU6dWFnIECeF29RDI\nTpXKslJN4MdttJ0KJsn/qqWZCtIXVIhGgfKn6XZMDWCxxukOhjpX0vQZRrOb\nFCNlhXA6lsDVJhgNLS0A4n5JYXU5rdL5cYihL2FnLC42km6HKoIsgNvsXqve\nSJLikcOSUzFGxZFgaLAxmOTH5WrDSWNXHVpkDZ+mUJzyN8Vc+5iTJUE/FZjg\nR2/JQybJMCkhSRW+S5gDxCOJy/nyBKGyECOKAYzauHfyAo91f0Ritma0FLO9\nVBa2qaA/xW3EVrEHi9XvPrJXBD7onz0IsqNkoQ9402bXROnYzk+t14P0WMc7\nLnwgT7LJzWUwsOdXui/IA0WLSrbdXYXPXhas9CUhbqhiK0rkKjuYqwnn0Nhf\n2kC3\r\n=czgz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"b39ef8f7b55792965f33ce0e4907f1811ba2b17e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.836b3c7db.0","@material/theme":"12.0.0-canary.836b3c7db.0","@material/feature-targeting":"12.0.0-canary.836b3c7db.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.836b3c7db.0_1620160434363_0.06917357142344693","host":"s3://npm-registry-packages"}},"12.0.0-canary.53d4e6d59.0":{"name":"@material/shape","version":"12.0.0-canary.53d4e6d59.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.53d4e6d59.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b1b2f15732064f6e7b3610244387bf13df59aab3","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.53d4e6d59.0.tgz","fileCount":14,"integrity":"sha512-OX6sLjuZQnE08y8WcDINUmgLwMB7uAFxP5oFQFL0Iek46KB3i8r2EvPqs9XoDz4k6TW8O47KYr3fAWcZniowNg==","signatures":[{"sig":"MEUCIFBVCcfRSXMCmnaEhDiEaJzRlb4eV/yFg6yspwuX241SAiEAzMU7OQykJbM2g6GOV5SM/jWq3thTXTox6LI+rKLiIE4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22555,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkbNdCRA9TVsSAnZWagAA9dIP/AhC/GUo0gbjolQnFQws\n1KfS9yrwoyqB0NdT9TX13BKZ7VbSkYW+Uo3gHj1taDnB+ql/CP7/hrrWyy1i\nAzyrOwGbxH/Vmror1K8YSwxyFgHzOinSE3D1l82wmF8fOw28088mHVzryYF3\nitUr7eC7MRsMgP+2IHrOWlPhVZ7069H1XBVlZvthb9Q+ocTUS2OUW6Pil1Sy\n6m8fNRY94YMZww7Oj5IM+ix7FJOZ8dVT9KnKmY5fEEbYyR+ag9U+WxS3HbAn\naa3X2FviLQD+n7piCW9euY5XVPjZMnlvSHjbwRo+5kOXCZjaNT0LcnoDa71O\n28mYhECc4y38HBQzbmi1ihV6n+3ePTcYLTudM+QSeVM9eKV9tP4B1/FWFBkK\n5QovGozH9pAqqQbIKUeVdijXSwyXzUjucTX0el27PcBrnpRO9+dvVEsB3JBl\n9uTbihYqWtrLOYjXrrdyhZBPDqCiBgxirE3BE9c0wWfabvNrW7nE+fSED+mJ\nBNEYAglwFISmw1vnFuakQrbAaJfH0fEiyer/NR3eb5DQK9M49vMbRa5TgzpF\nH5wKtzNujnSHr/d+Rw0HqcJGVHrUY1CpyFwdYqOwpxWkVAUfTDiVuOMoKmK3\nWxjy16sFbUfmUB0GaBhbYiwvHTsoRKHfD3FGiDmrmwiG4Ya8OVKphvmU20R7\n6dmJ\r\n=2kXd\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"a89a7c81034e7bfbeb469ddc1e1e463b018f7179","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.53d4e6d59.0","@material/theme":"12.0.0-canary.53d4e6d59.0","@material/feature-targeting":"12.0.0-canary.53d4e6d59.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.53d4e6d59.0_1620161372917_0.03229947596783167","host":"s3://npm-registry-packages"}},"12.0.0-canary.18d147e27.0":{"name":"@material/shape","version":"12.0.0-canary.18d147e27.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.18d147e27.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4d38cc1c47638219d218b66b8df3d297d4a33b36","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.18d147e27.0.tgz","fileCount":14,"integrity":"sha512-X2eqUvunXVR3BzuiHoAffamcVd/kCBLkibVFruxk5wXR8s/ovn3gQqi8lYEalqABQXtvFbmPE8v2g4ti8xDqZg==","signatures":[{"sig":"MEQCIEuxQYKOUqeNxKeKw4OrwqvktaK3WlNDqiZCDpNWMWX6AiAdKbb1VzKXkkENMG13gVB8khCzIfMPd5Qa1QwbCM80Rg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22555,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkbVeCRA9TVsSAnZWagAA70oP/3RFM6qpHHyhvYTioeY2\nI2d13OCgf/j8aUqLzuQQHuaFCh0gKwl1jyHUIEHP8v4nYNLomSv0hoh8egMW\no4n+lPxK/oNPUlhcnYOZ6oSrpragYSWilbHgkwHXOe8tORKuM4ULDgrLwYBp\nXqtt/sdWDPlCKBtB/UWEh1cgP5f+DaJI+gvn+d4jUnLY+mN1F/le2yykkxWT\nmnPWicQsXdkGelvOmj5jwBPp8emzAwDvUuuy//8TKIC/LLxPhtGxQYz1/YDK\nQp4u3RWfMmOsN7rg0AKGZINuSDq9S8fNoNH6SmhmYU5D2mMdVnuSyy9iW6Xf\ngHXOFzLSYxCTcb4go5l8QfQXBPnyZVvuNT20yaZCcvrp5jhGCIga47mKoFvO\nBFzUKoSvBlAketDDLx6XNliySlDikDI2OS3XAPhqgmJw8BLweJTnreE8l78M\nXNqUc1MXbbmZDkLS9NO4FPIm/TRsvKmiYWpsyC4ZxXYhzrXqrqf9cBvdKId+\nPkibXbBBY2LPV47LREzXfhFpGQXEwZ2WACH6pjcYTj/wy/gYfV5UlEtXkddH\nL5unZRiVKkg3i9AyrfOXWMDG9U9qUd51U5oGFlZbxM7JVqdlHUrEQL5Nce+H\nX4z6eIEffqOb+y20ppDhDvrAuL8kwy9JMcN1/F0Ka0l6sjCngs7HrcYnOmK3\nae+E\r\n=HN7q\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"02e686390dabbb1590eba968246da65476db162a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.18d147e27.0","@material/theme":"12.0.0-canary.18d147e27.0","@material/feature-targeting":"12.0.0-canary.18d147e27.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.18d147e27.0_1620161886167_0.4944212752794428","host":"s3://npm-registry-packages"}},"12.0.0-canary.b9984794e.0":{"name":"@material/shape","version":"12.0.0-canary.b9984794e.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.b9984794e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4a8d3af9aa36e179ee32b89d287d7f5e9ea00727","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.b9984794e.0.tgz","fileCount":14,"integrity":"sha512-ftyfgaVRt9nZ1/4kfOu24YpUbrOX84Lo/VufA4dMC7rzGFikhhp0VPUetpZ7VwTFjkiQKozb72JbVngFvWkTvQ==","signatures":[{"sig":"MEUCIQDBiBi8SD7NyJ3HQ+icMPTayjVCA16ZzorTeI8qgZRaHAIgMVX5PGHWWoWjYl3uyzhA4cFLllBrMrnF3O42Tz2YEGw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22555,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkdKgCRA9TVsSAnZWagAA+FcP/3eCFpniC3T/DLrUbUBx\nlcKdRdjpN5lcaaMaLLPcY59VmJ6msfYc0mOTPoiFjrpmNa/kUIjUCkd+o1vl\nvsYjBykxfd7qjGckxgkea9Uc69jQZEFZc3MwUAYBSniJxonO+fCoOactIOAA\n/yQ/Qm4TMnYZNeFlJ9EqMVclZeiKsJNZl5hXP31NDGXVMZ4XZM9uEiD85EAq\nTbLmPQk9cFAZkMiykh3zYR1DOPmdwB6/wozNtNWMw8zH0xrL3OP0U3n709e/\nlqiBR4sYyP98I2WCQyW1sTss/VVmPjG0BSrc2Ai58w0+BxNQzpGACyP9QKT/\npKc9/Pd9JCjygeM43Xm+1b1NJ8CfUQOxG7Z+2kArELh1MytmDw6NvR1nGKkV\navSJ81QMLgTuVAPar/zhGJGhY0je/ryiobzqvxKqV5LELFV8cCjKax9suqqL\nCobwR/i6pbF3zBOylXLlv1T9qN2c89v9JaFPMpTjyWGX7Qwgces6JVXWOGQt\nQa/DCLj84iLox/gQL6CcQLlJp4Ur5j/f8CFtickE3IRv61WMmpmtkWd7ZcCj\nJO7I1MBdgSTF1X332KEE+dLHV1Mjs6n4tNpwr6RmL+nbxb7ZB4wprkJJ9oxj\nhp4eEAQ07UC4NB7zRbODWJIXSSaMXccjrji3cRNBPMnvzqnZiUysOCRofDrz\nPb6U\r\n=L4wr\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"b9cb2c88737add4e6d3e04893ef4ca57b7848549","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.b9984794e.0","@material/theme":"12.0.0-canary.b9984794e.0","@material/feature-targeting":"12.0.0-canary.b9984794e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.b9984794e.0_1620169376176_0.5411656468806649","host":"s3://npm-registry-packages"}},"12.0.0-canary.b76f5fc9d.0":{"name":"@material/shape","version":"12.0.0-canary.b76f5fc9d.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.b76f5fc9d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f525909776c77ee84bff7f440db7a64d5a163692","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.b76f5fc9d.0.tgz","fileCount":14,"integrity":"sha512-xflrRQIr/aC0j36MX9vXjloDET5NI3CvtGQBRvhh00rXBY9UXnPBwgqJnVUoyiVAxnkwCT4V5IHJ/3fPYNR+hQ==","signatures":[{"sig":"MEQCIFxVPJ9J5DipdIRkFWPS4g6x/qnfmPlQSp3yQZIZF+NWAiAzi/EugdbbkAi30egu9A2FRdx7yn23nZCFnpvt+uWdQA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22555,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkdNqCRA9TVsSAnZWagAABbkP/RphWaEy2MRxvVm0iczv\nuE4lt5TZ/cO+GNU5HLDlAPrz4ZE6+iaYUHPYB3SATBu72GEG7oO5YUnEYJ/4\nkSu0fU1gpM1lAq7K29vYMaHk8LvODrQ3TKnrmocIrW/Njh/I6qnOFQvrslj2\ntF1XhsA2TxMNSH6G1vivA+RaQ+x1ArXd3qSxetFphQOcKN/Cbsd/hsgZ4Vt5\n3pBLaSRegdrI8cUrHGbCUEJPdmWJBU6E5Nb8fM76IpAfcaq565IOqPDtVeeC\nrRQmz1DfFHhs1hWb30BYLGjItUf3EUAGQn0+azXafSICZH36UGGrNUXbuk8/\nEng7iStR4/IffpdLPEN1BY/E4KeaUdPuItLwQJcQQQKT94s5Ei8jAULu7JkN\nenYvBeklQDi6d0rnxIOyiPmZU2YJuDP1LRDWA/o6EI7BpY7cHjQMm75hgbRK\n3zYGEoZvT0GonoaazX/Y9ft0Tq1p0CxGdX7AcWT2bmPKcQTWn9/fis2Ji/Uw\nK14MygldVC3LdoS9p1TJ4mRbT+w7PBr/i1p9hQwYdLLW9YcosNZM7ooFo/fS\nsz+gGzqMkyzxzAPm0KX4I9HM9p8x1nQUIdHL+PrbSLCR7kdnoRc7IBoxESf9\nrG/GSRvu69tHI6g0AYV6SfhT3+5A6l/0vvymNBCctEPzOJS2fpbnP7dCIFpT\nqehb\r\n=D+/N\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"219c30995da49f5c5f458aa1b983f09054c2d4d4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.b76f5fc9d.0","@material/theme":"12.0.0-canary.b76f5fc9d.0","@material/feature-targeting":"12.0.0-canary.b76f5fc9d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.b76f5fc9d.0_1620169578530_0.5538417148435248","host":"s3://npm-registry-packages"}},"12.0.0-canary.055d4f10a.0":{"name":"@material/shape","version":"12.0.0-canary.055d4f10a.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.055d4f10a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ea396a8f686c18dfa88256cee17b644800e1aa2b","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.055d4f10a.0.tgz","fileCount":14,"integrity":"sha512-BDB4WutZ+ba8BGQKhbs3zZE6Ol+lCeG9oAge97Lt/d3rpCc8j3JQYDBow7b9UEIFtHLcvEpByJQc1oBIzaKbZw==","signatures":[{"sig":"MEQCIANqlEs4qfgwx82RnkCwPtBEAAsqokOwGtQfgwqB00ZHAiBN1PwOFkklI4JdIyPNXWh16YDo8WGg8cMk+fRwJ/He0Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22555,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkdb2CRA9TVsSAnZWagAActUP/Am5hQT+RjFlGL5BBLAz\ngR7OQwC4zuQLozOkPn41+qSEo2O7J0bcJHZbaXYmpuytotBXQZnP9erD4R70\n60lz4yhHYXCQ7mf7aeTmyyR/f8zV4FqgMVmyGkGnKwV5Qi/aNeSBEmqC+ZVb\nhSm0UWWhKG133vZL/t5J/AEgl7L1TdXNQkkDERVK5HoEIkQ3o6o7GDb1Sn+d\nmEfxwIdsXSVMIUdUX8VQQhMRdk7xYaTHtoubrcb3h9OEUXRMiG8Q8PaMER3m\n5wbdjpY8iYb/zQFQ0X5xsjY37Wvy1B6OSZrc1SqZpunnhkpNkwtrDMfM68s9\nygP3S2AFxD4XPDr/VZYSGOj7yfW6nTgYoFb/MGqVJwcB76w/ryXQrPGL2/xU\nyNB5iSWT4Cj0xGy2pMUT0qs1eP6XzC+ccI7NZzTu0kWMg4+qZXkI3nIHD+yI\norTrdn1A7lPLq3i+QFfL9iwPBrqiYXmnLp8cPchqafCUu1t2lRACns7kZU1S\nDHrSNzKN26c+af52PSGPKKznyBQ4cKWeuHTUHX/XjYKXf6vtz/FubUgcBLQU\nR0k6rT42Ev4Eo80L0ftnWTNkx/+hswXK1kzqk7XnYdZ8iUAjC29iDVcr1lho\ngD+PHMWhj5Kv+yq0Nz4r5FuwPMaU4gtWhjXTerJ0vHJ6CfrdDjUuUAb5rW4j\nspBx\r\n=y+Mt\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"df8d3cdf52cca2c339c1fa1cd18129db35422c55","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.055d4f10a.0","@material/theme":"12.0.0-canary.055d4f10a.0","@material/feature-targeting":"12.0.0-canary.055d4f10a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.055d4f10a.0_1620170486033_0.4881605589208782","host":"s3://npm-registry-packages"}},"12.0.0-canary.5b6a46016.0":{"name":"@material/shape","version":"12.0.0-canary.5b6a46016.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.5b6a46016.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5cbad5ea7cdd703a89dd33365e23cd6f172bd66f","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.5b6a46016.0.tgz","fileCount":14,"integrity":"sha512-vLCqPVaHiJUYh5gGu/C0CAdZ48lOvXzjSp6q7vfLyst5ru3T7tZvoXtwBhLdMRh3C5twmLPBh9kvVnfYevAMwg==","signatures":[{"sig":"MEYCIQDZDfi2xOwrlpauxPoSrc9YhEKr+5idsUmZ9XdcsS+BsQIhAODoEIMcIKO7KWo6nbonzdTepSYc5gyO+wsRZkxisiMV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22555,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgksTWCRA9TVsSAnZWagAAXdYP/1BI2Jytu1xkjAdAmTis\n9K2Sw4ae1Iek10k7/37kyR4xHOvsWAnHQmIq2gae87C/POlC+hmI7PBKAq2W\nzVYdZ7IGAXKDuzDd68y8q+YB2ZxnP0GuN6tY5qCb8y7SbhNBDY6lIbvuBmlg\n9QSiDhP75Rn7ozx9HuMRM4xAAiFfqVZnxjQ27HmYm5ARDPPALHh/ZH9MpuXv\nG49cP7gJopAMq0/OkecPxCfw5U0LISmk/BJzb7qewtEt1PdavWTJ2Bwo0QOq\nYMPSWXvXg+yku39+Uu1cfHVmI+h7hHO4y0lM8MRqCP3lDoQ10Z6/xPD3kwQ9\nwt0YUFKK+yiSDiOWi74Q7HjjuEwzR9qh8yelJ5RuhE2GX8Q9bfQpB89f35/Z\ncOxr+foQbP5yJ6AxXwpqAvwXjyv4wLeNxpphY60dAPnsekjy2lRXsTXseE1u\nUl1zyByYVq2TDeiOQMI7P/TQKCU6c3UamgYKm6FG5O42d1KeFXSOAWGjH4Pg\nP1xYMlGgFcDu0mdw2GnFNBrFagpsLN5zsUTLAbUT9G0xoavBt3iDA7WLAaj5\ngEiQz23kW3LDIrgK2ZpP+nGUJEGtYTfrqNAJ6x3riDJgL5J6urC72QgwNRd9\nGn5vMHNFOAjtxnyRxV+fJULVqL6Bzk86u8nAbbD2AjkqiFTtlnffdVL8Q7Hc\nx4ui\r\n=Jfl2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"3d9c7e3c179062db8b5bc243e8bbfbd9d9132e50","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.5b6a46016.0","@material/theme":"12.0.0-canary.5b6a46016.0","@material/feature-targeting":"12.0.0-canary.5b6a46016.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.5b6a46016.0_1620231381652_0.1259579144989993","host":"s3://npm-registry-packages"}},"12.0.0-canary.33c9a737a.0":{"name":"@material/shape","version":"12.0.0-canary.33c9a737a.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.33c9a737a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5f7f8c63c903ce02999aa74e417b7756d65ab4b0","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.33c9a737a.0.tgz","fileCount":14,"integrity":"sha512-vO5mlr4QFVzDtl0PaRW6Kyc7VXd5MIMRqCvLWQBMbkdSDdq4yJzwQvfY1D0icHX6AZl86gwh6Qu+KFI6JuKb3g==","signatures":[{"sig":"MEQCIHc6unDEJk7SKvE/qskG5kHyXRkphD832uTrpn9cfVFlAiBRrTvcC2ZC19oQqh0HOr9sxVduYzr2ZcuK2TD3KRcaxw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22555,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgktVuCRA9TVsSAnZWagAAQhgP/0jZoDFdSemUt4gnRor/\nADZ9Qq61VAofmctDkc78s/GP2ISo2PG24HFKKCaKMIyfGAsF9t6ZP+S6dOj/\ne4LhWKD87D/pBJLRsJUltlE2tNPxERCmzWJjBJKvdn8+BFuVjkCRPZ4JA5wf\nPAW4JajG8Z0sirErcIEJHJVFzc0uXUSPysgN2NymmEM0s96w/IWf8qSu2LPY\n88RJQ7rLo4JDXpPs748SqyqLsdxBqdgC15+iC6N9YC/0uQACqT3DlUAzy/EB\nhFwwY3nymqSduvFjJKVo0Bb5dEytrkgCbPWxqrs7W6qaQj+N0LZD1PD5s30Q\nxa2ZW22gunXUcwewSCc45umrDrL11TMZyCrTJsA3eLBoncP7gCJChVrKdD+s\ngqMkeOn/S+6aFJdHnHHcb3kEqEzY9Ogj4RcnFw93j4XJFUXSQP6qnWmMMFuM\nkpfNoCXX0WeBHMUCq58m5vd2lKkIm0LERYgOE0mR/XEeFs8dp5ta5QT6I4Wn\niHM8fJ4K9X2NnYLeeCO/IO9FjbaDDvcbsqnWiHcj/thQ8a+mJCBVAULC6OXJ\nI9yav0fWhycVGNLIXwfj9xFFLecNWATu4LszEVAf8bD4eB+A4ZN2BDqcrqmE\nf4a9PttxnzgxRNSAtJcIlCIiBvxsh58d7koSkoOjtc14uInjn/sXJYK8Bc4d\nZSMq\r\n=FcP8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"fa5c97d28049bf03f5b138c0d97bdc267f43c363","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.33c9a737a.0","@material/theme":"12.0.0-canary.33c9a737a.0","@material/feature-targeting":"12.0.0-canary.33c9a737a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.33c9a737a.0_1620235630231_0.6521459660705953","host":"s3://npm-registry-packages"}},"12.0.0-canary.9bc0effaf.0":{"name":"@material/shape","version":"12.0.0-canary.9bc0effaf.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.9bc0effaf.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f0887e1cf986c4513d36ed2941aa0545eebd73c0","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.9bc0effaf.0.tgz","fileCount":14,"integrity":"sha512-59b6d7/IB1I/r22pl0Vj0eheZECgEH5/NiNAneIILtefuZPHrWGWuJD5zv1YlvvUicE8uC0BOnrGsCpn4y/Eog==","signatures":[{"sig":"MEQCIHrSlakYubGhxQgT+O8M+Mx5tnkTvsNS2fah0s5f6+W+AiAi/R3SRPKmELJSGAun0tTDPqJQkxjr1bggqJLIsVPiMQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22555,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkwdFCRA9TVsSAnZWagAAeAwP/3JrIJjKRLBWKTM/3EO2\n6rcaLkbOwIUyqP+t2GaGzCnwD6qxD2z6APWRcY9vWNEcChH6QJQCA7hcrijP\n5K1Eym7L8pmSYs0LAgWHr69BAfwCvYHS/iP3bBJLx1o4fVIGC16KIYugV/01\nfMmXzDfpY3OSVFyjQvK6OY5mX1FWwLvOwDHu9rfmt69iqHOxx7NEd01vk4rW\ncCE3mI9aIquUnH4rG7GLvMQVJGr2NB7mLTa6E8MaYQv+2sf5c1G9OQbTPUnV\nIy1I+WttNhGzRQOmMcB9VyI8R+yvtrtEJFQslu45g6ztf7sXgykX9TPhWVSW\nhum5ja7RF5hjvvo/5AU8JVRpvTJG6UrrUx6AbiPIV0erVojLBssXlf8dNO3b\ndy4EeQ0fCesBaYBqrlAtTQ1wr3rALGz3pnTujhZ/tLb1DyXrsDwCCzgW+dkM\nwhLIQc2/wD0L0mt2//wcARUUjtdL6jDj2HTd5BibBKgpxLtIYESZv6Gbxpw3\nryaFNlSim5cWC71RpCqMHPB/SD0GVCHCPq14hIzgOAFWz/TohI2ZakhBxsg7\ny4sS2gI0+vaqbaW5WiDpB70qK4uYiyuS1pE6MjQkghrSdyoY4Snzhdwezh8H\nFFFyyzA/Gx9V38o4Lh/VSIsbQuQizZuCYYaU67tgD7gksMhfZH7G0eSJGA3T\nbpma\r\n=hAfz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"e671ae06efdf42f7ea0cb40bb6700fc57f6a35f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.9bc0effaf.0","@material/theme":"12.0.0-canary.9bc0effaf.0","@material/feature-targeting":"12.0.0-canary.9bc0effaf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.9bc0effaf.0_1620248389398_0.4421863854674031","host":"s3://npm-registry-packages"}},"12.0.0-canary.a1e0f2af5.0":{"name":"@material/shape","version":"12.0.0-canary.a1e0f2af5.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.a1e0f2af5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a07fd3fd57ae457cae4355d6221be0fd0c0107fd","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.a1e0f2af5.0.tgz","fileCount":14,"integrity":"sha512-+dsldDeoqCOIwkEKTu+4Heq1OsD2ScmETIniBvgSTWb+XCnBUuUQ/11sKReJ+qmhrSqTlmmpfGZ/r18drolbhw==","signatures":[{"sig":"MEUCIQCjI3drJRdZyXWBrrOWKDXNdvepUyi6VZg8T2F7X10KlQIgZ0sHFZYuKHOKmIYKav5q2I5J3SST9iDmcENvCVaSdxg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22555,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkxDpCRA9TVsSAnZWagAARIgP/iUYuYoZ/7JY4aJEEbt7\n9PeV0F3wdFf+TtghM5uditCfFsJX5bgiFkNNevp0NwNHAwub9TE1GFSa6gHu\naSK5xV0s/GlsNgqXHu4YQQIdop6fvczMsLE4ihrC5PF7zAEcxuYSlzuEhTj8\nIRhAuNgJVOdA70GMyWwTK1fg32yB3O7fYslz6ZOr4xJS+ERSJHdZg3gfPzJ1\naQNWXecT1u4KCguR1ZYp1hK2UhSgqwxYf3k1cgK4H+n7Enc+E76AKXMZgFv2\nI7JBpY2S1TtsdlLNeZbLxPajKLIgJFi+lju6Bn/KkgO38G5vIrTYD9MIkvwL\n337c4W/pRh29AK1efE89rmzM56W3AABGu/0RvFhomOYxgIMHV+wZ+2s6BE7s\nh+NtzLJXru3p1Q1SeYDxYLqmFCkCGko6kLMAM8/xUsDgdKJWcm0NzDhadFss\n9MjW5EE9oXKorMxcidgQlIu5KawfE9fOLREyubxX/7ytabNWMoSHFZJR0eOL\n2ZHhNZ/N4Vlijm6IzXmJP2jw6g/658as+2W9LdiQWIDrnkYcVtGFK55maFRS\nEatdBZnHU2YYcMG/h32UT3MtirgWcpTbRtbNZ+qaEasJS0lsoAzEFrGVkdWJ\ntW446bd3LmmJ343auh4cGRd89ots1GhbRUaIWLxiqkpyeWYaJb9KH8hIYB+i\nvU+D\r\n=2RKq\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"7e20a4b86d7cb59be9ebe12cead11b1e8c7bb63c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.a1e0f2af5.0","@material/theme":"12.0.0-canary.a1e0f2af5.0","@material/feature-targeting":"12.0.0-canary.a1e0f2af5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.a1e0f2af5.0_1620250857476_0.33379350168139976","host":"s3://npm-registry-packages"}},"12.0.0-canary.06930c96b.0":{"name":"@material/shape","version":"12.0.0-canary.06930c96b.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.06930c96b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4ee017abc75627321bec3efe6e5376119dbe11c1","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.06930c96b.0.tgz","fileCount":14,"integrity":"sha512-esUVANw0rzR5dmHi23gmU0zpdRzSpYi+AoSHJJO4omj/q610FHm86Sp6C9pMNLOw+XwvxrYjE2YhkEUtIUI+Rw==","signatures":[{"sig":"MEQCIHpaVYDChU7mlRp6KgilLQGGeqgcmuDWJUYYOkMzEAWmAiAbI2evRRQGmXq4RSTrVp5RXvr2sv7SLbrpEZwrwcGs3Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22555,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkyydCRA9TVsSAnZWagAAoicQAJCUJN11T71wbRnSloTt\nTWKwZhzCbIrJL8CVFGXkMoug0/r+GOQ9MflcOZYsGmoAWzblJgCR112WJ0rD\n7huzgFQjc8mozFKE5DjWF+Bkc0ZKTxmVn0zg90/Ash/L0DjVc3UoAcaqCVav\nr0r+U+jJh/0aPPTX0Q99G3y8EQuRajenXGVrstCzjx3pLwwDYhMZrwjRkvd4\nTBZT0P8UVW+aCpEUEK7JkY3b4fcTzLOuREZWpKNTP4UPmQOuV9yMsN5eMVox\nvopot21Bu29bln9b6VwfGRw/YNVr+iZvByJ/bC9BLbZMUMn8a+FVO6xXYBk3\nYXAo7mfUyAawXR/r7qFVSt0QeFq3/H3b5yXz6EDyOis0w8c/9riMiY+M0ABT\nQeiaN1PCE1LdM01P5g+J8w6IKb1wnozCWAie4DlhW0qhMpLwC6KclL4wSXf/\nV8+PkIonxJn4y9k2Jnea2Tibsy4VYAV7M/Pr369zc3Lnk8pgiIk00ffWgRyU\n1Tb98t2LBL3eoDOXsmMLq4ljHIAfAe5BabwtBnmLhoJKVBGxBLY4rzQMCVHT\nn75SnLEfjWYzO30DHjDhe31nrC01HdmSldovg4qqSy5rDt8f3g6XXzc6zm18\nBSJ1Y1NRhA8kUf4PvrPfbbi+DYn8qzOtYTyI3JmjAEbhBBqkZ4Swo3T/domm\n0KfV\r\n=IfnA\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"aef50df6c5f49244a2b0e5a941794f4e3e4fd21c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.06930c96b.0","@material/theme":"12.0.0-canary.06930c96b.0","@material/feature-targeting":"12.0.0-canary.06930c96b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.06930c96b.0_1620257948487_0.3908055115472566","host":"s3://npm-registry-packages"}},"12.0.0-canary.03f525f9f.0":{"name":"@material/shape","version":"12.0.0-canary.03f525f9f.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.03f525f9f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"944c5471b882ca9143d7e880b899cff9ebaed3cb","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.03f525f9f.0.tgz","fileCount":14,"integrity":"sha512-4eE7PypGDXf4VNwnJPK4nJbJepknjyDENYS5wn9cKzwWtQ8qr3Eg7BVEqm/w+8a0Ri1XEtSshbWdtC4ZBlwsAA==","signatures":[{"sig":"MEUCIQDMD7GcI5i1Lv6a42fQmHk+dFWpdiKDYPmJg9wTnUXZrwIgRwLGlhe0SRhOWdXL/XJ8zfrNzrurcuzVovdQCP9xVLE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22555,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkziICRA9TVsSAnZWagAA428P/2XNHVbhx01UXVEejrXH\n0WbX9RopaUegY/AL49U4hjZZ3lQ+oNK0dCIpMLkaGy5aCrIlj5TMx1B32GIZ\nPQMzf+uI1xQmMl0ZLYA/Y0vnp4XogiaJvbrEtr/+UDjafXdzaS20Pm0t9utb\n55C7FU6bg5hDAf0JYyyP9YVzPHmXqU15fIcnsqq9uxqyklcZv/djeA103Fzw\nSGJLhSTTqYm9cXiWRrPOit8CDYMegYWKpP8JrXUMv3j7w/hf5lClm2wfaK5m\n0QPz1fgJw2aGq4F9WnuAsYBcLLAG9KYxHcMEtgnFMpf7HgvQTgPz42gtTPyH\nUvwp0adRWwwDXoxMlbDT8wQQZGeAM0J/GHPlfxdSTHBLxk8b8ojJ91E3fM7r\nlIwoMcA/DYpkOMaksVJl1WQzvtRDhJREzIuOi5Dcv4awB85yrA0eU/1X4ylT\n1gI4dB7RnB6x6JZwbOFV0PBVU6dbTPndVMIiPg+GOsrnvVELafuZYpNfUo65\nikNe5Vx3ikOUrig5W3S2VrF3u6PzpMKiYqsfQZt/qa6/wamgEqQDOdF2RB4R\nG8x0HQOItICeLe3M3UcigX3Erpx4/hjv+U/A1nyX18Y7v3GeaXc+X1+M1CLi\n7Vmmkx9RKdVXuog+hgKlStuMwEE3MnpqjnzZfoFMlfbAf9LtUu8aqrhMq8UZ\nlKfw\r\n=X1J4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"f9df1400e21c75e46fe6641abb76d5840dede67e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.03f525f9f.0","@material/theme":"12.0.0-canary.03f525f9f.0","@material/feature-targeting":"12.0.0-canary.03f525f9f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.03f525f9f.0_1620261000094_0.8177924300487336","host":"s3://npm-registry-packages"}},"12.0.0-canary.e82ba2a26.0":{"name":"@material/shape","version":"12.0.0-canary.e82ba2a26.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.e82ba2a26.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9adb0a3270f17bb462c9468eb705b855e392b71a","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.e82ba2a26.0.tgz","fileCount":14,"integrity":"sha512-TfUu20063aBZqJNAeciXtkw2ca6cacqdk+zy7MZn2cTLc0HrY8bGytmN7CLIUZYEQmzscyXMLmDJ3DkQnsB2rw==","signatures":[{"sig":"MEUCIH/JNMUnC7yMZYIO/7GwQPXhmVNQuuaPdXS7i0jL8UwTAiEAp/w7HtAWUtHUqBwj06w+yF6TRRe/c2GekeZqkfMqm1o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22555,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglBGbCRA9TVsSAnZWagAA5+MP/3tFBPKOMFJ7T33Ia1d1\nejFsKg9nKiOvlZJLp7cIi/jO7OIuUMImJy0FWNDRau54qNbzUMFaCclfc9+b\nRmpQBn3whMtZnDlXuu1Mnt3v/WMM5wn5oG32gXmAWIqsyvHjXU5eQLOjC4aD\nCZLVEOMy7d0RNFM4C4j9GZHa53dx7H/itueIwNXfYSHmRPOrz27Kn4NESzmo\nvYTl0SGVdxnJF/sOrcW2YnI6KYrxWyQYe30urSnO7vT/5EWGmZxM3owPm2mQ\nTQRFseHkzCNga1KtMkPE+JZuY56ary4DQU5j5g5X/g2wGv/OogJpFJ1I/oTG\n6Xirde10Pk29GPWxU33X3WEZAwRVkSybLpAB2YaqQ13wnzvZCkriC1gr7vTq\n3VNYsJRf/Udi6yg5hDsw+UwUM0Jei8AfssNw7tcs90s4US7qkLIDi8jrYaN3\nxpkEa4X0vu/irn8X0nRk+E6UBjRnHrPdIJQgv6WHb9IoKJTzG1h8eq5hMxFD\nB81aX/uADyNe/kvXfZnPouqOlN5iqizmHkbCOGg38KQa9+f3adxapWGyyQ/Z\nrDVnMV5zjwplZ75bqWu2w6j5YdQs9p4zh9Wgvqiuf0maHrsvo/FL1kzr2twd\nezV4BeTZXorT2wNueT5av7TIA3zmrWtp2ydycmdWk1AAuczP1beahyqOfEOc\nxiFl\r\n=3j/m\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"c3349c46dc5415cbb89b8260a8db012f44f09eec","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.e82ba2a26.0","@material/theme":"12.0.0-canary.e82ba2a26.0","@material/feature-targeting":"12.0.0-canary.e82ba2a26.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.e82ba2a26.0_1620316570855_0.8628510817950608","host":"s3://npm-registry-packages"}},"12.0.0-canary.fc7c4e5ce.0":{"name":"@material/shape","version":"12.0.0-canary.fc7c4e5ce.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.fc7c4e5ce.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fd7e2d36f35f2a252dac2c9b40b5f9a27b2af0ac","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.fc7c4e5ce.0.tgz","fileCount":14,"integrity":"sha512-oAj+mRl45sB1KkInVlWqWV1QorTVQU0XLwxc3uueXO4cXc2P/ZtUm4O0rhgtQwDbDkgONOv8AhwoejMupsx09Q==","signatures":[{"sig":"MEUCIEaE5+eJVi06qSSAsY308/Lufp9aH+Yjq1h6MnmPcaVuAiEAzB7yDUz2EKxSYRlA+4ydeTyddOPDDKqcOO8zcGeVZ9s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22555,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglCdyCRA9TVsSAnZWagAAKAEQAJbpOKHN+caGW2RjXCWL\nOnK3p1uWFlK8lFY/k+NPSc9aZv7SiZiW30Om3Yzfo+h3+kNWKgkJP8ZkIzUq\nrQNMeJuUu+rHIziErbZSg35pl+5F2Q/L0mzx33BYwStc4FNLThNz6h14VjCY\n1fXFsDO7H/LTuq6pmEUpDAmZfIgymftD3r1KWyWQZlc3OL7FlJEiFePQHVyb\n/JbDhHtfwtnPO6SF2f8Zupw5QmGjN+KPb7mnLucuwMHi2eq0fJ75pspmHm8w\n/ghaEpAr9IFMno1iwcZByg+ZzEuQ04WPcLdnUfOQxQ2M6yqL/8Iv4OtAx4Nv\n4ThO1HkdCrIssIR0vRLhUYdIZQ8TaARRiTyEx3H7awjgiM4m88hE6QWuCaJb\nbSTqF7Aym0WGreIIcZqAvIgakwtAHQB0e3aoZjH3nNGORF1lKEXM6cU4VKWz\nRqQocohWqySD9qPQpudVbndYT4RogddSv7s4RXYWD25IOdIboqPy/JU3bU7I\nDeOzuUVqE2S8EFwqSPkFvShQAaOkQVNUIusNOJyMCiUG9y7dlNVeVweHe4O9\nwa5J2ddCpG0JmLKP2ZN+mIoh7+GiTu6NZyMioS2hmERbAqNjBwoJ6PaHF+fj\nm6jlEjPT1GyD60HnRJdLoqUOn/rMThwccz8oYygIUxSlDGgWuN7VA15spBb8\nXGZC\r\n=QEVV\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"b549929c65e0a33cd9d427a600513c663c2dae28","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.fc7c4e5ce.0","@material/theme":"12.0.0-canary.fc7c4e5ce.0","@material/feature-targeting":"12.0.0-canary.fc7c4e5ce.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.fc7c4e5ce.0_1620322162239_0.598650587178726","host":"s3://npm-registry-packages"}},"12.0.0-canary.65c04514d.0":{"name":"@material/shape","version":"12.0.0-canary.65c04514d.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.65c04514d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"89492f06248ef85b65986368219fdb062d5e4ec6","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.65c04514d.0.tgz","fileCount":14,"integrity":"sha512-Y/w2459wJ25jjpKXuhWa61kbZJNgXXwfBn4V9e0rxflo8Hn3KHmm+BWQ+/00Vw77GSBjgCNy1fgSFbggfiy0hQ==","signatures":[{"sig":"MEYCIQDE6f1ifDjFSKwyFYKEq1KAFUJ8KgGe714hV9enN95L0gIhAPoE1AIRk42hxGYZYRhz0QTytx9k+3ID14kfDJdd/fbj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22555,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglDjBCRA9TVsSAnZWagAARUQP/3Eiy1L3dXCP9CcdQ5/T\nMacoh4m7bZyUia8hV9injFNBoEJNwjU/7bay6NMQfKWMzgWD/oLonI0Vr7h6\nsUiEsdKyiRl+VjkmRwwQVXnFfcfLLMyBnCWdSb45Bj6qLvU43twzAnqYv5FY\n9OVjwp2cHQkN1rOwp8PuOTdPZMdrCJJo3ecD0Z9Igay9NQNYdtGk7bUfoiTY\nOGKlV2Cne9hddV61zGLbUGEg208tFbH/HTzXmll2YtuMo7/8yJhl0sYSNjMj\nIOPQhW8Zr+jePzJHnlqyK3YdkU9+EEIvX+bGQvjtW62RKD02Hq29oSLNVpGj\n42vXqtrJTuTy8hL4id/tTkLx7BV+3/d6TNnYXrplsOiIoxWppGy377svDKwS\nMQT8DiQiY+D0w1//Yxi9A/JxNT/MZHUkpbH4ZhT6LOTnFA4bMFLZHQODd1U/\nkub8dQS9gASCxpoEGWYOKPxykabG89Oye+JooMRv/L5bt3FXPj5Cq9IjrnEs\nvJgBY7iQvyqJJY8NL7Fh7n/drpS4S8LkXJZ0AB2VOUthjIiSDYr6cSP+C1uW\n2bjA7AnHQjQaKQ32P/dGCTPtFrGrVCsqiqJVdG31bWIP6EpWcBXo9tSpzOql\nwzfThSL3c2tCjmP9bz5q0xfL+qbdQkL+ZyTfZcscUDJRHfzEJKraBzhm77YX\nd9H3\r\n=TuiS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"01ca5daeb81d99750f9020fc62e04bc76085858c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.65c04514d.0","@material/theme":"12.0.0-canary.65c04514d.0","@material/feature-targeting":"12.0.0-canary.65c04514d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.65c04514d.0_1620326593262_0.16070525535874047","host":"s3://npm-registry-packages"}},"12.0.0-canary.c97779ca6.0":{"name":"@material/shape","version":"12.0.0-canary.c97779ca6.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.c97779ca6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0cd6f3fb705f033b9bf27fd8ede57bd57a95122b","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.c97779ca6.0.tgz","fileCount":14,"integrity":"sha512-WzNlZg49iDwTr0YIX7GXqc2pmEM9P/shWgAy3XMiiNbXzdX1U+oBylbGnGSqJF6iMQmMQU4UKBsdtdLIhzx/dQ==","signatures":[{"sig":"MEUCIQD/jOsma3XLMlzMkPBumkAukT7WMpqHg6ftjPGv/QeS3gIgAiJmoE6Y38EizTSqvFa5DAhrqFvZt4QG7yGQk9BD5fQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22555,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglGLoCRA9TVsSAnZWagAAuF0P/0ur9yE3KubF1KF7YmIP\n4W8ihvYhq/gaTk9satTvFJ4lAqHjCEb/vJ36rE75OGh9yaWmCmpGw2tgyMm2\nQUv8/rNZgbPjnTopmbhVuf5BD+00Ub+8chtWqsD1UwPHM8M6s3h3TOz86+dQ\npU8jBOxScKWgdWBoXgMP7zoRH9ps1Ua3PTYLSxU4DqLqHHTnb5eUrMuRK2DW\nGH6fq1ThbEC9tnq9qNHHZpV9GsKfod1QDljB6CymlkabU/TQnBJtkySlbJMi\n2Sxrv6TLxaftdgJ6GAwKh0/UKZ84UFcv2+5TeYbNlqqb8VsNsTrUYdIuljLo\neM3iBz/BM6mNeTMnRFY0GAGWCaJk/pgOEgAoiHljLT6txKL/UHBvU8Tgq3tQ\nP6DXqFlMNjBbS7hO/h6h7RcCpjuUa3vQkH08NlKykjtblBhYihpfSONCs7Ed\nmm+gOcZnPTIIv+Jmhcx7uuspFRBeuJw+Q7Hw1dOVl55hKZKE81AM1DSSWK5n\nc0Yw6lKsPkFEquccSc3BtnKKORvRaQKzt1DCnnJKcWSd3XDLS0anerY3c4ye\n4UCTivFXNoEfYSedhElnFpdAdEQn1EsGDy/b7aFifzzvNRaPyTtkwq37DJN3\nlK/lk/xwu+CJsDBe/ZBPAez7lAn1FyfTXMihJGiUITheJlqNCS6EWUfuzkmE\nA133\r\n=pfgt\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"046f80118629481ec1af7c937a84ce6e0fd1f635","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.c97779ca6.0","@material/theme":"12.0.0-canary.c97779ca6.0","@material/feature-targeting":"12.0.0-canary.c97779ca6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.c97779ca6.0_1620337384457_0.09286478184465752","host":"s3://npm-registry-packages"}},"12.0.0-canary.869d890d4.0":{"name":"@material/shape","version":"12.0.0-canary.869d890d4.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.869d890d4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"56012fc83cf08c790905886152a0e67c025a86ec","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.869d890d4.0.tgz","fileCount":14,"integrity":"sha512-4K+44UbY24RlwdVxav/6OpqgOAsqhQE53CJIu0mkxUjSb+Ubn7N5l0/P1MqYatFF3/1VwFzUPkwDX6wC7jj+0A==","signatures":[{"sig":"MEYCIQDyX1omzZmB3f1TNXSC8tqA/4tVwV8X8BOcrasomcZLrAIhAPXagaDxVewH0VgaJnLEQ1ziOIZ6MGDifkyFehpNtX0M","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22555,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglVpNCRA9TVsSAnZWagAA3JAQAKLMK+CKJBBRtqD0pbUL\nV1B1ikmdA2pkF08eAYg8mBPxHkghZE9trWopMXrjebO6x3jIp24IcGISqHxz\nmV0NgNgmeGbLVreQpSp+dF/8BPdt14cn3U2nh4A5CqRB6R4B1C8ryAQoLNGY\nFEbKlJT+ESfJz0fTzNnIWRyzZsJOQ/sd9+oDzxcjGmTf3jJWUYMYu9qnxuLR\nh6uEdJu/hp4m+/9VSGf3eEh0aivzQnG0rMQBYPKIWqBk8EhA4jdaaXTyKVq3\nOC0FT/JxrrgmeHuzUkbS77WZKsHSjx3Oz7VofecFg8KevzSNuPNNcoBBkvkB\nLOZxygDvPKsc36iag1Pv+3QwAouDK8ZTO2K/dsr3V9947exuqa3dG3wRo2DJ\nl5tKqx3iFv0X3xp2RDESRBXShe+SiBmE4zXxESDtf++SJzOeKxNmcKgDkWDO\nievtCu/JtC4I05lIJ5dBdnlJeQaVV/4GMnOT6VK9BIHYDtZdML3jpxEIMW2f\nAR3N8Gx0JrOlBl+MN6+sgjllJsk9hZxIYRi26FEGUjLE4FAyny169wB7/56s\nFc8cvHMlRedJkZbh3O2TVRq80MCM7QIXbcjwG6uLI5wddle0YF/q29fQX+mI\napUjJc/vcrJsHA6MrhCMeZ9lKh5WRSvE/+McuVxIgjCM3rjjpoRIb+LbNjLG\n7SXd\r\n=YMcT\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"cd73688a61b81573744ba9a03cd2952798eb68f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.869d890d4.0","@material/theme":"12.0.0-canary.869d890d4.0","@material/feature-targeting":"12.0.0-canary.869d890d4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.869d890d4.0_1620400716701_0.9006916912647065","host":"s3://npm-registry-packages"}},"12.0.0-canary.ec22e1da9.0":{"name":"@material/shape","version":"12.0.0-canary.ec22e1da9.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.ec22e1da9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8f45d8a77edde1a6bd4ec83cdfafa13a67d7af86","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.ec22e1da9.0.tgz","fileCount":14,"integrity":"sha512-tsRIuKfcuCFskDQej0mYMdIWzwxv/lDSWdrPdzJjdqL3Wru/0TgK2Nvy196EiMpgPJg4p/6ScNCBiECqkWjDnQ==","signatures":[{"sig":"MEUCIQDGP0d2yYQPg+xHO1lTUgnE+30MF8n7Arsm+/2BDT74SAIgHZ1qBk3YUB/c3tEjmH59wfIxpKg8L+tKpzkHncbybiU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22555,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmXolCRA9TVsSAnZWagAA1DIP/0ZqCF/Atr/BOCEkj2GF\nDeMisIO9pXtWhu0KzIeGbzmou6tWe88+QoUxkd9Dz1Sv+lj+zfAP+zihS7od\nhPsBWfLZHb/qAlGN1esnmqwHGU0PvEACskqEPnRbxQNAeBbzGXJ/X8REZvZ7\ne2v8Ttrfca38w6SiIvowYAuUmQUJHFUo6Zz+9AdnuRd6PMyUqDSQROYjvboW\nnUE2bTdX+EepTGm6HTnjs9jaLUjLSKhRzeQn8Zq22I/yj4DdrrLGt/FgboXo\nNzHunHw3vThKKKypkJpeoa3lmHvGo63lPe4VkVoMpSMd4N4w2mJdkUlmkpEn\n1bqrwE+2lM4UIRJ/69+lLmxO7KDzyyryhEKtl5pF85cjxY8PoLeFN1GQBO8V\nqq9xiorlUV9ZZij47UUDJZ80Q64IONOceNJ0863AQ8UdDhN46xyUvXjaL4/n\nTJjPmUcATVlzfDO9ymOnp5FBLlDQWK2/bV/AF5UQp1l0wmnnyNzv7A7f4ogw\noQD0c1WuZhqFHmiXOOKWWSXLLwKBKGAUPjTUlwgj62ccyi78QJkxfxuSsdYw\nrSHASQGqYFvIuKSiPuXJVnybbH0K47vVXSpGGNxITL8XZNfYn9D2jNOcaZPi\naz5tjdp9giZuiiihT61glYDF9tHaZkMrnzV3yzr1tV/C+0qWCAo4CEgDa4UR\nzrLV\r\n=Hrak\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"273a15f546b8d5df597771686f431c3726397778","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.ec22e1da9.0","@material/theme":"12.0.0-canary.ec22e1da9.0","@material/feature-targeting":"12.0.0-canary.ec22e1da9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.ec22e1da9.0_1620671013054_0.9762576572640804","host":"s3://npm-registry-packages"}},"12.0.0-nightly.7427449f0.0":{"name":"@material/shape","version":"12.0.0-nightly.7427449f0.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-nightly.7427449f0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5e33a70aab5119c1a0d1b386db2e97a9246da291","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-nightly.7427449f0.0.tgz","fileCount":14,"integrity":"sha512-J06B7OtYiYCrbmNI3cnUnwjOOrg1eZV2WkZ27G6+N+6mL3CDpGq0Xf9FEhwCuhPYkGAZvb5ungmx6kEj0bFvpg==","signatures":[{"sig":"MEQCIGKEodlde9uHf48XuZKQ5zlwFjui1wZjFBH0jm5VGIQEAiBTU/RaomRpWLi9SpqFmp39IKEnenTXjBSctZnNTP5cHA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22608,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmX8vCRA9TVsSAnZWagAABIYP/jGbC9cY1ZXd2DMKo946\nASSHe8U5oTAcNxVI9S0oPcj3/hbDevXm2GVw4A4cwrimnD8XitMHt9QkNw6i\nh0ViTZuajQLpJYciBmDpX5gwHKcLTfTlYOh5cuMxqSmy77OsWkhCfc5yOz7i\nQWPeV9u6mp6V+dJ0qDuN0r6gxExwza2eWehi+eZU1VMG4BPJvwO1NsOqB9Jm\ns3hkPp6wo6kGCvY+iVp/TscFTl6Pf6X8MHmxqeFk62wdZoRruM/LyYL/FIl3\nDexSkgdLu8YeTBX2G747g4Nz5le4FM9l4mxqm0DjqhJFcClELbnxQ0VRSPm2\ntalu3moaSKzZ0ptFUmnaQFDQ6U1ZQclDL9ZjknK8yfpsOD7iKDyj4SzRO9yR\n6f6yVlV7SzmK8bn5Cr4Qz00Yu8ASUB/gDQ+ZotV9FG/9I+LOXaUnMoz3sMCV\nVjTd8uFU5eR8FzdrHGPZACUK+2RG4ARPzzW4Dzk6uJt6JP4Fh3pOnXclaNoM\nqn9jDvJAsNDMie9O2i6AtmhvqasD//8twb8HrY2ZbUiz2k8gCMJgH74Nr6pG\nQrZhPKOw4aDqB2jzP/VNU5XILWErLmcn6PczCpaWMq69N/OifV51LUPuqcat\nJC+nBj4WaDxTksYGSetOY16N9scBan2zNC7AAOkSjDK4Anmq3r/kIJctlsu5\nWcQA\r\n=+j9s\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"7427449f09e9521a6deba6ba7da71038c2fc1f05","_npmUser":{"name":"asyncliz","email":"asyncliz@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.17.0+x64 (darwin)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-nightly.7427449f0.0","@material/theme":"12.0.0-nightly.7427449f0.0","@material/feature-targeting":"12.0.0-nightly.7427449f0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-nightly.7427449f0.0_1620672302866_0.6541273450916434","host":"s3://npm-registry-packages"}},"12.0.0-canary.957cc3bf5.0":{"name":"@material/shape","version":"12.0.0-canary.957cc3bf5.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.957cc3bf5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d78b436f52d75d2f1d28d61c33adc5b4dc68f3dd","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.957cc3bf5.0.tgz","fileCount":14,"integrity":"sha512-oeauxAorvuhK7PzSPfcPtqwlRW0n9TY0/EvBGJWEDXDv2JPunRLSy7zacaC5t+K92wz8Mn0tCzuPfncwN0h/DQ==","signatures":[{"sig":"MEQCIDXztbfy7IxRtLXW9qda/872hO3Rwlzf/zoNX6/sYtkPAiAZne+98ywc5tBt+X3avbyjzJTz6wPm3LhaN7pxJrx2kA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22555,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmawiCRA9TVsSAnZWagAA6O4QAIkTZw6+HI9d8tHupFHj\nM2D2uf3q4EAEwAQtefLYq/pXm1HY7SkDqsiyGRAOjLlpZSXYDvtKLgJKOEjI\nqzrMh/7Knvwx9/od28wELCyGxxL5+zyY3WNvRRakBV5mAetW+GvOz2F7eWpk\nZ30/2U5vAEWEHK1lO5C92GevHQj4sdDL7EDZhYcR6rFupSf1x5Z7El2NgbUw\nq+gpZKcpjNbinXPJ7Lx7yjIL3guE4tn83mTqVPwJ78c6fo8H6n1qtOmXbH9M\nLkcxgBFr1JeeucMva7pGUlhgSbnpqsr3EvA9g0Jb0HtxZkvU5X4o5/KFowTA\ni7CUgZz2Y2AT41aHv29AjxuzFjL0zEtSrn+kC3G/mG6IuqxjanoAUai3XZ+z\nsvWmAsqHvgg7l9+08oQvoEc6SWKdUsi80INY4tfIL5rb63jI/rLeMheqIKID\nu1nqSc3VBr6tIkGPS4SK3JlP+et5wp5Qt1a4kXW1+igv31vo9MjnztvmP8mi\nBwyUu0igJj30F7k+2Vd1qCgwYDuKg+QVaawD/fYMXKmCfb+S0VYr17DKufc0\nvyAB5smzXOrsuB5B/SfvS/JdRAXsIJIu2BZmhqG9+HayzRqEvIL7PdvqQ2hr\n5JXchsXanXpqajNp82S1RJnR6ED3uGqK1ZjuyFUWyQMxwv0+2LxMHnvfKBAr\niXDU\r\n=FxHo\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"3c29cfc65a597598e2a8e1841ef1af72450500dc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.957cc3bf5.0","@material/theme":"12.0.0-canary.957cc3bf5.0","@material/feature-targeting":"12.0.0-canary.957cc3bf5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.957cc3bf5.0_1620683809932_0.07582953245949886","host":"s3://npm-registry-packages"}},"12.0.0-canary.88a33cd70.0":{"name":"@material/shape","version":"12.0.0-canary.88a33cd70.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.88a33cd70.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bbb23e52cece523b4480f542b9f1f081fea842ba","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.88a33cd70.0.tgz","fileCount":14,"integrity":"sha512-74T1NaxlNPhjIasyv7zAVflRHIdIfD+VyqOFiCfo31r3yvJPhbSi9ejJnSLY0sEKlSoxTDC3vSgTOIjcdauDag==","signatures":[{"sig":"MEUCIQC1/cRJ6B+88/GpswC6SBPTz1s88H7dvQw11ohKBgL5fAIgIZyGFo5NUNvKXqsmlpvZJPkA65mZav0ZFavk4vt1fyY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22555,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmcsbCRA9TVsSAnZWagAATA0QAI+mYjHxLrj3uNvfSY2w\n38r2SNVqstlO5TjgwBMpZfPYDIikYTvNYtlP3D2IENElPRTyW83pXaMRkeVQ\nhB+h3zW04oXfZEY9lMOZCPIGhwg/Y5e8vtdhjlP1yM5WSr5V166fJg0oC3mi\nPHJfhlAFO48HDsP7BYBC2vIVDRuiNqNVLaCfDtrb8yzA2NR+jFcYpb8oujea\nvU8UzA6oQykQAzTge9juqsLvBvAakDY4wG0cGi0u2Wg11i+V+8eeUGnP8dKL\nyh4svonskfspISULQV1yBnH2tdU9P8XrI29gM4lLqZnXEsotHnP7klUov0dB\nqz1hEQwV7LomGfghM/eNbu+p5u8I58jgB1A0zryl4mpkKe0WV30PA9zqYkCL\nOtGoux0QdO3NS9ooLFJ5ACh+ga8TyfrjCT2w7teFNJsttPHTcFTAH6SaIdyX\nD2pcbJpum2bZSM0sIWwKIv6jNFRSreqZ7uFb+Eq5nH3c8uvCMvetr7D38F56\n18y/JU65CaLniKPXb64sq9J+S2tjt9eRB2dHgfo+Df8Ksd2JDfWvdbf+xNKM\nX43ynJ8BTqEVoHzfMCL+iKU/85+/y/rk24kXOIQtWKD1m8NJuHMBqlnT59cc\n3lGv+XGHbjbANfqynY1W2wNIy7ylGaQcmI8C9PPaTnPoWiRP0e/6lXR7/Er8\n2nm8\r\n=z36C\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"f1d341efc173e89bd2770326eaeb1fbc581c9648","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.88a33cd70.0","@material/theme":"12.0.0-canary.88a33cd70.0","@material/feature-targeting":"12.0.0-canary.88a33cd70.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.88a33cd70.0_1620691739193_0.81432035423407","host":"s3://npm-registry-packages"}},"12.0.0-canary.d20dc6dba.0":{"name":"@material/shape","version":"12.0.0-canary.d20dc6dba.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.d20dc6dba.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b2386834138456a883ff89d762eaf2568665fb5c","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.d20dc6dba.0.tgz","fileCount":14,"integrity":"sha512-eyFug8KZG29bFBAor/21jS/mhCkShH/YWsXBuvI211TKOjUd2bMPLC+T/ez2xf0FD5M7wor0uoImI/Wk+C4Xtw==","signatures":[{"sig":"MEQCIAqegOUfNfsLFLUpXLAxynOOYbTxEcCS/JoJ+E6bOW+1AiAiYy38YlviyNScwSdDNs7ULbw0050RzN81bmGEy8yPQQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22555,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmc6+CRA9TVsSAnZWagAAticQAISEq6DWsug81DHxzflQ\nZiiIxODpWXoMmSkYIVasEfo2sbtAwOJ1+lbxdr66ltHT2FG9ps4nlTooUmmU\nbOXyEPjAHo/9KpQJoBmDf5BdwJGzFSOKayAVF1aU7NvLdduvnDfmPz76sRMv\nqMBv6AaGht8FJ2kqcE8S5o2vkr4lAwproTFtYdan1YbMarBh04FliSitrHbx\nBLvUDw64XKLwgEK/cRx/6DArVxxtcWunOb3JBJ9DwkxxGKH2gc9BQXesQCMN\nutywMvoTGj8/BKt7vcujPlwEK2vApYtKPKjpoDCAZswJjf8NpUkgsQJhCOOl\n6mQBvbhXr3HbWJ4+2ZGr0ThRrl+8V91x16+Yx2GKNEyEA16vp19uwenEzONq\nj3hRm7PkvPGDB+sO1qYW3Jtf3GQ/cNKqqwRx5Qd7DQymoxogHPUrq+VS0f0X\niSvzU+XPELoxs3MEa+63cGAHim+3NSvicar+NHIwyt+Df52IuwVvOmcbHyqD\nvZTEt0ErbwNOtkMYKP2uQ1I4r7znZPn24DEf/USo5AnDBUZjsOk8rWzoQGrV\njcXgu7j6Ba85CpNpWgBfdmNdA+C/NFkA/Y9fUVKtTJB/oVkJzJe5cPgvQc9Q\nAKZKbmcLVfCnFd3sxhaeQDcxHCpwbOJ+yJu4xtCFS2ZUX1NJYMO4qpPvDlks\n+Prz\r\n=+zmX\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"f2980d3f7fbbd8d2e3b824a765f7fb03096bf11a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.d20dc6dba.0","@material/theme":"12.0.0-canary.d20dc6dba.0","@material/feature-targeting":"12.0.0-canary.d20dc6dba.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.d20dc6dba.0_1620692670041_0.7966488596091985","host":"s3://npm-registry-packages"}},"12.0.0-canary.0ce2fdb02.0":{"name":"@material/shape","version":"12.0.0-canary.0ce2fdb02.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.0ce2fdb02.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d3857a4c7601a5910a8dd6eed4d6720e059fca67","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.0ce2fdb02.0.tgz","fileCount":14,"integrity":"sha512-CDuEMp6O88zLMuuzo3QYQ1YMZUljZs83f4/8rd4PPU0NcHpjjj96+yOYurZiTWVxgnn+eezZDkoVFFRKEtWXIg==","signatures":[{"sig":"MEQCIGGb05/Xasq6YMXrhXQv0kmrRY625xT7nS75IwrQrN0mAiAHtbDYj6eoTtOBCjRw+krL8TpkLI/KdmtD5MUsyPJE0Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22732,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmda/CRA9TVsSAnZWagAArD0P/0KM8yDg1+DULSgZ8/uj\nD+jGMVJC2jca1/10yLuHm74CjJ08H+ae/nWSeBkuGgr7b02RfyNi6VQ/Y0SZ\ngz78H86Zj6lBkhrAAx0udAfZM2G6UurZR8OW6ur752c2kny31G4AUrIq3zxZ\nt1CEn7OBPxLFHfL4iFnhBR/ULH0RQ1dSWJDCkWOTKNDmJBTcUiy1KBZfKCsI\nA2YFN/mSpPdJerWXY/5BjZPOMC5V9yWO89goSvXs48JQZrFztLGKUNfjHltD\nzX9DryU7xDZu3D3oAqas+Lz/abLIR6oCXOlL1rFewwKQxcEnj1akDhJHBkTt\nuQyaXARoPvDfQs1u2PtdZB3JOe3DbVEJ1HdI5C+rKmmCfiIbw0IUYizxg8t1\n0MxAmSTefMlNPhiPsnNGWlbEbiM6gkdbDXcxP42EyCo1Bhhdgo4ihVXx5qmA\nJGXXvRXz8txqUQ34b45TcdeFs9b2Q4Yem+4NusXR1dRqwg0s31HB1GNPMmkH\njvZMzOvKPU936vDJSNmmJOGfzUw33hN8Oik0JMwsarz+z+TkMfzdKSqCWWSL\nLknbfzsrnOIER6c6cXNCQImZ+MmvNJvhkSKfNhFyO4rydJ7LpuGLIFFjkb1r\nlwB0pOfujkhlE9qZv1f2raA7elBkyoUswjV622sAe6HS5k63anFMfm7oUdxF\nRlHV\r\n=WUck\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"ee2139d87a1d755a50dc6bf0a6dd53a2f39548f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.0ce2fdb02.0","@material/theme":"12.0.0-canary.0ce2fdb02.0","@material/feature-targeting":"12.0.0-canary.0ce2fdb02.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.0ce2fdb02.0_1620694718991_0.832630122679761","host":"s3://npm-registry-packages"}},"12.0.0-canary.cb162da37.0":{"name":"@material/shape","version":"12.0.0-canary.cb162da37.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.cb162da37.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"552c6c4c9122d3ed6d8f0b410ee252fa58e31f0b","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.cb162da37.0.tgz","fileCount":14,"integrity":"sha512-OzKrnS3C9ZDBJ2ET9Ujw1rRC8OAvksYyr8c9QV7a/Ub1EkI+PJiG6TZghNUbktqiYslP94W5TQGE/WSExaVLaA==","signatures":[{"sig":"MEUCIDtDn+v9Qs9pMT10T8T6DRcnRiiyCehrBaeuBPoAhcaaAiEAhNdHLc525RGi6OU5ZCmy9SjkrJVXp7G+j3Uwx8mjjT0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22732,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmeTFCRA9TVsSAnZWagAAU94P/iIKcYR4e+JFHfqEzc7g\neSV9Ktey6EtQa5zwIyQjJjHj8lUOL4H/YOHnihaKiKO9cXuww8e2VfjIF/fH\nzN/8ggSYB5PWclJ3LaPXru4H+FprBmgcLsJzi1y5V2NFZmkBDu/hlHtW8MaG\n2T/E39nwcA6kuP/tAX83l8xJ+OTQLBTS6VAXNhN7o10bbgcwiuy1XHzqTDM1\n8AIWmCoqOQySR0w9W+cbTPt9h0M2LsHwkiObbVYFthjW38RxTXFwPogF2Y0u\nQrfEYC6xJiOQDL75HythgGkv5ljnN4lFqstX/FQ7kbNVglTqcVQQtCVz0lU4\nonNc76XIVZMCJYyrnyqwfwrj4Ka4b5sEoaHuSbuvsIOGpJGSR6AJBdytCSWh\nBuOz17EUsuf8FEoLrPsRkr+hVVkViCWeEgMiQ58rzj0xcD5eEIub1Tw4cecA\naKbt9Q3szO4tZsLFgaj3UKnJRKAPyvBAAViU8aC0jOYMkas1srZzsR8hUJMi\nZgGN4j9RrwCy7oldQbjCmtp/Wz+LJP284nZqM7WEHCqEfmynytpltFRUrqya\nZRZnUvltUxyUt7olvCqCHniIVsIc534RhGKMiCu0rTTls5jo0+DrBOBvpW5+\ndviS2Du4jo8K7zgfXWztTLQkGM988yAqPvr5iDGckQELq2vwll37AI0Vvtx1\n5rPe\r\n=5CeG\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"9858adcc9ed7b1111dde19951ba96847bad0beac","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.cb162da37.0","@material/theme":"12.0.0-canary.cb162da37.0","@material/feature-targeting":"12.0.0-canary.cb162da37.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.cb162da37.0_1620698309442_0.9849036513083387","host":"s3://npm-registry-packages"}},"12.0.0-canary.573dc7ffd.0":{"name":"@material/shape","version":"12.0.0-canary.573dc7ffd.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.573dc7ffd.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1cf52f3b068ff90388b09ce31377cfe970a5f9fc","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.573dc7ffd.0.tgz","fileCount":14,"integrity":"sha512-Rip09vnx52RR7v8EU91t+Kg9t1+gZQ3rTfaHa5jLxxj+D8x9/Av6ZYeAdSsr9Vp7BYuCqH5hhlmlinEd0xcLmA==","signatures":[{"sig":"MEYCIQCwXIjWXAHL3blsRYcwEQZZozgk0++D6NDmlTrgR+UGrwIhAJBo0A2bI7gl+Y6+KvZ0qHATPLpq69oh+4o6k2cDge4y","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22732,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmekxCRA9TVsSAnZWagAA1ecP/RHIqYtcuq/B8APkAgsu\nuw7Zilql+EstJSHhy60xwbntPnFOkVCzO3zkHrSVvKQNXKxV7v70fx6XpgyY\nz8jOoetxmJxXgqywW3DYFsTYjHnzE/1qv1/xHU5RhLxBE5ao3tXeWShH2IZ0\nhqDNd9fU3Zy4v8HBTtxp5eZH7Y2uvJQ8hQGnJW4U1xkHXKEdQDi/l3wKdfNd\nyVB9WCC/qEH9jUdb0mSzq2EynI6ifM5VR0ZQOwAyjyoOUiobN6eDcDm9LdI0\nGRySvyxcbxGJV0K/hb4Ko5/Ub5Gt1H9w3o+rkGMc/8lbXrx1xycSKsbCupqW\nf8B0OkJd6ACBspdvREs+YasRoXZbxtOjWCILg1XhH3TItlIWPpZj5/415RYD\nuccznidLWf6ydqtvDfDWdPIs2f/ynmmvEUL/EhFshcuL525OLybrSHmi+3qE\nsN5fKvugo7uQZ+RYoczSUDcZSvBi4UEozCZba6mLlyMWfP+9a3rP7sEHL3Rb\nRx+w6g1ka0YnlABahMTrT+3zeHJK+KKXyGPQB4kUSJtl8t5T8RiaCQeUOxX/\nRPC1DBuaSRqwF8ms5ege5tt2hFGdClod5OKp6rVn0ryE91WrwqcdJK30qz/A\nAkgrjlcK8jbbsBXcbeK6F4jDnRIS1mGTw7CLgzXK2Izh42yFUfipPGgxAH7s\nuOJ1\r\n=q5yo\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"67aa299a5066425730ea2e8558f89c111a5ab156","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.573dc7ffd.0","@material/theme":"12.0.0-canary.573dc7ffd.0","@material/feature-targeting":"12.0.0-canary.573dc7ffd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.573dc7ffd.0_1620699440559_0.44847334082348445","host":"s3://npm-registry-packages"}},"12.0.0-canary.d5f6ad3fe.0":{"name":"@material/shape","version":"12.0.0-canary.d5f6ad3fe.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.d5f6ad3fe.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8c7d4710827c4dd1066bbd11f5fc0427c12d220d","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.d5f6ad3fe.0.tgz","fileCount":14,"integrity":"sha512-4bHtO3KUutStbcbY6qPst4UYABxtdBlwv9dLDkftsgtviB5/7ZS9L+Ihwz9rssCl6UH7QwWnQXJ/jEm8qXCUGQ==","signatures":[{"sig":"MEYCIQCqIHre6j0tPAOzhKahQ9w+tgLiarWU3+Uq+2aaCnFwfAIhAJJ7A1PFhGj59yr6pxc4Vu+t2nFHgYv7PTyCG03918xH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22732,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmxG+CRA9TVsSAnZWagAALVQP/2ukwe2xtZXcE6yjWkSw\nPX4jdghywOTS7g2NsCK0lnbxWyku5rtur9/oFowo1YjHEC3vBvk9Lf9xiH/Q\nYhFio0ibAPx87Qdb6AIcpUFoK3dtZ0ojmLx03fKVQGYanxyauSYef5Ne9fa2\neW/Akgyo7RSp0hkCHqD5IiGDNf6PFA1gS2vsBmBm5eP32UwBcemUousfY4QH\na/8wy9VUSJHY3FYeJ1iGFZv4DFjS5L8LmLmF/ztG2UyZE0YyMBNVhIQqBlAE\nluBGYFq6kPegFYu7IIWJpx72BXIyXT58N+X1K2XvJbvDHJpTpy3PqiZEZEf9\nQ6cEIURKQSHaqMQ7VtakFxeyxTpjgWVhzb7RBGj/yESDpvUjWEwjvi/rfjqX\nEB7AjBV0wkHJUDc5+NsR6chmRqxmDqdoCpGlWkf+CRz+uXuj22C1PRrN/k9w\njZX/Y1kfC/QFr/d5+s3XD8cP2j6s9V+N6YrEq3N6h8wAf/36LGBrg0rw3Hjx\n0w2RETLKyWDNlulQOJemb8xMhqlf+S8zW8g+d2GIWqv1MkCJVV7qYsjX81zE\nD/9kGx+682Wk8WDNRVzcbpP/mqfJAbdjJJywwvi+Tuq+hYeSEFnhofB19zFU\n03FhWDIpkoqkAYDXvoqW6dxNGBixrUiV8IOJEGjBxL13p++rsm+ocHuJJr9M\nNbhV\r\n=+g3Q\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"c0bf85201107dc8a95576c2392f5b1771bb2c969","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.d5f6ad3fe.0","@material/theme":"12.0.0-canary.d5f6ad3fe.0","@material/feature-targeting":"12.0.0-canary.d5f6ad3fe.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.d5f6ad3fe.0_1620775358168_0.37645994615126543","host":"s3://npm-registry-packages"}},"12.0.0-canary.25751d2ed.0":{"name":"@material/shape","version":"12.0.0-canary.25751d2ed.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.25751d2ed.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ba319c84c179f41b4671b45f30662d37871f0d4b","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.25751d2ed.0.tgz","fileCount":14,"integrity":"sha512-Chhl2fFbRxYs9BJ9RHqkLDeEL+AFa3lPe62oCBXQ820TiovMfZi2jCgth8FFV5LaM3Vfyg0wdlgs8/QhOsFp4Q==","signatures":[{"sig":"MEUCIQDf+rCQXU+Rwu7n8e43BPWTotcXg7L58M4117IzwY+i0AIgA9tQaWYxL8/CbrHgEYUkCCoo+KlIT+qYr3xmsJLjvRo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22732,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnAAnCRA9TVsSAnZWagAA4ucP/2XsoOOpvx9IJs7T5rew\ncDjy/8xs843evThmDpVCENU0WZTkmBvVz5biH3VGcoSgYTEn6NIDLaFXklN5\nRBYgvxSeuTJSrpap8O5oTi0ZC6Iiuu0I3PQJpmgUYaHMonjtG1RXXlNSjFZ0\naNnema8egg7UiSDMJ0BFuT4TOxFv7aLZl9H6V3tyUa99HfwvzAAfEqYSUqnb\n/KCVYGDPyC+J/oTIKTyHEm2S/wDfoYUZVC5j5lXuMPw2nZMLjWQbt02mlSFP\n3i/XwzP+DdZ8u5XbceRVb2gO9odTQWlqtV2R3T1nCCYbbD1k4fu5BwNQdWcV\nHM1/I1Y4d7l3kVY1DarfwqIBuIWuu23+1ErWaeN+tO+PiZ4QGit3l+iZVp7U\n0vlF/lXiiqwb6nXgw605yg9AWc0cyQu3OyVlUmZO+1SdQ12nUIBePYTJ8nCK\nEkir5UxHQ0Wga/xet1u/7EJaAuRzIyCTKRWoI1ux166WAW3HbCG8CUvXRMrG\nfWuKQ48L3JMm1ywUu8YWyrnzs9gkeVBBuyJhUE01IXRkqBLSPp1erk5bG26r\nqhOq4uVVo1tiwR9JAJVjb6w932mTOgOQmb7uVE2stuN4s33O9l4NEBypGuq3\nllecN8tY2X8VgYAnj2pDW+rUZ6mUOXwGdfaGhxuIzkv4SISkWPf75vUsA2O6\nB8Bj\r\n=UH19\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"c38dadd226475a1dd91a992667019eefec273bbb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.25751d2ed.0","@material/theme":"12.0.0-canary.25751d2ed.0","@material/feature-targeting":"12.0.0-canary.25751d2ed.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.25751d2ed.0_1620836390954_0.7106461076570956","host":"s3://npm-registry-packages"}},"12.0.0-canary.a23ecb682.0":{"name":"@material/shape","version":"12.0.0-canary.a23ecb682.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.a23ecb682.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0d7da13d18ed895a7c516c809c87517cc6e5cf39","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.a23ecb682.0.tgz","fileCount":14,"integrity":"sha512-B17cRvNdeiYC1lqJyvC0fW5l71nNt5ZDKCY1LiEOL1KRnBBlYX98Ar4UpUasFzmluOrjdfiBtJQmQm7mKXHS7A==","signatures":[{"sig":"MEYCIQCvalQiH6hke5FJ49oJhlK3XFjC9wvysQPUXtuj1bcGbQIhAIoc8VHRXFMAm5lre04d7/THqfM7QHtqLr66Ou83RT31","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22732,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnB0FCRA9TVsSAnZWagAARO4P/2JSqDvI++ejRjdD6Pdo\nUgpJ4GVTfgAWpn5A5p/dv/H2tPN+2KZPchJBf8CRuht3Vg8Ex+p2B+m5n8G2\nYaLfWW6ZUPvKRsb7/HfTo6tv1nxmxOv02SonrElQGT/oeYfNRwoaUVU7uCMc\nADkMzyIEX5iX8GxnJ32A60W0tE66kcti8SBZH42eGC7P+0MN2zRB4fttkQ8N\nWsHPnT+ElrO98a1iTigd8KqojqInJhwTLSnRBGnVwA2infE9pIuKcooH7CWC\nKsV/ejiieakQq4FQsq8yyXWyTI0h8cyY/BF3q6QfpDH9C27T3wH+QDD79qfE\nZZYVRPFYqg64l5aD1e7g/JIqb1pVeK67VKzBCtBjgj12RDaZ8vk4JJ7/8hdP\nkNXyu5qq9cgI0R16zhDeLBDU98YYWZTSbuqIAQRPip6CqJISddkDts3hOYMt\nZFvvVwI941HPXB20e3+/UPzbcDr5vrhxJYWlmm5bEPqvecZXleZgCVXR0Ewr\nbzaCE5ASZ44fOrTb1ypkElONNr6FmaOmOKrhsV+vvlsO2vxcf6zwyQxuNI8C\n2n37aE/4QTt3BRM61i6U77FjOZEOXMEF/iyP8RVaRJvyeA1y9InndSRl/HmZ\nDFNtjOiFmhXU6rVJkEsepk+GYV3P9aN0EBFTO75Vow+HV31V/ecuhVLhwav0\nw+eB\r\n=w0oj\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"da78c3f024a21d0e0df18a30c887082b202d7269","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.a23ecb682.0","@material/theme":"12.0.0-canary.a23ecb682.0","@material/feature-targeting":"12.0.0-canary.a23ecb682.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.a23ecb682.0_1620843780910_0.27514535200578605","host":"s3://npm-registry-packages"}},"12.0.0-canary.33a954852.0":{"name":"@material/shape","version":"12.0.0-canary.33a954852.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.33a954852.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"db341752940f5a7f8fade36d1ae59772dc86b2e7","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.33a954852.0.tgz","fileCount":14,"integrity":"sha512-593Rh0zi20Wy6FyeCF+fN34UQiyyAuAVqmdMr/mbzu8+I/aXDpptXe/HTuy96z0i2HVUcf65YuXIormJnP/WPQ==","signatures":[{"sig":"MEUCIEbkEADsJhl9zpNCCnp3fqNFc//q5bg7usdFQS2VKqdWAiEAnwkA4i4Nyi+bVxP3g5JCshmRqEloc/79PTdbtdXjqXA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22732,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnUDBCRA9TVsSAnZWagAAnhEP/A1JVbt7A1F3gLVoLGsW\n6RfwhGpPyXvL1HVmITzX1Mr97BZEnxGrnaE9bJGt7cclPCz4fNTCYyYXxf0A\n2l8jSaYYSncyi/F2w23pAW68/CF6MZ6IWDNnRiEeWxJyeng2qcZcfOSXvVhR\ndL09BaLUQtcJb7x6qG8ksvJtojMSuiLtmQZAUBXAqOmipu9OihDo/RVV9fTW\nFmaXsqRITe5L2HNqzB5AImqu4rOWiccLg6zWSQ9gl5IyMW0MbeoU7RG06JMe\nf76JkjfBy7+XGrkaIhEB5L9iYCDrvLNTh1cxp85Ov9LgkOr09hj9sRtW5M31\nYXyl3oGW10KdEALu9buAijQmvuBN0oHv+FpafnF8J/ZPx5NqkqoPVDldzU6w\nIKdcMYQnYFTeNYm9PIrYsp98Pj2fc/UDw07xxHrfPMZLofOMUeK1R/xioCfY\nYFMEx7OtZv0WwK5bio76Clh5pJsKCJed3G6+y+slso+N6Jr1iClCQ5v+1nWP\nZbyjgdCWUnO1aoRQj83IGO/CshSafWVKx2jxRClNxbEq73IRXbSxVa/gG8fs\nx12IjPRevasmMHuESDoRO/solUf1Xx78WfiaBwY/MzLP7zLjE1Ula3FU4QSJ\ny6xXz7gsvUP78kcfEdV/JW9ayKd+SQ1LtI55ziTU+qf8lK9MuqzBXIgj6DbH\nkhk1\r\n=d45F\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"703dd5ba6a1225efec74655d3393690dca1922eb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.33a954852.0","@material/theme":"12.0.0-canary.33a954852.0","@material/feature-targeting":"12.0.0-canary.33a954852.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.33a954852.0_1620918465145_0.4376649472611045","host":"s3://npm-registry-packages"}},"12.0.0-canary.a4484849b.0":{"name":"@material/shape","version":"12.0.0-canary.a4484849b.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.a4484849b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"001073751fc3c44e78a9379cd5dd8b7d966e41d4","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.a4484849b.0.tgz","fileCount":14,"integrity":"sha512-hh/+t1tWh58HylhjWhAUxOxJhT/SZEOpbgAGonotpTTyi9FNmf5hE9X+YNqcF3VwQRdpX6IjlPXoItmIVSUisg==","signatures":[{"sig":"MEUCIEECmwKNXQV6NsUstvE9T27EdT+3GOwTuU1jOFN0MDKdAiEArzmo957UmeZ5YZ/yFsFB88NjTfm7QX3AEk3JCa8Ts+g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22732,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnUY2CRA9TVsSAnZWagAAXHMP/1qG2vcsWY6sQU0zZ0Nq\nRYtSTThrFG4gYD/bPvZaAP6xA2iDcrwqUpEDgKCUC5ArDQzuadXJGiL90AWr\n/ba0vfOb0GoUnuKb/ObBAlBVG0FoBJdyC/UiuOYQj5qdmRaBWJpMWr3Y3esn\nAwjvoLAqyvRMc989x+xqWb5fw0FXg68t6J6arjB9YHOrd9bySDGbZ3XD3SlV\nnqEKcttRynpRiUzdbv7BmQZ0lLbl89OUgxhndJUqI4nf4IDHOj1yqSVo7z5M\n34zhroGYZpGfTo8S0J/yhpxJd36ZAH1qrxWR2Zb2FH4OfYkEuyA8CJ/aoZPC\nFYLLzU7y6nIuXbH32UJpHpP4tvwsIDrfIOfJ0Xn7j2+1jJ+H/ZVBUBgULXwu\nqthuAeF6mW81A4lt0WFzNO5NXPTxAAE3vXoFZMN4mN14SKsx45kUw6wDW1wt\nJcbXSdwsKRpWN/tOowj3v2ZGdCgTDOsMMGkmGcfwttfd4ng5ZD/c1lc+cqQ3\n6RnLCEZ8tH/YclvEQwSla79D4MwIB6mDqGacxQvoNFBKuPZxANUyOsuiq6LP\nQIAE12mzkOdOsjgnoEFOb0W7nvxUtINbLC3QaeTphIP05gvK+UYhf22Kx/Dj\nRRC5J3jFgnycuWDr80vvcrNqWtyFzWbCygPfUbuDW/xanTMLZjhHcpKMIdSO\ntAVf\r\n=eBtw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"7908229b1205198ad87858e49ed29ee3836cebfc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.a4484849b.0","@material/theme":"12.0.0-canary.a4484849b.0","@material/feature-targeting":"12.0.0-canary.a4484849b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.a4484849b.0_1620919861828_0.5285503698310297","host":"s3://npm-registry-packages"}},"12.0.0-canary.b4c3f513e.0":{"name":"@material/shape","version":"12.0.0-canary.b4c3f513e.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.b4c3f513e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a4156b93f9564902c1c164979889db125fa23616","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.b4c3f513e.0.tgz","fileCount":14,"integrity":"sha512-FODUujdQwIPiWrKuHg7TiQ8YJdyAWF0MD/xMg1p02qlLPyVFvakSC+ZJTjM4Xz0r9x0+WJw+RbyW3d44TQ2+eA==","signatures":[{"sig":"MEUCIBqgNrYpZU4MNpeNcaEQ7fkQZi/ui+LIKqtCDN6iDW1jAiEAvppGF5kinmhlj7JIvs9qh4cf8ezLTwgA3TIUsTZh06E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22732,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnU7YCRA9TVsSAnZWagAAbAMQAJ4LyiUYXiKImykVIHXS\nVymRL1+SBeBKDuGtPyqbeelU0InbuFLmg3dFiT6Xz3VmasGPx4YkYHwn2FhI\nJE32C59VEKmfye1l19ylRK+oQMPN7t91gfnEJwWC7f3sgrYGD0Eu3Phge31y\n6H4xXA7yqu1oI+BwiZJZ6w405vSIa7xp1Cl7H3Z8Xuqhq2RDjWx6RR2PM4pZ\ny+kckJX8DJ0zc0mma2/1DozY/uIOjP7pvo3bJHcZJDETvqjvJuXKJpnYk9gp\nR+lSECxJSFnqZWn2fN7jR+D7ivsRaNlBQznZuH0w94qDfWX/hZwz0vhgaN44\nRQGX+Hbm47uEQt/a1jdp0FtH1MZWnPlRqo0reoq+n2SyL4lkFJ4VviWUGb3X\nYAHgdkbzOPGfcHg1DqVq+Ltlq7Z8C9909e/4MtF+LuCjwexHHox8unYRtLZC\nc14QEITURUozjB9S72UI/UMeuvYtZD8/17faD++0dluhjO30Su/U29Sts6fG\nG8anyUgdzS0ycLeRFDafH5VwTqEGzqvpK9ZhYx6Ulm2EFOUPF20NtwXAUQi3\nf2qy1chif5sa5dzIEweUcAE7MK73G8Ac7k7wL3AFa7KX2RSSUsm8he8VTcAY\ng7uXhixh78pMPzGJqNn3fWx9Bg4Q7tKVZ510t2wJwy1i4c3RkfJjXC/Urvqi\nyMMc\r\n=z7Jn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"c2183e7caf6f0437e64e41b632f75d33156547ab","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.b4c3f513e.0","@material/theme":"12.0.0-canary.b4c3f513e.0","@material/feature-targeting":"12.0.0-canary.b4c3f513e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.b4c3f513e.0_1620922071917_0.10809307504311261","host":"s3://npm-registry-packages"}},"12.0.0-canary.1a8d06483.0":{"name":"@material/shape","version":"12.0.0-canary.1a8d06483.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.1a8d06483.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9b055b9ec771e5f315b0637606b81718e1f13d34","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.1a8d06483.0.tgz","fileCount":14,"integrity":"sha512-VT/DHUHOkaiZznZmKrjIuo0Rq7PyGaAzZyeN3bdJAHz3UXAYQdBUYUxu/PPwKzoIHHKKdfP7XuGpDEysGiNkDw==","signatures":[{"sig":"MEQCIF/DTuzoKOFHkVTRtiuwU6XYLw58lLDjsQjGcRpMxBWiAiBP/3Dlj3CeUqfbgdqhVJUhtOmKttPH1P/brr5x51706g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22732,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnVA5CRA9TVsSAnZWagAACnQP/3SvMg6uFB5AxczZtDKo\nYGGmXVz4SewVH7KNo/ljEHHkOCmE6F1iwidEzpPMHaec3cJsXIRqxZFSEe6i\nWGdz2wDxeaBzfoXQw4MFqWwzPelYyKvCarP+ZceEVouX/sYAEwyzlAe66nZm\nzyzP+NLoi3z5CbSXzBQTHIKH1MF/YxOEwxmEfoWwW6/WUbhEF1zPUGZzgBQI\n+JJ3Eey9Jqa4TZQNjmE7/UeDYrTLSKJWhOz0mtah4yGJJNus/6L/vsH0ePne\nknDQ+7Qs2xOkKrOrjnel43RqYGj1LUs8b617zlvBk/7aPx7vWYcsxT2a9NsB\nUdHGRtP13QvousCO7LpFWcVItgt9GH/IDAjpRW9lqTm9405WqgeGGtqDeBMl\n6reCiuzj9xNaU8h3fRQgjDYVh0hnqlt8iEzqxf/3TvUQ0wzvGyKZ4smnaofI\nvTwf7YWdDoirGEebbioK/T7wvCbUNHS1sMM82/35IKi1aetGKPoyW6RDqeXw\njt20LHftbFNnGjVnTK74qYBseF4SVY7uW5qYWm2z7V02XqxgaMgvdg26RyJu\na03oxKouGdN7lknGYZNjPEBu+BqMjxFxkPc2Kdp71aw1ad9sVAips4TwzP+1\nMFaCbeSLkhlG6bbryyACYnkg0KASyLdAyyZgzzCvI1nCNVzEGLRdF7CZawWj\nD3la\r\n=gfk/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"4fd7ff5259e7910dd76488a7faab45af839a13b2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.1a8d06483.0","@material/theme":"12.0.0-canary.1a8d06483.0","@material/feature-targeting":"12.0.0-canary.1a8d06483.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.1a8d06483.0_1620922424407_0.9753477763469569","host":"s3://npm-registry-packages"}},"12.0.0-canary.8e6081836.0":{"name":"@material/shape","version":"12.0.0-canary.8e6081836.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.8e6081836.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b219cb4e2fc463adcb9572ee79838133b048fef4","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.8e6081836.0.tgz","fileCount":14,"integrity":"sha512-PsHoa4efywt0QZO8EH9Uw2INmGRGeAANcNiam6SFBcr7wlFhUIo62TOs8S2dBwF9Z+t7zwuS/gNpaAA/gzianQ==","signatures":[{"sig":"MEUCIQCVHY563IEYP5O1Kd9vG6bZ+eJUZ2v2cOvrPrSsCQO5ewIgYTJRFZIv66Sy81JZbhUcTM0i+y/hgU2ssh1EIUiZPQU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22732,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnu5bCRA9TVsSAnZWagAAns4QAJoRcJsF3vlOLyDDW7BV\nBLUoODV7YMsvv19sp0ePYF3hA2REpsM/CNrQzEGpHAeaoVwoc8HWM7qnEVsi\nu8ewhue5HkpDx2jbDhOup9OjqiuW+L4tkBYxs53KrdIjqGu4PXA2NeurdqgG\n4VBhNmEC9VsQV1vb4kMd/QV6hoOny+1iC+m069FaWErhIgTW5CKqTO2FNejl\nuC1oSrTm3+O4NInQyXxFwKGS2toEPY55a0lRZmEsLR1lZ0HJJOLe+lc0YFd/\nTwggNSec8HTAFdIsMouzGl6OsgyPn1K8ErHBo6cjdkyHvZiyBEasdNx2qn2v\nBi+fsZ3c/pnT/NpK7AisD5zAzgTf4lNf0VmnJTrc8gS8HpVpIv8QLdQHYYjK\n2w+zBCjSO1Mt4690G6hmM2EBQx24Ydm3NKNeauHPgSSbEaK7jqAI0mDClCOZ\n3rqVd0hC16I3j3IIXaD1MtjXV689RVjQPnRMMp7pcYCvrytkj50dhavQE3Il\nZarktK+vs3XqwtXYhohGTHGGvhg9GJ0D1GgMJHp84d/REUIbKcDyKFg5/bjU\nP5OrL8raJePVq2+E0Z9Cz22E21aWeu4yeGRFkOQHIJnJdimDT01xgd6N16Se\n9vf6pb6CkUxrUuBKy4t6DkyNVHqMVjxh5vSlX5EjV54W3S2B3YaNdLiaWOzj\nYnJh\r\n=M7wN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"e648805eb34c990054d503fd3f70ed25e40d6d9d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.8e6081836.0","@material/theme":"12.0.0-canary.8e6081836.0","@material/feature-targeting":"12.0.0-canary.8e6081836.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.8e6081836.0_1621028442709_0.00040714297178778835","host":"s3://npm-registry-packages"}},"12.0.0-canary.a2b0f4cee.0":{"name":"@material/shape","version":"12.0.0-canary.a2b0f4cee.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.a2b0f4cee.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"78c1581b69ee05c38775edfa8fa67838fafb8181","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.a2b0f4cee.0.tgz","fileCount":14,"integrity":"sha512-02HYIfQRostxU4rGygaj/nVDJZ9G5FgVVCyZTEUicMYAEVwICWTMi89ry2BFoZLsWIjACvMg9QzauySxu/ITKA==","signatures":[{"sig":"MEUCIQDa4X/S0412dYsPs5qlk7HcFRNPL9RKlBPLvlTncVWfcwIgUiRTQLzw0xHaxHrVMe9FTjzpvdMOR1Olh+VxTlMEdK8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22732,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnvFzCRA9TVsSAnZWagAAr1UP/2FX/9/l/1RcPMzUbQp0\nRLAP6wypzbbIWEautqVZgB1xZaftzNzix0IU3IGZpN+j7mDvYQD7BQJouabx\nx9ek31stEa4o4eUk8gFzyVvH8mlw0aCVNLLHNEo2FPyMEK+vaIpTFaF3qzdT\nPRxqmbmCGDe5rw355klrMrDecP85GKdl9g0w6AxuOzPl7fnquOmRMpcLZxZH\nDAy6sbmrLjyx9xULAg9jrBLRT3bnkC3aqjLPhItBLL2/LdYZwpfzVDaOWaE0\nW9KffU3a54b/ti5cfmVcIV3yG6kG5Eurn7fy5NCr2FWM1o+duiyMR2kPAg0g\nNkWiyAQj1XwY7riS+G9+a2s0HMuNuEPfHd6x942uV5w/PNO4WvQoDeeUZHr1\nO85+VBJJV6Yny4u+0KRcErcRNCMZnMgnThZ5+wR1IGznmOJtDvQL/CFVsL4N\nVRvA+ZGhi4vEpvnDiSZsCxiI4eGyGw5kAC+7zlsxziYRF0iWa7/rSjLVHD9u\nZIBUJn8xH30d4GNANSxKphRG7iz6oMnQ0bPpSqxde0zKH2XOqJUjXzgJATJf\nVdyqGtoT9QRlKWhnP8z+i7cCND2uA/xNr/xDbyolwfYwzqsqw/UIIkC1g5bt\nEYX67EB1GHPM5lwUosxitdgaxtRsKpDQrfXbAEenvSdc9SFapFELIPWy0RNJ\nvZ6K\r\n=qFNg\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"67c2d3cef073a380a13ddb6bbbfc90886c7af364","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.a2b0f4cee.0","@material/theme":"12.0.0-canary.a2b0f4cee.0","@material/feature-targeting":"12.0.0-canary.a2b0f4cee.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.a2b0f4cee.0_1621029235129_0.9030230727479398","host":"s3://npm-registry-packages"}},"12.0.0-canary.e8e39ad19.0":{"name":"@material/shape","version":"12.0.0-canary.e8e39ad19.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.e8e39ad19.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0420a81970327443379b6eb4796a680024695d47","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.e8e39ad19.0.tgz","fileCount":14,"integrity":"sha512-1yftS1RgKYekndF3vg00SQtwRh3OHUu+UTO5DimOXs9gGtK7tGHF83ZAmG9gk6mCI647TN3YyD4zpS7W+TAQyQ==","signatures":[{"sig":"MEUCIQCzTcKBZlgWX64pZFAo4Bw9g6vGC1wXasBNay0jeaR6KwIgeS8RYrBaZ+7WjoLQ7153XgjdaBo19GZNRMVslclFSds=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22732,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpB/aCRA9TVsSAnZWagAAokcP/3tOzCM6jA5Vsr3YqXkm\ntirPFdl4XHikLvs93n7x7GiIdb0QXkHRhWyHD+2FewTf9cYYzHfW8cQpQMpj\np6lpj1YCfPaTEuVy1JWmbJvSxHL4DWtnY5PM5Gsk3WGM8F9NZ4pFiWGS+A+C\n9X2aHsXmTDOMXEHOjmWdP32YcJ82X5Nt9eZqe5K9N5y2TpQcBsT/etXH72RZ\nB6Qdd1gqYzKRKhZW2B1OQa5Fq/tC+EnZ5O35WVorK4TFgBNncbbvR4iOEw17\nrCkmdAJ5KVti0sED71p5sDXg75vKo2zixzJp1Ehks1ZqQzA+lTmsMgO5bvv/\nbU8KDgaZ7D3y8lsyJz8wNTsKxzIG+W2ju5Zwtx/KYf5m1FGktyJ4mk6J68fQ\n1EgxKvOuJFl68JH+uCaX0C3c7Pl2xzmT/gJswfTf1a6yMfp7Uu5n2d0w+Qfj\nF7Ir7WClIELrfiUcnnqtdeMK4OuGWU+LbdSKMagHPDqBzeRpAgGJDt1K5Vmy\nlID1zPZFbd0oRmHyjuBQbEPquwioqu4sy13pa+c0id1mhTEGDIvnUEE2mb6e\nS6wwRvf+3KG9opMfYJouCRSviu89/7QM63uMrh49Thgt+p6YWPms7azp9xl7\nKNtNDL5vwHGSgNf6QXWVbXbeGA+AGo8oWtq5dSLAFbUgB8sWNUA6btTUJVlN\n/TeU\r\n=7KjK\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"2bde63cf3be6363eb1508c4d7e1747acfc51a761","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.e8e39ad19.0","@material/theme":"12.0.0-canary.e8e39ad19.0","@material/feature-targeting":"12.0.0-canary.e8e39ad19.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.e8e39ad19.0_1621368793560_0.9874710490383511","host":"s3://npm-registry-packages"}},"12.0.0-canary.4bb5eea2b.0":{"name":"@material/shape","version":"12.0.0-canary.4bb5eea2b.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.4bb5eea2b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"85ee8b3e4ce68e48b90f5ef2adb1026fb6b0effe","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.4bb5eea2b.0.tgz","fileCount":14,"integrity":"sha512-1hzdz2BuatvpY5+cghvwx8MC2x64wUO+TiOAL0zKQ2qlOOHsHtxGoR0VKMD2iFre9JGTm6JuSWZlWGEQqIonRQ==","signatures":[{"sig":"MEQCIE6K+IBtLn/lZ4isQwxvE1KESMlTmGRRHfpu88AFPA1SAiA8UZ2Q50mAJzVDbbUVhnBakXbYyNKl42l03vW+HvTi/A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22732,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpS6WCRA9TVsSAnZWagAA0rAQAJ9OzlT8YGSecgum4Aai\nOfzDfwH36j9z6KtkyLLhscEGnNazp4I/YfM/PsA0w0okP9r94wntIQd0ApHb\ngjG3hwEOvcz/8yjGUyGx63cMEV40jLT36BtNRDtwxpU3wyi0d98JpBc7AVg1\nNg1A2N6FyzO5gUbhvJZrT2jDtidM4TiFi42dSXuML+zdLr26sr6zy2Wlxgc6\n2A9j5InRiYXCL3OYeAsjvY6wfNGv/DI5kdt3MVK3kwE9YZU7MCLMLgNSQ2mA\no64RWwm1LAPvFUadSCRCcehrIZxOLFEI9WY+nzTsHmAiXyX56KMYAcswW7qf\n6kEdtXyL0/SKQgM3eb2qpxBRXuUQlhfvv84LpHwPOlXgViDu+vLX4noIDmlh\nV8LXUzfuh4oG4HxM073gwvTgAE35kH9kAuT3YlMWW2/4XBQYuKw4UeWozaBe\nQEOF+7SinswV/CsuI99KScLEopSYYj6B0byMq4Lt0oRQRfNqNWH/P4fcx77Q\nIulS3EFcs5Z7sCim01q/YD0e2QcaADP5KyCydbP2SEYf8kCHBgnJhhVge0NM\nBwYaJFGRLPP0ODNGKZixCmHtgRAYBSzykVPc5Sr2qxkNsn51n+O0SilVZudK\nr2d5AviklDmw6GaYwHnJyOK7HlHEqFddj6ohTjweQJ4SecsBKtYmS7eeG4f0\n8B/O\r\n=PiEt\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"9abe3ad555ba3e9ca70f37ff3419acc2edb56676","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.4bb5eea2b.0","@material/theme":"12.0.0-canary.4bb5eea2b.0","@material/feature-targeting":"12.0.0-canary.4bb5eea2b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.4bb5eea2b.0_1621438101922_0.5816713662375543","host":"s3://npm-registry-packages"}},"12.0.0-canary.ccce99cd6.0":{"name":"@material/shape","version":"12.0.0-canary.ccce99cd6.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.ccce99cd6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3892f1687619c68de99a3f4939d9869eb7f693e8","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.ccce99cd6.0.tgz","fileCount":14,"integrity":"sha512-A+HRTOyIZRl2/tCECzigTHqk1wT/RpSE0gsQKUZUoxWM6BJNXYlNNib8fhdk0o8RLBWXia4MGTI2qOI5j7OU1Q==","signatures":[{"sig":"MEQCIHUduIKvGQSeWCK7+dh2YjsEdUYcTZFFmzE22S0bK4R4AiB1pOt2wGqcvCnmy9TaIwXA/WFhr8RcZ9B90pPmWnv9AQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22732,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpbPVCRA9TVsSAnZWagAAl6IP/jm7HSGcLR76mN9wAbRm\nBhOLBukd+tU5sJcoU3gv3xkbOgxznADAFC5CkvK4Xi6wGFuVZrwqhp88Pep2\ncKLfcqgQA4+bC6a8QS+jwtnxtDH7B478QCNa/fBlVANTqd9g/I7LhgYtMoJk\nAwfh3FI/k3LlEPd/sM9ZgPLl3rwlzuW0L6cwyA6C+hmA8YTqYEKjfzgOi+nf\nzQh1LnfsXYrDkgW8wVSzq3hwa0qZ2N3Sqf45pwpArBRY/jZmr1tNT9Qp9MFe\nfxRkTgq+khtr0cbiCGQVBVpX3OK21xUaISfqQctc4uWc9p/qktIsHJoxuG4s\npTyu0p+cc49ct3HYoAenSN8q9PAAAp49wpLH/zFyKAq+Q2Fdb7HEblm9t7Vr\nKupwxYxOrthlXp+HcMs5E14OaPHeIgAFg/iwzWz7WJ8EF1eCIod60hqzdfLo\nWf0bGZ+V6B++LXkX85DdJmlyfWSQ2hn0F6LnSJLb9duA8AqdYIsG28PHk1yD\n+tXkLWQrWdcmjss9suLt5pNsdnaJBEYqgYf2lA5RuU3exh5jWuf/si0GMKdb\n3cdbZJzAkeLjuy3QfmqdMASKCkUZXx4N4clr5WohD//dt2/vlXNLpD+9tkY/\nCTpfgodRMPlCTH0iQsKLvKgXZA7JM7e1/QkANp9YU6FgRXODDZpgaLUIK+cD\n4Xh5\r\n=ma5P\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"5d475a1522350d9dadb5fe3597683fa7f4851b83","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.ccce99cd6.0","@material/theme":"12.0.0-canary.ccce99cd6.0","@material/feature-targeting":"12.0.0-canary.ccce99cd6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.ccce99cd6.0_1621472213222_0.3776011861886541","host":"s3://npm-registry-packages"}},"12.0.0-canary.14767a8db.0":{"name":"@material/shape","version":"12.0.0-canary.14767a8db.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.14767a8db.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"95c1028971a04c720ddec5dcf166295f57d16a9d","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.14767a8db.0.tgz","fileCount":14,"integrity":"sha512-w4Sjx57AcffQ81L38HjI+jqX8gXeXseRuw96SzNZGNRMhD6BSjeIFxYFiM1LtElwdxhG2/LGj6nb5k8zyhrADg==","signatures":[{"sig":"MEQCICeoh/leHIVFQCNhoGedaJtSI2/AdFIf/U2wjMNTsByvAiAhNeeUCKFEBTbzoujpE9cazPUmF3QHpXvkSmFAv1b5Sw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22732,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpsurCRA9TVsSAnZWagAA5McP/2+4CKTH5/UMC3eskT+p\nY+SryTGYVOGot4dGMwZrVHHJ6vbddrmOQltfiGTKyDhMgexw/etRYFhuS9SQ\n+DHqjrVxa8mtaWkhXHq/XGCmn8xB5Xdt55lhYCrF3jQ6U9YAXNQomtw3Zisw\nBs5biBBtgW5wHez6qDUN0Pmn+jAk2punEKx49siEmqFZya8ZX7Z5RruC6MBf\nHWHB4+mniQjO7OrqDfGDFY9UdfsB2ek6A6YI1dWaDz4ADhyC2S8HsZ/IuRdT\nniO3Bcf4fJbfeM7j0Lkkm19POYBDgxFL/8Y6tlw3gX6NWd1smwrP95f0lfR6\npkz5fKvyHmRPV0FepFzTU/1QRx/ZQKZePOPnHqLZ2XhAwT8tjn0RKAqOjinR\newEkQ903bDdlyJQYgLkuDVXP126lairGZAkJaVTCGmS92lB3Ou3pm0Zml2Ad\npVqzZX0sApQ0eQA6tY9dlmTRs708vt3MqkgATAnf2lQkNE7itAZJ9aTyfLCl\nPfRMgqkHwgh6YgWUaxFLkh/llpSBD8WHr6oUd6ivcTROgQO4O3rsdRoCvlAD\nCDrUQbUkgLgfzCIW47rNT0fuMglNpkdlgMsJk0AU5EXeuq8jG72VoitXHKzx\nLWKejcRdKkLxanw2w6Pekd1WVuWKTBpNTyfEU6DUDI8BrgD9flIrOMEygOyC\n+wdA\r\n=WPro\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"a324b91ce28769039998a00879c6f441cb1159b6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.14767a8db.0","@material/theme":"12.0.0-canary.14767a8db.0","@material/feature-targeting":"12.0.0-canary.14767a8db.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.14767a8db.0_1621543851401_0.1639191530981816","host":"s3://npm-registry-packages"}},"12.0.0-canary.22c6dcff9.0":{"name":"@material/shape","version":"12.0.0-canary.22c6dcff9.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.22c6dcff9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dfc30a4c07e38c9ea9687aefc7efa083189a8996","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.22c6dcff9.0.tgz","fileCount":14,"integrity":"sha512-q6HSDvwYyx4bId2C1XqGjAMcXuuYNQzll3sRJ3bgBVmp6rBIP3QGGxHwpv7Kc0b2QsUW8oiZ89YWiAHD3i3oVg==","signatures":[{"sig":"MEUCIQD7YzKQ8mSiWvR3RvVT3GXGf3BYW1cVPbDnWBTi9OVJRQIgL8cYe1n9jsHOod/BYv2anRPtFV7++LH0nmN70NlHYxU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22732,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgq8PQCRA9TVsSAnZWagAAUNAP/jK83iWQ2f6qeDVDFm7a\nJJrXoFBqEEG70+w4TsnCZ9hpITHGS2wTRDhkCs+hmxw1vKlSTNLHoxhhibUs\n7jAmTZ8yfsKMfSaJ9wpII8rBHlI6gOVw3e1YjdB4jsk0pk7rjT34B4kNjoKI\nOX73ebkS8wrC4jtqsdfRF1+b6UkYsW2aeJgKix4aLZFHzrfgRBAuH180XpKl\n3QvSYb32SyyiKqhvrZYj28IakqxBaW0wQnSmPmYKUWWwm++OwTnsU/xf/t1i\nvHccNDDnJGtP81uzl4ZdcxDByGsuiWTWD2hdFpxSk6FFDYFhLOZiscdXiFWK\nSClq85hQxI8mLhvEkTyv3sKYwUL0ApU/7pO8vQgZGa9bVobNIe1nDUDl2aEV\nJyOzS6ujfF1OFscq57Xnxo76G9qTwKElzMXNK6UBazeCvSo5Vit9mC6FdcO4\nq80Ufsk0NakKlUa2bxQfpIrFkz2CP2VT3eodfXGzzoWMwh9+hPARrCcnFLqd\nWuhndJMav8l6XIjCzot3d7rY0svVr4U5PuYGrqg7SIz4uL6bqAMZr5r4oSwv\n9dTw7fbjvK4+XjDA2ckgkFo6Z0X0JYeoZtLZkh32/6qXNU5ENfwdLaN6Hejw\njGM0i/of6ZP8KrLDQuqoi06vZ2C3HjwCAqvuks3VD+sdP8reybES3cmXP/Fk\nBsHK\r\n=aXDW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"74541e300384d800b9cdf492ff70ba20ffc583dc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.22c6dcff9.0","@material/theme":"12.0.0-canary.22c6dcff9.0","@material/feature-targeting":"12.0.0-canary.22c6dcff9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.22c6dcff9.0_1621869519646_0.08718560319649438","host":"s3://npm-registry-packages"}},"12.0.0-canary.fadab3372.0":{"name":"@material/shape","version":"12.0.0-canary.fadab3372.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.fadab3372.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"24f685e9f674d206924639add739abba8a51eb43","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.fadab3372.0.tgz","fileCount":14,"integrity":"sha512-FrtnxasHT+krq5us1MQbI4ncGbx2MRqhENqPMGmo5iR/Sm4esESgXBHv7fkKITnd5/ZfYfvNM/LWP/CBKF4eQg==","signatures":[{"sig":"MEUCIQDDfvFTI9dc+lHNgcDoYy0QC6q4sInueIIbF0pgsLR5rQIgWGoaLtdk9k2cqHAnlBEBFoXNHcRR0NF4YDG5jjSYj/g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22732,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgq87eCRA9TVsSAnZWagAAlzYP/AqSKpBrniEqs+SsGMoz\n6MgGK3PA6tN9syISFun+0TX9ulrvi1bZfPpHBlffyAVG1WwYGzior42UQ5oP\nDu/A7hH74MUhuMLSal3wsGz9LrgPVeQLMPu/Yf9oc+Tmrzw3MqTPUrHzUerr\nQG74xvGsTM4lHOl3J12FUUXub4zg8F8almrMrWA7WgVXFjAl6LyHbfK0tlrv\nQj87hNHti3RQM3o1v22NPuu31gLP2MLaYWzuQ8d0afuoK2TGMcP25RXnUPsd\nc4+Zx4xrlU2HwsHWJKnv/8goKXx/bYoLBH1pts/D+qiwvRJOpVqTx4ojFnBj\nYX3ljzVlH/54aKsmejZjgx+F6kum7pZOj7uEZYEDvMmckLmmj8zh79L6F7Qp\nj1yuOO0oh+qaE/iektLTDm08PWzIxxTrhbb6lNk96YL/oCfxu6dRcpHV/pkA\nTjKs7hdlPpfKZtxt9WsURD0JK9CXtBASQVk//C9YRME72B4Az5pP7IGU2opd\ngsbU6yCeN1zpJiP9i2Yz2XHM5kOICEEoBK1HMPTyDTgURVmb8omGiLkhJZAR\nRc7tg/O5rsu7h7lIcTmge/xyYLICNo4gFJMFg5sENECnybzlGoV1nKSI4fvS\ncpbV9csOb99/kY1UXMnR4OzE2r5RBlJSQyI5D+RsU93tTtXz9s6bn/QyFdiu\n52B8\r\n=3OqU\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"d76e611194693a7270b5e10fd87906ada48c7af7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.fadab3372.0","@material/theme":"12.0.0-canary.fadab3372.0","@material/feature-targeting":"12.0.0-canary.fadab3372.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.fadab3372.0_1621872349926_0.24602578547053078","host":"s3://npm-registry-packages"}},"12.0.0-canary.caa73aeee.0":{"name":"@material/shape","version":"12.0.0-canary.caa73aeee.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.caa73aeee.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9df21e3bc88d9d5a4a3492a4456c68afcf338f50","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.caa73aeee.0.tgz","fileCount":14,"integrity":"sha512-P9MRSqWFIeRdPn1jgvqxIBfvzJVoUVh2sQ4/DTX0ZS7kgSaz+STuqyT0hEMbkAxzda33pijyjm11vcMN7mNlfg==","signatures":[{"sig":"MEUCIH1QsoPChPty33MtjYStyHmS/GliMmahRq+scxpr+KplAiEA7+Wi6wfPAAxOHtNuIN9GeWmotmzHs9WMvZE8TvbnSR0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22732,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrQZGCRA9TVsSAnZWagAAaKsP/1O8Dk3fErxnPNOJeBvg\nFISL3oVY3evTbID9eO3vAVP3D6Mu4q1Zsma2I8AExGELJiuww6nAm7/YOK0o\n5EK9yWaeLDvvWlqVaJzvsc9zQ/oZcTXH8gJPGrIKgXXROWxbgXZK8fCv96DS\n26ZEU7NqIlCTjKDZHQUqkpd820bjhz/UOf/og1CHsOxA4l/1yBHf2OW74dH0\nBQTa3+ylncAeSWkk0vh4X3UL0/g0jW/SKtR6yBUiwlyzXOx9kwE5iKaiC2Km\n4G9Xpgnv7X0U8vsfWbaduK3zHQy1x3JwM50IWt2+8ErE0PYdzzoE2h6EVLfw\njEyjitRP59IAQts6S9dFRVBR1p8xG2sCCDMACXOTyZ/4ASbkbGlovahSf6yd\naejsO/uvlYacmQFUj6qn8fjaRF7IjQ7QjWUO8a6G6EHo33bJQfwodzTTpWzL\n7/E4jVXGJK1wUxhRQfqiDI9XEYwuFyduS0t6sKVU2C+IkQdP4NEn67Unllda\nTX6zHbyektLuoaHM9GKYMvD5QOTAh6DgAV2DtzemickvIikbSf4KApDgRlfg\nIC0rBvC89Ecg4a3n4xpoSrVLrIHLrgw4cLqmlenCF9DsjEuwgQZbQfdJeSR6\nOJopK67M+n6DZ97Dad3ahFmXQ7ZsSudzYoW3K7HHQWMu07B4UVmjmSwySoKx\nzN2R\r\n=cSkS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"dca5692fda23e55426458f6b0c56c2b6dc9e2dd8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.caa73aeee.0","@material/theme":"12.0.0-canary.caa73aeee.0","@material/feature-targeting":"12.0.0-canary.caa73aeee.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.caa73aeee.0_1621952069951_0.3612311680174789","host":"s3://npm-registry-packages"}},"12.0.0-canary.ec31ae1ed.0":{"name":"@material/shape","version":"12.0.0-canary.ec31ae1ed.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.ec31ae1ed.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ab9ec64ca5c89c851f8182bfc2447701eecca661","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.ec31ae1ed.0.tgz","fileCount":14,"integrity":"sha512-45FPEk/vzlB4R342yhU7Eg3lEYHKEf8XiUAGisogGgZkXCb69NhSg1sZHxo0pjA/PzQ75sN/OcVMX+Uau2Pg7g==","signatures":[{"sig":"MEUCIFb9DWB4JA6rvduShHRWb6S4S7OzJV+z1R6fdrTxC+1JAiEAxu5mlOUaspoqqr65EKJc5qGEiuDUoaFAn/kVBWRMAHk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23675,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrV+PCRA9TVsSAnZWagAAdz8QAJL6ZcQAUtX1RjuuaR4v\np169PfU+aHQWFWjF9EWhR45ufIrU5Wa4Opl1i90ea6qDsIHGKP6rZ1CHpcjx\nakYC/2C+DLtAV+X6KVW0d2OhIvTEdfNTnVykR699OLsviKZYQHVB900C61fx\nCgiQUD3PIjhVrktmYq+GS3LpdBuvzJkbHXyrg3nBGiHtZmiCdhCSABImbdAh\nMj9BJGpd3GuK51k2ALLzNaTbuq/KtkLMiuV2JlNWKRVzVn4XUGg/bdP1/+FV\nAZORBJYGxEktNQFZbyDrRMmur7xA024xkyVZfH2nCnxR1srxjaXEVjBonh1y\nelARAqeqL1/1lixbgKgVo/m0O6CDN5zpmCLxp7OKOImzm0ZgB2p6lqLMcT7g\n8oNvGNzWPkhps3g7OwTSAJKJ47fO2hDfF860QJNZzThl10roPDxM9jvGHyur\nmpmLIUvtozTMho2SPmKE2v3cIomZPO8mgHUKr5nrqhYsJb2tFNhKvjtcmot2\nEHyBiV2hk4TqejiStUKixmADjxax1neXrp8x2HZWqy2TXd+b3jbL8NQsrmQe\niWTdopX0UdO1oH1qWBdv7ESXkGpey3YqbfuYgTuGSkVc2vxumBvN8N2p3blb\nKuX23cWJESpcGwxUKI0WSg4nPT8pERKlcyCQZ3TWtfx3ji1GWQQ/hMn0OCzd\nXjB7\r\n=v9OA\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"f9db084a3aed73c844554c3b223d5185727b6d07","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.ec31ae1ed.0","@material/theme":"12.0.0-canary.ec31ae1ed.0","@material/feature-targeting":"12.0.0-canary.ec31ae1ed.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.ec31ae1ed.0_1621974926861_0.9543304776514285","host":"s3://npm-registry-packages"}},"12.0.0-canary.8530d3514.0":{"name":"@material/shape","version":"12.0.0-canary.8530d3514.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.8530d3514.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4ae9b01f1eb68387d799fc2285bfb478902055fd","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.8530d3514.0.tgz","fileCount":14,"integrity":"sha512-ozH/cO8Bq1VJBpqNYVQRVlp7w4SjfI4zteGn1X4yeCLxGd7Wzg2Lu3V6KPmR1ijWZQrfcONTfGfujVWXgSJbSg==","signatures":[{"sig":"MEUCIHH0bufHvpFvO4goXldR51o48k/qGuNcex+anmIEbO49AiEAsTp1fe5YPmuL9L7Ga4HuKnb6ZrQXn6IeEv/9MNOkPOc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23675,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgr8MpCRA9TVsSAnZWagAAIjYP/0ViYbFlMLUq5oAKle+b\n8Q07UvRnZVvMpWRLKLFAvm/Y+bnLyvRXI+Kgcst9/KrCMLwrz7UvR4fOi1HR\nIQlrZ+jZpl/Kyx9s6bn+nzUEqyEqP0GDAu0cXFYJO5v2YlMz6duA3t3pprR5\ne5+XMWE9Aqsb4hU8BdlYnmpXzaGGYWIQVc69wrIJoCb7reXRy8AnSpI0tdO4\nhpNT/kiwpZp0uELQc6CtGx8Ym0Q0uXHDZh8N3fTQIN6dM5sM2pQwZ6mxEOh0\nPyL1c3B4DRNyPc/PfQcD698u0DICpwN0UBoNmGpthdYv++JD94MKWd2g6UEI\nbm5aaeR6S8gE2MvouMSzl0QD07Ko2ufw08mbkhtKh9jsZkI/hrY8O2B5IAIN\nDODR4X3j6X6tbq75AggTD5xXEhBIatnShAUi86+nJn/8uaFNQg2o46eFmITS\n4cc8S5rvjAl3DTB72y6J6/HcJnB5gnBuoNvyb0kNKtsNg3W0J/BuRnaUzX8M\nl7Oo2Rf7aCl4Sv7Pi7uRlR8JmhVQr2b51b7ZpV9lALdRsBKinxRNmpvTIf10\nSe/aOUopCHz4qiSUXxFzPLsrSbee8lLCGN2LWjEYuU4sxEFyWBeWAQKbrYEm\n9RwNuO+68N/K5PgRGAbqwx7xRIdSxaKH3Bj77WqYL4a7nuJdFb1OKzxvPivq\n6oJj\r\n=Lm2q\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"e32508a69db8bd9ce4383a14f2c576d35950566c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.8530d3514.0","@material/theme":"12.0.0-canary.8530d3514.0","@material/feature-targeting":"12.0.0-canary.8530d3514.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.8530d3514.0_1622131497273_0.4967995326330241","host":"s3://npm-registry-packages"}},"12.0.0-canary.00b5899dc.0":{"name":"@material/shape","version":"12.0.0-canary.00b5899dc.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.00b5899dc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f7e217072e527790e2270093c2c7a45f0954bfd9","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.00b5899dc.0.tgz","fileCount":14,"integrity":"sha512-EI3LObo3AujiCiHA9vj/I3J/HOeKHJjShIKdCpGmAqo1cISEI+FD4n/8c+yzitMtCSB658W7xEYCcg9m8KPdUA==","signatures":[{"sig":"MEUCIDDLFyQCfH5OHlmlWepEkiAcEB4ghd8PScu3LEU81UrPAiEAi/s1R3RI5iF52ueh9pAaklqxSZaTzoSsVZXQzLjha1c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23675,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgtriTCRA9TVsSAnZWagAASTUP/jReEY3fr68R8uAzK91K\nBXshAouBqFfCLU9lAuQyzxAoOdanKomPqguYW3BxD/1u4hPuXopt+/VEISFA\nsS2P6VCOVTWF6K3762KAvd9reyRLQ6q1r5/5D8RwouWRe4Qz3/6PRvlTiIqL\nTLbOY4zz6Q/2RPMnorv+6HNS+sPk098KHCLf8lGa03JHYEH/0cATIqHDdL0m\n5MrHEbWYibdhHgtA79/4ns67zk5PvmruWDTvjw4DQc6U6zs4tOOfJGKBPL6n\nP8RXr1RjMUM6f96PazapZZ5nWk75asBjNWJQYMLIXjwBlFxesjSlcPlkMKgL\n3H9ehrRKwbKQbDYPpQTkioUiybernRYStHB3CN13hklJlmY8KVdZqF3fuTUr\nRsQdt9/qoJyzID39XKY3DAfaYz533NZXHASmyAX910+UmKO7PmqNzlYgdy+e\ndqVnnV/0KjG57woFS1HV3ewtthFXXM4pymG2OWwr7oZmzbt8Qb50E6+4p61S\no47KEz6oQ/y+TAJiQhpnefCDRMqI50WO7PIb6PS0Tcbj3VvBwfyzTAkHfBYS\niU784w5pEMnvdvuJEq6qgW2nFWR6Y5+6k8uBLU3megqaGxuqXwF8uNDJJcUo\ni1Osx/negatRDYcmAkerqu+VMZrqrqDBAMaLhg/+v6Pi5rw7C4Eq1Zb+HJP3\n8StF\r\n=r6mM\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"19ffd4cf15764c62ec7b1dfd76483a2919f6501d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.00b5899dc.0","@material/theme":"12.0.0-canary.00b5899dc.0","@material/feature-targeting":"12.0.0-canary.00b5899dc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.00b5899dc.0_1622587539259_0.9743472679286573","host":"s3://npm-registry-packages"}},"12.0.0-canary.f1525ea3e.0":{"name":"@material/shape","version":"12.0.0-canary.f1525ea3e.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.f1525ea3e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e96c95cf33fe68416f2010f8d94471386d05a99a","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.f1525ea3e.0.tgz","fileCount":14,"integrity":"sha512-oIk9l4kVK8tS87HyJYZbqgaO/Z22TRUVXg0IUbYsx03Z857cOwgaIo7f4bRlaJtARjpRyVnalwZgiE9n/s6ZxA==","signatures":[{"sig":"MEYCIQCvFWsV8syMpgGq6Z62A7v5I2vhMETpfEOkOFbJt0lyQwIhAJjfBQwclN4zsX5QnOtU/bPMCs0gm9Ls/Mt4LlKvNSm5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23675,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguN8VCRA9TVsSAnZWagAAgskP/Rhtlvv4GREsu4xKWIXH\nh7S6cpmxdkoa5fwEVYgLG0vIZTfAowhds1OzPvORyM89TXh6K45SEvMDVmiK\nLe3DzjAeNhCFxfWJvuX+SgugAsoHbv84ESk1cni05gexavEPhFDsZVL2np4e\n1gODWR+Uvy7LPErG6z3kp9F4nX07F7UtuROEXarVsDZSFja+l5mgF+EIbCSA\nKFYB22vtpd+f5UdFIlqaP6ttzfXJAM19ai3U+CghzS04SSdChSgBumPd8ow0\nOZj+waRAnxzziewXlSdcqSdv+6MBDuj/3N122FvExpo6vXYi3L9q1J6NJehK\n35YydN/9rqtaSuY6pkGtojj+1FTTqZO2F1O2CwmHWvQtGQYDuIdt1SjslrVz\nNTnHFtSA8Jl6sSVbsB02i+Ym+WYl6Y3IS5qs5RUJW6DtzeSlArFI16e81OTc\nwbLR4sRMtZ822b57droFZxmwvN72p4FPfgSWhilueB2HkK4J8GaH7KFZY40J\nKUifbelw9BAUQHCa/fufbmzDnfCJNGHP/+y9GfMjO6Rr6Wtt0dkX1N0xNjBq\nnG6+XRFaGl6K5a+JSmo8KN6fxtegdURAiqPdhHpTPj1f6JqRtQ/iSbNwbc69\nLmfHGtzawqADxI2cESteGlGzg6eec2cVWvZyX0/dzYhGih0aX5re+HbqQ4Gh\nhxoO\r\n=Z0HP\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"97ff3c2e33330849b0ca447ac6983126a385d845","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.f1525ea3e.0","@material/theme":"12.0.0-canary.f1525ea3e.0","@material/feature-targeting":"12.0.0-canary.f1525ea3e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.f1525ea3e.0_1622728468927_0.5061202681178236","host":"s3://npm-registry-packages"}},"12.0.0-canary.464a00286.0":{"name":"@material/shape","version":"12.0.0-canary.464a00286.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.464a00286.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0196b70c5e0020bc3bb9c74834d5928e5adfaad9","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.464a00286.0.tgz","fileCount":14,"integrity":"sha512-xkJd5ALAAgIldWpQ2OEQGXQpGH4WulUf9hcwlzLZn23uakBHgHTMPZSNV7QXJ4vyWvtwguCzdhxgfpSJqca3kA==","signatures":[{"sig":"MEYCIQDmsC2B2ADECPo2hOGO0gdWN3/mh7E9FX+WxbMhTpJv4gIhAOdVAtjt4hdtQ0CpBxPWrXCXX9dg8AkuF7EDvUDt50ry","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23675,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguOsyCRA9TVsSAnZWagAAmxsP/A1eFvl4bia0OGOs6uO2\npy7unvOapnPAVQDb8WV9wu415tPx8PSUR5zdhj4JNiL0gny4CBwZUfPPlr6G\n5y8cs5zziUI0hvgAITDY3lOzZwChh5ypzn1zwdQpcU4cdt65jfowmjpXavXr\nv/JLzKWw01mlGhmZz9Gj5VBm58C8xK7mPht5OKa1+H/yDPtU2A1DZqzgNnmX\nbfmHZz37xhjJlsQJl9M9JsK/ffQaGpTHgBEUTLZYuxgEzY6aYKs/EPMauAj8\nuNVEXqzc+QUd8gsU0WuqpP6wQ29PFaCXiiuxZOkTIa41EeVrYb6uNhV0MFoL\niMcmYvFD/Mnj5sLlgNAWcCT56+UL/UsQLFwFKs/wpTbLSWox7sQskaykZNaU\nkL0cuaW3yTj928ii5RJgATjc8sPeSHNG+i7GAzSmvsUg+UPA4W+/n4t7m8Jv\njGWlXzk3hbSwpZG+qxucL6h3aVGXGkoV7qwy3hZmLPbvAmrS8LsOi82kN5jk\nqE375Rn+/NNpOiuUSPLt9F6AZHZvMr1PoZMFHSTgxHjmzurW2ZL34lAG71FQ\nO9zQjXco1w8Zyqk9/63iNtYfP42Hsc5P/eI3tDiaelW/NFzQ7Cw/JnP5SJDV\nQuIi1LumxpHXw8QN47Ogedm3XLU9g1p1TpoVnZB+QRA+WjqNZmqMDgyyyIdk\nGxRc\r\n=aOEh\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"ceb43f7f74f7db77edbe7a13d3b92e853d599d6b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.464a00286.0","@material/theme":"12.0.0-canary.464a00286.0","@material/feature-targeting":"12.0.0-canary.464a00286.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.464a00286.0_1622731569997_0.8798646265079089","host":"s3://npm-registry-packages"}},"12.0.0-canary.474de7878.0":{"name":"@material/shape","version":"12.0.0-canary.474de7878.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.474de7878.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ddd71507c614077a042be0e4877c180772f0dae3","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.474de7878.0.tgz","fileCount":14,"integrity":"sha512-i4oWyl1yI9nTGGcuosIX0LIXMsoqgymccAp1buuIQ4BdQTu9SjoJlWuCSxGEq90QzZsPsPX6GKjx8kMBG8zsAg==","signatures":[{"sig":"MEUCIQCPaEv88jGgffgad9XFGlejOosgeJ0k3+uSrtvTBjXtCgIgJIGoq8nEpp6X6iMlkYXpgvJO99nVd3ixT78w7RZd+Xg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23675,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguPHKCRA9TVsSAnZWagAAsWoP/3I/g6ueA776UMmdnRUo\n+Z3tUX6RIKoWgPqKDLdIbSv+1qw1SSiF1h9n8SU9zvAd6e7eu+X/h9pQY4w1\nBMJbjzskAFltEF0PvhAFtLGcEjFxsrVU3LgjJFIaPhokd89mIeBhwQixxHVi\nbYFZ36nEci3jbPIpQVjvfoEVBboTKIdVBpuGhoFIwVX3O9Ktk5uxqy0OZUD6\ny7TUZ/9Sx4bnMDElYG8d94P86UjFnm17lXgRI5I1fA4P6AIC4eK3VGncVQfc\n90l0lmHVEvAtTI0oHaWBgkKlqgL0dHLzyH5HbhyUlZPwF9xTStk+zSmLw0kJ\npJRo3dmc/rY2s5Wrjs6aMpSTN/BOIFzB4XSHxEbvkFcGurjbIC2FayPE5COq\nuLMpMbEoJ/Uolmkks7FV9YWMDHIpkb+/hSSlTVUbfxcgFoOYBIvoWjyBTgL4\nhjsmXHr3gJYztzX5dQaRif0+xgCi/cRzxn7+APY8a1Ubmd6Byhvd7OA/cWpJ\n8L777AOFnnqkocEOoh6enuQB1uVmFo+yTn0iq0/RNiCpaelBjafLKLDus09d\n1IEI0qLnfO5yfKGEUz9Nak3+/33j9r0ua69u3T0ZCRr12m4nalNHg9X6guvv\nBrLCdzbUCG/SQil+QcchCCoSuUtDt19xosrhQBta0ymdkXGwiDv6vywiyb2Z\nPOFV\r\n=V6yd\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"67d604ec9cbaa0dc385eb36be35e0adfe641b244","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.474de7878.0","@material/theme":"12.0.0-canary.474de7878.0","@material/feature-targeting":"12.0.0-canary.474de7878.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.474de7878.0_1622733258070_0.13121303414794294","host":"s3://npm-registry-packages"}},"12.0.0-canary.b87ebf74d.0":{"name":"@material/shape","version":"12.0.0-canary.b87ebf74d.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.b87ebf74d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"613697813df6138055716c04e881144168c7bb7b","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.b87ebf74d.0.tgz","fileCount":14,"integrity":"sha512-vWQXio7JXTLaIX7R4Wptq9tH/soNX9jnZt0XJ5Hx1XLliNHxxlWU5uysQQxhbUx23A9bwcTeGE8BNMkhQkVZpw==","signatures":[{"sig":"MEUCIGYtSyu1KY1rC9OO1oZu8uLQ9+xyRLRvhEX45MKI+V24AiEA4IKlZsu44i2n+VFpsKerdOhfxcI3cE2+iQtGKkDla+s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23675,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguRVuCRA9TVsSAnZWagAAtL4P/0cEgqgQ+knHs9PIdLnx\nfL3MY6aPl9JejSyh/dnWea/jErvK4qAzvFwKuQhJGp2yORCb75sb+rrtVtup\nujBiS8xe6ZF1uXpIl0skzdG37Fg636GwS+9JXumWgvTUUMzsBvQaQ9jpkTrn\nLJhrEgArvbToup+yzp/u7ShS07xhMtlYznzvU/Z5aCrxR52mC5z9DeRh3uMP\n6IFw4mhjyTr05Q9qutcgXaV9iWh++p27eX8zL9ellSsSWqqsdEhtP/Wk05bY\n2rlPj1RJ45uU6cxphKCZ4iX+CI/SC/KAMQYFBJBaH7fuF7a7DT2oF+BarFzo\nXIkAscSiDhMmwaCk8gq+F2LFoIQwh6S42HtKizAemDj9SdQJS9oG8nG2TG+l\nwq+JtrUXq/sZYnUHyvwk5Olm+IQf0M3NrX7ogBsY6sJzgl5p+j0c/yF6dRcB\nQnQabEfqN9LEeTjGzLP3/aZlcKOuUgjhY9XWLaSKQg1GuKZuNF0E1TUSQKgZ\nbXpo7yFd2M9hEzpNoUVOab8NzKlXjxnWomrhUKw6WD1Bz0jMsSXkjlCXStP4\nudnOGtJgn6uQOzaec8At/x58yojIdilP1lD1BQm/oLRl4nyso2xtl91rBDhP\nVyoQrrgcytVU6+Bse1rT7gd9K2MGlcAHRP+AEZnvRYyY5JUxpUez6QSKXSTd\nx9cQ\r\n=N784\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"d3567c6dfa0fd347d2141fb92460c63fac28b46a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.b87ebf74d.0","@material/theme":"12.0.0-canary.b87ebf74d.0","@material/feature-targeting":"12.0.0-canary.b87ebf74d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.b87ebf74d.0_1622742381720_0.41634398842753373","host":"s3://npm-registry-packages"}},"12.0.0-canary.2daa49b35.0":{"name":"@material/shape","version":"12.0.0-canary.2daa49b35.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.2daa49b35.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9b163e8ebcb8f17043e72eaf0e805248a35ed418","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.2daa49b35.0.tgz","fileCount":14,"integrity":"sha512-xDfngIJvVtYxaxI/NVoN6Hsvqbt05vMHrs+wR2s3T8d9VaSCyImoKR5r0mnzo5Rl0fHCu8nbnPOp1Ktd5Akaww==","signatures":[{"sig":"MEUCIQD7vtiS2fruOgYfLvdFv3FYoPG9gTYkTRatrscgTjxW9wIgWD1+1XVowF9B7YcJnzTZi8VcHzivkEWQl2OLES9lmwI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23689,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgulFTCRA9TVsSAnZWagAA2b0P/i0uo6X+Rox08A+NEU+6\nMsk2GX//ww5JPGyJF+LI/0l3TJQOelCURRYq+BsmHoYZYcBYT5JMYVCwR0Yz\nhd4IrRlW2QxKqnLOc9Bji3d+X4s+SZipigHmFNhni1v4lH+6zBAVrkhySrli\n9Jpk3X2L0wXcQHse/NUQ2AjyVZw1rtYDVz9nrMlO9tqWdRUWIUG55oxiGJlx\n+zMYK8FwV+0xoF6dURTHvCEPwzNj1aOYehRjOLTha9d3D0hLC1F9EERwk25Q\n8EnM9NT53/AkUyThVhUs4rVh2g7rQACAAGOcfmjn6DA2Vmcflcz/kr9mFK5W\nQ5vJxDycIEM3OJIdvq/u8OeOLPW5Bf5f1cmirVy6MlvH9ZaH1xcT9Qj+do1y\nCVgZ9vR56D5MtoMx9TK3I/IKsvc01CnHHnWyIFOFejnByC74SeYnOrUmUtWh\nsrAgo8KaoDeKnLSzDcTCqfIW6R4Wa81s8HFAiqN26Wqs/Z4BSj3RU/xSfH1y\nLeTSwPKiE4Reqq/phNC3GLFLXLWfGyJTTlhGk1Pr7dUdkeWanhHsM5MicwQ5\nAAkwktau8LKQ29STytmbziIbK2JWIgNTBns6KP8/vLdHRpETVWJBSV6QqhxB\nywpglu/Wn7MRJg6AMgWiJ/o0sOpjC13GwbIEXIG7Q6gQO4bFW9uKEOLSMrzH\n2cyU\r\n=oOXd\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"3e759afe4116e5fb3941df918249b1b1348fe684","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.2daa49b35.0","@material/theme":"12.0.0-canary.2daa49b35.0","@material/feature-targeting":"12.0.0-canary.2daa49b35.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.2daa49b35.0_1622823251622_0.5533747952442944","host":"s3://npm-registry-packages"}},"12.0.0-canary.08db3d737.0":{"name":"@material/shape","version":"12.0.0-canary.08db3d737.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.08db3d737.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"16a18d7ab41be6dedf96d1d199400489bab59931","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.08db3d737.0.tgz","fileCount":14,"integrity":"sha512-DRHoz+jHiTzWDGYjdzyVDxJDFl63BUXN/NaR1nPdhSKN/F4f9DKER9c23/xBuCyqG+DecUnbtOYcm6Xta8t7cw==","signatures":[{"sig":"MEQCIEXzyzsP8QaTQqhiQ4lG3/bcPeIFTGkUc7X6h0InbkruAiACK91nSx14DG66aopXbKgmShIR6adicYaPdqWhHToeWw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23689,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguoHrCRA9TVsSAnZWagAAoM0P+gJelrxiegZaYc9ZxlJG\nkpUkNWSKatxfavLWSXzeU9Oyz+884o6vxaNWVD+FU48z9OoLh+xap4LucANn\nrcolxU3GjOkzATY5oSDornR5l3KLMStovYE/odDBZ0YBfSZYQOWW8KCKyr7n\n1pO5H9qd6FS0ojpy3rzAGozXv9OIHtGvIq9CXs2NMtfZHjtTVSKTEzwXdG5F\nPgOcfCi+y/Qla7yD9mlD8JppW/iz3xz79bFrSPI8A3bHa8xXQzlPY/hMyosu\nuducR6pM3Yyq/I647IJV+AvVEZKKWBN1vrmC2aqLLBP+hYN/lwN1knhORgUu\nBzXQ1EZlF9ltZAkn5paZScBu/1J+L9nYuWGy6GIwPosolyUQcLElMP3BZDAB\nx1ebsPSH+l8Vq+7GcFFv1e0GJvVC669dDwH0EyUo8sAX7nMiCtt6wbj4YaOh\nx6Z4hdhOIejcBDJUKjX6xFFPZIzkb6y3KHfWu5s9Dn41+AYYLw7+jDPDJPRc\nnN76uKqESyoAsif+IZwGyttNi2hmmq0SrTZN6udXb+knJd3SFZnubH+4aRb2\nJgMskqzc344lN+YDupv6vQozGFIdkw/7eetXybqWp2FZVT2H/6y/g1j3Du99\n/mKeSFUVEkVIFxPgB+xlcLoJnpT4A1xt6wggk+/V+7iPccgW2rr1YPIZNz4G\n77fE\r\n=GPTv\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"0175b9a3635a8e6c8c6690948618b55f39ca1ffb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.08db3d737.0","@material/theme":"12.0.0-canary.08db3d737.0","@material/feature-targeting":"12.0.0-canary.08db3d737.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.08db3d737.0_1622835691624_0.06230958433860123","host":"s3://npm-registry-packages"}},"12.0.0-canary.5823407a7.0":{"name":"@material/shape","version":"12.0.0-canary.5823407a7.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.5823407a7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d662699b75d656bf4d6f5e44fb6bc6ec7563b5e9","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.5823407a7.0.tgz","fileCount":14,"integrity":"sha512-QRzhfX914lnF1LXnZqJ/473RWC4/EDJ2bdOtZkG6mxJse+Ih+cO6ciyI/RHIzD09ixqcbD4nGhktD9Xc6dCWFw==","signatures":[{"sig":"MEQCIAHZTmTZk/Va9O8p31nxfI0qQybaZOZqkdl30crNDc00AiApekDMDL43qQ/b4C/Np0/IsCWnwtMDL2BJ/JJQc7xXaA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23689,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgvr5WCRA9TVsSAnZWagAA9mEQAIMLUIlEuHttaA0yJTKV\nXK7derDFRPfn3qFqOkNjuL6kktfQUzMAtckIky/Gad8c4Z7RTzvLaC0qq0TH\npAhrACzc6OkGZX/BQcSvbZrna7nrkxgiEEj4zk7qk5phfa3eSsmzmLPJJ2Dc\ntHDz7J5XCJN0+X9Hhja0gjyCUKYK3lJy4BXqKsJDLaZtArUGskQMe+/ZoOEO\nLO4b8IxTzF+Ef0712n9pEFUNcQjfVc7e7YST8+2jfwqQQrHEyskrEptVqmF1\nFPMu2s7cJ/ah2QiiHw3EwFAp2cmPM37w/1TCX5UO1c2ktBRKvpH3TSKgOKS1\nXkWNQzgoU6A7BPoM5nNLL62zQSGZMyzCFaVwGE3Z9xoWmNARpicIUs4vIeXz\nqkkND0cwRb/JRHoc5lzfzTC4BUN61dQY4SSxGbjCKDD4nzsFQukyNzEc6xOX\ncNPZIDIxRkEwMP/yL7Ln1DonSgfkg4ukfEaSoPLCNcDB+njQfzUEC9+XMCtx\nNXSJETP83y+xQK9qXwMdL4EJc1MpXf6Bb6Petu75q1BO/p6zh/Uor3BhTV6/\n9IAtJZkiWQzzCvxi5f2VSpftrdfDPLtuaGghjscNYw7s77V4H6rhEdxS4KA6\n/pgrqc3Oaa+5X2zWtZtJZugrjvHDt3PNT9tpxyJjG4kvi6GEEMCTfUVj8/Lp\nN61G\r\n=+LMN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"dd3ce4590e0d881d04e885d116e10e680b6c01f9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.5823407a7.0","@material/theme":"12.0.0-canary.5823407a7.0","@material/feature-targeting":"12.0.0-canary.5823407a7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.5823407a7.0_1623113302812_0.7311796637669925","host":"s3://npm-registry-packages"}},"12.0.0-canary.23b0c5e22.0":{"name":"@material/shape","version":"12.0.0-canary.23b0c5e22.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.23b0c5e22.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3e4f70cb771fb04bfb4f55f346edcec0fb941747","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.23b0c5e22.0.tgz","fileCount":14,"integrity":"sha512-iYMeWhg+w8FSA3iG4V5hPglDHfiD2/vUsInu8wiC9NS8v1RmH4b0w9SK0yuvZSCrqEh7kwljfok/j3MOyqKVxg==","signatures":[{"sig":"MEQCIDR4iyIjzPP2McOv+c2bUkaXNQ7TQ/0XPMnzXPQNX0ntAiBkgMyOgdA+cQjSdf3rCBmzrQIcdxVLl4LTSKI9gECCtg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23689,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgv5k3CRA9TVsSAnZWagAA7x8P/imZKg1Wt1tZ0UeEzA9f\n77FBfstIMk0eq8oEbHSkUdwi4NPcVT7lXPs/4CY6OOjOcVSPpCaxZc9peU59\nYHHPkQtJPUbYGs6Z0hWJovsV3sKhGkIUFPwMug3HhmwqqcCTYRGnHG41JNyg\n/x5LaE7Z6A0CozWarvopQOo76pTyAyFcVaAhfnHMeYhQLig7cnju4oHKdSk0\nUyvWB+RTy2xxwDLrpIeGIdthmiDO33Zr85Uw1U2NaJXxqg0YOdTGCLU3PoUV\nq3SmCaf7jnlTAoUeMYNn31ctmcPLdtpXlLi9r+sdFuP82md2eH1tQVQlQ/bz\noxhxxmWF6JorMkwcgwzJUSEjf0ttgZGd3ly0P23bcz8R/I9H5gs4FaAmkrtc\nv8Wr6SOa6GHjKD+WFw3nUQQvjGLmG/+Zw/6tqbtC9tYqSfgSuVxjvqouk7t9\nCt0HbSn5TVg0FW8Axg0wzvDZs959lXulDthJdgAvMCOXipEw7MAn0KLrAWjy\nCe1gwE12QR1EIFRArEDKH7jERAg4KTt7P7d26FKyIuqs3dy3qNrqny0ch+FW\nxYRL78Oaj3N/S8fYYDwrSu6liApoQL95OAOnEUqJS7u1herQbff05QWJIHoR\nti3UAdoT6VlRn57hFmr8sQ6VQyF03iHhA2CfG0+AXcvGmE7upFvMVGxVwT3g\n6n4q\r\n=t2In\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"fc55a497a3b0d48a691942de987d781555ef9d82","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.23b0c5e22.0","@material/theme":"12.0.0-canary.23b0c5e22.0","@material/feature-targeting":"12.0.0-canary.23b0c5e22.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.23b0c5e22.0_1623169335025_0.3086573625924791","host":"s3://npm-registry-packages"}},"12.0.0-canary.2952c6a76.0":{"name":"@material/shape","version":"12.0.0-canary.2952c6a76.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.2952c6a76.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"724d189e38494351ebccfd180e406040cc664ee1","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.2952c6a76.0.tgz","fileCount":14,"integrity":"sha512-qQ8OqrngCiP4N1QkaJm3VfqE+v2NMwt4eq/b6oRVZj2zf1vp9OlnA3njFURUkNc6fvR0VhL8BWZsSFhz8SdLLw==","signatures":[{"sig":"MEUCIHGoUrdkZgPtfcjzaYU1eonu3fxkWkJZA5sH+9qgQG26AiEA4i0/JR0fLw/RdZgNGGTUMR75th5bmGs0FdJi0OqNjxQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23689,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgv6ukCRA9TVsSAnZWagAAHR8P/3fJHEOTMQ6DYTYU4Tqs\nWPLZ3kOlAGdwkscrz7FfUEy1P4+kP9J23qwewyITRLpdHPMVy8bh0XaGXuNX\nYbL7pu0AIpx6+nfkEf5oXFJRq1LrAHxA4x/eW/HNenZo9c3MpiLpdquRHoTh\nWtAUspB3/pN3ZkQx4CGEA+8rQ+4bj+exiTr+PTpzHfVSMNGEt2KwOM4gQrru\nSg9mS+zav7oQfPPirqyZoGLTf3nd220y5S15qhcsn45p+eWFP0JeOfeUQpRP\n+AwZcy0q+8a7P0lBdq68z3xMu1ub5v1DKEXZTAXFwD21Vg2I9Br+FzswjP2R\nRtQYXvpk8jtSlGD6YHAaGaEf1mAXoh9FIIAIF7OCHDfwIVnEAw/zqVbPauXz\nF1Pmt+ZBUb9twspE5k5bnVCjizFoiQ4H+PPKOs4xq8EI5a3Un2zw2kkSj1Q1\nVztei/hNsm8kP5LxqXf1VPbvMGjQLtSfRb3ziUkotyF2AUx+nF5EjYUEJWg8\nfBZMsI3VvhRMzjkVQmPwxXy8FpYvtXMl6y8lu3udJa8eFwh/Vn70HrRW8zva\n+ONLEDhyWqH0gjjbUnWmli9xG3ZHBWZfI/3Sf5xXS3BDXdgkutQUxDoKdDlE\n7O7zH0Sqr7faO3m54jGOzhJx0++LyzxBOhKZZkg7w8/psPpGXPBmDfPD5g8C\nWO2n\r\n=wmlf\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"c1b0afec5d55ef54d74fa1cea1899368fe5c7180","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.2952c6a76.0","@material/theme":"12.0.0-canary.2952c6a76.0","@material/feature-targeting":"12.0.0-canary.2952c6a76.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.2952c6a76.0_1623174052429_0.5589661442052312","host":"s3://npm-registry-packages"}},"12.0.0-canary.f12425f88.0":{"name":"@material/shape","version":"12.0.0-canary.f12425f88.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.f12425f88.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ac9f625cde188eeea0e0a02ad5b12ed5c15bffb7","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.f12425f88.0.tgz","fileCount":14,"integrity":"sha512-1XLdAtOZkcAbbd/WSvJnnF2rVnMdyAMdd1Sb4SaE38XcodZm/y1YayM8yIdx7qRIA0Jv0n3Pr6V3vdfhxtjjhA==","signatures":[{"sig":"MEUCIHjHIqInrcA1YIMEvg9BiEXpHJiidAefHGI5Qsx4SrLsAiEAhqsBc6NEOSHDRE5n6EnYG1s7yuSBxHtaGjXbBhcH/60=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23689,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwWWCCRA9TVsSAnZWagAA5cwP/0pfgD9/CN0mLuESc9FZ\neBsELnkItPZ1nUh0O12/7QcLUsuo+TiVca71VDQxPIF+ABalyub5AjD2lZnE\nNv4/61WNfxpRD1hLoX16wD80/lOqSe45YipePk5AXhvgJxpx3OFqmfd+7MZL\nedu5QehfUIZ0yjqNegJE/gW8vxhfzb8iWvMUjyyxGcaECUOzodWuWym+m8Bk\nx8uamwvSqc4EXIpINJwjNESIH3KY57XFfHqcgI2YnJuiZiwKJW+llYF1tP99\n9Jn6OJtLtVm80ORwnJvNs/lw4fLHgBn/JcHBNVLeZhAiDG4/sF6qq0xhMnmb\nrbft76gfAAGhiCZUD6NTRYDa9LhRuVISKtL6C8O2SmgKmmucX21/QFMTlI2f\ntu92Mn38EdxbjYmTT37mRlHd41ff1jHbYRgSODK0XColDbV0a46xpEQp9oy/\nLsAQLTU7R3Lj3QB/WjBYL1e3VObEPgIpLX133NOceicXbNDoI2XrbcKYddiX\nJQfgZME/eKkSLrAaZgzKIjySG1DukiOjdK4z2sDsWq5kIz69jD0oiL9ojcer\nNrAfeVzmNnkpTSos2/cv0PxXHdcquTxmVIZ1dbtN+5VXLxflmm9grz+ZPEEq\n7XJA8LVwUaQHekLQNhvu63kyrVfBBvf67N3uNGbz2VC/P2jhGrPO53tuep+B\n7lCk\r\n=fpXN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"c8fa3a7d372e06e42b474eed4ef3e4105dc43301","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.f12425f88.0","@material/theme":"12.0.0-canary.f12425f88.0","@material/feature-targeting":"12.0.0-canary.f12425f88.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.f12425f88.0_1623287169991_0.48482960927345364","host":"s3://npm-registry-packages"}},"12.0.0-canary.e543628c3.0":{"name":"@material/shape","version":"12.0.0-canary.e543628c3.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.e543628c3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e7291b390017de5761e20018bbdfcd0609ac5e87","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.e543628c3.0.tgz","fileCount":14,"integrity":"sha512-/b4CRFfFbQuEwr0bEAPKF6LT7ooUlbrhjPAd2k/G2bpb924kVMbiTuVU9lMDxmJK+SoEreh5iAFrVT0WYnUp0w==","signatures":[{"sig":"MEUCIHlKj0BmPAqzXN0p0AaDCKZ83AU0vDsyphsuVohha+H6AiEAg7a4pLhpr/2o58yunO9bHJZRg3a6Lmh1pyG5/9Hccno=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23689,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwWW/CRA9TVsSAnZWagAAs0kQAJHgV5Ou/0XGLXzRTBRO\nl2wNb0B4RrC0dtx2/qJbec5oKl3/dAzmI3b4Phw/2tbmuIY3zHdUmbD0nfNE\ngt25rqHRXJjwltzSDjlXclSLOfZF5XAQE9E+Jkr86dVn3II10risyoCVzTrl\n6yT7ltf29pgMNXtf6meQm2nvel+tNAXrXg8fenlKoKq5TNzX/KiVefpJgVL+\n4ATiPvo+mPWS8Mch49KAZF1MI6Emd7Gi1rt/i1ctRHeU6mL/TGenzbGFA2qQ\nKEGE7h5YWfvFWYkbVIbTapuF5v3O65PkqtWS33KMNUkKa8qhrpOV5Qi7kfVj\nAiCyeHaofR6o/7gnTv2Bs7b2UD1LpUCD/7a4gzCbGMT4BcheeTmJ5yRrgHlu\ncgkst610ehqMRzSpxyLjdeikZ8kjtgMP7Jy2c1O9GKN72WShVLvxHI28Gygv\n4OX2RNhXKwZUE1OoA6dtNqg9mq7P9QKjcNctB8TMqwz1/WKRKTzpsIJV73NE\nGToYAy3ug4gnIt25jpuKwjehylQ423rB/+cQvrP+3MBE9A4nEySxlMmkuew7\nD/LuwVcL9I4/NRu6HV8wgRvwE6cggTH9bNol4oh3XaORPQhlO3Zzl1D+IEO9\nZET8/Aq8ttSifDSe5TmzlZ/g+bw7MupRfBONek/wwE2IwFCNvXd62i90iFD/\nwEC/\r\n=Ti9d\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"6e28195a46e3b2108c76ee1a6a9ea9416276ce52","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.e543628c3.0","@material/theme":"12.0.0-canary.e543628c3.0","@material/feature-targeting":"12.0.0-canary.e543628c3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.e543628c3.0_1623287230996_0.8652679208306675","host":"s3://npm-registry-packages"}},"12.0.0-canary.e0c346286.0":{"name":"@material/shape","version":"12.0.0-canary.e0c346286.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.e0c346286.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6d975cfe1b64ed0c50810655627bf212143242c6","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.e0c346286.0.tgz","fileCount":14,"integrity":"sha512-oZ4RYQ41hwazCVj8tkP8uAuSXKYgFzWsACAN8e3XJiU7ezPdd9WGVQZ7DQ7LNAIBx0YU+vpgvWVjxGt6jZzHMw==","signatures":[{"sig":"MEQCIH0coBsVz0+WaiRY4PYpUJ9nf8n5jk3DZGPAF4KH17UvAiAybNf+WoXw0Ni8FDGrZWcan9Es95J2X1RJcoFkq+x2ew==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23689,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwj9bCRA9TVsSAnZWagAANBgQAJX944g+TlZTDjYIJZZ6\ndIMFhz9K6Q9aprgvGS+03AEJrGvXwKC+501qjCLzyGfSb67hNdR/Qth+nWXs\nKqUsv3162IhgAVjUvAtyivKwU19DKBRvI1oHUn/a2WAC0vu5a2aVVFkEhoAC\nIvUKcS8/1+I69+YpzKAQz+9o0byANMVe3iNdPoK4sKMb6Rj/aFFfhKMWVQ20\ns8QVSajg0vp8mr6AQlJ7+Txh8QtNsolQNL/1UZ6U8YErGJjqUOjS7CeWz7Fp\ni+SORWrWgd4OOOhgBsUNNKouxy98deY6VsVtF+/ZBZw13x0sQP2aUny6dzYI\nRW6UMeyF/Jc0mjHF3qMVIP3UIyu+wrZ1PVRmYBFfXvZLanwSOopcSmZWUgHF\nKc2dpo1Sz+RZ0MdqsmGhqdvyTUzoZTxBS2bVW/wNwbNkFvLg7ieXH0qLG2ld\nnB4fxzr7RioxwO0bkn57Awo3rlNBtUantvIkgv5m5JXkJr8GZv3CyrektGB4\nin9FdMYCo5PUnkf49OR2gW7sSV8wQUJ8+Eq3q66yDNkBaAEPrfeHrz8VRR6v\nV21jrussOLfASfLwHn5piCq04QCv00PfKktOH0NVAlqVNLTZzwmNZRFsxNzV\nz4lHn7f/7Hk2r9tBQ5sWI1ks2x1oZZulk+inyKxA6uzkOYDoWrKFoPuBdyYT\nLUc5\r\n=Yns7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"405607237a611d804caa0b022897b683aed90ccc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.e0c346286.0","@material/theme":"12.0.0-canary.e0c346286.0","@material/feature-targeting":"12.0.0-canary.e0c346286.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.e0c346286.0_1623342939059_0.08326528970292091","host":"s3://npm-registry-packages"}},"12.0.0-canary.f43af5633.0":{"name":"@material/shape","version":"12.0.0-canary.f43af5633.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.f43af5633.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8cabde55be210ec00685872a186c46a419f15633","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.f43af5633.0.tgz","fileCount":14,"integrity":"sha512-In/NiGvN+gRflSAZQXXZm5IPDlGeBdazOo0/nICph2OpTH+/aLYDeNv0dajIENoblUmQsSg1Mdo/vbWJknINRg==","signatures":[{"sig":"MEUCIASvHUX4/hbvQF6o7XEc1IYZHttMAMqP+ObcSp3Ga5vjAiEA7k34w+cc571AN9JV5f+Vvc+s+vxatX5bcYqYjg70QfI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23689,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwnenCRA9TVsSAnZWagAAtOgP/3u9Jyj7/74zQA9JyFxU\nRb+r8QYfqx01y1KQjHmy0eEssfJqQQInStBHNRjwvwP5nywEz0WPbNk1rEJF\nGwbRBQuBX/dS0xXyeOkPyoULNCaR+1JxzWMZltqDDn11XSgNDw3kJbC4aRMf\niQI2EUqp1j++svy9c+9dgLAkt1SfYlwDTkee0zMwFmdj6bFtXk7bKllj6+JA\nUwqngPfhm+mCb3JY2jzqCMgwtCjMrldGXTZSK4A8iTaIz79ajIEhlF5QQt59\n8pt2t/bXQRlVVf9QoQjKq5b991vz3G0KtdJZZcHAThZTbEzB6qju27rztOsX\naHJfhKSF0aDgtRBvNdhWV/EkFmFGxvW6KhexAr7Jmo0QY8DN+xTQ4mykcdIN\n2hiMBZIxDDLIVq4K3e6XIqzexZloWpr3KJYuq86z1Akc7qZvhNmts/+LNxSC\nywhMsApkHrGQNWWhcjCL/+unJyFII/8u3884+PSQTxRgdtVBhiC2aSDLuttk\nNA/a5axYfEBMDNOQ/QOM1xVKY9e2zkPUp8dbBEWnYhdG6EAVPfMr8EMRJ8rc\nLzCIVTPQcxVaz/+gq41m/f1hMhkTZ+qdBXoKr+94DX7sF/UVwfky9WDy5yR4\nBuNAuPxiSm87yXg4jcxaP6iE+BxZPHnBF+dx3LNOQNH5Ru3KEvnigeXRMH6M\nraAJ\r\n=ITKJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"6889f0098642c4b4f3987ba353e17a9a22de856b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.f43af5633.0","@material/theme":"12.0.0-canary.f43af5633.0","@material/feature-targeting":"12.0.0-canary.f43af5633.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.f43af5633.0_1623357351633_0.8028892582669123","host":"s3://npm-registry-packages"}},"12.0.0-canary.8415ae585.0":{"name":"@material/shape","version":"12.0.0-canary.8415ae585.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.8415ae585.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ae82fd56ddd87178111808d53d6447e0296fc6d5","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.8415ae585.0.tgz","fileCount":14,"integrity":"sha512-lEZwqBzHrV+othYAeQEPvCCrsKcZSqCOYQQsObFsvwReQax+uVVaiQjF2ZMlIpS4lsuYgzY0EVddrLPq0e9O6g==","signatures":[{"sig":"MEYCIQDa4AKsTNWD8XwQ+iANgkguxEmZQLvHlyDRt5Lh11SkYwIhAKTX9erCBKGi4F5EY0BzLHhdMijPGtN4UmawC3zv8w5t","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23689,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgw4ngCRA9TVsSAnZWagAAg0wP/ieMoKdlk1aaupLLe/x7\np4WpliN80iTu34k8Qf3Pc9dp2lVIQINCIqPAa6OZRM0eoKOpgAnHY8Wsm9yv\nKb6OmXTuwxFCCnZPbK2hXL8vnR5jh922O9vng3J9UYy8YYAsPnK2BhWJBEvH\nEGo6av0fGci7spW4vhTbymNNYCRmar58lOJTRXDhIsMox9UvS0YSr9FwU/Rm\n99g0SnXRzDHhMm3gqxdWJ64YnxElQBZQfWD87ix2o/b8RLSibKYUjb3KaP+4\ny8Pva7JnDoVxV4Xh6LY9lB5pBiRHueTnadGTPiKKXi3t6WR3bT8eM2OCWvi6\nWYpJ/9EHsMuej/PPlFWUF4ADTKLXIrgTDFwqCzchouGK3jbHclxLhMLrWa87\niRb+CWLpf0YiOqIRqYBB/U0PVNSMtIZrORfJCeApvXbmfm3JYQQz0neuuiFt\nFypooa7MKtZI/cupLphjYZgkIasCKRP5sBeoeTHOL2lxiF4nVKq9+eBC074T\nn3N2cMFx359gQHDfE/UOr7DupM8B4tbuhojSqvSOlzXfO8QPDeJtlN43QjaC\nGN1hlitkjzvgFo1gqWpXvwNACq2h+i7Q0kSkzqm8JEQ3nnhcqy/3KvwaeYkl\n33k1onb+nwI3ZcMEihaR2adcspwvo7FREDG3VnH4o2LSOoj8ardsKS/UdkeJ\nkclo\r\n=or7a\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"d00f19e41330e3956e7355a23ea132e5ff37403e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.8415ae585.0","@material/theme":"12.0.0-canary.8415ae585.0","@material/feature-targeting":"12.0.0-canary.8415ae585.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.8415ae585.0_1623427552227_0.41965696453919676","host":"s3://npm-registry-packages"}},"12.0.0-canary.598fcccc8.0":{"name":"@material/shape","version":"12.0.0-canary.598fcccc8.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.598fcccc8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a46b82a2ecffd9a9ef2bc4211de23b719b619158","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.598fcccc8.0.tgz","fileCount":14,"integrity":"sha512-qkMvEDovFuAQ7WmecMo/FLOZUBdy+tByWMmhBUWNQMU8tYNjDNpuMhgEiGXytfYmEv02qbVLHhn9aeCGVWd3+g==","signatures":[{"sig":"MEUCIF0ldELg/yRKxg7nhoUw04pltcizpVmM1HkD9S9hSz03AiEAwUkfaCe8l8rBITRqy7LkhovyUYdWyqJAY5HXZ2GUkiw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23689,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgw9mnCRA9TVsSAnZWagAAyeQQAJI+UKiiSH8PjsnvJDVe\n07VDF/povTASNfouT0y8d+uAkmJp69TE9mE2+PwiWOH6Fh/W0/JLAQioyhL6\ncL1HoNDLN0AdyUUGK8Ldrr49OcBlJqIQCtDZ9VEe0w6EWDLaRTBJmPBvJwX6\nIgAl2SluA4trpJX8E48BLljVeV4pfe9KHtXkgwaxUmBurKlkgzdRe3FcR5Fr\n49h/H/usNDqPoHkpCsF2hP1gsPKkprhgW7OFFi8wwYKZZcc2i9A4iTfcI1J1\nguf74ZNa378ptoRRLLmIYNEnaVpgryTrwU4MBRd0eww3FNyK/qj3Cv9jGjQc\nFKHZjJ1/mfkQHSEgaRDTElYzsaXaMmlkB+UJyZdYbKMHWWX0+UdwvLwvQTSE\nsO/kB6M8kTs4W0gN9QoLqSJT3vF7BbAt9r9ex4My95jXyBjH/0DyyPPUQriQ\ng/JB0YhZv6q/IPDIuQdfoNG4fgTcZ7PQRl1cKcOM2BKIkrbrNEF44hHTv1vh\n2P/qarDuSV3TB0dt0ZeQGwPY7co8tcpCnjY0ua251f8IEHieFzF+z3UF7gTl\nbxSDnArO4PMsCAwvs19Kok6bJ4mRSdMBGY2KjTWB3Roq72iJTjxDKJOQdSSa\nYA9HBtTf6gJL9PhU3yUYB7zeKS4j2+059MVD9ZZjfQNU0fyCH19q7oviue2r\nFkyU\r\n=2b60\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"ccbc9ce9b0bfd89a7b5d57d3e0d6bc2ae297f66c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.598fcccc8.0","@material/theme":"12.0.0-canary.598fcccc8.0","@material/feature-targeting":"12.0.0-canary.598fcccc8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.598fcccc8.0_1623447974972_0.6034031135375157","host":"s3://npm-registry-packages"}},"12.0.0-canary.5d0605188.0":{"name":"@material/shape","version":"12.0.0-canary.5d0605188.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.5d0605188.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e311ed5e230bc10dee94acdacf536d2fc797f63f","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.5d0605188.0.tgz","fileCount":14,"integrity":"sha512-lSods5J0YlYaJ+zVOdIDF9fmR3VGh5TCt7+W6tJ+ymeG44M/NiM1Y4gl/bHWVZCVpVT173t4IKHshgKYFkHkxw==","signatures":[{"sig":"MEYCIQCjjyP3qC8pim/n+lDQWTzOMKnAczeLavmvWcG+K4tvkwIhALMdg1g9+Q+f2sPnJs5A9f8GH1EJq6ZxfzsRPLqlO5B2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23689,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgx5Q/CRA9TVsSAnZWagAAgoQP/RFW3FwGTHqE1864UtHo\nZPNgEVZ/Rj4yZCfUpr3x+EB4tCmo4i3H+uQDjfzW2dgx3xexHOEmEfUg3l5I\nUf1h0mirwAZkeSKcfHmPCsA5kybSqFqmPLHTJ3GFIRedjVZihQU4QpmHfe3C\n+urDfd559nxKx9QcDvagv1D/SAgUCzz5GR73/o8N8aUVSF0+Yf8kMPXi6ETK\n7PvrdsKGpQ1DBweYYZZJqPiApUF4sBB7G7bf72zcR6482jR3uE0xaLZkp89K\neekuWWfIyDXKpgh3GrFcCbC3jv2lWHATT6frCPoXM/IZzEjjmbOM2Q9KrC72\nm3R2i+HYl6bH0wmYNpvmMI1dVu9pK6hEiIsKxQP07n+EPnOf0jOUSbrK4k83\nlAFq01E1z9ZeWhfFOcAK367ptIw/ZRY/Y2CGDFMGIK+JoMnBIWwfwt7Oz6DR\nDhYnPPB+K7rQDujcG6JJXK9t5h8cL+qXcoWeiGVacBTsU2hIV9Hzecv3ehxv\niUL3ZnWYvTi0L7qS1EnOMUG+E5sst91HhtJN7ZCPpF/RTfjftoorok4PVohP\n23UQbX9r93WwDspR0ncko517ju9TQ6wbHmUcIze63V81C3OpUeaFdUdZu8Ib\nVdLgF12BEbNsuswIE/XcZZp5vZfqIBVAiA1WqpkvUgWW0l2jlWVIRaD+zI73\nnwkv\r\n=Jnei\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"0ecd220c6043621c1d471242f32f317475b671f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.5d0605188.0","@material/theme":"12.0.0-canary.5d0605188.0","@material/feature-targeting":"12.0.0-canary.5d0605188.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.5d0605188.0_1623692351451_0.11542133232927387","host":"s3://npm-registry-packages"}},"12.0.0-canary.f147a2271.0":{"name":"@material/shape","version":"12.0.0-canary.f147a2271.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.f147a2271.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"42c7d6d7a67f3c65c1cb11dc00cea765766bc004","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.f147a2271.0.tgz","fileCount":14,"integrity":"sha512-nvZjWjEfmreVKAxxBQMlZLY2/VXMYeXhOTg51wLSmEEGvFqvdccvWcRAKmxiPwy4MjSQ01dtISz0uAO2nOrL+Q==","signatures":[{"sig":"MEUCICKztiYMGUxjey1Dx2ShFFLYoVpmIC3pbIpyzoZDegKWAiEA+tljnxMHqvH2T5mygDTFg4cuz2JKjSUBaAScyNqtGIg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23689,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgx6txCRA9TVsSAnZWagAAKDsQAJMjcBjuuyFbwml+9GEn\nzZsa+UbQEc2zJUZEs51zk+w1YxZHGhnHVvMWCypiLjmNNPwgGFMOvSaZpxXe\nd9NhMbA0CAw6+jIR0mXnLjt1CVJEqTv2rlxTha10P9XpdcDkyDgR+Q+GRXrC\nqdh9txk4h6My79tT5+aM8kPquUd1K7mv1Ljf9yFpMF4H5qJtlSDcrnRLMl3x\nelxEWIGQLL9OLn13TwwUoiZ0EuqJnNnmPPBD4SRE4CAMsMv80UBzheyKLgiO\nmGLzGe0GGBkEbYmGh4IMhxaMDrkkOD9nDUb7L8RZadEb/PAY/3V/Cxa3RnIH\nhhkAAiQmTaFeT32oWdJUSjsFsz94IWQrbbRTiCupGBKRSILXY20B06Pn533l\ntxs215GjoU7lycFwYFgjOvAEw59kDadCz/ADj0N+fQD735sd1/FtHGzI9lDe\nAt7wauzhG9YRpuM0epOkvJwXj+Djf7WHQjowhmKPXyl7+P2u5oqc5p78RSOQ\nRvAFt01OQWYOqaQLDD06yEO57Gku+TfCXSmMb25wAmn5/vTXJd7HA6JYM7Vz\nssJWGDsh9Up1uPjBSEzPzGDyjg2oHNcIepFwxKcKLHGwJg5FIagPpmCEeiPy\nvPAYIt+wM6u8Zc9E+CGpU7/LERIdEFVs9rEyUnORnM5tF/kTDTvt9wOlv2cO\ntBJV\r\n=oTEI\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"70b871f06c34302277b9eb3064110dd70afb181b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.f147a2271.0","@material/theme":"12.0.0-canary.f147a2271.0","@material/feature-targeting":"12.0.0-canary.f147a2271.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.f147a2271.0_1623698288927_0.11869137230800386","host":"s3://npm-registry-packages"}},"12.0.0-canary.33579e00b.0":{"name":"@material/shape","version":"12.0.0-canary.33579e00b.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.33579e00b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"89a55b828638a3414da487a735bfdb70f9e77736","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.33579e00b.0.tgz","fileCount":14,"integrity":"sha512-qLFeMBRxvJJrSyE8ddih6iFye5awSpDXZjihMDNOkPpNvtED1YqbOr/N0yzNFGCy+XAfY0eWfX0feLH2uL2REA==","signatures":[{"sig":"MEQCICxEczIED0Kmj8s21ySvSHNfpfLNr5vd/A/eYxypF1xYAiAqNsZj8/tYr2XfGLdn0E/ThyI9TJjj+uaViXkhePVS6g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23689,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgx/KoCRA9TVsSAnZWagAAQQgP/2soI/KQ8+i9JcAfCZXf\ne9iXTKt8n3TY8c9egUsWXvlp3jhPusrarICnk8ut/f7CVuwnI1n5ZOqqSnoz\nL08ZCH11fOhI2pRjYgosp8kuDrnZtMZH+/fU1aSBLs9CAYqJbZqK1v5HYt0N\nyOqlXlCm1AsRshvcgUT/G0vuh0zuyok5fszTjKY8QNuG0jSearw2ia7fSme8\nXZ01dCW0ieY9HX11LBO7OoH87lPib8fTt9QjqRsG005sMoaRC7MwwSq9XPpD\ngz9p5RaLzPtuk+Sr4Hdp5RO1lqtCfroFhb04G0FZfOOQxdSqJuIoCVTVGWcL\nBMppyyKjStxJJ2dUTPUCfwS87PHXJNXymVUr2nVQnyeglG19yYYpwLatKnwK\n6//t4sE3bFtR9idkftPrdzpHbeYCxslYrFxrPT4RthjIenfHSLT1r/eWGX7q\nO7c7y3CFCgt6QJ7t+bfHLbTrwGCNaZVZF33nTX97pWBP716fj8P8PkvrSugP\nKvMr4693tlv5PUtc5eRszRPjWlsFDCTIBJQURbXDHJhiu7XmhvZOdY3XJ1Fs\nbUoS8jepQABV8iQkSX6nCPPHJ92br1KtYVNDHEQxXlFkkP9a4Q1spL5lYRlJ\n3JQXY1RwBPfWCOP4vxXYP5lT4cQyMqh9UzBgKe94Qj+IULutkXxsy++g/K+o\nzBvx\r\n=WC70\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"13a815cd8b945d23ba7ba2ebd6730088fa195237","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.33579e00b.0","@material/theme":"12.0.0-canary.33579e00b.0","@material/feature-targeting":"12.0.0-canary.33579e00b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.33579e00b.0_1623716520152_0.9313672454499766","host":"s3://npm-registry-packages"}},"12.0.0-canary.a6909c0e6.0":{"name":"@material/shape","version":"12.0.0-canary.a6909c0e6.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.a6909c0e6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"233b237cee92e2cfc6fc018d64606888dd30663d","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.a6909c0e6.0.tgz","fileCount":14,"integrity":"sha512-1EZcvX9YHEmtmyJZPY9bSxD/v9HL24n5UTLpa0XpYxb7+gzXyhZ98AXBC6QjUjWYCSt5D+eBCt9bdcAV13oQsw==","signatures":[{"sig":"MEYCIQDdpih12T5Q8WWS2+HcSFxtVOwpV2RCRRFEv0QUhg76IQIhAJhNzfhUmNdy9tukH9IU0AjsjeNAmitIjf8Je/2OQKHn","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23689,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyPGlCRA9TVsSAnZWagAAn40P/3b1oOvKwbjyJhcmUq3O\nvIxg7qiERPN8zSVEhKtsaaLcYhUhmHbH3Vj6PUgfVA+D6lwrwUGxDzKPudX5\njZ2tGOHPjqX7DH6X9CyprpWejF5wlGiN5egwQ3TA3WudHb7zf6FV9UCBjOm3\ntUKph08QfHgXwTPvxw7Bufpnh1Jk84CO2r5MRQP9WtyYwuJbrSvVIrCohmV4\nURjAvLT0MkugC4ggDyj8N3/VtCxpUpd6UHr1XQXPocq7R2pe6WEzBB45LfnS\nDpKcN2eYX4sHbTW8ngWY7hjncZh5J8bVjzxdjzAQSRTjbHaTvbG/atpynD0l\nK8P0Kiwc23bo+yDuYOkppDqERaECbRklPlYgFljNbVYtZGzEqmTzjnE/m2yw\nX2CTjkQImNv4EWvdaWFF1/dq6CgEFBhCsuTyKf7M60F5t1aMPbw59R+bZLDr\nclr64h/P7RTdGe7KJo7Lr7juOTUxInaEICToQjE/hTranzTfROtkshLVY0N6\ncEuO0s+ahSIh0IEo6Zs4Pn2ibEIBDhd4jeRWNUwyDf5dTfex/7cogzzSTQ0T\nTjyuSHr+j0mPy8pZwCfQF0WUmOa/0ncsnUimFwMMVYQVHP9np8XSqYICxMwZ\ndfe0JcYq6LcmsGGymIZb7vXdbaIExDQHldSdKG1vbyloSyRi3sai7JqZ9aqt\ntfhU\r\n=jFjl\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"f4852598d008bc1750e5e9d2a0e828aa8804f87f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.a6909c0e6.0","@material/theme":"12.0.0-canary.a6909c0e6.0","@material/feature-targeting":"12.0.0-canary.a6909c0e6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.a6909c0e6.0_1623781797097_0.3549271381160122","host":"s3://npm-registry-packages"}},"12.0.0-canary.c18b5925b.0":{"name":"@material/shape","version":"12.0.0-canary.c18b5925b.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.c18b5925b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b5c861ccf84ebbc216b36c6c850f1e6b56cc9ac3","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.c18b5925b.0.tgz","fileCount":14,"integrity":"sha512-jGp6EW5xHJ3GsZfpeuRGVIkZN5AbcnmErxHn3wjE3iJ4Wji1eO7UKqU9X6pM/q4Y+5Gu0cVN9lisd18rca04mw==","signatures":[{"sig":"MEUCIGD8k2X4LDXTk0sPPvZnmlTQnzEYmNnBf7dg3oHcrVFgAiEAjpYNUhMkbU4yJmdNgmLqwnAaidLA6HNky4yGsgr5dtk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23689,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyRWpCRA9TVsSAnZWagAANXAQAI591Zpw6YMDwB85sGvZ\nTpb36vjJHepuAo5rTcQ+JfbsK5IBkUuTb6OrWOKvMkHn8gpXEhLDl9BKyO5f\nEqlq/bFSnU1Mz2xcne8rrrB26RijBRpatGWHWE1S8WnBvIkTCV5RG8aisfaa\nCaR2lA0BYsw3mvuCWFEvet/QA8GDnoFHcNovJVJtsZf5eKIFfWjkxUluLvsW\nzynVNnZRWI9bnEAz4YQeawFo7iKfHyfDNBVPHgd4lAv9A9U8hWhQK34wsV4M\ndDZfKnkybJ5ufssMfgqvH1nTtxBd8VvZGQS8DymqLQCc5KX1DfvGMW3K5sds\nmJt6ZWa4AShgtV5ousRyI0XttTl+jK7aPOLhcKENdHTUTWSNgaVTmWm8vQ03\nBGDD1sRCh4OLUbaSwnDxbKZPvrN/XxAW6AiueLhNDyKm/jK5/9wJjiReg0X5\nrU+EdyRLA1GKlDHHxzRVCGJmNjcjLmSIh3rq7rxy7O9GKTOz5dP+pTG0C8W7\n1k+MDWxVY6v2mKYGVM+e82xGztNRghMw9GcHPw9lgMGu70amOUTa6k9fcruK\nYlAeGLD96XOphxUkcMySp2bt5FodYDw84f09D5HptnKR/S9w9b/eTIqKgFGq\nHhamaQinF+2wFXYJs7dJMds1jHTtrW94fsNX0RfKLAyY0ZskzHlqctW2Ujhf\nG9Xp\r\n=pe/Z\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"bc767c077b93ce415f2505e54f329042c80b0d3c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.c18b5925b.0","@material/theme":"12.0.0-canary.c18b5925b.0","@material/feature-targeting":"12.0.0-canary.c18b5925b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.c18b5925b.0_1623791017668_0.09714386323003876","host":"s3://npm-registry-packages"}},"12.0.0-canary.7ea2e830d.0":{"name":"@material/shape","version":"12.0.0-canary.7ea2e830d.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.7ea2e830d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"60007024e5507d8a098da7eb141edd2908040cd5","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.7ea2e830d.0.tgz","fileCount":14,"integrity":"sha512-sIWdGI9or7RoV+t+ItUqOSbwyvRkMQ5KFdhKlOUQSuglvns9POZ0UKXa8GE1js4ZF97nAO4oE5UyNwfhj2ydgA==","signatures":[{"sig":"MEQCIF/wfnNY2WIkvyH1gWHC0E1VlpFg64lpRD7gpdY8KFTVAiBQGh4VTr9McAjxU4eio7P0/3HN/u/GHR5iKkI9lBBl8g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23689,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyS7TCRA9TVsSAnZWagAABOkP+wbr24mxFQ9HhCXKl3RL\nnuBWQ79Ar3QQTqTgLuBWzP7VE5L2mYQ8DIyTjycVfWdgu3ERo8sA+dbXpiTQ\nxeOP6np69++ZEvv357/i9K8X36YKP0N849hLYZIiy4U8JdRkRVzKnLXIvcHv\nGlpJN0KHrrO/g6CQvSvOWBDdhsgCAxTikMTyx3nNumbrY5qd4TTYvMerIimq\nP164FqUVZRLuM2KKW1MffVdYIxcLPOISaixp8WHF0MP5TneiVlxcw2x6p7kK\nJlSjo494cK1jsEXJNpwzVE1M4gNQk4h2H1+JHNwnSQkVHQQnsKqHxS8tbAIx\nmEee1ncC4Kpfv5mvaac4WQylh8fRSCdK5puqrDUjuc4b7HYrUPqMKlqMUTPR\ndlofexGyVDYwyh5e/WWR6lC+ZkUgId9oEMtOY3cdD1Rey2qjgGA6+Xv1rFRA\nGSfQ5UCoOcm0yq0+C5xa87XQA6sAdn1y4/nSTqQfltkziU92zxYkszYOICZ5\nLcfhNUiSIdDyfe4zGNMYbr/yDUEfICJIx7z31KpODova+y545KiVjcA/eOTn\nta+35gW8m4rgBfHx4HRSfVVm7Gig85fAo2TfRBsBaN7gBmr8mmXsUw/Osobm\n8Qkd6Yg6Cbj353emC9q7fGsDvVJSchv6hM9vcMZ4a8YSCpznl8jvZMcfogjx\n4L90\r\n=ZC/Z\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"e1f3cd5692e7f4572664681a049ec1ea1548eb15","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.7ea2e830d.0","@material/theme":"12.0.0-canary.7ea2e830d.0","@material/feature-targeting":"12.0.0-canary.7ea2e830d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.7ea2e830d.0_1623797459787_0.7331407736719908","host":"s3://npm-registry-packages"}},"12.0.0-canary.271fff902.0":{"name":"@material/shape","version":"12.0.0-canary.271fff902.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.271fff902.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f863e932cf2315a5a823dcdf4b1e625e17ffd4a1","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.271fff902.0.tgz","fileCount":14,"integrity":"sha512-+qEBw1Dl8JMK+8orGpBhozl3tTTUHvqr0NZ4VDaA+bquECWCjzIYN4J9m20GrQsOt9Z4pWk9J0qFSsf2L7PH3Q==","signatures":[{"sig":"MEUCIBKtsKejS98HoMAGpj6m3x/QBFyWyFTmsj/+joHO+YDYAiEA1rMDnVYEsGpyWtj2kSHssxfiWJ42uH1CZ4II0R5pe3Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23689,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyS7dCRA9TVsSAnZWagAAbQEQAIrbnOYlWQ+S1iA86bk5\nrXWpnkyHfuFLWWV0fgrn5RGAxdPrcR+pvFIAkCEaPU5oD5g71svtCwXma2jN\nqFLmZwbSZ8sFnqoJildICQipvpkzWpc556rac1aH2Mmx83ZK64N6JyqnM7Eu\nEeFPSkH6wLZZkQIhAn72J5T+UcfjSVv7NsPzQrKNizfD8o6ZFAeb4JMXiltW\n9y/og9O+FaeCwTathd1E2XJuZdHcG8rscT93RrIDXmNlYny2vo0TEFBkPQAQ\nkP/r5A8g4WJ+HqdVXMCPMqnLfW1Sv+sEK7L20CIiR5fHk0rjqLMkfd+E8iWY\nWk5OlM4zBBQ98IIqbJgU4vgOOuqo32i0UQNKUj2aNAN1bEc0cchdhHaLWTA6\n/tO3EvOIkXCxdqW1EdsZJw7L0whg5S7VPyk/Aoi+o+DlqaQhioCzn7kGHMJ2\nKHcZrfkbwRXL2y/wakoUi7KFW/72YWhTjgLLxmKDm/WUsX3ViHGuFxfgvd3M\nDSse6/IwN7Plo1CN/OIY4vfU7uPJUwxeXTCbBqkVlWeQ/MjeWSkvpMEHmwPJ\nXTEUivfCso+zjOiCyC225RugqRDZT3jGGBjleeFKgzhvHqFiisMFdxO5/3ES\nI3dyiEhXJAxuAwF+LP6fSai+JWtNnJsLrpa5GRbb+DcjjECbJ4gi7Nd3lkP9\nqdHp\r\n=zBqE\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"4306227bc7e5f014c5e961178b436b394f0dee6b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.271fff902.0","@material/theme":"12.0.0-canary.271fff902.0","@material/feature-targeting":"12.0.0-canary.271fff902.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.271fff902.0_1623797468887_0.39576788397234863","host":"s3://npm-registry-packages"}},"12.0.0-canary.d96f0a1e0.0":{"name":"@material/shape","version":"12.0.0-canary.d96f0a1e0.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.d96f0a1e0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9e08e7829f7fc7ca37cb3bc53cc367285e2b5f09","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.d96f0a1e0.0.tgz","fileCount":14,"integrity":"sha512-1XEJAF5WRKkIOI7naC3FUehHFQEaeCEkeakeeUxYH4lXeF0bvgO+tWDMgw8vaJUAv6oWa0N4UqBsX0dslG5V8Q==","signatures":[{"sig":"MEUCIQDfjf2tdeBBWImQgfrMbIPFwAE6CpDjG8zHDqYJNhK7fwIgYq0Tl1fFzQ8GrgbpvgG5LhcH0NTbZi+WBdDFVJBZ54w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23689,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgymfKCRA9TVsSAnZWagAA1p0P/iOENvU0ZgB8G4G973rm\nJ+kCnKIEAOCDBydu2iPWEVxuzNcnoJaCgJh82p4jm65UG3yWE41DL9G4V5p1\nK6F4ot0kZS3bxCZUXIuHPwLH9Xnnx4KF70Y1H5te+67vNJPO4uLBeJA0I4y8\ngQE0zDJHtapCq6AA2KlZh7uQ46JnZY6TTtbbZ15no2t+uA6f2QR8C3/lu57x\nGDxfzgzREvsq40aQH2nIOz+QgfqdKycAn5hCuahEWTrXK37APVF5b1+BiqhE\njvVZfi0XjO/MRilty5GJCq84x4YQLlklLo6ZsaT1M5y0Uj+qgGJ0b0c6hdAF\nmnyRs/Hul5/mvwFCg+1SaWQ16x/RdkpWfkgByOiLtiDPCvotGxdZT2fmuMMV\n0Ls/oCqrqcx6rDuRZavVbV/PK6GJiTnT9xurrUSi1SjnrL8Vo+IvboVUTMq6\nDFqBXevSFvLOdJd/W8Sg6Gjfmog/Hyb+DypwltXU1Gr53buh4ADtt0D7jhPX\nyIkJzOTSqsj/hABrXjTXFQ1BnvVh5hBEIkKpjVBaqJ9RHRl07oIIhdFHbMx4\nJODenaU/urscmRFJ77IXYKKVhQbIQ/m27cO8q3SOzQxdWwuAvhCl10J5Ll2o\njIczGyK67chLioYUskIRe2crSbB9YeCp2yUDarj/faEuIlqi++GYWuVx4Ddl\n4Fp6\r\n=3NTi\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"32470ff9121448fb2599b2985e276f51563ed4f5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.d96f0a1e0.0","@material/theme":"12.0.0-canary.d96f0a1e0.0","@material/feature-targeting":"12.0.0-canary.d96f0a1e0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.d96f0a1e0.0_1623877577874_0.22666993004443414","host":"s3://npm-registry-packages"}},"12.0.0-canary.a6183801a.0":{"name":"@material/shape","version":"12.0.0-canary.a6183801a.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.a6183801a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fc3260e67fd4b2c9400587efbec35e7d67fdd4fc","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.a6183801a.0.tgz","fileCount":14,"integrity":"sha512-ipiGYUbhvmLRtbVsPAlpdtWz0jl3jNwt4iemHbBvcqZJqjdS+WSvKhErTeHp/2e6KasccXm89tNbEXNN0S1doA==","signatures":[{"sig":"MEUCIFqYIzN7goY09k7UrStSwFJ9L/I1E9kdeKo/HEr/ZB13AiEAnRTQKRv9dkf6IBalplGHb3ea+iLGPOoH2o2T8+icJWI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23689,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgynWnCRA9TVsSAnZWagAAPnUQAJUdjDiB6pM5xilHOnGq\nsj8XdP6AKLmXkkxyjNKRM1f4Mi+JJUXeXpDN2ghUkm9mtCYs610LAOZn9852\n3VGGR2GKuGNpY9JGzT25Z2RpZ+j7DnIK5taidDR2UmMu13f9fd09JirQKkNK\n6x4cRulm8GI/08Oui/ZzWlI6/sjjG0Qpx3RGqij4ZuMxl7eEIp96qTViH8bp\nW7j30egxJTFbZ4WvPLCSk1zpVlqwT8oRD/FydLj148K2mQ1XT7r+YrNwRS/B\nqAcRVdvM2x0YtPCP9TNTKxImOIjyRCEci2wPsdbBFadSrLn4iyhHOfaKfo2J\nPnOkHYOglBlrvmqLfPcFjG7yDZTiQg9si5hTE4x+e8qmR+THDTpar7nQ4+n8\n+nsjbLV5mEO/0Yy9Rl7953nDnJU1GtwoBvH/izoWxR48mhH4nhX5Lv7T8DsL\ntWdDNy/9BSX2Zbso05MjPuuvyCjHWdgsETjHQhZrbq0oPJhQ4MFoDhXsxM+I\nGywSHTuaew2Qx0IdnCkg2G/6XfXDpyo3r5ZWDdN/khNVdQcXuarxva6jd3BU\nrHof2S53cGGP3aVMxdRk9bW7ajCXbPd5YKp9ZBOivqZ5ZAj75epb2onBQcFY\nnjLWM1/IjwR+gv8tEBBOJ61oCRYGjZgWw0EsqwnzZrAW+hphxGRaZF1XUaTm\nyX6d\r\n=JYti\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"b5eb42f66e2a670e1f9573b4feb1a600a95b49b7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.a6183801a.0","@material/theme":"12.0.0-canary.a6183801a.0","@material/feature-targeting":"12.0.0-canary.a6183801a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.a6183801a.0_1623881127281_0.49056400367690545","host":"s3://npm-registry-packages"}},"12.0.0-canary.940550232.0":{"name":"@material/shape","version":"12.0.0-canary.940550232.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.940550232.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e2158286e9401317e7d0f9c112f43c637d3c4812","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.940550232.0.tgz","fileCount":14,"integrity":"sha512-M4GZ5tF71YamXK+Bo9V9sWD+8Vtq+1jLAcAEYWAKEQBtGRnShCwmijTwlHO21DfS7eNeEhzWx244u4PeH12MvA==","signatures":[{"sig":"MEQCIDUNZG6d6uEzP4uv6CxCy/6Ul5VMQroxG11ENfQicOoeAiAy0xh3lWq1CR+JrdM2F8zJDL2JhLq+1q29eZc89EUeeg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23689,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgy6UfCRA9TVsSAnZWagAAjlEP/0hLyCKW7lnjUThDIxHG\nGyqcgFb1o7TYgifjpNs0k3qYuKeAthxu487SAIpcRUKg6ErNXIxPn2mDMZUc\nrY47o7hiS5gUSxkIKOZXDa+gncWskNHeX4Co82TZPLvphUeTDXUfIl60QM9v\n5c/4MV4RadA/jLwtgrZABDVoMHc61p14vyPuwhXYefxsU04vtuzVYyoT8p4X\nOi3bm5pm3i5QoLlnHjn8xmrlsKpV3PJ7YRJJxfAAN/7Vs0Hvm9b5hSQMIeQG\nYV9RuvmgYsbhECpBdu11Yyor0WaQqVqzmtFexSpPWzOTuNdLesxJEMDfJhat\nbfulsGVqxHnYjveIjyWSWz3mf80V3n66U41ourZGEDlB9oxHLXiz0fvF5YDZ\nILWv3OS7JDF7Eqx9IipJR4wak9ZTJPulXwZ0uVPV/4/Hlzc/O3nFISEuExJQ\nlVvbJAZdPmNxMfdFSWMwX43bg5r3ElFVQzoPyYPJJ2xG+ySXHo2cGoetrece\nsdCBoewesb8OtM7sgLVEkcefbJ4Pnu5B5961ZWEQqKwlylL7/ope/6Vbd0I6\ngN5O00ZhIE673TBc4e5I4DQtxBxxWivb01DTnHvplfGcclxgsIDHXAwIaVIv\nNPJcNSsPrXgA/myfkrRnMqYOYKK8N7/H1GUw9aQOaZw9XFZ4qfUG6BXGwztN\nBL3C\r\n=67od\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"1d6560428828a2c7ac90d050a744265e63c8563e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.940550232.0","@material/theme":"12.0.0-canary.940550232.0","@material/feature-targeting":"12.0.0-canary.940550232.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.940550232.0_1623958814605_0.6553658679912111","host":"s3://npm-registry-packages"}},"12.0.0-canary.f705e8048.0":{"name":"@material/shape","version":"12.0.0-canary.f705e8048.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.f705e8048.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2d729a0a3256f99d0462a1a7b7901c82b743b4b7","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.f705e8048.0.tgz","fileCount":14,"integrity":"sha512-hKiIrxHWj5y4jjo8Cdd5QbLKK/mi7X1gPSIvQdMrdvFKjXh0G/GDutGDS7c/N2vqjtZeEAkrzxt8Sgq4nsHpjQ==","signatures":[{"sig":"MEUCIQDAk9EJQ23gFY38cLijsuzlcla5+gavHWrWRIkpPeVv1gIgGLyyi0dNZK6ArMOrsXNNMoUwfslFOOR8oyIaz2iozJk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23689,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgzLqvCRA9TVsSAnZWagAAun8P/imOSoGiRoELXMkkBYbt\nuXzq+QoJo8IiWzM66j8UF69CxKjQWLpxRPYMejNjhOH2Bt5NuZ71Sk6zXPNs\nf0ua7Ra7+7hL5TFrysgHGjTYfi3HUGzHeQbcggkBjVJJyWTCf8zrO3/Yyevi\nXFgawSRCF0sSj5lVCTWEK2L19e9EEjE+ji31z0RD9S1dqqrdmJR2DD7cXbT/\ngMRV3+Z2NlepOvhwSPKGggoLQcC/0Vbdq0I8rFfKtKCck5EcgwemBtBFgg3d\niys7sgB/sfEhK4jrOW1ixsIOAWvm+2oLe7YGE+BPcMVdMoQkiv1DYCEjH6dv\nW35KPWFNRk0RuOcYLmnz0lSA6BOVnj1FCya7P8d1+rufSR239zp5SU8UPys8\n7ZY5bO85SkNM/HdObIlGCkBOJsQxBk3rVZjYqRSw5F7cdhC0HFP12UdnaMlg\n7sZVzr2yGee1VqFVT7IcMCcYvQc/Xq3oHVCBsPmjofWqTWbucx7lT9VzNnTJ\nX0KL/dX+V1Ja0BJ7Wsb9L9XrQBRTU4aM47a965mbZ20ycrRm3KWbWOnkduVK\nq6ngjtatshl48XcamBpbCFcTfgf+3g5HIEWVP/CjwfnoNHHpcfgT+doQXNkP\nc7hZPsnOW3kLvIoqxjsGtl+J+qfo+US7NKQOdsg+6A0BWqpP1w9/CsSDzEXy\nGbFe\r\n=yyD9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"65fc1ee152f3abef35713b70962e3d5b848a5e78","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.f705e8048.0","@material/theme":"12.0.0-canary.f705e8048.0","@material/feature-targeting":"12.0.0-canary.f705e8048.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.f705e8048.0_1624029871033_0.09625784834050388","host":"s3://npm-registry-packages"}},"12.0.0-canary.08d791f37.0":{"name":"@material/shape","version":"12.0.0-canary.08d791f37.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.08d791f37.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b0c94221e39c9541d87eb97bfdf58d5727819fd5","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.08d791f37.0.tgz","fileCount":14,"integrity":"sha512-Fu9MD8wb/KbTHLXs8N8Y26jVFCmokP5PSC9vjm3VwRRjGC/HOSoPszvgINaiWqxyTtZrvw5ZGzfTCNprsht79Q==","signatures":[{"sig":"MEQCIFQ81SEwmD6PxJzx7JEQExPGRdvw53fMJ4dO6gzmlhLxAiAZwGOisSV+ar27sWCO5mPOW0svkP2wAAJu++50LoRSpg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23689,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgzQwTCRA9TVsSAnZWagAAKG4P/3k4mKHpnu/UyJkDfvuI\nLYC+tDuRX4IIUtwFcApHQ79p2PYwI14hXBkW/aff1SJQD4S9Ts7+5URWUpHX\nDg/fl/gE8DBc6p7ywLBfrE/z5JZAgAQ3X5NiGOnOEvNc8fqQzSrG1k0mx66f\nekPiBMDOWboEQeV/Mz9xGyxCANVZAqSAEe8Jg5gMxN7Pch5PLrqBeujWRVjd\nl3Gkc42ogOb5NGqLJEesGT4C8qeWbC4A7xP45iZwNHtv/d2u7ItiW8jCrq5V\n1e4SJxn9MX6mI0l8kgHz9O6pw2zzPXZi3YY1VVpenlBioSWzJ6wkBagPl8dm\n+uuMGINWmzb+DwGz9RVrwTLD0hTmGDdjE8GHZTIMT867QeQcuBYuAjcEUyPM\nD53TA7pB38Io4bWdBfjQ0iGYBv/gM/wKLr4GvQSNihRfD0c7TlCFni4o0ra3\nkACv5gvtjTzxG+JlajOEW73gC1wIqeDS36J0b2M3aXssfS1ndjOcQg0VO0mh\n2N2ZyDeSZO7+U/jXGsW72cHUa5PH1G6K3GtMprFD3qhaW6xFiq7m8OSohlnF\nPwuSzfO2cFLd0RiGTbTKSE+GjUhhJwmVhe/75M7M7msBZsORBicdhXyxzRTp\nbBInnjYyoDlCtBQE0txkp+/pmitHJERQcHEBAsIyR+Rqt0h7gCOinfFmcGyZ\nZ/s0\r\n=y4gl\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"854f301ec7183c3cbd2e62f9ab541f21aa6a459f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.08d791f37.0","@material/theme":"12.0.0-canary.08d791f37.0","@material/feature-targeting":"12.0.0-canary.08d791f37.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.08d791f37.0_1624050707186_0.35729326091375513","host":"s3://npm-registry-packages"}},"12.0.0-canary.e38d7440f.0":{"name":"@material/shape","version":"12.0.0-canary.e38d7440f.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.e38d7440f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c3f8bc5eb86c19f141f902e11a80d778cbbb658a","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.e38d7440f.0.tgz","fileCount":14,"integrity":"sha512-wTXe7Tfas38WX3IOjNyWmMWKpOIgWGdEh9B74wdZNrTXi24mwALZkUI8XHjGVutB9G8R2ifQvheol4Otytx/YA==","signatures":[{"sig":"MEUCIA6DrRM30BjNdryOZYOTKtMLQfrHUp+B+FnX00SQPD6MAiEAuey0Q4JLydFAKyhQVN3ScXpsBKyVdXgTCNmCByN7pk0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23689,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0M8OCRA9TVsSAnZWagAAOf8QAJcQRk/iZQHBxiUutNyI\nUA8tWHLwokcfV4xKwBSkwYpSTgnFGDlTPjAXaMXZmP8D3m8fbdseDQEnk2M4\n1kXcpaJ0ilwhlu9X3uWNhM0O4J1QEpbGLWi8WC+cXbP9ik/XJPVdwFi3b1RT\nsNGIYV8LRD1smWjsZFVjSk9CsrJ1rR8/cKb7tZ8MdefxHgHnkCXTerWDt8qI\nM7IoKyNWap1VaxlXPI+ky/A8CiporEKPe9wZRHeSVlLtjIFgCkjc+oqwuDI3\n//tnEM9zzpeLOfOCyeRJ/S6u9lAdZvhxkyD9KEmbHyKGvoU9R02L05ANch/3\nhGs7WB7xRVg2SpWi/k4OScAc7nihatrW4tRVNm/cN1/XKFUCQwAeTgdp20yH\nxK8eVO65ITr6Y2YDAhAQrbWMQKF2+JKBCxHuSDp9Vza82Lsod5aCdvvugwGL\ngNcVCNq2VU7R/ZwK2NdQfpxSP5oVDKIsZpOEDr90O4Fsib0kwl6zYTVMcbBZ\nud853M3cJkU6EoQ5Kh0CQwSZ5HEWh6/7uFtuNDwfcq3LyQew3g/s9ryNDUio\nhOlabCVgihAoxrmlbS9qR14NQ2YhB1TuGyfUXPZ8yEVu93zbbrigbQ0Bwstd\n8DtbIffgMZY9przEpCUnHOEQMHiDZDXEupE7csNydYCEv8Z4PBbs7imzKM8G\n00jT\r\n=QYXZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"1d46835e968c827eb3b359624ebb85f8e3ccf528","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.e38d7440f.0","@material/theme":"12.0.0-canary.e38d7440f.0","@material/feature-targeting":"12.0.0-canary.e38d7440f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.e38d7440f.0_1624297230192_0.6172308368215482","host":"s3://npm-registry-packages"}},"12.0.0-canary.75900a5a9.0":{"name":"@material/shape","version":"12.0.0-canary.75900a5a9.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.75900a5a9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"589c97a8f70c414cfc409695b9476b57f4d49d01","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.75900a5a9.0.tgz","fileCount":14,"integrity":"sha512-/GfrxIAcT4LQlznFfrR+XTI8WfRBtxceFgQowbQSkSipfi2d9ktkZvkKMba/XqBskhR1apGuUZOH5erQNBF6wA==","signatures":[{"sig":"MEQCIGm8+ZtNBzvI+1I9yvIFej8AyIvHGDUOTmeU1Cu/d/paAiBVvNtfn9byKsjsX8Rlo7n7ttux8gfpfpXwaGD6QbS2yA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23689,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0NxMCRA9TVsSAnZWagAAhlwP/32+kb7prCxguLgboPMn\n2bH9KK5FQEM4/YKy9p39h5z4TD//bdQL07UCTgnJNGQHLtBka1LXGlyMLQfm\njoCpM20wXvlhhBpL5VtR80QdcS7vwz5cmOSsgYuTWXTWdcTeEsTgInkH9f8Q\n+soWQp+afrtiAa8Obl7CHtVpI0MKzkpdyiOIvKhCERWMapFcv/6HJNZLpjpk\n7or22HIpe9+QZgSU2fk6zZ3peakxelyjXgIFwrfhAn2MBI3k3Gjr077TUNle\nNsFlP8QZVDKOGUanteeYTVjVqnFHr7sx56jE6cq9w/4KzRFVHAbJEDnpIB9K\nd6/mDZdxhtmx5U6A9hgNv98kYpx775tkMbVJnNsSF+yhCbnBBdsSjyFWZoL3\nr3I/R6z+2MOzfSb+tQ1gZrzEx+qlbY9cgu/LcZvST//PDlSE+wr8UE0ls9SH\nrepH9uFWcGqfK2Tkrt/igLppFEztiUwnEX04Rud08Wom9L9c0XL31/RBExqU\ndh7Pzv1XZiUXs+gD3hOwUjh9+6HExMnMHuSmMKwgGuJ/8p+Ev6g91FhLu0uO\nOd4zCpOG72X16NwXsPfj3JYvvoYc1oBv2XBEcI9zEUnqV7XtZwdwgLpRUcmf\nLTbqedg/Gaiy5smfOeUVqdXgHglhfZ4Q8bkcg5JrF9Sf4Znv9vSxYomqsrS9\n033f\r\n=gAbs\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"f08daf05a41f44cbb5e5c07039e1e165d123c405","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.75900a5a9.0","@material/theme":"12.0.0-canary.75900a5a9.0","@material/feature-targeting":"12.0.0-canary.75900a5a9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.75900a5a9.0_1624300619950_0.5109228361676443","host":"s3://npm-registry-packages"}},"12.0.0-canary.33e6f50e9.0":{"name":"@material/shape","version":"12.0.0-canary.33e6f50e9.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.33e6f50e9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2a879fef67edc314c665f2b915996cad6a5457aa","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.33e6f50e9.0.tgz","fileCount":14,"integrity":"sha512-i/hE/b7EyXpYvMQGvDGQ5tkiUp2XMiyXo4GV+2znhu/aI6Avl8TzMjiXRFb0fK8SJU/IAl0fEm7UgI7GZJgErw==","signatures":[{"sig":"MEUCIEJEpDF7UZgSsE8dwlZn6zMeIhWIwnI/1E6ZotmPvjGOAiEA7NSFXNtWMBcX11kaXjS6lC9Tgj54a/VlfUcfx7/Sqg4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23689,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0nxXCRA9TVsSAnZWagAAN9AP/39gaT1XnCluk4N9ExNM\nRhe8WnHUQGUFSwutsJxle7G4VBKNBL1A9R/f1SNrJIH2qr8pc8V9q58oCt5b\nrJnMHBVc4+Szv8dQEPyuShz0/OSII13G57nsN/O+uO2dEUZSm87kdB5jLm3Z\nv5zIEomzeHFqsJVJKIjyE5X3WVnm3GCPV1OSTaS7lN6QrlgvRAlYxFdFkaAC\nmPGLBLMRyXKXAsE9X7siFQRiGUa5L9k+mMRH1zezjdYkAl1wjZ/PpwdkDs/w\np3A55TcF+dYUZo9X4Wv3AzjmFtRJdvXsHcQmrBtM1aU4/bXbOZKa5JZ6LlxN\n9nVo5hpTLgVpggQK6+X+n1WEtIs3avaHIwZ+9rrhVqqYZMB9e65ng7m2hXdL\nGJkUMFhn6UvcKAcUKhdmDzWA9TD7cEY9hUDKsPV6fNDvPE3FFpR3Oh33KJJ3\ni4TRzyrKEJsEaVn6W81ETJU7OGnO9Bi14jIA1n0f2XDeprEOH6Mr9dG9kZlJ\nqRjVjXRTWXAkFGR5asiNYqe4YxnGI0dSBFz0IUMTAGKYEuuKzOX5JY85JNGm\ngsVocdhoY4bwzCXRIKtUAYTZdPAVpoX5vOXVLb5LZe1vpOLPVpvZ53MoyydL\nuNnGjKWsDaeY9HwHBFEKTsqnjeVuaQYCQAPtrUfyfcb4z+JCsl4k+vnmVzqm\nCSfb\r\n=Qj6I\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"fb208c22fe558f863d851b5bda74038d5a3b09d6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.33e6f50e9.0","@material/theme":"12.0.0-canary.33e6f50e9.0","@material/feature-targeting":"12.0.0-canary.33e6f50e9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.33e6f50e9.0_1624407127000_0.3274703419336811","host":"s3://npm-registry-packages"}},"12.0.0-canary.8c685301d.0":{"name":"@material/shape","version":"12.0.0-canary.8c685301d.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.8c685301d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e8f910af9e5243332c361c5c2b76d2bd3af173ee","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.8c685301d.0.tgz","fileCount":14,"integrity":"sha512-314OR8wv1XsoQnTzUUEYloT3Yds/DaZ2tgROnGI3A9pGD9WFaixhSl1UyMU7epn7iQcDzGTgV3A3ryCNGxQ53g==","signatures":[{"sig":"MEQCIHhpT0wz55ihZ/9hvuft39K1RUnt8WlFpgC7Uw+NAxAOAiAaaEvGI5M93Ap5Dzrd84rg80Ni13VNaOMIymHpzI/EbA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23689,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg03xoCRA9TVsSAnZWagAA2D0QAIypejQdBGyTCNuLDasz\nWgXzC7wZBQFQzbfyLHyAdgR7zzkGQ8RzxOtTJvrXANiGhhDWIiyM46wFxbd8\nNZedM3VR6EWVlKwx4lQ1PSQsM9MyESi3U0r1mR13LfqV8lAfVovdq6VRoja7\nGw4zd2SsV/0TkrFQyaSgxcjvg/p0JOG1cm+MYBQcAx9iPnHNcfUXc1ZDNZMe\n27AuJWvlqjA2g0utljQk6Val+2iz2UXyOYbC5i+Y7Xh1aG2mzxtDLypkb+ou\nDOAGeb7cztYeH1VoPrwn4RDEqe+7YcaMOcjGMQXARciSB8Pm7Voy8ujfZHgr\n7mVIX4VHUJNm/UbTU9dPXi97A+b0FE0cb6EkKCquuwCQXHogdsYkhJ9OJGgB\nIc5EvpPgBiwLeNbgDvt+gGn5VnnrHV2EfyWj/8LhG67E9+AtouqlMKZknPX8\nSHCF8g7r0vNEenHIVTyx9XjoCDtZLenVEV3+7JRjrpIfZWVc+H5CP1auGzNJ\nAWKc/acHDpob9YEJDqoWaUuQkWD67TR5/8gIlNhJLeQOnRneWOh5SroADrgS\ndnwJVSGZBfodN4k7HRTYG5km1iK2osOzO+6EcWrmOloOLmvf1qpKVI9V8YVv\nBcCkk8FRz8FOPrjcstR4Br5L9GLd227ml4d0Z2dZPVm87yL9Q3ktMNOOttt7\nKaUA\r\n=pCv8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"43d0ab810254e565375b55ae118522d89b7e9254","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.8c685301d.0","@material/theme":"12.0.0-canary.8c685301d.0","@material/feature-targeting":"12.0.0-canary.8c685301d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.8c685301d.0_1624472680408_0.741272599947993","host":"s3://npm-registry-packages"}},"12.0.0-canary.8c7d994ae.0":{"name":"@material/shape","version":"12.0.0-canary.8c7d994ae.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.8c7d994ae.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f2982985509b0e71d34502302f64f9f9106ce97f","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.8c7d994ae.0.tgz","fileCount":14,"integrity":"sha512-Cmqe19iej/fBCZaUt5pxQNTX/jdwm0El9HxvlOHzwjsirrDebxUsJqHaH3iyBw4ECurO7MDJ8cpEeIabFJvPIA==","signatures":[{"sig":"MEUCIQCPRgG/f+SL7JTQJa2YR1eBzRxdZ51TB+IFGFlY5dXvmwIgJwtFgWuBWeST9eE30Gvwibe38+UE0+7h6rAZXUAiFcs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23689,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg04sfCRA9TVsSAnZWagAAM7IQAIDIAO79W6TclwbAaJA+\nqdCheE2OV+Fv/waC8cU41IwvIjDJHLClk0DlG0McFXPd/Y5LR71Ods1ZRY6V\nmbJYZ+Ma/FPEMhRVnxyzzFB5YpOWAHLP0mN9kwNF0i76IlHwa31+uxD75HQz\nBmeFRQGf3spQRjedbgXnipopG/3tzqP1s2mzviocbEMYwkf2vUK5H9/B7ofo\nXiVq95mj84DStqhHBlDrz08WvabVGxv4ovM6C2gmQMgxh782D5QDYhLBBUyl\nlbNbdvx1RzPphJy3uOh+/gyKQMRnjB0NEeIMTbJ5YffgkxDiY4raTyrNxync\noWinoy7RcO2DZ2TZYEbtYjIYLCSAxofzNystGq9gBqyYTiDVWvgUm98XHxq+\nJC9TLyRApZ3iCTCbFfAUK4pawsBoJPODKze2lO4OQwnwWupQyN3Jyfv5SU6m\n47bs03fPvEJEq6ND0FS7PPtBf8jko1QaeUFeqtZ2xyHy1byLjCRfC4JVh+0u\nc0T0JLSBUa2XNHK7o6hlaXC2/8naHxMqUHCGRTRUw6wlFOu+bkypUOwOXTF4\ntffMjlQe7TDQJPtDHepIUHNf2b3nQV3emohJAQlqP6m7BZkCnuVamiNDoGfl\nkx1NCi/dbYnfKorUwxlWDDcM9Xr3zBwtyDlweyXlBv4+WeK1KWo5EtKLkhNr\ndOmU\r\n=9W2w\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"85693f86d68563f451e95113f3d03a29fedcf142","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.8c7d994ae.0","@material/theme":"12.0.0-canary.8c7d994ae.0","@material/feature-targeting":"12.0.0-canary.8c7d994ae.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.8c7d994ae.0_1624476447284_0.16209921800273275","host":"s3://npm-registry-packages"}},"12.0.0-canary.4ccd39bdd.0":{"name":"@material/shape","version":"12.0.0-canary.4ccd39bdd.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.4ccd39bdd.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4b5f4ff76cf41f65103d3c3f755b57b5c6a58647","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.4ccd39bdd.0.tgz","fileCount":14,"integrity":"sha512-zHUxyUPyRXtSHgzc/ZqcitKFXuIhXUzmN15QT76T+8YmLLOY5Xy3mWpscQrGKxMSjVmGrE8Yn1tp2OSJZUPRzg==","signatures":[{"sig":"MEQCIAOkve3NYFO5cPK+BBZ3Fo5AF4PN7KgCXI7pRP2YOm/MAiArVF367WyohQK/zW/0gpLm4gXmqn0p+J7zmpLHYHykyg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23689,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg1K+CCRA9TVsSAnZWagAAXpUP/jqZxy5kit2h5GprSBD8\nkorwEgMsP3GQM/znvItucF9jzYcQpPntqPAvTQ9KUHoyJ4/J+h11FJfMS2nV\nq4S1GNqy4fz5grtz4dkpOoz3om/lUbPg/5TXFFOdcwyTviGUZ/ZQnuOjDrbQ\n1f/ok0bvfx4/kjegOX7EeiJOpXo7OpQuz/xtfPiMnIF2hRggIKMDm+8O0Qog\nmeR0Wnw7MGHDgQbCqv8zbbyLjpqLtymRJIIU/Zmf02QDUV84jr18qiCxBWcC\n2NhXGbgn9+MFsc86/qliNux/UHOW1obVT8K5/ffPM/ewt/eSjD20fZH+J8Uz\ni2LiTB4XwjIKj7Dz+n1FBm9/OqGRbqs5p6mv3OTV3ZhWhYqbEVp+fcQQTrNU\nxuZ+B65q2k9JU1V8dZZnEpwwyCu0mhcF803WkLLNlaiRvXtRnrOAOYQJ3n1n\nMw76eqOPVzFkLbItk19UCuPM3q0ZnE7r2NyBLkmtnr7uwkXqSL3ebuOP0FGQ\nmS4VUui+VygvTEWwDC440DkVquXHlnUyV6/Jw9ZCipJzvFqvSdtSM0aSDm6n\nbybU0nagKUGLbS3k03WArPftVRRLHMtm8sht+mSA82EeQzgjwtw1zlG28MRM\nz5jLtBDUwkqFE19k/Yt7bRhylN29iQz2uhLm2QvckUCuujIwtbC2ZT2mfFtK\nUNE9\r\n=Zyvm\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"0954a36f2cbd31614158e8425662a4969ce9c299","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.4ccd39bdd.0","@material/theme":"12.0.0-canary.4ccd39bdd.0","@material/feature-targeting":"12.0.0-canary.4ccd39bdd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.4ccd39bdd.0_1624551297655_0.0701652041178904","host":"s3://npm-registry-packages"}},"12.0.0-canary.17553e9f8.0":{"name":"@material/shape","version":"12.0.0-canary.17553e9f8.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.17553e9f8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7be1a5134b3a129a023bfcabb935693a3128019c","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.17553e9f8.0.tgz","fileCount":14,"integrity":"sha512-AO2yC0SWRgtT1itgrDdhBMeWtYr3y2MVykD2dcJkzYoduYk37fKEB8GFZ3T8w8pyX2k/x15kghzGIkyMb84rmg==","signatures":[{"sig":"MEUCIQCWah4Dnv4AWvYDxjsxki/w4WyGezqQGAt/tjkK1tBmXgIgEJJRF06rZ2h4IL0CkBMszffUdgtPcqQV7mznLsag+o8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23689,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg2lKzCRA9TVsSAnZWagAA/T0P/j++QmXmodL5au1pNsYP\nS6BtZeaiyNQHxaGfPHkiLjrbiFrhePKY5hbLa4PebkisSyLFEGzt4eAnT/D4\nCMwC3PFzxrOm3uvQLfofYKjQlJCW8pc7lW2QHIXLWTYtDKnO4419zxWwHOBL\nM4PzvP8pz2vh93aO44ByOcFRRasCim+Fcd0GxXNDCR8q5wl52Hn+phWhZ9nY\nsraXOHjcs6VMbI9FbWoJNGU8hwx26Qek56ye8v5FStps9bKzrUprsGvA+HQU\nXkBhid/ccwOvg850cDK63TFm6iijZi8xJPG9RnPsMQ+6hjwIdRn/Pk3C2b9F\nLEjCrtGIrz19SbSE8e8aGv3ZFLaCvZNH+gNl0LHzMU7vNdSk4m1s6AK00ZjS\nQHPv7vtbNOt9P+jmsnMKVNwhP8uRB1XQWVJF0cIYg2Mu6RiIOHYWTrvU5DQa\ndspUBlY/A1D94MaRkSwS4zVwHq3q9CYKN1yo3hoTxpY6MnCx3PDSujyWX2ta\nPyohubOFpDnk8jvXOriTkdFeGj2XOnjGxy4sNIm54lS2TJGItjSxa/51SlT/\n09/ThpL2gxQOHpgXHZvXSXF/xK1+FtT+HnUQtvNXUj8+bQRAl/Nnl26yGOAh\nt/hxfIpWTqPpLayIGkp58ODsFnUhnyHjAsFzTBji+c35kqTQzja3vr2I7fRs\ntYl2\r\n=618L\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"bbd7dc5fbee09c82081517ffc14264d4834209ba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.17553e9f8.0","@material/theme":"12.0.0-canary.17553e9f8.0","@material/feature-targeting":"12.0.0-canary.17553e9f8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.17553e9f8.0_1624920755535_0.5866894132648928","host":"s3://npm-registry-packages"}},"12.0.0-canary.4c80072fd.0":{"name":"@material/shape","version":"12.0.0-canary.4c80072fd.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.4c80072fd.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c58b783025f3416a3782794c5af318b6c0db61e8","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.4c80072fd.0.tgz","fileCount":14,"integrity":"sha512-0EAyAgA4IUKKgmWVeRQDYsdo0ETHUxEjIDpKqIEYv9AQNvR32GX+emye1AAtG4SW4BaZYp4upqwRbPz3wNPvgQ==","signatures":[{"sig":"MEUCIQCJCiN6Moo5fxqiLFko1hNJkBvQYBrGClugq13VKsrZywIgC5L/8VBDM1BpRUAqzyYvG/sfJCDgiYlKP75SBsf4sO4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23689,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg22k4CRA9TVsSAnZWagAAOmsQAIoKa2rqGSN9suM8T45B\nKQeuI2ptsXdoTBc6ZV3vCDqFAGv/8neByK4BVmQRL9ZBiBBV+jw3Tpw+P8Dn\nVKNxpjiCk8gmJurGI4wAp2DelirKWovH5zv8xzQeLEl5zBzEav6JA+fJUige\nS+nNS4MsPGRPY9H8noICaQ9POgHaZuIb8oqjOw+Z6rVo3p8luqepKdroXbky\nJmvLVjd1hXWB3iNTkg4+PfHLmKE+z4oiQ6I2XEcTD7Us2h+Er+LxpQDN5iWQ\no1usIqKDfuNjFoHaYKp6dTuGKiWWsvxgvqNPyUbAXzNr1EpcY/v2v+a8lob0\n+eF6ney9egw1Q1UPOyGTDIYXoVilsWrXwJi7HERlALazLyqXHJbdH7FzLoeE\nsLftfy/ghrkEw5GE3Aq8k04cBaTClRaaJs8VRgPnHD5Wx0aBsLQo4G0wg+LO\nL/f1K+kvoXPLvds1TaUP2DQR2QJ9HbC2z/TB6iDqlzZVeEgjQ6teX5pG7y5A\nvl6OrhSyXfTmwLbOEJkAj2qR3QO9YJPpQ0eLGQ6bXiGCngsPjp8rv1t2EE0f\naJq5hORWssOXuN6Vgf/JhooY03guLPQdDk/Yi8z62B+ZT6h56rRv34ikZsyM\nQVd7nQ5sqZQwRVJack0RjgMdO7qTtF6MnqC5akic68giVjOkKFZYrm92/Q6A\nSKoK\r\n=qe31\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"9f6d10da43c6e0fbb1366c1e37fbca58ce00dc12","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.4c80072fd.0","@material/theme":"12.0.0-canary.4c80072fd.0","@material/feature-targeting":"12.0.0-canary.4c80072fd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.4c80072fd.0_1624992055938_0.034026505851786126","host":"s3://npm-registry-packages"}},"12.0.0-canary.796811db7.0":{"name":"@material/shape","version":"12.0.0-canary.796811db7.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.796811db7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4a2b5adf838a7228333231528f2c476753ad165e","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.796811db7.0.tgz","fileCount":14,"integrity":"sha512-fWv7XyQhOXb++jlUsGy/hWE7e0bkjQjp/719pVigSKxguGXd6nfEwIxIXn1vvkXrAsg1pjzpoGY5PvLitkZe8A==","signatures":[{"sig":"MEUCIFTjWuOcsr6zpgkdKmCUXFxZALbp5LjH74wsiW26vvGgAiEAyHsEnn5Wn5d+mbRpwoX6I1pwfJDhTlKi8lsYa+8JK1w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23689,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3QZDCRA9TVsSAnZWagAAMF4P/3hMFamrBa1mhsa8URHb\nZKRc0Nakw/3bNw+msc1DkFEpwV7WHdirffl9UGFCfxen8wPfoh+RVNyJYKEg\nM0oK3N6KPBLPGFhVaSNLvQ96CsLfv98kd2KwWUGouBN0q07qzycFhd4sCPux\nWPpZB20S3ha0HZT/4OIKKNkK1GdGj2Pd4iLy3lBzTyaoT+fXvAJYAzgS1ViW\nZayRJeVQ5R3MdFHtrVs7aB/iOkWYG1evO/rI5e4Drirjq7eJLfmX2rb4LcLa\nw9g/FePA0DYkBVYCXqSiL0Y9y6BsTU3xSrVG7V4bPi45Q2YUjZR8zhH3aKhx\nUjIiQPoLOMmhSh8Ye1mTcyJ3Q7f+m1seRH7S302WWbq5xpq2r62/MvfS4Kfs\ng0f9BWCQMBB2aLm93NeuNgLLDvFWvDZuyU/xLub4Msdso9ukm2sqjic+lKtl\nmYo13QcTbCY4ws3TpCZsV8XTtsdkuQqm22pD+H2+X9VA1mn7BdIX3WAoYeTn\nY9soqQGTvR/hfYw9VoUOtKv+IvzyL7b81V2H3Bn/YGzmleC827lmAqi436eR\nIbTOKxjyey3CpdoCtErD2AzzGWn1I1O8DUUocASSYMQAHWP4YcBJ9OdrqDQC\nYNP5uXVICKwQ1A9Wy/1jN1qZXVlw8h6O/37qwlMbqaQ0v6gVseLSHr14GHUQ\nMo13\r\n=r08f\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"b02de77dcf32bdce7d23406dd395390b35e386e0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.796811db7.0","@material/theme":"12.0.0-canary.796811db7.0","@material/feature-targeting":"12.0.0-canary.796811db7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.796811db7.0_1625097795187_0.7814984517732948","host":"s3://npm-registry-packages"}},"12.0.0-canary.70e1efdca.0":{"name":"@material/shape","version":"12.0.0-canary.70e1efdca.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.70e1efdca.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f731d07af1e18e908cb0a12b7553694d224ffb07","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.70e1efdca.0.tgz","fileCount":14,"integrity":"sha512-j4wOA77dG2X6CjxoUdorAoJwO1p1DrvWzul5UYpx78wElG1dQfGz2a+hXU1HA6iE/QkDNWQ7o8idHM+wsLafzw==","signatures":[{"sig":"MEQCIF97teia89F9xkk/I0iHzrfuzDPzR7C6sKK2RMBDG2EqAiBSzCxiea8jPrJcYzg7FTvx9cwMqJt2HsE1aYah1a9R+Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23689,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3fYdCRA9TVsSAnZWagAA3qUP/jfHiRQ3NzbvN28DJdCn\nUCmn1Tvy7BiZi3GGuXrItI8Z2g+0AJGk3lk6wPDOD4xuhC5IDtIwThawAWnd\nvIRmNF69brTc/DDvTRVM5EEXH2KQ9g6WvxFO9Yht2VTtwt87/at4IY7wJ6e2\nAh3W7eMD+xxOTsnOKOmc1PMz3KDIhZlAC8a1QGiAouyumTLe/9t46+TtbE4T\nP7u9BpSQg/LI8osozUdGXnRNytE/oa89rsg6wFbcVPm9Nimbp03eXAN5Amwb\nQ5Teuo4Ye7c1J6Vm44GHZJ+kb7Gwa2jxA+5UKA7kGmXOkFyz/E3RUHZEiXOq\nerDz9in2IsGi7FjRoD42HIiq4QvP4diSed3Aex66BzxF9LWo45QmT7819MKk\nkzU0vCyI68fLPyYDeKyLiowbsSYfHJn/2vIP7BqC8IStIspPzI3MjxvXKW42\nmrhk6RJ6+J9iHCIGHJhAAYT3UE3kWShF2MVczjl6vcTGfZuaJ/05VYDE8Ibb\noLeaErddQ1A3OwWyKwJHILqtZ9LYAsNlQHySZQHcyzfgH5q3zIU7LZYpvf6F\nK2vesuVhKcZzv0hWcOE8bUgtOTwW+cbUVe8KFY9r6ovHn1rGy5F8xyFoZcPq\nnrvwFobGQeD8vCpmg2Mqo7kbiDvcwMWMeVlDQTFt8hLlNLckVnCcwTcsW0nC\n/i1n\r\n=StjM\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"ab5924ae38bb3ce40d3b1c303e1ae6d175b844ce","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.70e1efdca.0","@material/theme":"12.0.0-canary.70e1efdca.0","@material/feature-targeting":"12.0.0-canary.70e1efdca.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.70e1efdca.0_1625159196801_0.6884593375364405","host":"s3://npm-registry-packages"}},"12.0.0-canary.435866d32.0":{"name":"@material/shape","version":"12.0.0-canary.435866d32.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.435866d32.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"471b9f92db63eb6c1c66a365dcc43ad320072feb","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.435866d32.0.tgz","fileCount":14,"integrity":"sha512-tgXKfIV3KoydRokP4SA/oIU5MEqxK1umyaC8JkQiaNm0Zv8XVUoqgRiWIEZA436OZfUw9YJFc+R6DmSOw9soFQ==","signatures":[{"sig":"MEQCIA62EE/eOmzzZVi+yxzJ2hXNXOoYmu/83i9lmtufPS7DAiBIDlvf+sxlhxMhI+QNe5c7HzHYf5nvxNzvXEPzEa2D0w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23689,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg31kdCRA9TVsSAnZWagAANKYP/04VMPZGim8ibnNcAo6i\nK1z54oEQimaT00QPmaoRm6KE7NlojEmht5EZFVZj6z0HmwCVA3PZR6xo/mGu\nVSx8XH1wZmxX5nHRgFqpQ8hIgwWARDJ0AX1k4YiFaeGnoUKtNrI3Vp+xlZs8\nGBWG01N8HIYDVG2Z2fsBHM17W/fr3zF7YEOyunlUgm+1fjMEuwZgDJuI0XTo\n33CR9wnFNEuu/RjGjVjzeLFIo+++t9dIAxM/PVn01nirO0vb8uggNALdclE0\nC3Onh9VHIeXbea2ZAy8q4aAn0j7ojj5+ZYlJM8d7vJpEivjHHNp1lqACT2Qh\nrHABhdzYZr/yA1YvVaG/u+hbNbGi4Lazq5BaKS1b167baBb8Wn72aa45crWb\nWTGhb48uoG5RnDttwncbAz087F5H4Ts+bruzop4NzuDM/pS2JoKdA823kH+k\nOGrQRUeOztYskyWgsVQCM9diTayYO/cc2RJt/t+dQQGo4Ro4Z0mtOZeqMqIF\nc32eWLaJKrqzFb++Tkb5m2zqvaRLCa92TVfBHctdyNOlLjKrVWIy23IvukEv\nhCSU7URRvOt0S6EfDtx6FWZKP8VXPlgQyVlBE2VsbiVRpkPsWOUFPLLBaX6Y\n/xyYL47SJx1gU1lK6IergKLIQ5nfZgOrApxg4WwBfaNsnP7uMx6wK2F8PmcB\nWmeJ\r\n=wGdf\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"ecf68c368bd1ea5571aa4da569d6fe6c4b8b8caf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.435866d32.0","@material/theme":"12.0.0-canary.435866d32.0","@material/feature-targeting":"12.0.0-canary.435866d32.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.435866d32.0_1625250076999_0.9879475352896094","host":"s3://npm-registry-packages"}},"12.0.0-canary.d0f9f3f2e.0":{"name":"@material/shape","version":"12.0.0-canary.d0f9f3f2e.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.d0f9f3f2e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8ff3e22e6c4d3822defb5d83097aca39ce9bba18","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.d0f9f3f2e.0.tgz","fileCount":14,"integrity":"sha512-cnIanrZYYF0T900eGoceE4EivIAYVJlYuSizqF8+RHy78NwDsJwaGmB9iF+SFX9kdEUvk4S9MEPyIO+ruoNe7g==","signatures":[{"sig":"MEUCIAK5rRPXBqxQ/xZ9ACIggHip1EVvNcAyKojtn498dxjRAiEAqb0QlRzqdcpqYHtiAtNXvR9gn/UDvnuhhDDx8WM/r1k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23689,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg36iHCRA9TVsSAnZWagAAwgYP/RNguZr4wSGxpO30kqAI\nFeiU3TzTdLhQrPcM1iZYBqI6viXvWfTfGBeU/PO5XNrdpxkAF1vLPxH0e3hA\nJ72wMUOXXRwtslEnluQiJvuJ+tzgzVlfuiAxTKb64nFkkFZQ9yVRVLjWafSa\nMlkGO0kxExWgQL3rRTMPbi4ABuR06arhNbg86Z9JUFmOE1QOTIqqcUXN8hdR\niLfzUFaLRisst1tdU4Fh3CE8Y+PC7c8bJptFNcWS8QU/8da5T562HWCFbzZw\nV6r66l0yQtB13lHkuUVEnHRlCau2B929e8ppXbX0K/FzYHNRSFFAzbNZi/9E\n4va0tVRbOoD9aizDuYvWNNNRZFneZn2FROxrJhN0dSWOpzPcSyvJb/U149Lt\nB/uqUiZlCon/t2IwpFlTg2UnDbXK1zWnfOmbfDGRK3YxSmb30/NKOrGo6ljE\neuJzCXEPd6JX+sKFFeH0m9EiULi1Jlh/bI70F53OzQl+U6zFvb/qlvuN+mXq\nN/s9UMtpkEghD6kJbCVNlcxPJcS8MlHfdS3afR0lG5QlNq4v29SRBTxt8H+e\nObDiWBtU+H/UrAjqnD1AMMC2i1UbH677ctJklEvH48oanbB6IXHjgjqHA8oo\nc9cUIaed0glXIeD7I6+NtyJ46ecVs0pGwuQSWr6WMusypcbEFKl+tQvOxMOc\nvH7w\r\n=JrrT\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"ed31c78c6a84cb24353ffd1d406693496f090e29","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.d0f9f3f2e.0","@material/theme":"12.0.0-canary.d0f9f3f2e.0","@material/feature-targeting":"12.0.0-canary.d0f9f3f2e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.d0f9f3f2e.0_1625270406712_0.23334377612436286","host":"s3://npm-registry-packages"}},"12.0.0-canary.adeac0549.0":{"name":"@material/shape","version":"12.0.0-canary.adeac0549.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.adeac0549.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1081f9004dff868a62a4f91cabff5eaded5b28df","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.adeac0549.0.tgz","fileCount":14,"integrity":"sha512-UPXOX3dydu17fO0B+KpVBKFl/siJ+65vToA9t51D0BDnVJ0/is8jaU+daBBtkF6bvLOnu3mImK5JO+XoB91XcQ==","signatures":[{"sig":"MEQCIGZmShAuRv3EVDJgN22xeGOuADA9HMsEHVOtm79cxNlKAiBOP1y5yr/NBsfnQ7KAnpGLEHssCnSJdMJjJpd+ypGYKA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23689,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg5xUfCRA9TVsSAnZWagAAwcYQAJuBgcxXn8yqrTRkr5X+\nAMfCBR0Wr6OnzmqL7rIsiVUAIq3ANzI/c0WnRZefTprD5rg2qnpdvX5vrukz\nB7J16eqFVQi9tKi3v6Q/Po6f97bzoRXb+e57ZuGYmn7OI/aodS3ThCt6VrFn\nCbcSsqzX3rsh7Ri49+WysmKU7kxt3RU6Ah6N7vwx2wZ0ZEyaTa9Cwz74Pfwo\nO0V1OfV2z+eE44xfxIsbNxpElygXExLSyWzQvu78LiRUAoigcrXXPI2CiXAI\nfupFSrxP7GFtg3O2u/m8Ln3AhaymvjkmqsNhfGoh7K6hDTe0gq2wMI+k3Qzo\nI6XMj1vHRiCVgcNRlV6iEA6xkz/FJBFUbtMEJdAw0XkTiqLjv7dz0bOFCw5Z\ns+RlZbaCYnCl1F2z43cKMe+Gyt/J7BWwtFbdZZqpQ7mzvN8qlVPrVNpBTHSu\n1Lt5Q6ErBgthTwzqzc2tid/vk1gK7k+ZUZqK6ZTtNGpcsCRKzgUr7Tg2JJaX\npSxPzCxwVBT3yceSSdJCWzIahF32c36O+7m94ZWtlrAWnL+JhVZHluXE/4O8\nHtmcMiHPpK6CsNXhoguW3aitb4d8wKPOs7835KbwMFUHME1fJyGBHxCpnynW\ntwrJptgJLuGdMcEiGZcF6JZ+jcS8r776Z1GDv9PW04uHlJKMVK5hTQ0m2nkj\nJZdb\r\n=IMJ6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"a189bfd7e13b17660ad97870e074af0ee245e36d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.adeac0549.0","@material/theme":"12.0.0-canary.adeac0549.0","@material/feature-targeting":"12.0.0-canary.adeac0549.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.adeac0549.0_1625756958882_0.8396176165470464","host":"s3://npm-registry-packages"}},"12.0.0-canary.068fd5028.0":{"name":"@material/shape","version":"12.0.0-canary.068fd5028.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.068fd5028.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e68f58979314a23a3486105a8f91482b8c8e9130","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.068fd5028.0.tgz","fileCount":14,"integrity":"sha512-AwiudcFeyzaLdQQxXxOB+mEwIR5VaVVm3iOFJD2Gzv/XkC3Yb5CthYdSOphNv/bB2avZq+gJvHwHcaDAtd0eCA==","signatures":[{"sig":"MEYCIQCMFkwGDCgu9bhqLp7DOjfiJ0AAlUC8vWYol8VkMLXYWgIhAOAebHk9RGkGCPN6Xvy/l9PyR5JKdB2ITVCmGdGH0pac","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23689,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg50wOCRA9TVsSAnZWagAAB6AQAJVCPgdi3SfJltzb5Tip\n3XxcNs+uzIYU1a2odhcgp0HmPeOOqr+jk2ZY6Wr0RorWLNuwUn8RlEsUM9OS\n0rJ2Ob7XMgo4QS/9DNMsGEaYvr2peKh9PEyJ65CJH6rfOiQ3C0JQjUMgcfu3\n8M+M6KfREN8yL87gM2kGIfcz353tMOp2MQXC6YE8VF2lXzhfojP8QHgQwVsO\nKhDv73eNzr2Bm9pEBzeDuPtLRjSgjxjo3Gk7oJyKISiW+rh6ZQRfwQJXqyTQ\ni6WU6QyG2ns0HWwwH6yD9H/AGS2ngJ4zWLalUdcsWb/0UpGayU3TYLS/HqW6\nQ6Zwe49K8x2korR4OJWloFj+MqpVOG9RcDKeDh0B3EmYLgePR58u5+1RN2GD\n3JpcJ1cGGK/BJ5T5FIPyxebBi0rL64mf1JLtrQiBjKcVQjYXB9SptGQ44EM9\nEhXvt1oD6VpYXIbFdApacPF2pdvbXlFa8ZUtfTZMx/yeU53uMUfx96+k1fiv\nUEwWyVcEae7OaoXL6cLW+ubW9iRar+x2nMK5lJErZqK+4ZZP6EO8HwTxqLP2\n4ntbl9ik6t+IOytwUhmL1HdEWh3Fea+PYxxJgE3BeyohTL+IUXoPmWcNao8w\nWJJDXrD7n70wed2oNU4ih3GPI0pRG+aERGpCPxG44H064sMdIv5SkZ3CV/nX\nW1HW\r\n=0Gsm\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"daf6a798ec3c54ddba492f33c939c41a8d88655f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.068fd5028.0","@material/theme":"12.0.0-canary.068fd5028.0","@material/feature-targeting":"12.0.0-canary.068fd5028.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.068fd5028.0_1625771022254_0.8330980589383017","host":"s3://npm-registry-packages"}},"12.0.0-canary.5dfec7a14.0":{"name":"@material/shape","version":"12.0.0-canary.5dfec7a14.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.5dfec7a14.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"512094920c1b59e89845213eead20119f1d784b6","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.5dfec7a14.0.tgz","fileCount":14,"integrity":"sha512-qi1tJXD9cqIhay4vfKAoRZj+Udm22eylGrTv0bOe35dXSQBEI8SDwA8mA2eCm8DBlwYktbMjqqFOiANi/m35vw==","signatures":[{"sig":"MEUCIQDPGUSi+hNdRldqczec2ywE5RiNyQ7To1mconj4IK1gugIgaM+0beMt7Ke2vwcmL5QmF9IzTz9PYraEzuawYjINupU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23689,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7KAzCRA9TVsSAnZWagAA7AAP/0a0bMK0fQ5OSxPhulWM\n6UjNcpeHdsO/F+dh6gE9REy9Lyzllx9viqwNShVemmqpOezk5XBZgQUZCp6y\nyAaN2O5xqwUeGcAI1WV1K2B5HMyUP2sw4g4CwU2gtsyl0XiIWq9oMOPraWX8\nMmt44iVcxUlBXL80TsD3oXz2ORFHRj9ajJqkM6Q/K5gacZ72cL86YFFv1ytj\nBXbz5xKPo9cHdd5Pz9Rmjdj1RTxlUi17DvYkFrRl5hVhdt9NMNfIDhzkANj8\nK+ntp75aOyiJVvCdwVPx9+VkiUI1aLkN4d3FdZLATcSuuPAet1Tzfjl3WgGb\ngSgjddbkpW5LiTnqkKmamDB4fdaYclRoNE+3k8AI3u5HcCgQELngwNBW5F4U\nY/nPPU4bLYMTi+rkMZbiqMajn6e08BlyNgEKrHuFtflLz9NCIUzkmWgbjPoC\nL71akENpTkL/M1cqyLOnPyag7vQp2dxYEzBDPP36+coeNU46VKKbAWMtdKfJ\nkB9lmjUrAThYuvIh7ijtK1MfAvsJZOCOKonk5+2B9InfiZobMkIbu+PT4wXu\nzZxBD3PMZ50f2hMnREcu48Fv1xJC7lDZOhYfUjZT134SuIj4hY91N/WBRMgH\nW3uOXnSURBEdsqZLXcesO0s+T+BFoah7PNtSxZRnsEMFlaxQBwzAt9+W3A+f\neiiT\r\n=zK2Z\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"7295656b25be2c03cf7ca7ca800e7dbec4d9b531","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.5dfec7a14.0","@material/theme":"12.0.0-canary.5dfec7a14.0","@material/feature-targeting":"12.0.0-canary.5dfec7a14.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.5dfec7a14.0_1626120242630_0.42575880279871936","host":"s3://npm-registry-packages"}},"12.0.0-canary.07a73750c.0":{"name":"@material/shape","version":"12.0.0-canary.07a73750c.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.07a73750c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6fde73e0aa538fa4bfa4ec3e85030766579c5787","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.07a73750c.0.tgz","fileCount":14,"integrity":"sha512-oIeqqRzqr1NF2Jejm+g57zuZvxGJqvdPOcWaUJwy3cneCBZXpo66p5bWzfupKRpElORK4+NY5hybPO//dY8qRg==","signatures":[{"sig":"MEUCID9n1/nWwf5T2Qse2rs1eMF+Ql2dVCJ/d1+WMyCw3ptfAiEAzhtU06TIcgRw1noQO1SRVfO1ZXvXOv5VsxY7MiZYQls=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23689,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7KU9CRA9TVsSAnZWagAA+AUP/0gej2O/FBkvU7TrAkjP\nsREiapkzGFPNzPPb6AqG96xFG7ccJ0SUyTyvUDeW7ZOC16i/BDfb5VjOHrlj\nkz4MSz42MtK/J26qw5HZmIo+kK9T6/lzJZ+zcEJMC0UFV0El2tPHJrPqmenO\nWgXimzsyXx2s7TqadtaqSlMYOvOfQLEFN2MBx52T4DgpVxG7T/HY8p/EKIV8\nmIinbokWGIOtI+lu279lM66jeTizEvrSiu0TP7oJk/9aZfItLbiE+Pd4tfAW\nGFgMd749KZdvc2Qe2hy21QFPojYDIc1JejXYmvJNZz+41UufPd63IDFRocLQ\nJWENLKHtAo8X25vPkfClltBCWVG3oLfcy3B8wsIq7QcSCu132eUUBY2LyuA5\nD8pO2BIeZqYO2Paugy1ARJBCz3AZH68eKZB56Rn2Fic1Zk7E2bo2aDqYB51N\nvfm596WJioUV6XY0h5koVWEx4se29cVfLRw+axaXQLbqOjnv4V6R5/dTPzQf\nrWwO2/c7tgE7AeLgrIrEzE0u73SXS+3Qd28EjbTCQ/y30Lj1Y41MG8D+1VDC\ncvIXu7hE10f0i6lUGoiw3i0mmUvBu18grDnf2Tz52B/6PWmYawv7CuPlZG/Z\n4XG+FzEzz5jmFr0rXxRwC5Ah1j//7EK2PFdEpUN/aZYbg3gMmM2zU5/Q5qP+\ngU0Y\r\n=WCAw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"3534c8199752b92a52696d2065e73b8e4a997195","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.07a73750c.0","@material/theme":"12.0.0-canary.07a73750c.0","@material/feature-targeting":"12.0.0-canary.07a73750c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.07a73750c.0_1626121532736_0.8639375137041683","host":"s3://npm-registry-packages"}},"12.0.0-canary.3e4c6dca1.0":{"name":"@material/shape","version":"12.0.0-canary.3e4c6dca1.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.3e4c6dca1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2d3d8b380da0df0d3613c6f3eb100fd3335a4802","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.3e4c6dca1.0.tgz","fileCount":14,"integrity":"sha512-ioUKjHayRsweyq1vgyJRZWyEctLn5N19j3EqbfIwoUSKArOv6dCah/sokajmU2rINh7ztRhyk2U5ijrVOqj8Ig==","signatures":[{"sig":"MEUCIGhWPfzlnDTrdRZAhU1vxwv9B1uykTxxk8XTjXzSqDyHAiEA3M6eEfhyhdpgCm6j9J/UeYq/zsE7PlVUJvdcAvAjAC8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23689,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7PGbCRA9TVsSAnZWagAAs1sP/RGRhU5NLWswqKJWVhGV\ndMA410sw+QazhJTqVXya9xCTyM7N9gS/PmCkUL5JlGysCMJeiZcPRK7qM2Jx\nJfM72oYaUQfCJ+zEO1EN1llFmEfkSC5U0YnuEBeQL2MrwrCLqFP8YG0B5loJ\nwGqFbOa7/5cUdXYthdIRPJivct/amxe+JLyEtbUvXoHCvE0lSrT4RjMkg4K+\nWGP9BkhmuFRq1cSd3CGNy5fi141GHbm90Qrk9TdPT+eGTfmU3HFHIX1H+S5Z\n+PA9mKwKjszO1sdU0HLXOPcMRwLtE+ZNAvpQ8GPLfN9zr12mln9S/VnsOPBX\ntroqCOFMWaSrCgJxRAmSfcmaqMgRG6H3YF6fVXCvZ9+kaNHMO5hKiaZWqApz\ncEIh30Nyk3CHTPmeBnY383ECZrnPs+xDaiRyhjRzdsam0tK/GbyY/C+5IVYg\nxTwOzBg8NAJaPe3QPLNvNKe6UuVdaMojx+TlWPRKPaTxJmxeFFcqattjMpki\n/xD4AiFvO50iCCh9hlX4YXi9YhSppBY1MOYRzXJptgZv1BpyfyocZ7GxQHzV\nNOWZvbpJMklnkgr6ylJOb7FbYovsZuLigYz9wie4gPJcsinD+EGzP/VnjekR\nb/zzWvocjY4p/Ncofyjy0W87SmGSkTrYdc/9fCOj5dsAIy5UAmyV/Yb0f/ht\nB8MO\r\n=aOTf\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"1a6a8bc529062b0303c0df830b36d3110a389f4d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.3e4c6dca1.0","@material/theme":"12.0.0-canary.3e4c6dca1.0","@material/feature-targeting":"12.0.0-canary.3e4c6dca1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.3e4c6dca1.0_1626141083066_0.7768447354349524","host":"s3://npm-registry-packages"}},"12.0.0-canary.ea77795b1.0":{"name":"@material/shape","version":"12.0.0-canary.ea77795b1.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.ea77795b1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"762855f45b5bcba2012622d189c2e0fd60b0e384","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.ea77795b1.0.tgz","fileCount":14,"integrity":"sha512-VVs4DFp/oy4WzfGhsNQzavcClkytC8dttMNd2GyE0moRetcZnzmA4shudcWXsJrYjYMjOAvaR44211rdBSETmw==","signatures":[{"sig":"MEUCIFtIaUI6CPKEjXHv7geUMo9Ng9bmp9LHYpYb9PA+wVS7AiEAqpWoZ1xIN28S616Y3kdWo6QMqdBOn19Xokt9T0Cilnk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23689,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7bYHCRA9TVsSAnZWagAANlYQAJ5r3hRGvL43ihjsyB1F\n1nqOXLXYhX/c6MTml6o2nJHHiVvBFrzLQmZvDty0tASrPwIWnXd+rvS4U3Ng\ngjqcod3KYhMxrL9CqqCMCjwjFfqlNZcf6yRD9mHa4KbMMYb9vVMwQkS00f7G\nnbJDjRyBuLRP2f37BapiMF0jZ9nSYKGKSznjoWqwEuLsxQKX/D70iPLdWoOs\nEaXcM/UxsSNzUmtknV5TeK5eTb42HdvemSbebJsHItYEGAHGucWFkUFmosEw\nrEoMuwH/Izs22koHePA1komcdIsWju8/JrFoRlU0Dqv9rIlvG9wX8zRPdScj\nFr+kBEUuVQAapGV9KsPMrFlFmLZBq87t/kzpC1qjANSUBapdB013Z0v5faeu\nH3p6ps1XoaIIZGnM+nHjxj5jT5GHcDhH3FNFe7i8Kzzzz4W/4VWCwuGU2i19\nv7kZkZpJLTl8Sm3EqoFJiiUyz46BvdhNn0+imA5n2OEsUgCcsOvC6W69eQj/\nt06ZGzRXF7p5gmr8qVGkA16VjaxCUfv/HURtOIThMT5UjgeL0y+HYoX/UCzB\njGWLisxwvuTQ4SQ6SUahDffScyvFy+TpktzdEZ7/xVGtPOWjX2w6s8HmaIFP\n25a/WLiZHTvJP9QtrxoBYChcqL6/K01TKYsbM/3rGo/6WWuhtPROGHwm6t72\nyxa8\r\n=FYDh\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"830444e6567decdb85bd9b22a92d5f85b103f107","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.ea77795b1.0","@material/theme":"12.0.0-canary.ea77795b1.0","@material/feature-targeting":"12.0.0-canary.ea77795b1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.ea77795b1.0_1626191366402_0.15215056145586625","host":"s3://npm-registry-packages"}},"12.0.0-canary.15a179fad.0":{"name":"@material/shape","version":"12.0.0-canary.15a179fad.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.15a179fad.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6da6a333d448c36f34546fef00ecd89ad828e6dc","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.15a179fad.0.tgz","fileCount":14,"integrity":"sha512-IOkF5JdbB/IKhrs8FQcZwMIQD9VXPpGzUQfngLezsxlpdE5rB8YPxewRO3FYjQxsJpGWd3EkUdMapA+iRQHIOA==","signatures":[{"sig":"MEUCIQC9ldwZ5wL5o4asXwn4wuWzcvWtJEY9SpO4V4DHae6AWwIgY1hOrxjpcWrybKGyJpZWjv0MlJMXXNhNnMTrHsw2F9o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23689,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7dbTCRA9TVsSAnZWagAAnjgP/A3ujOTFwnmbbuuINyO3\nPAp8YP0XFQyetotTIJNv4QGagvI8Ho1kK5nU2Hie3VudIA8m/JKas+Svc5qj\nfNTPsqOa4LBdWhTSutbqPFYTivrHSL+hNfVW3qOldBwWJOXdAGxRauxz6uAq\nN+ro3lL1Uq7iskgy6/+XzFRV4vK0E+6iROvcB1uWHn3oKKedlvomPt9WPjk6\nw2MBTzyGf1Sfjv3EREVT7qzbpjDWHr+KRyQJ5XOClTIRebozfwfEbSMWbf6j\nU9v8N6A2bt2cSumi0IrugNoFy69JjjMVkKA0wWlKgIFWjJiUSrcdwx3CMllM\ngpxqZtYfBsiyLoyHI5uQ3cC3pnnnjdbVZOz4kb5bLW1YqivE1kGrhUJJHinh\nN6s9kwIXvUxyoaFkflYSOibmHl89pASCeggqaLpvQZ8Imnb45Qd2yGzKdmZh\ntUUNpfv7UOwLfRCC8i5tGS9TIk7RsMrOg9zF79sxKN1+cExsNNmYToCfPlo4\nhvfjBX3h0Fz+W8wQTP63iszvNc40R7FOARdAiP+3lBH1ZJUj5J8DbFCN/5Ix\nybhDsksNerNzK1YYAffZXgHPDEucmD0kBXbJsirx+pOQfa9D5GZ+yLVCcfTT\neLSWmPDQcahAbA/CnNGzv6zHFPAdQZzBW7VZCKu56zp1+J/dS5I5pKAlvYTt\nyqVB\r\n=BE9L\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"eb659691c3a77be825ea082c434c0b24c53cd610","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.15a179fad.0","@material/theme":"12.0.0-canary.15a179fad.0","@material/feature-targeting":"12.0.0-canary.15a179fad.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.15a179fad.0_1626199763427_0.02071263247485655","host":"s3://npm-registry-packages"}},"12.0.0-canary.c73142a1b.0":{"name":"@material/shape","version":"12.0.0-canary.c73142a1b.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.c73142a1b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f817e1a8a05a467182ebfaf27a36f7c9898b8ac7","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.c73142a1b.0.tgz","fileCount":14,"integrity":"sha512-6AdMzg+smIxlShDL3UczEEZQCop09p1Gl84yVKzX1SFec85crpqiOp2/nUodTHOdDCNtJ6I9rZUvisjgCG1ChA==","signatures":[{"sig":"MEUCIAtBgTNUwf8uczkokavcE2l4QuaX0Mf+AYL5RizJ+JxVAiEA01eRahGtFluGXZopMpe7/Z5ayuYyXD+hyFuPSPqjpeA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23689,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7d8CCRA9TVsSAnZWagAAyQcP/16RJLPNGr+Fb2C3rMUp\ntq1m0ismiOOIrNVF5iji7wyAj+/NU4EO5/4xEtGmfUcjf3npcJR0lEInhaWK\n2MssUKWFB8zBZL+XQPDCsghGkGMB3CUX8IVsKmaVfBHpPQ9ueG6ZtHrq9d/g\nerPTUzpT6xqYyUxx5N7/79I/HgWHF0FRqxcnPrS4kTk+cxP9NIXOxdqydTeW\nG9vJDPsOU/FanBsfaVCAYNNH5EorhhF+FRJNFjQShxjm9d6Ag8+9Rg1g8y8U\nJlde0ALEUoUMaVrOpIdH6EOeiM59iaGcXnHDyuXXTR9pBHtLMYcnFtcpbAr9\n5EAdO0Qwi5rGOgvnCYhYYPpTEgVVS4mp+H1sf4rxumCyTGwx7s82wNvduK+2\nOgSlFdNfWzNYH/oXrnGixOagauGqPFIOEPEjPta1ZrHKfTsTmIlmd4M8MY32\nu2sdCurT500MUyG5Uy6YrupQMOVzbhpH/sNttoR5CFWpvLCnwwkeHbjzljnS\niyoNf/DRl9L7Dw6At+Hih/e1K+Z/IC/ftkiPg1z7LonxgshQQSOp4L/IDCw0\nHiCtmxx55KsMPIgjT+U3Ed3z7Q0xRamm2pQz2k7My59+ILCGLQbM1jTtZdvv\nonllwIcdGXOQjV56VUk+fYCuCvbp+k08Ycubu+4f5sDZ7gQ3GoM+Ms5s3NEw\n/rn9\r\n=8ya3\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"037ccc3828bb7b7c6f3375754059c10c231a6b60","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.c73142a1b.0","@material/theme":"12.0.0-canary.c73142a1b.0","@material/feature-targeting":"12.0.0-canary.c73142a1b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.c73142a1b.0_1626201857597_0.25211295638690445","host":"s3://npm-registry-packages"}},"12.0.0-canary.d923db73a.0":{"name":"@material/shape","version":"12.0.0-canary.d923db73a.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.d923db73a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"33b3620f6615adfebc7a2501efc15df77ec45249","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.d923db73a.0.tgz","fileCount":14,"integrity":"sha512-ckjhE+RCy2EPThlirlZjrjmf4ngETV5FwMsJSvsVNJ0DUqfmhQdaVgqdeCJVc85K6TaemFT0YeFHq/vcBVCJoQ==","signatures":[{"sig":"MEYCIQDFBg2ehtOYImGAIVzn2EBJ7p98jP8bTQPrf/F6LD9GbAIhAOsSwG/0i/54VDr0TgBKmnSwUZIwJzj/Cw+spe0HkYc3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23689,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7f1oCRA9TVsSAnZWagAAEiAQAIc9+NLjpyzcANqaxP+0\nx8C3QNX0109a4ovn2g85/nUP0Wb6nrkUo1j2bIr+XTGspPpIcMD0Brmwfqlo\n1t9i62JtlXONpR7vF1FLN100KEND0ZomfDnILm57yQ0iH6hdTkAqwHIllcxT\njQuT4DUD61fjow0TvSK/KaX8Zatg7a+TKTy+2NU9OGllbzmSEcxeEzD21Mdi\nmSDURgSmCP+3S4lFOXEHYbVVJHvpZFa+hKE38gBTLlLSXQyINNQbhrbO+v9f\nxqo/iJDZEXgK27c3QXdvfQOYyEUQJVnZ4b0tHmgJ5QhftXrTNu9k2kL6fgId\nUxNQXy4B9nwcNLwtffT9ccyqKShN+BIuFrp1RZTYE4HvOqpsQibc3RQ7365E\naK7jE6xfgF8EXbkKDNeC/Viy542gqAF+mPwndJPHjVyYLRKNbYTJHlfyALcU\nTADhkxVqJUCg0vnKLStLMfr7RWmrhRr0Vv64DYdJtmZORetDMtLubt3APq9v\nFha/ebbhWW9i846tNN6rBgxUHKD4K7PIdJYuLLwws8fgcbCHVbIc2cA6Qfhn\nP40NK8XQBp76mr6aCBiRuduX3+xyO4SrEacdn1nJ3Q43a6jtg7pAbBmp5Syu\nLp3sA51y1zzckg7/A7nX18bOyybdZXqM7WiDM3y4ITor5GQjvF17jBrCp78+\nyoEm\r\n=oFER\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"ae010eec116ad324d7e442d7ffac5c8ddcb9edf6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.d923db73a.0","@material/theme":"12.0.0-canary.d923db73a.0","@material/feature-targeting":"12.0.0-canary.d923db73a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.d923db73a.0_1626209640438_0.338509199246392","host":"s3://npm-registry-packages"}},"12.0.0-canary.22d29cbb4.0":{"name":"@material/shape","version":"12.0.0-canary.22d29cbb4.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.22d29cbb4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"30bcae4b99b17414293c5b21707d46a614b96451","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.22d29cbb4.0.tgz","fileCount":14,"integrity":"sha512-yKC+cqdjGYg3sseZ4baNe9OLhBENHwX2SpJGZORZ7ix4/8pxzFG3wO80eZ8LsldzYem9MmtcbRilBZ4rvvxh0A==","signatures":[{"sig":"MEQCID/3YuuLRb5O1BfA22qkgbyvqz/CTK/4dJxTvXvR9fjGAiBraRuI6cbYoDo6s0EJeS4fM7EgExWcJauaqdsG4m3JQA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23689,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7hi6CRA9TVsSAnZWagAAEVYP/2LdH3FiGKCtxMLdBL5Y\n22HB4WNuUgrB13fiNfYXVZE0/r7zMjv3hv9BRvSQfszwAAtVj0U1luk5fD5k\nLnf6OKa0mCFq8LEdJUIhrdPcAQsdr2MI0o1oLA/+SzEF+px6AJ7RWGU12KsV\np1YNjvz1KMkuSsf7F10TyT1ZIn29ec6Zy17f9I0zO6wdImsWpM7FgRezgq/3\npnaOzELDrPoH2DUIhqJ2eRZRBhQ1XNrfasYUmFopG725OTxzcAThsuJcof2t\npC0Md24B1fj/3RUFM039SGfy95zyCqV8Do9j6Fczk3TQlMlWo2vfwMiQSI76\njvS86JOLwvewv+cK59fZhFsR6tfd8txeA9LloHvaa8awlybR0trtwT1Ti/RZ\nUbjUg0lMQqiMxsIGBuZFWDAGrpMpYp8fjICf0JAaJwK3YOQ0N8ZNkdXGXeYX\n2LhZpC2u5YydvBzBNoZnhU62bMAihAhjTbNHkIse3LhibyDWIMbZZDP7TTe0\nohtYtngeDelPQUoeMYYuRdQGabwCrUNWFTcXHMdbmiHhf6Y0maCuvCKcQGjo\nu1S5sRdJjV0czoIT47qziQj8/XrtJjqXyOZTMge0vK3NFUYH5oOBOi1CzneS\napDcFYInTpJmTVhxLKYsSGXCaZIzH6bK94f6jwwR7QjSkttxKofR9nj93EyJ\nm/CY\r\n=VKs3\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"b37054450964af349924b81bae43ec6b3beb2808","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.22d29cbb4.0","@material/theme":"12.0.0-canary.22d29cbb4.0","@material/feature-targeting":"12.0.0-canary.22d29cbb4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.22d29cbb4.0_1626216634333_0.9955089483345136","host":"s3://npm-registry-packages"}},"12.0.0-canary.2749604bc.0":{"name":"@material/shape","version":"12.0.0-canary.2749604bc.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.2749604bc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fbe4df47d8a046181f0e29d32ba5caa1c4c2489b","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.2749604bc.0.tgz","fileCount":14,"integrity":"sha512-ab4OkCACknH6+3FDUZ+d8nYhp85LxSj/KYdjQCN1smBoAHsjEgoVIOgaFrmxs4y59Lb23BYVmvIniHrbDOfiXw==","signatures":[{"sig":"MEUCIQDhN1FcLfu8jyndKGw2YQZ3Gmr6xoZIVH4BudhgkpvGOgIgbytoyGfrBX9UpdAEzvj5G9X+mKOYMSvlDdVKsW9LJoE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23689,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7w9GCRA9TVsSAnZWagAACgAP/iaQKYy0VWvnk1jDa+fx\ncmLRlb/9vGi19YNeKF4GJKVlx2onukLQxRVLTSCTpC1sCyGlDqs84nV5Z0ZJ\nvt/cpXSAztmTaQuWIHu1rBp0xCJ49NO20T09Tr7vxz6xX0foKpdAmZOPT5+0\nooIIl3szXBKUiWqgX5f1/EGAsS3QKhEPeACITwHRJc7z8biQTZKCKfuZ7386\nCBkhC7WXW/LZ33TQeDExsD6zhsTiaDS0f3U3kCPbOjpPDEqEFPThgN6oUKSh\n4dTPJ932Do+qdKejCMLV+GnwVt69zl5e+r+JpvZoRJ7tH4GX72v7L7xRKQx6\nyDAv4D1m+iIgBpZb4VdM6+myiIEtY295jmYuzlakQ1YubuiJ7Kf/REiGkEtM\nhEbfRajMiK2AnY2xe/CJndOLc9VBSDiPr/bFm4eozXq7U10ileLBU4jzAIF8\nWck+iLVTHW4lXH1vmmSyEIwHG5lMJilj7GLS7uj7G2UwmZmlAwXtkRguU/o1\nrlUpiVAbJBP4voBTrCU5oqtEY6RAdMeXi1PwtV91IuiLV6X+S2szdVzfpxbG\nwZZUdN860vl1hkFJMhBdMGo2cXZRfX/KQAUsiYNfaNaeBWvfg/gviUdmhEUC\nKIv3CzDAOkgaj2tYifGgJGkgCzRXhDkd2FnV3TUY/YM7hrITy+NGfcqbEVJE\nIhWt\r\n=l3XV\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"58ae4287239fcccbe4c5dd9259164a0660c76f85","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.2749604bc.0","@material/theme":"12.0.0-canary.2749604bc.0","@material/feature-targeting":"12.0.0-canary.2749604bc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.2749604bc.0_1626279749937_0.9250518123206082","host":"s3://npm-registry-packages"}},"12.0.0-canary.e1703bed9.0":{"name":"@material/shape","version":"12.0.0-canary.e1703bed9.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.e1703bed9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d8c124c72cd26205bdbf2105c68a039ccc15eef4","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.e1703bed9.0.tgz","fileCount":14,"integrity":"sha512-rQ3EvpMwEJsbeTu0OIozDacyQXhv3ieBXpZnuqDGa2dUrYUUr84NIFeR0iMKfWZK/xKV1ah2ox9eO/3e2AOMMQ==","signatures":[{"sig":"MEQCIARMxJz/Chol36rSOjv0iydFzKszfajdYGTNR450xtupAiAckm6hYgccWAg2BjUcunVkoTuzy5vNJMcD01I0q+Yf9w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23689,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg71ucCRA9TVsSAnZWagAAnIcP/RMMq6R4B/aMZisANANR\nnbCDo/J+DgEFyX/0dQ2XuKvNvKTLwFah9LuvKVMbeotCjiMgTLIVH3eEVvpY\nfBF1RzPCgLsTyAORrl/2UXMZ0f7R9JkgsqT2dDWv50XfTco3w0UMHWhTG4G5\ndrkUajNmnVDDrxXNfHY5Q5BF29OiCEtbPPI4ybmNVcAsjbKKjmrl5e/DgKGL\nm/FW8yn51F1/8cUtpQt9VqwPpPzNQ6UjCfsHEf1sbr+p5FD2OlNgqyzlWw5A\nwWLNtpcmYKUe/IZa6Yr1hPBMv0zk3+HQRtR7/qIh5/7IdhcGOJKbfH01pvbk\nX2bwaDY0FDadzhcucIpaaoo0VRnhzI5TRXd9sxOsvUsZZxfmKWd9nOcA8Wdq\nFUBaNbanyurpb8xj5pKZEvoX88blJhUi8d/WwGCXp48NapKXWD5GUaaQMtyb\n5lqjZu+Vp95RJMDkjDXqUfDNlcicf3NiKbIFiNJwWD8ett2lZoyy6+hurAB4\njQaI4W4Wj0UOsQzBmFNxS4v2V/Gk7Iy3mmep1WZYBjrsmfL3R4wqqCOvcF23\n+13k1oWW+NfXekzxshCiGBwoeTqOpov9d6eXVj+BD7T8k+1E2WQaRQ4nqR8o\n+EalgplkUR0Jc51E6msyhQjueaDI2aivk8UFhvlk9UOih3QIhgxnd5qWkJv3\nj/i7\r\n=AkT+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"ca9075f939dcacc82290fe2b01214639958bde93","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.e1703bed9.0","@material/theme":"12.0.0-canary.e1703bed9.0","@material/feature-targeting":"12.0.0-canary.e1703bed9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.e1703bed9.0_1626299291917_0.8364207460918154","host":"s3://npm-registry-packages"}},"12.0.0-canary.de48eff0d.0":{"name":"@material/shape","version":"12.0.0-canary.de48eff0d.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.de48eff0d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6a8d054af17180b55fd3d3bb09c33a0fb5064935","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.de48eff0d.0.tgz","fileCount":14,"integrity":"sha512-apI00t+m9zBQUEkBLCCtOe2f3xvJoiN7x07tDrCEHboH3TReLCC3SW4j8b79QTssp+7AlwKSaK1ukBgUGrzybg==","signatures":[{"sig":"MEYCIQC6WdN0hSXYeX5Mr+P20MkAaMnYzOcq2dwBF7paN73FJAIhANL0CHil61VSAEYsDL1ejx2vZJVXdGn31euZ4dPrEvOS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23689,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8Gt9CRA9TVsSAnZWagAAbU4P/13yEKdD2KhNoXPbeiFY\nASeZU3iMtBdhZiF97gIL1pNr6l7Ta4NchHpa31XZKR81yv+jpRFkdf8v3BMi\ndl0Qhcx7kMK8d6L8zo1B7bXQ+9jI0W5Cw7Pe3xevWGVgXl0/zOrn7djrlLDs\nmNF+RQDfiLgkMumB6j6zUCR+J1DPm3naR/ze5emfsPVy3AtDqaW2TiBdskof\n/sPodt7WxOsOD/99lzWwTo2Q6VVS1YpuWZ7hSF/xwp4wKnD3nKhVe1S6k8Q0\nX6rgslU0MpZuVf/GIHMdRmJ/jtlKDlgABmR4/3q1MWnPyxQhm2+Ykk30H/jm\nXuYBjhyW/QNAN68ExO36hAKryI5CgMr36iBiLzDi/n1fQy7vG735vtaz0L62\nMjYan8itnzD75l/Minhyz+W5TS6P5DXyQh6iA+3wpi0O4FnciuDTtMi4pH45\nEjfMactyrrB+brPrpVPvHw7r9xq6CSL21d1DTqWFjKTDT+MTKFgLoT/Xl1A1\nikChp6iTUdy7fEQmJcR4UHY0F5R+bxYwjr+eNQP1VOTK8/ZHNZAFaHBJG5+L\n+K4LU5Yi8w2mg/YcEKdcdvc8XIWIfS1PVnd6WOD8V32X0f269SFVWKxSsYJ8\nuPQNqMkci+SSGrR7bDZqfeGFHWRobGzqsl9fYm4Is0suA20P+B+h5Xb+U584\n3iM6\r\n=Ch1o\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"121530dfc073c7b24dc1cb75732a0d4c0e6a3f28","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.de48eff0d.0","@material/theme":"12.0.0-canary.de48eff0d.0","@material/feature-targeting":"12.0.0-canary.de48eff0d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.de48eff0d.0_1626368893559_0.33208563902948374","host":"s3://npm-registry-packages"}},"12.0.0-canary.4f060adc5.0":{"name":"@material/shape","version":"12.0.0-canary.4f060adc5.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.4f060adc5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"78e09e7e89d9d3e427ab36b1e4cbc8c5167d922a","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.4f060adc5.0.tgz","fileCount":14,"integrity":"sha512-dUyyBcYbFabgvyOMfW+BpN1E6qacRl1nvDa+aASePBGrNX0Gt2z6uhLZGihJjnmPCu5oyEGezxZEwlPJZ7RDFA==","signatures":[{"sig":"MEQCIA0w5zo812000avzj34yeBLD8LjDKeExgh+oAFrOYBBKAiBYZbdXbtTITl8LCPXiNBHh7Am+f7nnfkX5K6Dv0i/Gpw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23689,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8IrYCRA9TVsSAnZWagAAmncP/3fo+qJwPvFaI8Il9pBd\n5JY1qqfNpvM+pGhaWsAT+ofa0qRn/6GJkkysN9cFxfY3I4MOR1tpFQUqcywp\nEKi3vYgtM57TS0wKIMumM0z553sbv+nE3/DkJNMb9RD676eQNoZJcfqm+nbC\nYJu1PY/NMCE7D4O1R/hPOLSLrgnlJAUYYCtHDgp02FpXHnbr7ZBCHytj/tsJ\nW/JSc2tBzoHhbqVitj+OY0gvvDsbWm5M7uqa6KXgdom/oIWD6FO35lEhiDgS\nw0yoajR34mtXtoHYnPiaw5INGi9Bv97wFQWAWSAVrseJCuux1i7cw5HTBCo3\nwuq6UQtXwUIJGUlikgptrpermFsqUhqXS2Q9fKS4B1TF97TBoTaAAjodfRm2\nXTJNTpd6J3LbGKxTDQk0DnHLxnDpujnWoULilqfx2xiJmkrG1s34XZYIadMY\n026VRaDM9fsrvs09SzYYFxRq8+sJo8P4kSDvcr+h0wvj2eahngTrTo1Zcex2\nt4kOFAau7FmJvvlzsqd30THmvzdx6B+rBiga0tR1ISK2U7tohiTmBSlMISrM\nI9QKtSYwtxCYGTajL/Qm70BmdELu9dU+U+OXRJz+4TGCloSZafDbnEmujzME\nJCpKpLukx2BlSt11bAh4UQWxwwF7CgABiyiPgf+TV8V04W6hbdwbfFXqQ4+w\niU4u\r\n=OJ7g\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"2e70b8cd653f195a01f93c3e9928feabf39fa87e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.4f060adc5.0","@material/theme":"12.0.0-canary.4f060adc5.0","@material/feature-targeting":"12.0.0-canary.4f060adc5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.4f060adc5.0_1626376920730_0.7710914643623157","host":"s3://npm-registry-packages"}},"12.0.0-canary.bd25779b2.0":{"name":"@material/shape","version":"12.0.0-canary.bd25779b2.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.bd25779b2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bff7bb11aeb81001ab5da00f08bc3545c38369ff","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.bd25779b2.0.tgz","fileCount":14,"integrity":"sha512-Nbh6b4osPAmm9MWyA8UF4TQzSiRj/7rGYSOAbCIes3YBgYOF1C1rzHA1+FnCXYjOQpZAtgi1PELXmggELgl6RA==","signatures":[{"sig":"MEUCIQDMVv6kcYoWuJu/mIeawc/ed0FFA3ldXQRmoBDSJC+dpwIgP5/AYRUowy8cIJUiMka9lBQ0AX/7ZSaaEUCraVKF0dg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23689,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8J2wCRA9TVsSAnZWagAA8FMP/01my4P1zKuevPX45YvA\noGHCMghC9sp37rjgi8Lhu+vtQpau9peoTjOJamAbbLcr6wAY1uzDe+QINBYQ\n3iMrQ8fZF2rgH1nKwB+mW43K1JcIqLVu0JVuxmdJAQ4ZI/rfd/ZPMI5KPf/6\n+1Rsnu+C7sjYCw2PPvIMuODBLFGms5zzwRd6gUdYs+zX6gOr9IhwJ8B7P/Ss\njfsv9dlyvQmIKppDfPgubiia2HkB4HOzvAHyGAGZrb9ka0qUh9yNRC8esZoN\nO19ROFohAHlt/vLkUu1vObS5ctrpCEhi9q6NDnugQO0d7KIwIbxWXG2WItjm\nwdg9giHEkYfv8YyDminbiVEPe5IXkJggJxBQ2KLXc93koFyeWBZjvAf6kXYk\nzfmOkFZUuxHap7ZAi3WH9xYZvvvUNcg05DHqc8SXz12Dymap7M6bpzhhCYK8\niSMYp2t2n25i31e45j/waAlzkJupqwKOKYcEFTiDk4e/11l6GQ9+bUxOKNmc\nOTPEcBPBqXJ1lm+fsASofYNe/dXOPglkJAI/cL3OheWO69mBDOGwXmJdZSk3\nzbm8OFN6aBq1IlH1DZLem2zqmHyyUg/ylUCBtTRBsinPImVdqE+P9NuF6EYM\ny18IbATNaKFgoly3eqL4i6UMLf7iei90qNnBBx0q60aZnN5ULY27/mZi+u2t\nVZZ6\r\n=0SkP\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"3ea8422325f9bc5f9a356842191da47e282aa4dd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.bd25779b2.0","@material/theme":"12.0.0-canary.bd25779b2.0","@material/feature-targeting":"12.0.0-canary.bd25779b2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.bd25779b2.0_1626381744152_0.037871032346266764","host":"s3://npm-registry-packages"}},"12.0.0-canary.9f68a932e.0":{"name":"@material/shape","version":"12.0.0-canary.9f68a932e.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.9f68a932e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cb0466b1e8409c3c9e6143fe6d28d6d97d9ee11a","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.9f68a932e.0.tgz","fileCount":14,"integrity":"sha512-jXwBTw5FG9cTvBD1SKgk/DvpiTmCN3n6HfhruOf0xU24v2tmdweuI7A2xVLiWBPnXw5TmQhS3Ruf2Xm5zDmBWg==","signatures":[{"sig":"MEQCIEXbTCSHMwSlk59kGgzr+5EbZ1DKEW62teBXIENrqoTOAiAj8TTTXPuA5Tkwya45quL2ZhwxVR22yb6Cvc7FEMovVQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23689,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8LGGCRA9TVsSAnZWagAA59oP/iUoeGi/kA1xn809Qda8\naBYUWrLllTDjSvttQX9i2Ent47mPJliLbaIL/lq3ilqduBdmxetvqHyOYmRN\n9MA5t7Jf2SvX3DnsIy6njs0coG6qq2TEeEvFzhYlGXiF25PbK9vlIs7jbcb2\nEp9+XfylV6u8udtpFn4Ryf/zT4U759YVNj8472FQ9sy9q/sqw2ozKLatqwCV\nQwTcvy/vA9AYOAZaPG1YjVkHqwy4xJWZvzj3Kx4HjQ4px4lrSXEFZVK65tQ5\nRCd0hK4q/7yDV/MJxwpsTBo9Hks0/faRFNf6peBjsuLsEDPDe8FlIuKDL+65\nHqJ8k19PfgZssDJuDp4T216Pnxj47SpriXN7XUM3f1MIRoEZ+wHazGNPTDJP\nuOZgRvkDezwje7x4Doal6ZRYQu76f51Ijc/bOb8OtE7j+mfi702SRCbx8JLf\nILkfoesP2LJTjcPvqQtavem3Sp6X1E8DpcBPnnCJsXFJ8CrXicsk+4LiOh7R\n0jT8Y9+DAJ82wugw1FxRFOfFvqD1NavZivGqK25rOAIeaUVRsc9j5zm0LMPj\nC0+Hu/oHF54OA6+an9yAkxUgzF03UnRTAlX2a3RFWlRb/bwY5OLNVd998Oh+\nk2W2syvWXkUwORV8nTG2v5kbx8TQ2MhladCjyeAbV0BQdV7hlznj+1mXp7JM\n5UQj\r\n=T/ni\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"34b4e5801eaff79707e9f2c769df2c1a34bbdb11","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.9f68a932e.0","@material/theme":"12.0.0-canary.9f68a932e.0","@material/feature-targeting":"12.0.0-canary.9f68a932e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.9f68a932e.0_1626386821917_0.5666048271461119","host":"s3://npm-registry-packages"}},"12.0.0-canary.4eecdeaf0.0":{"name":"@material/shape","version":"12.0.0-canary.4eecdeaf0.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.4eecdeaf0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"42fe13a2c17dffe323adfe391acfc77f58d785d1","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.4eecdeaf0.0.tgz","fileCount":14,"integrity":"sha512-p316wielPvrpXeAF1bjg5/6DMJZ94K3mnljtV2CWY58cybyiuA8bo8atB8JC7tzaMxVPs6SPeaz5PI4J5vlaoQ==","signatures":[{"sig":"MEQCIGMP9ByAnqCHSEFjUV/z6N8tkLZEw3/gYNl2sr+h5XWIAiB44oDMqjncvfsHitOb3in8zEGouYXhsg1MZnyq1zLpiQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23689,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8Z56CRA9TVsSAnZWagAAGqsP/ikzFTc7jIGNmGI7EAAw\nYqnOGSc9KlimPp3HO4FYJrAGhwEJGXjGcH3EJZC1zS+wY0oMx5902YCIEI/b\nm4h5AR1iusqgzgxviabI9EgWMiIXW9QzuPjVcEL+biYOocMLncuCjikYbBs5\nNFud02fq7qPiM/8adnpswa8RiV6p+zuZYVHXBE5GHmnVaOYD7k5ag+dRo1Ox\nZglV2SmeHjChFFysR+zd4TaxhN68Fh/4yWS8Or4nhO0qE2UmK6Nva9Jiw3xT\nFldiTmMPmgFWZXl0k2iy1cTvKT/oahRY4S/pg43rd/o9nj39aK7UhRzr5zCn\n9v750hH1XTa3esXECJlt+3v4w61L1qOaRlOFvUc4Yn0+pNhh/TRQLtD4ZsIG\nku6j/R7nGmpY/UrDMctddKPwiiNflHP2Sd7Z1z03RRtAO32d5h56F/FrCmL1\nYpf7zSSo2WD/ddHpMq7t6rqWZA5luuhBYreqIklB5ZoVsLwa/VzUI1lyOlFv\n704gmKewmxE/CCbm0So8kHhZ+9Wc97UlrFwLb1RUC6sf30A9yKHuryjsUePc\nzUpiNA/NvjQzpEZ32cRxMAPqYILjPCMjglaNYNzifACYQ9IFG2XpwTJgisir\nbNqoEfm66aYOvbkbyL0595zpB277cGxGJyS98Njrd3ieUwpavF682PaSHOUF\nE42k\r\n=x51P\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"89a3faf78d32cadbed38135c9ae10ab1f3c8e9a6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.4eecdeaf0.0","@material/theme":"12.0.0-canary.4eecdeaf0.0","@material/feature-targeting":"12.0.0-canary.4eecdeaf0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.4eecdeaf0.0_1626447482583_0.31257577070284026","host":"s3://npm-registry-packages"}},"12.0.0-canary.7239684d4.0":{"name":"@material/shape","version":"12.0.0-canary.7239684d4.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.7239684d4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2333f34b2c61af06161fec639f5d086d5c8c3c74","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.7239684d4.0.tgz","fileCount":14,"integrity":"sha512-5+xIvYfstN99roZk6rBmFLa3lcdd3wlO4lhh8Fb1MrWcgeKommmHak6QJ1/n8kfyD1kGMVjvZ6Sp8RffrF57+Q==","signatures":[{"sig":"MEUCICiScMP4UX7p0wBFrf5256wAdTXKRKqY1fkbJpsz9V2IAiEAl9ee/TYS50DXQa22uFn2L5VcyN+KfyoXgV+swjtJKQw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23689,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8azSCRA9TVsSAnZWagAAGsoQAJ9Tg+aSIJSE/Uw/FIiY\ne3Jts9Nwh3QqqpSz9E8yi4fsOtSSPPBVhT13AUgFstg2Qe172+ITJ07ZE6zI\n+FtdeX+AWPIjXo3ptQJjEI0ljlWyXbe2ADsINIzruVTQaOO5FFsYB+2Ilfpb\n7g5ShOUInNAC+eiEsCdOb8XY3id9+xa17i3cV08JpaAiwgicTf5f4KKSbpcD\n+hzat3yF8rdJ1f+kpvUNwnf30V0p9RrT8+qGFxaC4P/3LkIpX6sBDAjLUJta\nBAESKEWMzuQnidI4EtXeFX5BS1wtGzD5TsBABTc/jbQWJVNXfq5dN5Kbk87m\nMjdhymhD+hyndCjnQ3Dk9Y8s3gPnnfbGdan6suFvcUpoK+SpQvMAIf0ce6Aj\nVvLsg8eCTB/dIVBZDjY1n8Uhtfbl9sI3k5YE8frT/+MtNhJjlnQyxlE8VWaK\nGORM0pypAo2WjO55x4p0YWgm8C/ghYd2EldM6yLB2hDnwxAPaTxhwKa5tTn9\n/rGUuG15YBO5ESrr0txjswtoTKLz8Rj2Ivxpur9SFpqKyl/Kasu8RzG6ENQW\nEF6AVS272/cjlCnApkc6yv/xauAZ5bJM2yhSRP+EUyshDhQEGfcXxI+yPxwm\nhjxkqpd0bBmLZUTTXhgj+Abvt7Bau02mKKEyVpYV0Qjm+lkHc5itKCZm69Bk\nopFA\r\n=mJii\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"4b35543a488bb22a0855f6f0d00b047fa76bd623","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.7239684d4.0","@material/theme":"12.0.0-canary.7239684d4.0","@material/feature-targeting":"12.0.0-canary.7239684d4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.7239684d4.0_1626451154602_0.07621715692772324","host":"s3://npm-registry-packages"}},"12.0.0-canary.d5f1f7c72.0":{"name":"@material/shape","version":"12.0.0-canary.d5f1f7c72.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.d5f1f7c72.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"74fd2426544d98c1839246b1f5f13ce75eda58fc","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.d5f1f7c72.0.tgz","fileCount":14,"integrity":"sha512-+YeNSbr7fXQiJi6MKSACy6/dFjPYUuGVXrcA8nGn+ZyHr/mfnzvPcs23w5rHuedQLmC50T6CxYHBdfrU4XK2AQ==","signatures":[{"sig":"MEUCIAbiVrlI7qgpuEvGjRtsd+Y7DXxgQYMACLgS2s+2+MEvAiEA7KhbgW8pHI2tVPxacbVibhDQ+QsX46CJ9DrrU1KJTKI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23689,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8bBBCRA9TVsSAnZWagAA4ekP/0MESHMuwsnFdXV0fpcB\n4RsYdIDWUE6TgVBkwRGj3dMmenDQImoK6OB/kUL+DOiAjDP1hpEr0Bt0GMtl\noGhAB1yMA45jsMvN3Ur9NPpAchOycxio0z4BrZv8XKnoVym5CklzTXf6iiA7\nbdI9ZgfoR9g7O9p2pIXIVptPvxBWSq64+Ln2+0MLOFZzYddV7M6Hpdq0YRp6\nuf4VHSs+op+yPXshO8/N2Per+PhGhy0B+fZk5WoV2xSrD8Qj+m+MzEryyaoL\nKusSsaXGbVoxtduZFyir/51j4NuKMh+4xJAJQF7Yu5dKVkWpQBgzJPvZVf3D\nx/npb7SDUgChmU2NOiS4ycZ5gFDJQeM5HoIHmCCdv9EgXkc/2MuZgvw3ORzR\n342q/sA0JVdhZdETU53Bgg95NqHp5Gge8JqMBfztHcZffRdUs96q7ZZPhSl2\nh0m+yZQZTklRVF3U3JO0/WqMCAd2emj56P7xPFQj8xAyn217N94k6MFbVeDw\ndxD8a4kIuY+dEWybS6v+Q+bI+B9y/7e9Xmk4zGvx6sH5h6WaYZAmHIn7pdgs\nPjaOTO+fHK3T7DXKTfWegHeTuLdiTsX/uTsaQUb4Fu5cqpH1ZwimP7JrRvxg\nmYiQZ78f6Cg4KKM0PjkymfCShmd6UeLe9YioktfZEw43DI2Be0ork1n3j5hV\n9hBl\r\n=SJTF\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"ef327d93f5a591e88ce5af94a2bb181d97b58472","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.d5f1f7c72.0","@material/theme":"12.0.0-canary.d5f1f7c72.0","@material/feature-targeting":"12.0.0-canary.d5f1f7c72.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.d5f1f7c72.0_1626452032915_0.9487786297638559","host":"s3://npm-registry-packages"}},"12.0.0-canary.4d95812f9.0":{"name":"@material/shape","version":"12.0.0-canary.4d95812f9.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.4d95812f9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e8c26797de5dda3fa298f0492b57f6452d568275","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.4d95812f9.0.tgz","fileCount":14,"integrity":"sha512-1Ju8gTb47C+mhQSKpQgJC+BolIfpNBcl5e3R7p+cGUo3xI+QM+Jj+PKqMEeTtWJtJnLpqCQFPrA2+wx/99pD0g==","signatures":[{"sig":"MEQCICDJI+V3qTVEKcJp5AO0727A20fAZtKdw0DLcd59h/E5AiBAe3C7aBSDayIZRMXgN97V5p4vUTxxx9Oa7TTWadNL2g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23689,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8eFECRA9TVsSAnZWagAAcv4QAKM2Dg+wblqRQWox/HvR\n6aa3LBVUMbegiG5vdkEBT9Ol/yIQWVBGmrojyvMPJqMPtgAlvsYvYZmTSaQl\nc4yPcpaCIFiofQdaRBGAzMQf3ga74mbMQ10yU/UsvtaHZQ3odWJJ0aWEsGEJ\nJhF+f3Z765PCh+MRaYrnxABnCwf2lTFRk9Gx1fwhu/PgM5nLAAKmg7z+0wbV\n3PFfJAeITYVBga1Ty8JD4mRXft82JvKV0UaJsoqW7aTUdb85gqz3JudzeFzd\nWGa1UvOeOSW/2+XpTSYzuQWrF5otJ2YpPoG1gFfcGOtuZUmGr6awtbhrZkSs\n801Yne/NfyjfCvTnXZP/c8B773VMZ/Y1Nd2ajHEfbe3/jIEnKluRt08J4qPc\n+vEl28pKDZMkpX9fwYFKK4w749zxc25vRIk1knF0Jx80nUPEOHFQ2ULNSrFA\nG7CcEBC0vjQbiH4NU/8bC4Io0+9mP3+euUw8n/0XjQC/DkenZaQUsdS8laFB\n1h87WHGp/13uSACTZxugZpeYDWt34TMwhigzFJmk5zwLT/ewFf3svhK1czqH\nt0T+A5yNIjx5QFAcE1OqoPE4xexLzlnmMeNo73hgSiffmh337cw05bqvopAx\nQTquynhkQwQzsDf6ghPpP35yZIUD1rd1AgfGSTY9D14nZ8LEf7lseYegHvgd\nMIDi\r\n=wTX6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"34bd44726ccda77331fa29afdc1d5ab7ff0879af","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.4d95812f9.0","@material/theme":"12.0.0-canary.4d95812f9.0","@material/feature-targeting":"12.0.0-canary.4d95812f9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.4d95812f9.0_1626464580243_0.06834677843453374","host":"s3://npm-registry-packages"}},"12.0.0-canary.38d1846cc.0":{"name":"@material/shape","version":"12.0.0-canary.38d1846cc.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.38d1846cc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a991361202c6e7932d70565fb9a8ccdd9e1b9c0b","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.38d1846cc.0.tgz","fileCount":14,"integrity":"sha512-2JcFDb0y72OrkBrVvyYsmhxIw9hqGXTjafZZ9ScwQqCQnrtfsIY9BzFich4bTRBEe+xUElLyCTpqJH7Mj6Zlvw==","signatures":[{"sig":"MEUCIAoaHf7ciou5/scQMy3UkxyVdsJvFnRv1hozD85FQM30AiEAjCteiCO+coi3vERUQugP2TDXeQFafvQ7091ccg9npXc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23689,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9cd+CRA9TVsSAnZWagAA8dwP/1DFq28EKgSXcfxfjq0H\ndnOuPaeRny0364u3XQCkLaVc3CEQeO4AX6ziJ+kjqL2fldvZLu/NsWRbyfVJ\nj7jhxwC623yTE2IhX0TIhOE3IzB/yRJk+qz1R7WU69TOWhK+2T9ggsYGxLmX\nzOgPonGnJaAT7hfQoAUeE8OSNaQzrNYNfk+S08JInzBIKnIZUaLHQ2p1EIX0\n4WXVMH8BpzsUtgWdFFZbvJ2QRwQ9hFfemAgrlhUOroad5tgZ10N/MXBurKGd\nCRlMlA7GrsND9xpBC2bZ68uGQj6prWgW+54wtM33zpNbQwKwGX1pK29Up5zU\ndfCBr7Ae/+pmYDeMMvehrg14Ajavo5ebTuZkAytXPChXqmxLAY5CkCcHmeH3\ni/mui+mhjz39wqC3ZYY1DlsK82GKRzAF02Rs5iOSvHWYRAu1za32kWm87Zzf\nZjDg6ER5G3SLXJdOceZGQOSXHecPM8e3w/6Lsd3vu1QiZOZZj3iA20kLr7BW\nF6Frn0FPIPywLvJiJ6SPbW8KIYcB4FH7zVDr6PnBniF77Y1GMcpDxjGi8qxa\nnpBEJJwMcOHqNTgILp0AaX6Q0FdznsjzC3PhU2HCz9Bx7oDsnzX7KZJSetem\n/4J+HvN9eh4UdM+BazisP26Q8OQ0+4n64g9Hm3+1ygdM4BeSQyJbx07uxgPS\nftEv\r\n=10N4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"77a8b2af56ebd184dae02df9198e75b16f4db385","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.38d1846cc.0","@material/theme":"12.0.0-canary.38d1846cc.0","@material/feature-targeting":"12.0.0-canary.38d1846cc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.38d1846cc.0_1626720126046_0.8635599440237585","host":"s3://npm-registry-packages"}},"12.0.0-canary.3f691eccf.0":{"name":"@material/shape","version":"12.0.0-canary.3f691eccf.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.3f691eccf.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"12e228be97c198901d5cddecfebc4e394b2885a6","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.3f691eccf.0.tgz","fileCount":14,"integrity":"sha512-4ERIZnATnTNdJ1+ak6KrHWWhtMEIzKM6pgSey/d9WeJz0P9kwaekiknzB+l8+HQgor+byB4fbuiPmGbSzhO3zw==","signatures":[{"sig":"MEQCIHL6XyiPLkAjM4FSrA0ICyxNpe+DgA7/UVIMjEaTY1gKAiBVw/0gRvHwpvbQBidrTPMPtVwTunvumdLPON2DnIokvg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23689,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9vUTCRA9TVsSAnZWagAAcjoP/1zLW6XSkXvmbudxRd93\n2kzvxZ+m8kuYjFU7CaRJC4YuhFznPPNx04D5pjxijzLcVlLbXjA7GegwBH5h\nra7VLdTmTvGnC4+Y7Kog35AB18ofrS1gYHQqgl7KunnTbTCosfD48BJp6wKz\nhH8nRS5gqymGmpBP6FVz7Im6bbOtBi6ASDzyrgwkedKrm91B230uTYQP2GGL\ng+ZayzVrOQZc43g705jSKEuUhzlrcRSOJU1TMjtaia/0Q6q1JKvFmULdmHEN\niyHcqmtCO3rrC7B2+U/pikdu2mYlegIDYJHau2t1yiVQ+VF2J7LCQNQ+GoQN\n1SOlAzDMTCBd9Jw7IaixECm7XMTQ4YujECJVwcCM+RHZfjPP75kug0WAbU/8\nmxyWRjy2prVa5PEw0uMpdVd/5plYe2Don3A7JbpJQWjrLXxmTHGPjHurbJPs\noYBbOy2EKwu8uIS4EDnZUk4O66XxlXT5a1kbdnbp5Wn8NcsTyAcLXVNX2ITL\nWvykhV/m1lZ8LqJxsJdDPL/9Oj2i3Vc30fQAIbLJT7Qt7k7YqGOy2T9aY9E2\nnrZr5ACcKrjBkQ+Au+MV8qYxsYf+wnGBNxb05fFqLffKNxOnC5MnVoUSjjiE\nMCGkKkR4nxqWnFoguocdkeqU+R9i4xF4vryHyT6n2iEI0CPStFhed9dXsLCg\nr6fk\r\n=+a1E\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"58271219b83ef8db16c68153037e69345831b4cf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.3f691eccf.0","@material/theme":"12.0.0-canary.3f691eccf.0","@material/feature-targeting":"12.0.0-canary.3f691eccf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.3f691eccf.0_1626797331228_0.5410373662582095","host":"s3://npm-registry-packages"}},"12.0.0-canary.ebb5c73bb.0":{"name":"@material/shape","version":"12.0.0-canary.ebb5c73bb.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.ebb5c73bb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"69797c27a23a1033f7f5da61449f7d8a49ba09f6","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.ebb5c73bb.0.tgz","fileCount":14,"integrity":"sha512-LDUYV2CP6nR6hL7s4ALFSojDM/ehBHo3UfMR/R/iRk/LzvVruUfeCh3VAKpKzRCw78vEBKO8AAMeESoJiPgEog==","signatures":[{"sig":"MEUCIAxO8mvmbn12SAusHw6lTN1OFlNmpMvk5BY85EKZj1U/AiEAjPVwLHUBT+1hvYiHP0miohOTQXbxuaGHNsLAeONPIaY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23689,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9wBXCRA9TVsSAnZWagAAi3cQAKN/XXwxm7y5JklFh0v5\nHTnaRGGE8F7t20zEfygsur+ti9lqdADRJ0y6c10bMoEenyIIK4SRKcHWGOOR\nqDrQSEQBzBXyne9bA0ZpLYC560A8vUQ6ya5+9vB6jtCSLS0V22hodj5B7IEG\nymZGMjKD9wU97H03/3x9HqJcXY16dZ3ckv/ipKWqS2x4gB6bM2uBOdvy47Li\nUJ2Ej+N2HxOreiWA36HQAuAM8HvCmCQFyVAMisS7hmPNkTLlnQ0bP23P29ID\nlLXPJpV1QXa1jyJC9sEJ7dJeMxJ+ubvulqRyq+R77M9Q8DBTDOuIzOrE2pca\nN2vJzk4nSYwRXjnzzAOYyNwMxpZcCHvF5czdd1fHqz0tmWZir4BCgdxUZOff\nITyBQFB29WUxosrfKUzcvbU5y5lJl+66E+Ddt5sKgQvwoUPMIiVmwYRy7m/p\nBmCV50wqzR6WZjwSqrdgk9Iko8J2JxJmWQA84zcA9Vq9Dkq3PMkHiD9J7yND\n3y3MOCXZpmPLDJXGb3GBFdGgEyEAiCVxVyD1OZlY74AFKHnq24q7qiBN1oDb\nLr/IlKRVP0313Qw5U5lHpIokaVFPm/+jJ6jBDfScBvNmNVPG1RotcmF6wzHP\nzMRH8/WnmNZvZ62Wru927oC4pGa1jFvGdIsYbn4jOBZi9Dc6igsH/UZdPkiS\n6wqz\r\n=XpH/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"b37a38f7ce62c0d87ebbb4bafa0f1fb02aedb050","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.ebb5c73bb.0","@material/theme":"12.0.0-canary.ebb5c73bb.0","@material/feature-targeting":"12.0.0-canary.ebb5c73bb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.ebb5c73bb.0_1626800215724_0.23903471165716983","host":"s3://npm-registry-packages"}},"12.0.0-nightly.778a0e8a.0":{"name":"@material/shape","version":"12.0.0-nightly.778a0e8a.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-nightly.778a0e8a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4833165006c948e75e0254ed8a6d3017e8f0e21c","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-nightly.778a0e8a.0.tgz","fileCount":14,"integrity":"sha512-yXWff5FxAzk6pmdrAnHwR7FQMmY8bz64MAh3Ln9EtQdFtWRqVYH2L/3cNkcE7YhWwUgxaFCujZsCI9pEpyIeyQ==","signatures":[{"sig":"MEUCIE96SNyTsSz9/GfqAoJF/OPyeLCqyoUq+NQ/vmYCcFssAiEA6M//7sHFTHWOOh1CZB04BnKShIbIjapSdqPzGWe3VdQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23277,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9zqeCRA9TVsSAnZWagAAOQYQAIqizoN8VNRy2Vc8ocJh\nrzfx1IOd6LsxFn+HrIBcTV4zrHxv9nVy87gNWVRfsLW0BmDa8Psfi3nUrnvS\n6A90P+5Eo25ka0ACheEJpZ5T22wk9/NWxt0oVzUunTN8guKzdoCYAJWFDGnk\ndrjamMArjrYd6RQxZcl6pWXpZh6wg///X40x0TaJaHCMbIPKnWxVI+NLV19E\nZCw7zkPzh4nDQ/eiBi0QV9hiVjqJGj5Gqx3csyi6SCZ6oqRgFsJStsFAZhEK\nO3Njz7biLOFPFxreeK6+A4at9Y1Vd7sSyaCvWmFYTa96nH2NvJHVI0zbSBbB\nrxecX58ugjZVfwWyOEWjHLKVbWEELadpqp/l1eLURdt7Dx+1VS/asprOwRN1\nBWzJ8MOIUvgcsi9sjO+ASaLRyW0++vPdVcllYNxo2OoWl6qpU89Ta7GyBse4\nS0/PwmhXKFKUo4BMMBwY+LXr4Db3URK16C5Q39WyUinGsDZrT/92O5eEaSch\nd9vvSBya49sQrOoR0gP6X5atBAVANFFAdqa/++9ZszBjAo5hep98jY6rVQar\nPxczeS5oQwz8mjgRtrvw4+Sv/XmtD5i4KPl99B/mbZyG0o8ebvyQfU6zxl9S\nUSOFg72olWBvsCnJgUbTQVVLjH1nX2M+0W1ixunGDShoYKPQBecwOdf42S4B\nbgWs\r\n=XfY6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"d86234d661f09ad766ffa2f82c69582e585a8fdd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-nightly.778a0e8a.0","@material/theme":"12.0.0-nightly.778a0e8a.0","@material/feature-targeting":"12.0.0-nightly.778a0e8a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-nightly.778a0e8a.0_1626815134257_0.5796608060709014","host":"s3://npm-registry-packages"}},"12.0.0-canary.791311bba.0":{"name":"@material/shape","version":"12.0.0-canary.791311bba.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.791311bba.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"68e147b3cf70cdd3ad5a0d889af990a4ef4cfbfb","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.791311bba.0.tgz","fileCount":14,"integrity":"sha512-Oo7rXdpZsJRLBrTbIFvSH/lNzQzzQgs6VUhViueyOjGWy8Zd2Wt6c+cPqujqcXb+IDd1Pu+PX849xD99/EXOTg==","signatures":[{"sig":"MEUCICZFD1AF2SWI666sGaIOCbk5am7RXnrY7eQ02Jyu63kEAiEA8AJdcYZvnmaweWbrHlBBOe1Dbzl2baON1qxapsTrluE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23689,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg90krCRA9TVsSAnZWagAAqzcP/R9s8eJrsblOz0c7RjI8\nVfXJO3EQ0ih2NvqeOvHpsvv8Zt881yrlZmagd59wJ7kjXKz4uw6bHfMGTbFD\n2Q24Wfxf5IB4Ara1Ti87H/E7M7h82SWAIjX70w56dfPGomR2XzvslxFfOmXu\n7IW+p3ORXL7GC9pA88jUrDw1vmmZQrRhCVrZlB33x7wSrkPQJs9SYfvBZzJ4\nz5yZISTil/uA/quun+Ma6XeZXjwl08QJehStJZvW/Ff+JikHjq5zwy+S8DRY\nDjLs44X3djOhF8CXVN4CYyieEs/dFBrV4yuuarMCEjESwmyrqlRcnk0Kej7n\nysRBb0E7pirEHCqfnBPhCiYsoaq0kHll5bBw/zN8C5DK4CWjTK7btpJDgxyD\noeSHjAaW2jesfscCVb3Tf988XSPtJxukskwvrv7GscA6E/C2yWm+K12o1ziI\nasPHUI82ZTRRrv5wtMfAE2VVn+ZM5R550p8EygX5+EYLxuAJwz8vJPS2t+mJ\nK6DZR04f2DFwPRUHkIEkrqTQr4j1BliVpTc2gX7MDYE2q32+S2iDYVuMdsOX\nhMVd45DPCzATVdRHS853I5D0Ej4ZBs2CTnor/jhvdVMM1dpveBooMgHjaWn9\n03Nznc+rmbbB9NMJuXbqyjXzPT9BvmVHHglwiJgKIZW9k51b1gJ1u0EEiqXK\nce0e\r\n=Y0KS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"b915b82632a30b60ae4dca5d12fc23d5a5df4d4a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.791311bba.0","@material/theme":"12.0.0-canary.791311bba.0","@material/feature-targeting":"12.0.0-canary.791311bba.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.791311bba.0_1626818859817_0.6264871489207748","host":"s3://npm-registry-packages"}},"12.0.0-canary.85e9a6ac3.0":{"name":"@material/shape","version":"12.0.0-canary.85e9a6ac3.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.85e9a6ac3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"535ba124e63e9c11563547b6d4a70c81423cfa77","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.85e9a6ac3.0.tgz","fileCount":14,"integrity":"sha512-uWahwahzlBTVu06dmwJzgu1Sc4P26fdMcddCqwUYXo029ab9CZepsi30Sy2XeYxiFIHC2Lwn/wwfZiCGqCEcfA==","signatures":[{"sig":"MEYCIQDd630RRd1/0yao59u5PRKGUFqVW9lLiAMz9XT/winX2wIhANpqbyEB9HU98C4TYH7Akfks07Qa84ZVVeoYOm9JqKZE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23689,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+D7iCRA9TVsSAnZWagAAIvkP/jlkb/jMUTINqHSgvU+z\n80qc31YSkEP7MXh8WDP6uSM1CkJLdvivR2xvF6xf7XzlgtjcTAdDMDp+PAFM\ndu7G2a9j3mR1fukpqNgYm4RublWXZVV4QFpX2IQn1h5eXkB/FT5+9fqY3OUr\nEg/Eo8k81h+pjQh+sitpp9e48yzl41FiJX/kVSMd/maNWRzsyJSr6hfQdY9W\n6eoJ5nhDQVFu+l2ItwcSdBaAM2Y9aCjo13I2SSkRDwAeDYzbhpY5RL3VoDFe\nyJ9dQzJK3jaUUBYf+lifah8jlmHLz9xDqj8yj4clxMV8bDoIk7wJlQ2uDB4t\nYkLgjGvMxeE5Cnw7oHxqtQmBDwhaRySB0pY4noe8u5QCb4PYCNlePUwFCosX\nmGH/1bc9JfZKcTU5caACsiH1Ln3REGJWL/9py04qRwImRkiQa7cEYm/uYUB4\n7erv03PEYvXIlI4SYSBabieYBtGYcwe++3qebA2iAWra1FXeg5sfSXr/M0qv\nmR0vGhuULuq20DFQ+ANn8sk8foTqe05o7OE6qUy8NoE3DypT8ICXVG5zIyjQ\nY9PyyoR2xdU98MOP81zp4e3HE9U0Z74zYfGgRkZca2VfzC2yraC0KF5n3Vii\nU14A7CkKrDpF6fxYIahJoFCLPEqe1lWK2VSE6k2SOcQiP0dhthI8xWKOyMKm\nJ1sv\r\n=9bDt\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"651354325ad21ac082f791ec2abb0aa32b3ba936","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.85e9a6ac3.0","@material/theme":"12.0.0-canary.85e9a6ac3.0","@material/feature-targeting":"12.0.0-canary.85e9a6ac3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.85e9a6ac3.0_1626881762012_0.5389289695740309","host":"s3://npm-registry-packages"}},"12.0.0-canary.6b0442278.0":{"name":"@material/shape","version":"12.0.0-canary.6b0442278.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.6b0442278.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cc58a9f2350b34dac1d9eb0710b07f7633e5adb9","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.6b0442278.0.tgz","fileCount":14,"integrity":"sha512-5r5QYO30qX2XFWNlh7w0mcfT7HC0LGEGaHNeLWQE0xC2klt2IwkGOLzENTo7WW+FqEr4biugMPf6/k6F7AYsdw==","signatures":[{"sig":"MEQCIE8UsS2l/SrzzFgCkLn7fA7HKavCPaaIIT763X2kXD4jAiAfIlloCFf9a9OC0FYb5rSOh8kkvN5bfNlppAzedM336Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23689,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+GxUCRA9TVsSAnZWagAAFYQP/jbpub4/asI/j0xHlzJO\nlJ4O0mRr1ltVtNZMR3nYvSYQcaYmF39ATKGrf06jb154OdbteelJFmkNkOY+\npVjDHlwakGLESuDCc6hHKcNiRof23mJXPSluQdlHhDsUtq9RYmQTXuUctqF/\npcNDR+N921Ukp3Y9J2sa+HtUbWN4dTFnph/Z9iwYhXbJoEjctx6wSO1Zj3eP\nGS+m5gDPZcxvzf9sabmjbKP0jI5/CXGfh0PdbEdRo25NPP7eGp97MYSgdKBh\nRpRo/uHFq9uQXyNAMMWDwCMERAAVx4ZQv9RzJALMj6r4bImbf8Nn7SF0A7Fu\nwVOpE1RFu/Gzb4YUGwVJX8p139qpHgLUILeFdTIhzdw25R9mV4xzlEZ8+UlT\nqiDIK/6oq+BO8S/oAPPnqUpAy2MqlH8WSs3gOYLXfcurqXH8fNSqKxfMXRvm\net9boGJ+RknO/wg0+hGifG/AY7A+2cYyg366azQCTIBBFJuBFIUbvEMoqzT8\nDdsNc0d5VC+SZSswzmz3Hc062zagHzlps4KtKv70Thkhtn8S/O6leueaTmZv\nmEKc/FMIfryzQkU3KfYkxfbOXXfE0JVLqQJz8lTlfQBCzGFEmrHZjpzVICgq\nLlNy76rQIyyN48ilnwuZ+WJ/cwrzdimkpFn4DKRhXryJ9rPiX+laV6vGGeSr\nRT6j\r\n=7mUg\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"fefa69e22f9083ed30aa4ea05114191682b45a14","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.6b0442278.0","@material/theme":"12.0.0-canary.6b0442278.0","@material/feature-targeting":"12.0.0-canary.6b0442278.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.6b0442278.0_1626893396551_0.1953908572725922","host":"s3://npm-registry-packages"}},"12.0.0-canary.5f00e454a.0":{"name":"@material/shape","version":"12.0.0-canary.5f00e454a.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.5f00e454a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d4acf1618861fc76cfad1d3623e5d223d39b82a2","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.5f00e454a.0.tgz","fileCount":14,"integrity":"sha512-cRI44kx1G1smdcPJQ5o/HSoHBCY7NBEMVI1T3mLA31D49Df3Jlakn4lH9BMShsKgGprCexpKy7v1CxVcibYsEQ==","signatures":[{"sig":"MEUCIHE/cl7Nx+i5Opq9AqKktp6utSHw7WTk8GAVtQPJ9tQdAiEAjfKoW8mhH6s/lY46a6XSmKpi7cXWfXXp42QAKkzeXeQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23689,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+aWWCRA9TVsSAnZWagAAn/kP+QAt7MrswHIWrm4dn1KH\nSDeQWfq2WceD1481xQS8zD4uayXmga7GlbDpgefe4HRc8TM+wByTfMy7FgkM\no+DxBdltgLWJNgCFMSOhqxGAZWiGndAdN2ohn03Na6SjGzAo9qX7I2TEs3zn\nEWTX+VCaq497XPbB252dYm+536DMj5GeXlnDZNSUtcgkJw9sYSYL5nbY514q\nNSrrH3TYeJPGwD4BxVncgHySXt1ryT4wyj9AvKm1aoIK7BiDi2RX/ZNW5s1+\n+98YlvNauRhwIQkKZ4Fqx2s6yKL3MELZUfn478RWJLaaSZL9DTwHr0ZKtJP8\nLy+N02KMVeUg9gY/2JwHReMgwVO6lGZUabQ+XiQgLxxpGI9qx9kDIjskLSxd\ngfldKL39gg6IgdwIVF9gXhhXkTz/m/ws/aIq08PU2jKYWzrJ0cY01boPbixF\nyLsiHTTlXS53dHFcCm6hUvAt3dAYkGct3MGE5YEuPt05kLTWhQKDRre75vp2\n1189fXqAVbZngSCos/8sZN3V1luMK1dGPc/KETr4NKOiTXMO1tnn85WZRvG3\nt3rQr//f1zgrhUZoqo3ScevrFoBpukiLKu6N424xU4VGqhpkWtdgknQkAaUp\nbdVzc4gaJmH+/dQdO4dyjJdms10FW7rmjrPHoyKl3HeUkxUNi8s2RUVi6fSq\nO/20\r\n=Npoy\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"b9c8a5899d6bb5475fc5fb2c76a300d4a28f0ffe","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.5f00e454a.0","@material/theme":"12.0.0-canary.5f00e454a.0","@material/feature-targeting":"12.0.0-canary.5f00e454a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.5f00e454a.0_1626973590065_0.8910760662651314","host":"s3://npm-registry-packages"}},"12.0.0-canary.90e08fc6b.0":{"name":"@material/shape","version":"12.0.0-canary.90e08fc6b.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.90e08fc6b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8f012c421ffe6f80cb298884e0d05bc6879d3bdc","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.90e08fc6b.0.tgz","fileCount":14,"integrity":"sha512-xiCiMNb+HadGdkGqraKPd9HzJsq0IF8U/jTQ2mPqZy7/GXSPeMtUvzExqhRNjF2CE5XOeooFoHJb/TJmVtXLqw==","signatures":[{"sig":"MEUCIQCAVBUL/3QoYodaqQN5OJiD7gyaCCl7kHBQY/acVHPdMgIgc9CGlvRQnDyem6w1JNj0VniW3/gYGnSz8iwSVZ37Y+c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23689,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+gFlCRA9TVsSAnZWagAAAegP/AgqC5VSklzLpGQxJ3dQ\niF6aYamx3HusLpgzIr4FPlkVEWIfCWy1wMVsuHygLlcGwizkz8jNxVPDipr5\nJC8xNRYvey853SnsHN/vjvCcbEmduukq7G/kmIReZspT63F5pWZ8JuZ570AL\nFsR2Hlza8ZSALTtNCFUtrQmchKAkmuvjv1M1qKOME0aiCNhiHhyZ4Ag2O5Ww\nlK7xT6HsuomWzjMnhVBT4ZxSujuV/K2PNSWwf5k5pHRkDEvh+JlX3m4P5YY+\n2Nac2hYlM/4FEqxDjxIqKOqTwI4PvJQhKqHlmKnE+5STspG2wXBJg8O38hVh\nKWLLoEgAwV2LOrO1Bff4te8YVEWVqML81BeO85dQEw7pAtM4wy4fSb1ezrii\nGNqQh2mPxeExtC7FWrasTJpdX0yV8CTnSBDcK2XsBgrbG9Ge0mVv+jo7wUoe\nsBtSrusmF6pv/K/+uP3u/WNVrh13GsUPcuC8bHMgP9m4GowbD2iUvB3+KbAm\n2+sm9Do9cQPCjQt7MYFr85vyasDYVKQ+ICn3Zr2FWoolfaEmtOx7SJ+d5Ymq\nju/1SfjtVKv4a86NbgIeHYZbRE63fU+d2U0OpTb6qBqlkbSzW3vxhH5O4EMU\nExaRpH/mJQTjbO2vmlvtCqqWWe3g6NtGrzefIjCH/a20nlqrWLw7YM3/meGp\nOPE7\r\n=EMei\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"267e307e557cdce4bda13e55c34cb0d1aa0d0b8f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.90e08fc6b.0","@material/theme":"12.0.0-canary.90e08fc6b.0","@material/feature-targeting":"12.0.0-canary.90e08fc6b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.90e08fc6b.0_1626997093164_0.8090238524600926","host":"s3://npm-registry-packages"}},"12.0.0-canary.cf5b9eb86.0":{"name":"@material/shape","version":"12.0.0-canary.cf5b9eb86.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.cf5b9eb86.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e3b9b9e7ebdf79a70a9af48fd6af3a6e93695dea","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.cf5b9eb86.0.tgz","fileCount":14,"integrity":"sha512-ovI2/1rixr/PxbjNMNyy3u+FX5gVVqRNqSwdGZE5iINs1dv07TNxodpBo1Kmu5xuwu9cK9bXo7svnhsEVNsl9A==","signatures":[{"sig":"MEQCIEoWEyxrXBsz8S38mspvjhApMs5PPNvV90knW/wPnQDHAiAqTTHdWp4QV5Ace9PgQaKp1JBBd1QxNzzMZuGvgD8Z9g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23689,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+wZ4CRA9TVsSAnZWagAAH54P/R3rAmlul2rhg4Ve6w71\nndQgmGfn4olDe6qze0TC9Yb/k2QA9l81EWnZg2bEufJBl+lPtFtZSnOPlQUP\ntLFMd79L8EeWsJMOqmtVHw81ea95kXMqxdl/smjUuZB4qEeuZmOdpl0yIWLM\n/8k7QTQeGDXd9y1QGlDTfXDfefJbId9qo3sudxCF5Zcq3MlZAf+kn6nDLFyA\n2aZa+s80UzV1wX7y58ifxeHgYJ6TBA/CTIogk+TE/QCNW+oPrAc6L8J9Yput\nPYAto9vyzJHWiyoPrGLRUtOuFF0l3GeSUcJdeRpl8Rpxe7bVAWnhYJxdTLce\nv/HyUwU3fQ1Axwu69IXw5sonTdiH+jialPeCo3pPn2FPXnMhlQjEzx4cOcBf\norqO2P3rls2QPZy07zxXk6MEHc33uhNhmRVumIy28kUaXcd/zQMk4KyP47Oj\n/GD2k5PFXiLwb4jZfc5stuLsimYKp0cKokH3Fbc9wfHMkX6indwNCdxX9Iit\nlGVlsAJbOtC3YbKF9PhcXgpOQXJK++Jadesmdrhfo0CrNxLfQQjqlU60eaFV\nIMLO8IpNBJXTq1BqHddyWiZcJJPh7t87rX56TTBh4LmR1IeNnpPE4JPepMbc\nkwyftRzgwPZiRvZcGYGCRzqxBYVmLXM71n50hAag9Qg/iGE1qx5bM87hOkGG\n3jAW\r\n=sDgt\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"8447b42cdc88335a4d5a37bb048f5babc1c5bc82","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.cf5b9eb86.0","@material/theme":"12.0.0-canary.cf5b9eb86.0","@material/feature-targeting":"12.0.0-canary.cf5b9eb86.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.cf5b9eb86.0_1627063928309_0.5992023325322144","host":"s3://npm-registry-packages"}},"12.0.0-canary.3f36ac75c.0":{"name":"@material/shape","version":"12.0.0-canary.3f36ac75c.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.3f36ac75c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8f82bd677ab759cefb0f7555dd624f149165a2ff","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.3f36ac75c.0.tgz","fileCount":14,"integrity":"sha512-lpy1DrcgGtDB57gap+H20Uj7HmEJYtTut5N0RlsL90kvawYNxilYDi9sD9fVq0xlocS2FGJsOJ09Vy0Wb1Qmvg==","signatures":[{"sig":"MEUCIDoUuBSpgDelFhiCpS2abvT5CeQBEN7Foc6yU72RkiqrAiEAkC5MqCz9HrmTdUpoPNox5gT/i38U4V9LH1bTALSdwe0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23689,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+wszCRA9TVsSAnZWagAAZFsP/2ChE5mzC0Xjh56Tr0zC\nj+rTyRzSW5+8g2phXYEk+O3B+eFJZ0wDNJpMaW3MGY/dXzY1ytKVAAedHzPY\nIqic/SDK76xPmzfT3hRNI/BqGhhNBWTtHKVQE3pwjseRwD1kVAfHvlAehbEk\n2dqsm4yhY0MK/RNZi2PwG8ux46Yen/SDkWIjHwquutj95N0w26jcy6ahS8rL\n2AOU3krTwX7CIq4NXFVRiBISwdrInJa/UfSmET5P2BsblaciCXfHmIgjJFpk\nIS8lszEdpeXON7JyWBaR2oFqDJilmn7rXTSqGiEBf6NlmGQI2VdaPUqXwnMg\nCSc8WXtRgATu+IFehoMDIAaKEunbL1DF0lrOx+skvt8CbtZznqLDDyU3RaQo\nEc22lmN5YXgqyGc74mwiG2K5vMMR3qmQl2AQUx2O/Mgytti3D7//tFjd5a3N\nu2NQTmw5M1jrcV38LZYA+m4ZALlMB5fQVDI3pSoIvjwdQCitX0OPaqNMm23m\nqoc0a7dJ/grDI4Gb3ypOj6vl0OKWzI7KE2S2r4gaL/C7OShAoMvBTp/gqeQF\nh6hzyt7n+kiE1HR9fJRqo8nRqZ9eqidlZy1IgKHG8q0SQ2tW8FPRR4iTy1Dc\nlbqAJkDpVRJtC/NfW3S2Z7R2n8dZU0NJe4XsTHjDkuthYBuKtdRedYzIshiv\nXsNn\r\n=XVaW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"b0f70c5fff2a6f188b24beae7ecdf708b5bbdcb4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.3f36ac75c.0","@material/theme":"12.0.0-canary.3f36ac75c.0","@material/feature-targeting":"12.0.0-canary.3f36ac75c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.3f36ac75c.0_1627065139660_0.29580058451026714","host":"s3://npm-registry-packages"}},"12.0.0-canary.ea1e1b850.0":{"name":"@material/shape","version":"12.0.0-canary.ea1e1b850.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.ea1e1b850.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b6c7a41a25b6d971384f3134efd03db09f8dfb74","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.ea1e1b850.0.tgz","fileCount":14,"integrity":"sha512-Iz4dVt71Ixt+yHcEp6EvxPqTx8pE6E/rwoZFdicPf6EiUf+Arq9BphMZKTMocBNGtERxrSVdQwkGNgUIAOlidA==","signatures":[{"sig":"MEYCIQDFossZx1hWCwvbF7A3ke6eYccLHpObrKDdSR5NX4U5YQIhANED77aXBuizZIFSgSyFcQEVnGaAWY9DbhOyWlOSC/Cy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23689,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg/H5ZCRA9TVsSAnZWagAAO94P/1gM7MORks6KCFRKptuc\nSHjJT7IREjKoI2s73P1pvI6W3h57PaR4IAkvFXRQuZanhRdeXDmBDyHW1grH\nEIq+HGyRUEI+AgNtUhZU/dnNHz/4MX6lnHHj2Xzolym40RC0Usnc8jDa2doe\nTrNBEDAvDtT5KWqH3/fKdzFNUF/5tSJL6pgEWlLiBEif3SQY/a3P46ok3APj\nZfdrpWbNGzrJ4+viRuQkqg06RaegAjz9BX2Te3p489sgNhQSj6VR3hS0OpLp\ntV6C9GRAnayYp63dI0JxxTMHxw60KuMPqqZvNH75dtV4L+ADujcIylk4RjU6\n/yS9VeJhTYTOo6C8fbSSlMu68YhEHiMJoSxak2d9P33+iKr8hQfuhM5o8Git\nj2g/mexOwakXh0JTG+JflROwSF/ga4UJdkAtkaeauKbC1xx853TlqmVQF47Y\nCkwWANGSdPMCnC/7kDxaiXeuj0XD+PFuSyGdtCCWtVDywUWuKxGSHfshYSn9\n7wde56/zuHFq5DjnidDh5eRqNTSUwJS6AnjCZHK3o6Dnzc40trSb1lcRfALA\n2ssJaLgRKeC8wsceSWaigYyNKFnoo8mk+D+xsnksLSwVJTF4ITkofsBT5fJA\nLZ14Whp4am2d9e16a7rmr3DusF+Zd3SkSHQlVn757FY1qHCaRKYtBzTF5ukZ\ndWaA\r\n=ph8l\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"7c296c6f9b2c20eb32b0501c98b6415bd193dc46","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.ea1e1b850.0","@material/theme":"12.0.0-canary.ea1e1b850.0","@material/feature-targeting":"12.0.0-canary.ea1e1b850.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.ea1e1b850.0_1627160153111_0.6497696141304554","host":"s3://npm-registry-packages"}},"12.0.0-canary.22f390c43.0":{"name":"@material/shape","version":"12.0.0-canary.22f390c43.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0-canary.22f390c43.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9c7cc74a17b1168501531f6a090e33d21b3527fa","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0-canary.22f390c43.0.tgz","fileCount":14,"integrity":"sha512-bGmvj5JzV7SKNrdNg7opds4XzGpEWBz39wV7gDvG1PZ9gC/DO2WxjtKVa5BRyy2ZRWyTp7usdybeR6bs5w0A2g==","signatures":[{"sig":"MEUCIH66FqFeENBNicxcTKUEZ0R4vv4x0gd92bY5JyMNcdBFAiEAj+T3RAwQLdrUuiT+TT7j5Lr2XPvrUYpWqXObWevlN+4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23689,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAFewCRA9TVsSAnZWagAAcbIP/A8LpORFSS9jCKnkMRzu\n5Gv2aoVZVS2iOQU+o23wLBJ7l5iaLHieYVdjgDA4JWkdlzMFOtQ+YZXqRxsD\nGqiFkNCo5nMjmOCThpfYwxPmJv1p5t2QlaYABMH1O3c7Rnz+f4AHTHGymJ2g\nEJYuge6nmYR5qlXizjVqXktvqauzUFgkCbQS5QDR1adQUP1cDKD+V3HtiyNi\nNX1qko/IRbdy2h1t+kVw/LCMzijSjwXsYNIaxYGrTFy8kXzYOOtM2lBCuyfN\nHw0cR6PUaxZm/F0DQP+eDOlxDbS9ZNUyHjUvTpMWyEc1lOvW5dMTM6nusFQK\nGdNn+Sy2Q+NPE2KMsU1EbZuNwpA5F8qHEgcjArReVh1DvxjWJ/vJyhLxzsQI\nq+Cj4xoMXfcUIdBz9oYs1LhH2XzDTV2NixNVqEe9TQ3vcgY+9wjQxzn9tZmB\nNBUpHcugeYnMCZVcbHGXYFDzbJW9/hnnUv2VOLKEG4NFdogNXZiFWD5Pzwjf\nPk/W/ajs3rPi3MXt4KBJ9ITP9VXsCK3e5tlJMEebzZbw8S475Hngtp9zUFUM\nisA/S2fjpixsjYiEbmkEfBL631VM9gv6edqh0qsjs25OQQwswgAmzC5tlHrB\nX7ECHWhV/4pwUpfsvbcl9V78FcedMg6lONEGTd8mlnVn40NVm6pQaBHI7gwL\nZ6Gr\r\n=9R6a\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"2eba31ea1c3ae3c0e3497f3dae6cde368675a496","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.22f390c43.0","@material/theme":"12.0.0-canary.22f390c43.0","@material/feature-targeting":"12.0.0-canary.22f390c43.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0-canary.22f390c43.0_1627412400192_0.5000333587359249","host":"s3://npm-registry-packages"}},"12.0.0":{"name":"@material/shape","version":"12.0.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@12.0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"903cd4d38fc98f7c0435322261351f387e258850","tarball":"https://registry.npmjs.org/@material/shape/-/shape-12.0.0.tgz","fileCount":13,"integrity":"sha512-0mvRUPq2esbyivJl3NMdYtHTFOV7EOU+Tob2Y6F2sQ+PJJYpONfEHRo8nakN7fDM3aNSuQUdhG3nbwJghAN1IA==","signatures":[{"sig":"MEUCIQDv3mVpfLjpJ7bERzO8AFMwXwl5YkHaPVCwfaqWNQkXswIgM6MCnKS3XYp9+g8bcLVsvCKX6vHjl4W6KSGwLcj+ZUE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22939,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAGNkCRA9TVsSAnZWagAAVcgP/jKut05GmXOnC8VyOdMq\nqEOdF3m+iHl0KIP6LkZbBxPH2Qu7Vr1cmFc7SeMbRNZY4bJxlfoulcYoX7Q1\nVO7DKTBSMWmv8TgUNXC17nfxGTT+6fqE9GecOAaKDMnKHRJZnb1l9nwFBdGs\nTtD2bydqFDdDKCZ3mwyfubew1ulm8jNurbJ1ubnjr8IFiNgiCkR5gtX5azYp\nA3Li9Pz1jxNqdBsTkVHNvTCWm6O67cAziXT8bYMdKXWkjr8WKYS6VMJlvmqu\nS3/EEOgyY+NjngXcLmLGn0IXcriOZXvyiSIWE5LE5GsO8VlTO8cycVOHvNd4\nTGgvISt/Niy8L1W+4TefmVjfCYsBLPcQ4pJ46+tuwlhc/gP4+MQ8j6Eb593O\nj4rHsQhFyKUABHW+nxMh2fbSyDozU8vnpQIjS+iIGQ22HmYI7HLU8XRIBXwZ\nuouFiMe/Yh5AqMTjd1kuH1tOBdhtSNHfvWEMe2KG41PpH1TtusHkMZNSt5rY\n9upYYFXEYHprQR2jQY3D59WolanItnMrA31X2aAgyowlTkjrcwEaaD5cEl6c\naupqhyn/nkRWvoO5ChpFDk/Em8xY9K3DS1gryxqbPS967HdwLNh/v41Dul5A\nm/Ec9yw8QW96PmW1gy54WlDmC07lMLajN0f5x2PGhhbTcfNS66BZeTEge9ON\nBOEl\r\n=GM2C\r\n-----END PGP SIGNATURE-----\r\n"},"gitHead":"ae85f7eba0d72f4fa5f3e8669cd316336b3e6828","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"^12.0.0","@material/theme":"^12.0.0","@material/feature-targeting":"^12.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/shape_12.0.0_1627415396216_0.9818656207348078","host":"s3://npm-registry-packages"}},"13.0.0-canary.ae85f7eba.0":{"name":"@material/shape","version":"13.0.0-canary.ae85f7eba.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@13.0.0-canary.ae85f7eba.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ed90345d836c837ea80d484d68a845429cc1790d","tarball":"https://registry.npmjs.org/@material/shape/-/shape-13.0.0-canary.ae85f7eba.0.tgz","fileCount":14,"integrity":"sha512-H/s0bNZWqqxMsowGJq08D/QoIE4YuyaMiYjZarT6qyfNUqxVMVuNTVf5IsQkbCE/psxdLhA41TD01/1TlqGcCw==","signatures":[{"sig":"MEYCIQDznIsuGcvc9w08dTah0k2OTKBtQ76CJV7BPSzysLMJnwIhAMjWlrizfL+VL9DsPW6G712xJ9s3SHPVkbH37OwHNZOa","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23689,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAGPHCRA9TVsSAnZWagAAmnMP/jPq7MySPvFluq3Ch1uE\nT2LZSinDXnvBBcMc05Pu2xBhy2+8agYQ5eK6L/eNdDq6KEWAd6sWzCnL+0iU\nYm5ZpzXb+sRyJS5mm5I6ClWgCFFIyHauaDB1XjnkfxNF+Z2JRc8zIu53fwXE\n7JUwfjmWsKC/lw+6PjYVx8nB7/Gh024tQpMbmRD2VbfK7pEqaeH08IQV0bpw\nOmIJXU3+T7Zo690iH53boHzMMnkAYK9ftlk59I8trFV94gjbO3rHktyuPpHw\nGOTK16Y3uKTNFSIKJMSuZ03foT6a1Jsrx/rKQghnCI2k1664iOOHtBZ6dvAe\npA/b5bptwyRDe/0Hk9nnFu5k9HJWLDP/xBLEYN2SxBQ84Vj78JGGnW8et6tO\nloFPbvGKQ2Pi+cjaXATi7ys1y0cGXjUvOyOM6J+S/qkCE+pumGb+lYccTRYe\n70Mc/xIkhO72cv+vNzvMDZCm3K8RFuPkJ+gdvge+2dObvDYOaK9iVjq7ApSP\nMLIpmrqfjBAiKiczbSCOrEg8od2WAKRWwyfUW6RnBSPafxMwXU16OoT4bq/H\nI4EFtcsE0uze9JaeFt7mo7ljI8LPoJdB0vzwsSWK+GoXM6E8595XPCh/ViEe\ngaGJu3gszBg5E5obVD/Tf7bEU5FWDuoJgYronWsxVSH12tMJBOKFujAv23Cs\nYD1H\r\n=zycn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"087c731cd84ebd8c578510bd4c8dfb5d11e8c574","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.ae85f7eba.0","@material/theme":"13.0.0-canary.ae85f7eba.0","@material/feature-targeting":"13.0.0-canary.ae85f7eba.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_13.0.0-canary.ae85f7eba.0_1627415495412_0.1681726046660108","host":"s3://npm-registry-packages"}},"13.0.0-canary.5981207f7.0":{"name":"@material/shape","version":"13.0.0-canary.5981207f7.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@13.0.0-canary.5981207f7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8f5311a1c68b2bb36094716497037fe1b4ed1462","tarball":"https://registry.npmjs.org/@material/shape/-/shape-13.0.0-canary.5981207f7.0.tgz","fileCount":14,"integrity":"sha512-16em2o1kA88OZX5a+KjAg0i6geM769hYGUf+3zilgCuknYrbLbvh64IWrw6O/JfWduHYMcMkuQP7X8pIN26H2A==","signatures":[{"sig":"MEQCIBTE3gIU6EOMBZZSALEOerA5bKkxzrUdC8TqqJgWlJgHAiBLbIOz+ypPeimBIthpYYS68DLGxMQkvgXnE2W4S+uedg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23388,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAJQ5CRA9TVsSAnZWagAALwwP/1tTmtuZ/GkiLYwKAHJG\nRjnt7qBABUL0lHx7q+8t/JbTS2RCbw7XcVmK9+XiMxNB7vPjMvzHUCMeh/9M\nQItlX1KAI/X9VjhppL+qH1oOhckIK5ini2ny2bHrcAmmmDmUGffDouAAIjsj\nVahVR34BzwlF8bUleXSQOKhT1Uc4cx2WW3Rhmu6HIqcPtehWD83bzhObU77I\nA4bR7AFt4TrRl21gV88T72UA2/8Mun57+p3OThb6O4u2Jn1SRqJKlcEDpC7V\nJ0J0PSFda6J9yVyDtezTknXfmSd6uuGRnZ85Pv+dO0B0toJo6b7f2RzOFrf6\n8MG4M3M84KZH4/SP0A8iK/IDSOzWgSD73CG9ZY3eGOaihO69T558TbqH1CV2\nUPZPEXw3Ussk+TtWk7WaZ4KlMj8/d4c0syWLJxjXlNTmCkppWwRpcJOGTJ0W\n1hSvmcSXu3ZELtveEy+qrdvtUtonKo6sGg1K/Nj34Th5ulcylFfK3/s0g8Ut\npcx6g+XwRTblwFOrxHBVlJK8RMnT5BjOQVqAz2EQRNr4nQcDn5iT8LnCoDHD\n+9ujLUi1HjFAMAi2Och8nVPfkiHgfHGFJ5FIHV+tUr2/AhoaHynq+FvHgCUG\n2+uPWO95IcJe3XM8TfIYfv2lq2G6wwYyR4Lj12NeqaX2bQKwY6UULJvk354U\n86KN\r\n=4TiM\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"8a8b67c19b2a9f80923dd162098b373bbf34b58e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.5981207f7.0","@material/theme":"13.0.0-canary.5981207f7.0","@material/feature-targeting":"13.0.0-canary.5981207f7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_13.0.0-canary.5981207f7.0_1627427897639_0.7965252259876987","host":"s3://npm-registry-packages"}},"13.0.0-canary.83bdd0222.0":{"name":"@material/shape","version":"13.0.0-canary.83bdd0222.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@13.0.0-canary.83bdd0222.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3b3999095e9146c0171fccbeff3340bef2bdd13d","tarball":"https://registry.npmjs.org/@material/shape/-/shape-13.0.0-canary.83bdd0222.0.tgz","fileCount":14,"integrity":"sha512-B0bbhzJxgyypg9HbrAvhM+GJtK8BHj864NyfJkmaYZwRaNvATfSB9ng/gNIIrgs6iKk2/MtLU5YMfe759K+CmA==","signatures":[{"sig":"MEYCIQCCFBLTMTVSXMlRR//ZU+N1wHJhCPc3umh09kgUL+MefwIhAIhP7PkIFGlUQS+1WZ7l/3DOJXCzOBpMIWgah8utun+s","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23388,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAZMUCRA9TVsSAnZWagAA3ZMP/0qMVekB9LdpJDpivKRB\nm9aeT42GIs3jRgHVdccQWuj31zvNeEunQZJnp/T2YL9noB7GkrMv7bYEmbJw\nSuAkv+ZUK62IPjolpMDQ+IQgS9P/fogTvwAwH65/0FEirxCWozA2yY51ecQ1\nbutSUXkPPg8z9jLHF8LwBu+8XDAqj/vGqOliFmdOGe6rV9j0c07SZCZ31xyq\n5f8Q12PF7qeogD2OMcKv65faP8fd+vJHpSwbINVwhEGwf+i7CPqcsiVBnrm8\nLd7d4uDgvIcj6xWWCbGKYyiFwMh1ntx1l+HPUdqhriMqsLZy7C5WCPMSAc29\nuDCDfe6SHgcYIH0vsxI5uMkeRmuXSUUMR4bZ3VfeclqO8DdzYV5fDLT44jST\ne+fgsoUmYm/QB44MtSZKm4ZJkEGlqsXwfafj3z6MDKqQ5olyIEMnXr74y/X8\nni6Bov1Fg6kSWpnyLUghcgZsqIvFSeurgv17H3o5gK2bbEhqUV8MNb0KS3g7\nnTw+bauKb+hiX06Su9h1TF8LNK6VaV/xoESyyg+bcDSzceQRNVB/Kn6DXgQw\nJbxY1ziQrqJ06dv5OiZdJrbVXwywWqa8NOAMnVXO5swMAJUXaS+Uy+khiuPr\nVcW18T/MdUFT4rQuzxDY/R/btbS5MZQfHui34MmvvJL4gUX5qYLS+iUegiJr\nnErs\r\n=pbVn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"1f2b23ad4bf20ade58cc1b10490e9ca3f9469405","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.83bdd0222.0","@material/theme":"13.0.0-canary.83bdd0222.0","@material/feature-targeting":"13.0.0-canary.83bdd0222.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_13.0.0-canary.83bdd0222.0_1627493139810_0.6546592791936356","host":"s3://npm-registry-packages"}},"13.0.0-canary.28656298a.0":{"name":"@material/shape","version":"13.0.0-canary.28656298a.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@13.0.0-canary.28656298a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"18ac614bed511b99669812d92ddc2bb24991c94c","tarball":"https://registry.npmjs.org/@material/shape/-/shape-13.0.0-canary.28656298a.0.tgz","fileCount":14,"integrity":"sha512-FkrI+p2YK2uuBkLHj0rlvYXYqfVFuZiGcFxylH3w/8FHmPRsvR0g15TXcqN3P8bNm86thrljmb6fjKsJjOnuWg==","signatures":[{"sig":"MEUCIATyQx8YnWdRo7Aam7XFhPbgWYRWU/1YZh+7WlNmhN0/AiEA2KQJGrhTun0Wx4ZrAOUGzFQKcIj4j9TiosIaz2izdPA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23388,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAu+rCRA9TVsSAnZWagAArMoP/0hnGpRdS7wuTaFa0KYv\neTN4a1MfRZY0y7VJZaMIz//9qoXLM5f9CB7jrVIpWc78OapxDvcB4QhilWzg\nMiDApbUxx7mZSCdrSOB3EQ8Qopb+vqMegT8FNLlKUOCiC27lk0YVoSGpX2YW\n+ejZ1nydtFsUqRxUwod8/443Si1BM9HxNXGkqvW/W9oSlLfJU9G/HwrQ3qGz\nODvg8HsV4s5tQvG9fEt59HqTYuYese+4QHx0iTkiBUnCp08TVyJ7V8EuqUWv\nC6Tdd6uDE1TCd6PblNACc30zSK9EXz7i1zqEbrMVooI0S+A4rSOKYSAOR+ut\nYnyXgr49PC+VY44kZIJDOyEK2QiN1N988NZXATxMrRxIKidS4OBcAJ4w4sVo\npoYSl7rQ3FhPDDTf31C0z0Yil+iGqN26DBSJbPeK+APgVJftqYPWWbjDrrmQ\nbahgp1wizIUGTHzAnQ1Zvwi14+fzdYPpdl+eA0qkt/VR6JuDl1n+hDwjogmi\nl0twbHzcT4FPjQkRFh06CPlbf7suGVaYDNdX8+8Ap41EvRXxfm6ODkhQtMg+\n50zbWTVa6QsoSJ9EGH75JJgJERy3d/HdlTyn316C1NorbPn9XPHypGIMKKm+\ntV1Zu1RrJb81P0qyKFn/S34nbmOZqWg7l4HDeuSNOQoRj9Hxtq2nRUKitgta\no/Lj\r\n=hBeZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"5fe3e7fec89669c56504c13aadf80a71a543df78","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.28656298a.0","@material/theme":"13.0.0-canary.28656298a.0","@material/feature-targeting":"13.0.0-canary.28656298a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_13.0.0-canary.28656298a.0_1627582378925_0.175956393506284","host":"s3://npm-registry-packages"}},"13.0.0-canary.9e797daaf.0":{"name":"@material/shape","version":"13.0.0-canary.9e797daaf.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@13.0.0-canary.9e797daaf.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e4143d3730c3dbb7f2d39346185103327b8addcf","tarball":"https://registry.npmjs.org/@material/shape/-/shape-13.0.0-canary.9e797daaf.0.tgz","fileCount":14,"integrity":"sha512-cJF25c0SqUfP6kc3yP3xLC1efgsemgk70XXRCXs65BTgRVEff8rRJHyLJdOMWLGlV8+jpQApO17Csd6o1Sss2w==","signatures":[{"sig":"MEUCIQCm9deciQ1SujsYLhAXmkAvEHvbyxmNj2DWt9IMXZl8QwIgfn/ko8SoD0XwHgQMPRi0LdNx0uR9YJb2tHP9B7cxUSQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23388,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAvTiCRA9TVsSAnZWagAA04YP/3QAUQ/hsvK9rzzE7Iz/\nd144cKqzoI/vTZZB3OiPqMZQERta7F1VRcgW29EV3nAoOMdqBGuM/vtbY4lN\nxbO/WRuQcqUreeAhbwvGEqpRaIdXDTtQ3wZZT91rg1UZEfLN/teF4rywOdw8\nmKBTqx8NZRdunsgjhR22RpdGHL9pVl3X7Syu8dVRW6fnyRgb/zho7FbbN0qA\nK3X3jgAXKPRKOxFlmV2dPJykEa82lbgrTIAX5h5pNj44ztjlW8znCXZS3N7g\nY0FDdkS2bckvjedr9SW6ZaQpiIHF7+mMWBdv32IGZBFw1W1nmvAS8wZRJIvb\nh+JRoVkEIHPqw1ZyydoyPEG6e6ILhRCOll7WvC3vre44cJeKZxLUkhwo/Pl2\nfrJtL8kjAYX3EXHkS8KgolFYgWiooemrSJg3f7QkBsTltAQ80zNVKGmORc74\nC7GKqV4uP5ajO3rK0uCGdocuuWsrehN1JuCKFUhiAC5KuTQF2plWxHRDahUv\nbL0QFI13VeHiIyPriDcoag62C+O2s9KZ/uxVHAWQYNTInjkVP1ENkrJ0ABO5\nQIxhBdgi17sPqdndfB0oR3ZRgh/PYW84/I4n5V/RoZcMHt2ESmjTyA1fRKRs\nI/ol2ih+FbH6NV3bDAftFnuz/scCgXaPqdYSBYCR/dxF6lJTp3gdMYF/LG8S\nTYgv\r\n=Nza8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"cad664597e3cc10ce42dff721f26f40b986db48a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.9e797daaf.0","@material/theme":"13.0.0-canary.9e797daaf.0","@material/feature-targeting":"13.0.0-canary.9e797daaf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_13.0.0-canary.9e797daaf.0_1627583714552_0.7107049617357237","host":"s3://npm-registry-packages"}},"13.0.0-canary.adb9f1ad8.0":{"name":"@material/shape","version":"13.0.0-canary.adb9f1ad8.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@13.0.0-canary.adb9f1ad8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"35088434a1087495d8f3a7a26e57345820ef1dd1","tarball":"https://registry.npmjs.org/@material/shape/-/shape-13.0.0-canary.adb9f1ad8.0.tgz","fileCount":14,"integrity":"sha512-2aTNankC0KMIwKTdphCC6z+0XwjJu6koEG+TNLeFa5M8GJ3t8scNbKNJ0pgMObspBabM84UMxmEPrz6/OF8OgA==","signatures":[{"sig":"MEQCIAZSAyopnUA5RvH5RqKU+ChP9utEsNG3CfXriBd9j/FKAiBvgmk00ErYAGkX0AX2KJ4McDuYgPsxyeSX+JRToagRsw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23388,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhBE1SCRA9TVsSAnZWagAA2bgQAKPwnZjctp5QfU/2CneM\noLo0feC5wS2MVVe3j8D6tUroAsbZ2MmB1N1axkR8l5jxxEp1wbn06awyMwls\nA9pcRQAqcx1P/Crevs0oL7nFYTTBMUhrU9xS1j4vzFh20CfuvvG3hqfTuPuO\nGCSEWvtp6IE9KgXiPE0g0uWZlJd+UNt9OrI9ncZ4P8NIyegJCUUS+dD/WZFJ\nV0xBgMd/nRGue218zvEEEHblxoyFnK7588UbT6FsoIYkizXnA2O69xJumCf1\nqXRBA6bNNTH1+kHuDLeS0qGtdIdy2QsBYnqMa1G0LkAFVnsIB6pS1SMGzLCi\nliD0bSifM8zLLW7dzw9RIVK1Hl2Ne6WPzZzTKhWNVVDyhax5nyxnCxBTOf2V\ncYplW+zUwOf2i1lAHQI9Ig8VNfgum0s2B0neD/rL9k+NF58ei0Yur72uWDE4\nT7GeLqB23DtaoJpfaUfkGVW1VkTuc+tOSkXOiR/AyCnOSU5ly+AgfMWEauJg\nqueTtTJXkg137beZY2dY/1ZtUVpA/piZdsFHT2aMY7//VrunGl/C1n/RKMLK\n2oYEY82oc9UTuCLsQDSbqJu2ML1Q81Z3cr+4gsKuyjpXGEDmVKhteoUVkhH8\nFmdgc1yumoKdy6qUc3NEtw4xb46m+FQ+XbzvvV1l8ksQoEV0uAzjKBCTDsYf\n8ZcT\r\n=IdDo\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"db010696805aae457c8d8c9da8b394efff28ee35","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.adb9f1ad8.0","@material/theme":"13.0.0-canary.adb9f1ad8.0","@material/feature-targeting":"13.0.0-canary.adb9f1ad8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_13.0.0-canary.adb9f1ad8.0_1627671890753_0.8143882797227033","host":"s3://npm-registry-packages"}},"13.0.0-canary.cc5377458.0":{"name":"@material/shape","version":"13.0.0-canary.cc5377458.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@13.0.0-canary.cc5377458.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e38f3287645d1b440c0526c2b10f9c688203d602","tarball":"https://registry.npmjs.org/@material/shape/-/shape-13.0.0-canary.cc5377458.0.tgz","fileCount":14,"integrity":"sha512-vN4n5cFEbSxTxK7VUYEsnRqqTcQt3QUoQn36uAnpuHZ+pKZ/kPJQJp9CMvD03fDYq+cbnxJVeUk6BMgACRO7Rg==","signatures":[{"sig":"MEYCIQCDr/TZm93S6mLlYDV64E43/0knNNzZO6phTwz1PlzaWQIhAIBwnB5zK2sh9cJCaHP3QuqCbwbVtHRF83gEElex7No1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23388,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhBHAqCRA9TVsSAnZWagAAI7YQAJCtqmpLiIontjTn+B3D\n+4XIhdgmsO/Z0hWsQ+EqoSckHuK79+SITe3U9VyYgX/JRH95vJyOnh4eQW6S\nMcoEUHMP3+r6132tgr1jQDRQz7w3JE4wrfbXiAs19Ag73ECIbWL9IcT+UfOE\n7O1KTCvm5RCAGeJiZDVazSHpi+4lzkY2/J3P+TRgIwf/AoGTyYAsc6Dnvmds\nVPz2/gYIZdNKGhbpHRxbgmPm2qgDtS66EtaiTMvsjnasQIH+D9ixqnPBj+aO\n3mqBmbIYFs2TTWAObuK+ynTT2zsPJtxk9gwS+bTqikFTUipc0RnauJysQlVf\ncvsDIhZ+yKrqtSkeweRAV9CpvRb41A2SPUCinKkIUb5lpZKtr0HPJ7giw8ae\nZ2vEZ2QlPAgLtjwWwVuZqS3JMjpvsh3yNGcUj7qhBmtvVj1fPTryf64FNsVM\nKEpfKX6VPmacKH+IHcQuKwOKDxsYZWQOMRGtj9sOgfIi48b4XMTfTn8rHhYh\noU4NwrM7drkCa5Vqu8VGYRz7YIUdjNMih6jQQU4xVkV11vEcX6vL2YO5I17y\nZSd76oaXFrEP8YV/U76Be4zfrszNp3Hqj64mSjJZg4DATsINYEHDG8+PC+aJ\nozPKlls4Mot4/keXvi3IsTVCfE3l5n+XJGCMB5cQTlmHxMipKkCP8Hu5pt6q\nAK+n\r\n=XQo3\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"f4f5852cfac85d68dbd83665da839943c29dd866","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.cc5377458.0","@material/theme":"13.0.0-canary.cc5377458.0","@material/feature-targeting":"13.0.0-canary.cc5377458.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_13.0.0-canary.cc5377458.0_1627680810092_0.7034257681604223","host":"s3://npm-registry-packages"}},"13.0.0-canary.a395972cf.0":{"name":"@material/shape","version":"13.0.0-canary.a395972cf.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@13.0.0-canary.a395972cf.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1086b9fbb59cdfad16627f97735066c20ef500b0","tarball":"https://registry.npmjs.org/@material/shape/-/shape-13.0.0-canary.a395972cf.0.tgz","fileCount":14,"integrity":"sha512-VQ3UBzIcN52W48ouWi9DZip5fHfDIW33r1p0Ej4zTbuU01JhiwGAQTtMKfL2v/5LSwZZwP8FerypIWKMdBpsjg==","signatures":[{"sig":"MEUCIE0tnTDYS1Op39JlqgqdUmIrgYs8NCoHhrAtI1yT7Dx3AiEAzVVZZRPiTCGF849Pf56MTkH67g2bjIhiMyRrVmj6mDc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23388,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCbPPCRA9TVsSAnZWagAAa9QQAJU+pv0wESn34wR4VMRq\ndltNGctHB2LTz3U7kiN3HZeVig6/Mo28V8T79dPX/x46xWArOD6Ofy75acHT\nyTFTNq8lLleoAtR0Sl4BE2EBnFIgnhPJrflubE/aNQqUmWi5eksdkxxl3WgX\neGxEib5f5vp5BEk/jr9BJbad3umARlaA7pyB3HA6TQq8wtBekU298mKp0UCS\nb3hI3lnPuKGQFcixjWp4/SBbMh3Qk9ES32tGioCGlfq73JQ/y43N6+C61lG4\n+HNo2CemvKJD0LaDXV+Z9wPRsug0E5Lw4okWCWeV1QWvi8RAi5JmBsDeIHrI\nQcf17DSp5GpMQTl1uS1fVaxPAK6U8eIzt9/9i9vRxkIK40dvthJ2TxGfBBjI\nUh//2EB/SVFvJCFYQY1Qm5aS7R+Eg6+X6qEzcZRKpWcoOk7rd3WFLm8e/hvV\nVlLF7JAinY/M6L2Pfsmq8RBu/iKEkKUDASDjW7mstStpPIJTAC1OXtlNPRt7\ns7hbLt2x+rJSzu51KVxIvzEIX3mdgqGX1b9gMc3VvUWC6dRALWXuhoooYPAv\nkvsQxPhTIvHbCdSLUGkUWwu+vszmk83rlU5zWsAWlGIs5gA44i3y5CIvfBzg\n/fVEKb9I9oeYL3CJUtN4n2qFlR02w6JdpZIyUkUNPInbwD47GpmDuFYeUyr1\n4K4W\r\n=uJgz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"00a6b6110465620df99cf5f775d52a1054c91cef","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.a395972cf.0","@material/theme":"13.0.0-canary.a395972cf.0","@material/feature-targeting":"13.0.0-canary.a395972cf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_13.0.0-canary.a395972cf.0_1628025807488_0.28179607650662075","host":"s3://npm-registry-packages"}},"13.0.0-canary.7c96e6b98.0":{"name":"@material/shape","version":"13.0.0-canary.7c96e6b98.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@13.0.0-canary.7c96e6b98.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"20276a7dc9dfaa9d635eba587aa12d6d70d4008f","tarball":"https://registry.npmjs.org/@material/shape/-/shape-13.0.0-canary.7c96e6b98.0.tgz","fileCount":14,"integrity":"sha512-gO3LP43gxqmizEM+JWORsG9k2sVYtFbJdkX17icfvSsht1RQKEkhsQ+zVZH8OUXe+Xnnu2izamwddbaZfqcr0w==","signatures":[{"sig":"MEQCIFPkxnbrJStHyHVwph+bk7y4C97x7nZHr0A/GNBhbOeEAiBsJqnn4y1bcKmZaIYmPo/GYTYiRUSRjJ7vQfqC2/wz3Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23388,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCb+ZCRA9TVsSAnZWagAANB4P/1OklymLSoXM/JlCS6uc\nEoMdWU0EhUct8WC6Tm2midDqJViGnyhitZoZ+5o8QaKoDQTuskHmTnI9i1WX\nL3uSK+nivnxfV13xy4OV+UuCgd1OjkDlqwag7s0nabwIrm4t9zLtEhNZhB3h\nHiYaDnpE4ykvK1O7e5FZ8bhTg7r9F3EpTgRYtgg/cI+kuH+5BRPkYaQkvnkA\nWWMWXfoZz8bl/mjUEdQkDTFmg3C4FgRY8kVTRsCMisV8K5oxa4vi13WPxrsR\nLEEJVRpYXJIsopO+j+TVN+39DM61lUaZMqgM2ZK6v8Sv9AZx+0DEqu77minX\nQ3gKMY/GdJslFEldeh70MZOyfQZcM+xGue0R7AGJ8UeSopcZiiPw+O/Td44p\neChyjTg+4MgfNBpUc0JdAx9orNAPcpTwAD+rgMgyp99rDkfZZUG8eSm4duvV\naaqU2F/dpnO8zhjLHs9F+4wJ8BHZrNNS2mM7XW5WD0RE7Up7aCMLxAbBKgDs\nj/FjEKoSjlL3V3mW9AzBZct4PQ8LGFqa0ZUIwxCIaYVbNFCjqWi00msKuCU/\nSgABHO+9yVbLuI+kbPcbkhB6il5tszkfXo0zvj1yanKrSwQzgWSUuUtEiUds\nsRTE7K3tiRUfXSe3vf5HlyHbTomeHu3/4vq5ReWEFci5NCe1HKp3Wo0gQRth\no8xR\r\n=SxL3\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"38c48bd580ff0facb66c28bf9caeebbd2a6a4033","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.7c96e6b98.0","@material/theme":"13.0.0-canary.7c96e6b98.0","@material/feature-targeting":"13.0.0-canary.7c96e6b98.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_13.0.0-canary.7c96e6b98.0_1628028825727_0.18000768674324985","host":"s3://npm-registry-packages"}},"13.0.0-canary.a80c8b2c2.0":{"name":"@material/shape","version":"13.0.0-canary.a80c8b2c2.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@13.0.0-canary.a80c8b2c2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"98fa9e5c8263c1162b3148b5179cb5e6fde2b086","tarball":"https://registry.npmjs.org/@material/shape/-/shape-13.0.0-canary.a80c8b2c2.0.tgz","fileCount":14,"integrity":"sha512-tsoVBmNuNYNMFFbAm/5O4ksIcEQjvjWBqgsrXYVRXljun/42EwbvqQd5PlHwc39SYd0YZGPfpbfnW9uhtxcRkw==","signatures":[{"sig":"MEYCIQDKSLkWrp8cJx4KS9YWCfUu86zExg/dkvwegm/0eVZ0ZQIhAOAB76pd5CcG66dB/RSRQB5MRe+y8yTLBM3kb70y3dTk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23388,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCyn4CRA9TVsSAnZWagAA0wUP/1bc0LE00zNLrB0LbQcr\n45e5ElW3kSN5yh0IWK0gKDH0YmuzCgT+Bfxmhw43yIjkh4WgvkQfS2ozoOe2\nVQ07RrhnGzLmsy/0GCwRW+BCEFK6mIJccrJbkyHX5yJ86w4vy3Uf8La9fMW8\noUu1E0TI9A7yPNpb4iufhM0Xdy+gxyOJ4JS1FE2eqCv4yEiPGR+LaTC/U/Nt\nP0QjdnURdhu9hJQOIKkcp/cTNTxmEHYSa1t2HZPy72aiEmVfB4qz0ok9L8sv\nNsQnhaUQbVAj4eGDgiKpg+puTWgQkZgdrFeAvgRy2l99bm7qEfTl39yqDoW/\nBwcT+Cr01ibuPGf+ZvlYB+S4AEEzwEgM0/4WrkndzZUMq+SnbgbBavH/NIFQ\nAz2G7i5w5Yps3pEqCUNzeujkB53nnnApw8Hb4zo52/f/HRk2kPxuz/Wog3IP\nuEjOSxjHTd3Heh17DoA3ITjZ48rDE2sMYaMg7hlTnAHJylGUsiY85hbJcI6c\n/uX5oIf55Uj5AputO5l+hXw1EHhC0c/G9IWovlMft6qE3J+voA7Sq5Bm1n2k\n5S/lvFm/jN/F0ilKOr5dnhr6eGerBbgklxce9TBHUOiZu62cFDkY69t4uN1H\nWwGIzSxikO4n4nLtn5lLNlh7Vla5Tka+m6iTyADthwpmUi4iaYh25Eswtf8o\nRr1g\r\n=6yJO\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"cb4d3f1d1d37c50939ed5269748eebb96f798601","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.a80c8b2c2.0","@material/theme":"13.0.0-canary.a80c8b2c2.0","@material/feature-targeting":"13.0.0-canary.a80c8b2c2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_13.0.0-canary.a80c8b2c2.0_1628121592827_0.42711385714679984","host":"s3://npm-registry-packages"}},"13.0.0-canary.3dd611091.0":{"name":"@material/shape","version":"13.0.0-canary.3dd611091.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@13.0.0-canary.3dd611091.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"15c37bec9e4071d969ec3a279dea112c2a034a07","tarball":"https://registry.npmjs.org/@material/shape/-/shape-13.0.0-canary.3dd611091.0.tgz","fileCount":14,"integrity":"sha512-5NbQGOTCj0TdSWsH0bhV1ynAm/ejce39NXvZQf97+UlnQ5kBSVGWXxVj8Ar7AlfDfBW7i4WZyyXnhq44Lrk7gQ==","signatures":[{"sig":"MEQCIHpdbxh/+Tw1lt2LHPYY52TP1on+D7pipF/P1FgAjux3AiA+d0KKCdIbqzI2HEkHE5fqnWuOnRFBkoJ/hWTppds46Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23388,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhC2FuCRA9TVsSAnZWagAApiwQAJtZBPh3Tm1yEbVmsWvs\nzC3TE7g98G1qVFHzJeMmhpDU/EB75RyYUC5gvSoDwS/kvywsapdRq6Ie0Bxu\nMl+x/G0WtPVm/fZQcCpXFUnnnq1+EKpnYC8C/XZw37AIKzdZ3MzTjIkSwyqj\nUs2rwDHfSOCHFJdbxa+/VFKCNbZR6N2d201YTFPeJcoBw7cQEn3gvRLJB1Jf\nDL51eGSnTsE6JNplNLhF52LJXQVp7PbAqBohV+bbYysxWLFrqh43KU4tV5Ua\nwaLBbDRQAyKdF19VVuIhURmPrWXXwcHZlPXTLTgDB3GGzJ+EnlGZXNaDXcL9\nnkIxJg2Le8JphS2Vxz7has3Be6cJB4I8PRLZrZoGlor2wecuk4shPIGp3zBx\nnrmzdDlOZHlIO/0OeGKHd7n9EyqgBR1E2rpco2XfZIk7f7gDSFzyIkWGu+jC\nKFCTGmA5uqOb518YAGmuZg9zzZoyRCQLhwUzzHQSEgl1wJZp8NpYi+zxKGd+\ng7uv++N8y6uNSzFeuluoe3lGpA2uLlQoCWKsW9ayzJJYR3rrBcw/evXLgpoE\ntAyW8PExosVETRbMoeND7fSzWEI7SgCoiAcNMmJZujvyZ0Ro7Nv+XtzNZn6G\nODXHltA1lTqnwjguF2uwaojvkrBTL9Kyh2ztOBEWpDTvUFJBbMfIXOssV7gQ\nyWVu\r\n=XdBF\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"fc6a6a59d9c86ac1f85efd94a4aa6a8e4c27c379","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.3dd611091.0","@material/theme":"13.0.0-canary.3dd611091.0","@material/feature-targeting":"13.0.0-canary.3dd611091.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_13.0.0-canary.3dd611091.0_1628135789961_0.4466225010368736","host":"s3://npm-registry-packages"}},"13.0.0-canary.5dee37ff6.0":{"name":"@material/shape","version":"13.0.0-canary.5dee37ff6.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@13.0.0-canary.5dee37ff6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"68808640d38022d60c2c1cad617355c98c9ccb4d","tarball":"https://registry.npmjs.org/@material/shape/-/shape-13.0.0-canary.5dee37ff6.0.tgz","fileCount":14,"integrity":"sha512-TulcZ+OYHhlZaF9crGeRLw+Y238A6pCXfgEkw8rFrHjjM8ppkBLoDCTQAGnGCIPrfCXg0Nqb8qCU2ALSkCLlEQ==","signatures":[{"sig":"MEUCIH6SDP8blNsfft1SGK8y/HC7Qd2isVhh6regvbQ0B9n/AiEAs5S7ELqMcnueZqLQ6ZKTYxnbDvQjRDomZovGsWar29o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23388,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDCMACRA9TVsSAnZWagAAPdAP+gM9XDrOlIBmhzrak1Ff\nCTdHve83i87b+JgLE+1LfdG6mC2ZuLEvLzNbqQtVLccRJmvLMe9k9iBBvS/b\nHTYnj+IzugrpeCnNOAL57PEKPMP9YgNFp/cdkU9k0HnKi+bEEIFwrJxxxBc6\nKZzNA+jVkmeIa9IBMfMzcz70bFHWgA1DwAoLLtROoIYXqypOAHudZQOUblyI\n4IA1skiXAihmJXpv01agyNqYlvAELnISh1xG8y6TllgbIL3r4CmSheL15zwl\nuQxFhlFuznwLOCEKjBhuBvvmxLG8jcI+ludtqAwsYr1IGHNWtWymsyeIFfJ7\nlRGjk8tSHi4kXFnJ1IrlOC6zjw0/brcyv9fp7C7Pwtk45D5FQd8iGJQQT7fE\nN0s4MPx9Ab0b5Gvzp6ErGwQiR03Ir5/GCTxg0vCrgyvZwc56pc+RYAMOVPkA\nzUCcZ7i9MuZg9JcJeDGJHeLTsxwRM9xFdZN/M70wi+g69f72XB3WUZ2CWPWx\n7Wzd70gm5TI22dlsl9n9daBIWd3Gmiq24pPdzBON//5ewcaUnNzbEo/ZKNNb\nVa5vmZcbN+JINtVmYuVZg7yZhXPhvZxlshA/axMrioqAT0p8zEkp8Ptbs6CW\nlsZmMHKhNVlwCl/KT395P+EfEPy61EDJucENSH9Jx7SyWsjsdxNu5dphthU3\nzAjg\r\n=q/3A\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"a7b521f6e807878ddba15c813505134621ef85d5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.5dee37ff6.0","@material/theme":"13.0.0-canary.5dee37ff6.0","@material/feature-targeting":"13.0.0-canary.5dee37ff6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_13.0.0-canary.5dee37ff6.0_1628185344036_0.6766083504402232","host":"s3://npm-registry-packages"}},"13.0.0-canary.bf405d22a.0":{"name":"@material/shape","version":"13.0.0-canary.bf405d22a.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@13.0.0-canary.bf405d22a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5e8a610a844b6602fa3edc62cf6528e0927935b4","tarball":"https://registry.npmjs.org/@material/shape/-/shape-13.0.0-canary.bf405d22a.0.tgz","fileCount":14,"integrity":"sha512-yBquarP2Orzwi8Wimiwni6xyPyG8zLXB84D1eG7KkYobVoXOds6nJ+Y1A1l4ut0Xpv+uU5gMzY2uukmEW3d5EQ==","signatures":[{"sig":"MEUCIFXYorkPHFIRALFh6wiBzZvZAGtsoBbqBi/d+lj8e84rAiEAqVLaYwO6ucCp7OxyolqluAVSb8CvKj9FRCUBeB0mzR0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23388,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDEeFCRA9TVsSAnZWagAAuR0QAJMh6wiaMmmLPOmY9opU\nr6XFPO3ndmEe56YO+qD7RVX//fBrDPAl3DNpKNDmuqTYpadngXQJDC3GG30S\nH7STTRj0639eEbP2K12iRJYPP2itnRrlCnybRfJ9Ld3B/SK/m9F63fQS4xte\nSDfrHXJEL3pr4OJY5vNZBfydH58AYh7jM4/wB2H2xqgjj38lyxG6Lll4RQCR\nfCimWT5j6Hw2Zt34Rd2o16BLd/21uRx0t80zKU/MLz820p33TTS0QbvafS5X\nr3QvzMcxw9m/H3aP7FLYei0XVN9dMHqbeP5tX2QBoDAp0iv2h+dkPVoCYfNY\nlLPLjzGfxiKnVFbCau7uLUlRYugQKNwK0YCqJEPjQmbePa4/Hkq6u38aYvQz\nXudCQTzvtLalbrrDE+w9icd0Ac4cycK2dFSm42oUhE6V9em20rzXxFI6ZBtr\nFGUr/THWxcJnUiZ5gwW5r+OT02tzyYV15Vi0Be1sd3+rxKi/TJV83FhGSaRF\n3NDmV7luf+7zMk8jtbo4Dvsqo7eVnFRUYqqvGC2wFXQ4f6y/feaMEBR68yIg\nkfAEA7nB4HCVqd0m3/G+JRg4Gs7jhHRyzfdKlsddbvxD30XVqEYzICrZoaOk\nHJCdLvb/DWbc2reMZxsOfjTJOstgx+PQPGHiSgwEgZ1pR7oJXB8Uz1U18vpE\n3lWZ\r\n=zUsn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"00ae15a245c6a46fa0a13aa61a02e5958c0eddbb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.bf405d22a.0","@material/theme":"13.0.0-canary.bf405d22a.0","@material/feature-targeting":"13.0.0-canary.bf405d22a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_13.0.0-canary.bf405d22a.0_1628194693045_0.4934864529800149","host":"s3://npm-registry-packages"}},"13.0.0-canary.b47dd37a6.0":{"name":"@material/shape","version":"13.0.0-canary.b47dd37a6.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@13.0.0-canary.b47dd37a6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"23a4e70a7d37908a46ba70dc97b0ee988fd07f68","tarball":"https://registry.npmjs.org/@material/shape/-/shape-13.0.0-canary.b47dd37a6.0.tgz","fileCount":14,"integrity":"sha512-ryFeEgpnMKwEgk5k7IlFAlfw2N1V/n1UNO1BKcLm1NcP5ufIC2Uj9OFkeHXr54NPMmGanxzAEWLhsuyzxUW3vg==","signatures":[{"sig":"MEMCIGP3pXGOusL1zPZpqSnzyyME8nfIjRzCB48KYLFhYt1XAh8d++OGqoPDctx2+wBvivs2WTIWtBlUDU08Rz8b9wZX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23388,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDE75CRA9TVsSAnZWagAAk4AP/RKyfAGRX7wyZrGWTFKm\ngF71dFfu0hK5VisZJ3ErKksCp7/2u+mFJC11w/iM5w/WubFEb/doSMNIO4eq\nRLo+r+QmYGPylnD+hRwZ/IK8rG1C1sGEryYdoxE9RaIcWEiz8lSFnBYMvviN\nxpK/zXmCS8lB+PiV41J/06otRtzozzyemVI/iAZgNQpiDSpf4hu4j+n1peNp\nBBy6W5iZr2TWErl+yk2FmWL60DTx3ziWeseLFqjDzTDhPY6FE6eevNfG9Skb\nPH2E1mwmFK7E/j6AYPgw4OTFsXrdd4GXeF/a/JB2jc+HjfIZ2YoT8sHM6Yqa\ngPBW84Vd79pbYfKn15315MU3kCVNxFFbDrC3dl1VGT9GleRtB1521MUU0MyO\ndercpKwooJZaSH8uhLwwcAjBEl9H2yqzYNyBrQl59r6Z2OmAJDXwwybvgt5M\nCCj5ZpyofqDYn2PssFHWLgWJh8uuWARrKAS+CLTJ2+EsvZTFZFEiyqfdXNqx\nOcI9EVIFetaPTpCL0/R3A6lyEc9NmZvZMG/3sHUtteG17ENfeFEdfzSxuZ+g\nqlAuiVRZc6ye21pJ1WPNZFB42SOXZvyfV76WdtJhANJaYZgNyoV5e+fAX4S0\n2zG1gdhk8TSrdOTLhHZPYS4D+IQ8w/Gfk4bUiQuUdU/rtSe0105u28HuSOdU\nq+Kg\r\n=5mbj\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"47f67e5fb310c13dac39b9beefbd6b53fa54d1b2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.b47dd37a6.0","@material/theme":"13.0.0-canary.b47dd37a6.0","@material/feature-targeting":"13.0.0-canary.b47dd37a6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_13.0.0-canary.b47dd37a6.0_1628196601388_0.8201527048016641","host":"s3://npm-registry-packages"}},"13.0.0-canary.6c82b965b.0":{"name":"@material/shape","version":"13.0.0-canary.6c82b965b.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@13.0.0-canary.6c82b965b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"336b154cfe776d34ac858a4d5f78388afc49e926","tarball":"https://registry.npmjs.org/@material/shape/-/shape-13.0.0-canary.6c82b965b.0.tgz","fileCount":14,"integrity":"sha512-5xAiB5nueUheSQ25QTgwrUmxMkm1SaRr/AdYl9N7YlPitfOHKdzp7sl4Br8QliWKqT34LcFcTUL/fG3CkunYQQ==","signatures":[{"sig":"MEUCIGj6KgdjV8VE2xGXU+xx5hBIzuV8iHtUs/SHlBOtsDT4AiEAg3UFc7NeiRLRML02qh9mY6okSTI1ZR3zykZr+xVCQbo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23388,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDWAECRA9TVsSAnZWagAAF1MP/AvMcFreHt/DA2o9eSpU\nFccJg3VFq5SRKRU7sK/wNNcqIyqe+OqzTSX88zNPE4ZCMKa+OHdzB1RDOWuO\ni6B3mGSm2yXaq7zUNFjaMQ8h/d20I9FvgNG1gzJ9UqzmX0rWvqXXBMUMDmVO\nWD00SglE/7UfLPNYIwKmAPf9QTB6mFzk7HMU6baNsDaTaUv14hxZesHlFwQh\nPRjdeNPV5xUZMmAWAxkoon1gifw/r4wQshGMB3+MgQ4/tTPXSh+WZ+pQU5QK\n7MHSuX7X3V5tTyXOuPhhMXhGtTu+fZauYDVkByoZktXzbOCBlVb5RxOWSXOz\nlKxjsyFVFi+eas7pQq2Xw3h53vfKWM1jyaugYaZkb1JAhOQQ7r9aIcy578/3\nrCQ6dpgKAO7GBxAOU5S+IgqfiWnmuDFblgT5CR+bakRASSmmeOkQ/En9KfUG\nCb7gnaf46v1tEYFxA67yvrsjQDnru7e97iIzxe97ocl7ZXFI7OQFZEh2bUVQ\n+QhAa1jLWS5IaFkrVzcbhm/JsZpgziZyXUVPNgGyWgOucbYzTBcG557TLgAZ\nXG48022mJDmV9RSLjnuw2afVFC2eyQr96c/Apjn/zMyDcm1SNeAB6hr2BDyQ\nB9Ft398S7r6Hi/prce8Gk7IcZBYn/2FPzQUo1e/0Yga5N4eCBw4DK9D7wjOL\n03nA\r\n=f1I8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"434420b9fc9470dc77940d2240234a564be58d02","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.6c82b965b.0","@material/theme":"13.0.0-canary.6c82b965b.0","@material/feature-targeting":"13.0.0-canary.6c82b965b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_13.0.0-canary.6c82b965b.0_1628266499951_0.09587702872273685","host":"s3://npm-registry-packages"}},"13.0.0-canary.4ca11fe76.0":{"name":"@material/shape","version":"13.0.0-canary.4ca11fe76.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@13.0.0-canary.4ca11fe76.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"810f5dd7d5599a5ccf079600caed82790c573bb3","tarball":"https://registry.npmjs.org/@material/shape/-/shape-13.0.0-canary.4ca11fe76.0.tgz","fileCount":14,"integrity":"sha512-wlg3i/RTfwAB+E4TKahiEplQyEf5nWPGZn0kNxFXRlznC+STkQU1f/2jfFopQ+GDrlEpg6b7/hmHpuKy8rmrxQ==","signatures":[{"sig":"MEYCIQC+Cs8/zoZEnb0vpgYyAwj7E/O+nv1/pwddh3v2Zx7qmgIhAP+RCyxxKjvhWBa1I2lktNDNtTXj1pPJ8dY9goJtIaV3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23388,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDWxHCRA9TVsSAnZWagAAplIQAKJb8DA6u4EIBdG/VW7o\ncJ3dOLxCDcSNkjMq+PzXrBcD1QbmYcgxbi4rO2KICBUABWeM4R/Q00YHLqjp\n33nzGdDI/KHJzlYG9GLm+VF5sXeKEGk5l0jnLmWYfqDBjSpfcBvdmDh9Jh/F\n4XTp6+2v7ay3lqKg2+dCcny0WW748S8FmqwG41+V54A5+FR2TVaHD2YabxVL\niYfg4Z32p7D/Bc9WUeRduhlqW2S3Qu8wl19oNtxmh/elrz7tEZkR6o+wdNI8\nqbuGZW4IghnFU9ttro6xjA8rBdk8yEJbAuu/9kvT+/+cwRyc+ZgUHcT1gfx9\nEutJpKB8Zvd8QXwxuDEAlnxGsn+zChfUHhI4a4zmCDfR3zsAbETUfD7nrGmZ\ndNnHgOpFePV7bCSBvun+fmOzHqyeaWrxYUNTxHTzILzmijF3dNJK4Bfgngys\nOmK+tUdvdSbpGv1WR8b6OpP7Rey+bma04hhV3IdpooD9gnUysZr1UVeQZlNm\nFHCN2zzg7YIZVp+eGUy0Q5s1sF8Uc9ZRyszXY6cXVL4SBHmlWlUAqE/8kPV8\nSR7Z6MTix2SEFZ4rdWQ0+HXjrj5nafEe8RJK913k+IirzTRWnfclao2lgKyG\nbZt9l7/GA4iwiJQQwuUMUvMFsc+FpFxKRIVO/tGlHg8RpO13jnb8koRXEPTx\nKmDx\r\n=vAtw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"f012412147804a7e8c4bbcb205a7a48a045cd694","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.4ca11fe76.0","@material/theme":"13.0.0-canary.4ca11fe76.0","@material/feature-targeting":"13.0.0-canary.4ca11fe76.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_13.0.0-canary.4ca11fe76.0_1628269639036_0.6599092090622378","host":"s3://npm-registry-packages"}},"13.0.0-canary.510cf90f2.0":{"name":"@material/shape","version":"13.0.0-canary.510cf90f2.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@13.0.0-canary.510cf90f2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0c4eb2115acce55cb7e5a01cb459bb8f04173435","tarball":"https://registry.npmjs.org/@material/shape/-/shape-13.0.0-canary.510cf90f2.0.tgz","fileCount":14,"integrity":"sha512-6dL7Y4s5TtEy7+w/CsVg33rfR5ZkNRHkNSMuRRPX8WkdThDMOpf80RWklcNW2g0fUb3PvaVDgaXbzPSy7KWOXg==","signatures":[{"sig":"MEUCIHCsg/mYqjFD35wWmPniPZXp2NqCYS6ymVAPqdMLQH38AiEAzDln40amIB5dODRCrh6sJxJNiQ13xnx7VO0l1Os2UGU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23388,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEWMlCRA9TVsSAnZWagAAqysP/RCC6UDJ1fMstjDDMWuy\n6O35rv+o+Z3ACw51dHwpBsATD0PYr4rLt2zm96UvHb7Kn1ZgwabdLmrSf83i\n3u4NyLzEFJ0Pyj0fwxH6GBTft0m6YOT5rBpmZ8RmDxOx0B16IapnDdbL40G0\naQQJxfC9to29bbc2S2EqLpytxqERiqbbdhZsvW5Dr3Z3RnOHRDZOQd2+Fhaj\n7deDqVNAuMEpnDthIXDq6PL+H7dP64q2Ypa2+34i67b7Z6RElbndCQEuuwQN\notaroMUf5fKUTBzBGjgmLq5m38Ww2w7K4lyY9HnZvvJtBn4XPDW4Onz8AO/c\nXshI/HzLBKfiIrPSSEbuNUSbiRwoOEGgQdy9MIlyPFv684J67chkPP0eg6LA\njffW2ir4qFnF7PDQ0/RqCXsWKSwYJqFdJpDdMx7+46b0kuwEN3N2xmrue0zK\no6jNKv+ieQbBUmZ2nVw1eyyyoBW3VST/lW1PXPS1P3YKgkKf58mBSQ6bjD3B\n945mzar7WF7CWAdT1dNVU0GgNJuY4H+jbJkhh9EqKIF3OMzs9JRUzvzUOHP+\nb92u0bPaLtnOiTyht1w0zUQBH/n+JrMaoEnYFCzps+NB25cjpj4mAo9RYPe2\nBX9Xq3mP0E2QAShAnWaUjDiAfyJyogP85w50tfZq582aKM0apbhnI2S8hOCY\nAC+U\r\n=5Z8v\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"1e11d1f2c4c830419dc862b62700d4484604a3fd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.510cf90f2.0","@material/theme":"13.0.0-canary.510cf90f2.0","@material/feature-targeting":"13.0.0-canary.510cf90f2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_13.0.0-canary.510cf90f2.0_1628529445388_0.6474859056228419","host":"s3://npm-registry-packages"}},"13.0.0-canary.17580ebf7.0":{"name":"@material/shape","version":"13.0.0-canary.17580ebf7.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@13.0.0-canary.17580ebf7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a61e3e783ee8365cf8f147d57a27c77ddb786b8e","tarball":"https://registry.npmjs.org/@material/shape/-/shape-13.0.0-canary.17580ebf7.0.tgz","fileCount":14,"integrity":"sha512-Bl0HvD3NWq67ZILBbGLogMowJfWOX1FlbfI/ufFvaA4vU9Pnd0EX/L8U/NNp2jRybjfPSFgPdq63VXgbOzTCnA==","signatures":[{"sig":"MEYCIQCEVdKDQxgt1QVCsimBFUx6usHMcSoKhDKc+/zwSGhATQIhAO5fBW7R6QRMjCY2kVEgviJlDJi7us/sD+khcUrAK6KZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23388,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEXFCCRA9TVsSAnZWagAA6BMP/0gX2XteUj4JyfKdvvLo\n6mBBTRlrwiEXbURfrEgIhdoKJJnFmjScQnLkQ5ixjYcDK1mJnPcHpsBa9uRV\n32NOGwk3DxzjGvf57xTYOMGc9YCkm274CCUM6efWV3SsBJuWaJRXDmx26rjG\nAGl1WDj9805b/86G2EdVdJZXvNFRbUvRkMDOxD6licYAIDdviSZpRtDhUm30\nk2aizzbERybQaJsy82B62v4FovSCsoiV4Gq8TtCSPEz/55yfIRloWbSRWTmC\nI7hkFtT28cvpKorJHxXBgRSi0EokKQXwN0ge0p3AHA6gXcAcOD/HG+HJGMBs\n5NyeHf7lm1gOsaM2RrKSalEi47w4s7GpNvJgZHK6zfExWDqTcxUwdMRia3sR\nVvy8znH0QIaoutKWGkhP/4wpH6wu+oMQIdRFEaUIq5dsJMWK3XKyz8S+PENm\nD9Dr77SU4ydV2jeWqzmQLb7K0yQbzWM0aKlpTsU/iq839745Qi/U30qHEt/y\nwtDq65YpGZLQhhyrQLR/7Ly5f7tw2Ib8NUxGmly/keRat9EY2XqlVamH/RkX\nmQl+PLFty3kgGWXpVgOoKdbW1DYlNNeBRGAT6zTNHtguzRQ8rm+m1L7Hi1fg\nqUylBcRgm0vkI++rigZ3jLpCEwuSRetHgkDXho0s4WpuXi8fvMbr7cUtRbM3\n8ENR\r\n=bOnq\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"5bde42052101fa1fdd48d89c3dde8b9e99bdd1b2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.17580ebf7.0","@material/theme":"13.0.0-canary.17580ebf7.0","@material/feature-targeting":"13.0.0-canary.17580ebf7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_13.0.0-canary.17580ebf7.0_1628533058811_0.7522330170952969","host":"s3://npm-registry-packages"}},"13.0.0-canary.7249a3060.0":{"name":"@material/shape","version":"13.0.0-canary.7249a3060.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@13.0.0-canary.7249a3060.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"37673c7bcc6123cc57cbd4503469622005ebd46b","tarball":"https://registry.npmjs.org/@material/shape/-/shape-13.0.0-canary.7249a3060.0.tgz","fileCount":14,"integrity":"sha512-XDL9mRaOswZ2pTSuptc5oPqJHjVzuCBdxhD+v1NTkOCaBD6GnlS4CX5vTKmD+32whojaBHI/iVXgwOgRGsQ4Fw==","signatures":[{"sig":"MEUCIQCgOmlogTrlYgfmWfZxEhwIvAYsCV3w/iU6E+MMkxLwfgIgSY2WFA/M/UAFJ+oqZVKE3k3gzN8baTo//Mq5wI0S9Bo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23388,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEXImCRA9TVsSAnZWagAAXqwP/RuBceuReLPnnwxxwZTe\nhNQ/a+Pfj36ESHbwHdYOEKb8D/D/Cyaw6mToMRKa310SVIf/XOvg+dB9MntO\nfX2E8qQ6o0KK29/1+THJPx99soqa+zfalA9Q2H/u3CtVBiIrK0DX1GpsogVT\ncMEdftun4FudR/UOxmvA7hGGX1RK2azf2BxY9/Zpukxlia3oK6vUGr4RaTtN\nktpVhUxB1QAQoStH7Fs3gX/caR7Wws8pcV/0dB1PL7xlIUeYMKTOy+tE5oTn\nOUc8zIo0h4scsfP3a3l2GO6rIoLqQMLmfINdNEYxok80ruxNfQzLPMpe18F4\n1Z192K8Dho29M3QTlHKCBs75AJ44MTUNt2DYlh67z53Kv7cFVQuqqk8E4Gym\nADrh0/Vx2dYgzxKSIj+im1R+fsiImSN9wkklIM8tp6kgvTYi8JajWU2Ym+sR\nkMTImsNGTiSnm/2Ns/Ac8Xu/w6/80ggIGFqo+mZ5scmgePFzpApMHe0o7fCJ\noPcxRmLxC+eo8U7PFYlEJPQrAfoVKJpfEuaAocLmzuHpzYKDXOQOS9rQFKLe\nMGOhRmtBtYtxuU/slgGFeT4vBQL7E1Db5c3bRJUtwN2/+XUc1GC+RUyK9IuI\njC4BUJjfDF9VPH+kTkLMq7UDjyHVBhSDnQ0ra31XUu03HCI7Zx/EQVWlT1Y6\nBz/o\r\n=3oX4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"3412ad644836acdf464e70d019c36080ab377321","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.7249a3060.0","@material/theme":"13.0.0-canary.7249a3060.0","@material/feature-targeting":"13.0.0-canary.7249a3060.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_13.0.0-canary.7249a3060.0_1628533285879_0.20412287372062798","host":"s3://npm-registry-packages"}},"13.0.0-canary.4c405863b.0":{"name":"@material/shape","version":"13.0.0-canary.4c405863b.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@13.0.0-canary.4c405863b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d205f6121a0453e67276643850cb9e7361eb2f15","tarball":"https://registry.npmjs.org/@material/shape/-/shape-13.0.0-canary.4c405863b.0.tgz","fileCount":14,"integrity":"sha512-plzjDjmKXbnjqJzuCfEkFwaBt5f/4GoXT30ABjl1WFV2zoPxfFTr2MFUETn/t/g1T/3fp+muAuyo8iHUTI5jwg==","signatures":[{"sig":"MEYCIQCs8wsCjSSx6HaHrkGMWFAgHroFuFGL422vVFxj01efMAIhAMKDjtWrlA7cqAU527or4RTBYuEFY5k/e/TJj1I1DEBo","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23388,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhErorCRA9TVsSAnZWagAAJSgP+wS+URPVZzRAotm77SZN\nAgtbtxjEXwzL0ZTDEjGBiMnZo1k9UGVEsQiTlOFP9xgOuTZ/+cq+6Jhj/jLe\nuqZAUnZCrboX7GbEAe4pmfF8qsFZpvPzMPycVqYK2yFc4iZcIM7ruI0kOLfv\nnDMirNDiG7fWcToJr5+U9aYUMYYhWzO+oMHZb7ipellgNfy9yu5apylPyQ7A\nQoHOHtiz2Qdo8Mu69Mw2amweQToFfNF16DoJHf0+Otemu+yB+IblLSc1OVjk\nQgzNumHnjeFNpRH13eoRN01dZsAQC4c2yAn7RKkVhqtspihDMvBIYbIv6Q+i\n4eu2x534NCksdR10jtN5T42EsRvNN6x2sv4U7CDvqbbCvZspERbemu064uG0\n08QhvcmAfIdX1fXp2JHHwNpFIJZGALA7TQu3N/x9+FUYu2H6org63mNRIelw\npFDY4Gi5W+TAZQrMeuVwElYzWusYDQ0PUc7VW5LKZfVhPgl9GA90WsUMGvXu\nFhLZPFuOr+eqrt88q820ynY0sKlJ+FmLO8Nr2DQnL3ym5R/6FBHUgPmJSGfN\nFyEioB71B+kRe2HXU8YU1rt3NRnqNn5CJqLGu2lm/WPUd/uKU+hosMHWNtRu\nG7ahYZRAF42v3J41FlsKQRulg54Mjw7yIaDvzHZTkrqMtyym8sTwUTszOpUB\nkbVA\r\n=IHMD\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"b3861554313a19a861a5f6850f9df33ae5bc42b6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.4c405863b.0","@material/theme":"13.0.0-canary.4c405863b.0","@material/feature-targeting":"13.0.0-canary.4c405863b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_13.0.0-canary.4c405863b.0_1628617258943_0.2699032696189856","host":"s3://npm-registry-packages"}},"13.0.0-canary.f4241a42a.0":{"name":"@material/shape","version":"13.0.0-canary.f4241a42a.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@13.0.0-canary.f4241a42a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6480baf0d0f3ed7c0d5fe98eb09f58b03154e24a","tarball":"https://registry.npmjs.org/@material/shape/-/shape-13.0.0-canary.f4241a42a.0.tgz","fileCount":14,"integrity":"sha512-XGTM2n5rGxPfgLLeYvzUN4OZHdpQzXWuu79S6VWOBAGL+YCVQO633DLyoeAWNO3nCNU1K4By+lMhEgvmn0s/7A==","signatures":[{"sig":"MEUCIAsPf4N23HGu6XlBnC73CVTR/afydlmt0ZKIzmg/cG94AiEA8z0LEXGgzHPhrmckZ6WU659pnnmnPx7994Yewq+al9s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23388,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFAHtCRA9TVsSAnZWagAAls8P/RuKqiV9zE58zelY0WhG\nfEKEvejvJr3r7beR+xrNX4+O6q3x1T+zUy2TFSZs5+4StlWtPRFjEo08hoq2\n73OhlhqGlfL3lSuSeKDPpQXxenLjVZo3V5wqSCiWrX1a2uJ3ZnRZeeuqa3ZX\noyPHTfgeCCxFZ7OOg9o0DQMtC5jBL2X+mZ1idBcwbg2lcg0KBZJ+P5bsVzVE\nVZ82m1OCnOWejgkeSYnQBvZze3CUAOzPwDN/Zzl45vUuWSMO3oORrxdFuu30\n/PL9wlxe5kXEyUxVIcjFtEonn5amRSlLMeUlPM0KyljG8PwPsKGQJh/3jUJq\nj6ODuVyAXtpzhTqYuGlnqlHcdOX1awUC8Ps1ZalBalB4B7UnBzxsEyFGRNxE\nwOHkdPo8szbJV4kfA+qWgARh63ee9Lh8OJerKkf/i1G8VO3VlL8V0vVO4XfK\n1y7mGJHedkKsfD9aSXxGt3XMvVqLOzSElbucvwFgl0CBdlBhkX0IezcWEmQF\nRDvTC6C9zF/SOBy/6SO7iR88RqYYTjOavOawNJjzZfphgvvgdSiY+7XirHAW\nLh6MJhmLMbxTC2mb7txnihkVKq6G15IqDNUsSUbT8/M0hy9iYfstUwj3E/Xx\nPLhuANC23SDjclUSaigh4QN+QR0EcoUoUuZwOOoW70WzwCHvmjY8CrNEcFMk\nAO+P\r\n=l+7y\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"bd97e42dc6a97fb74d92a9cb04e919c5c8af4da6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.f4241a42a.0","@material/theme":"13.0.0-canary.f4241a42a.0","@material/feature-targeting":"13.0.0-canary.f4241a42a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_13.0.0-canary.f4241a42a.0_1628701164880_0.694976515727024","host":"s3://npm-registry-packages"}},"13.0.0-canary.0ad12ed3c.0":{"name":"@material/shape","version":"13.0.0-canary.0ad12ed3c.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@13.0.0-canary.0ad12ed3c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bbdbd78e6f10c6ad91a0450d0a92cfd895a61d96","tarball":"https://registry.npmjs.org/@material/shape/-/shape-13.0.0-canary.0ad12ed3c.0.tgz","fileCount":14,"integrity":"sha512-1RfRCdBJOSUAsWQX3qr1oQENL6G0uXU4HtHQBsP1Po0usa/TLEExjXIgOhq7buBAAkKH0OT4glIr5E2zzcOaXA==","signatures":[{"sig":"MEUCIGou2nAvcABNhmfKlQrr3cpjiQQBbneh3/tW2UTT5vcIAiEAvUf2kNLF7tCQJgsoLZNsENbGhk5A6AvEsyY89+yJsl8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23388,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFEEWCRA9TVsSAnZWagAAwEAP/iyS9YX7USlDQSmgyvoz\nli2ZS0kjuDygBGU7kGXneZWV8uCJbtd+pC9NZcWtwBOb0Olp+I8mEta9aXTI\nvn9e+POELxUn6jmLyC31GdYkpvqVpVb+rBqOhGHO0+gqKXMpvis9EodPgw1D\nh+YheBXniy7oIc/v0qjYh0hkqn0RwLSWOwWaUtv1IrL/BJUHkFlXsQeLHokO\nDKyOgdbsfiKp8jFD7L/oQw1At3v3nKp6gs4TZq4yEA9ZibN9NImJxVtzmwsI\n8AWQnuqwgifD/JjTPvQHcYMWTA+FADR6O3MagE5mrOQCb6sYgRKsmlIL7hSN\nmEDUZTqZZSN+DQ6ko2vIY9TKmPfADA0wJ/rztJscOX0QXc1qHCR36W6O7Ox0\nQIHTzmHl2rR4UfnE92av3JJDsoReKV962s1hLrLvWw0xoscO8WorU3DNydAK\nxtaMBs2BrMXUEAVXIZ3k/Eb8X64WMMvuSQvUMPlOfNnt91hWLR3kBaZ2AxE6\nP5LYMytdHyfyYd/Yg7jlRQEwGUn7+4X0baFdvZS5q+epNjelabEksNxewe5m\nzG2PC/9sZ9eishQNeLpB4Xd+m9eOA/BcCiKqEIij1IfPp5OKvkvr6Ijwjd9F\n81aq6B//AsPsqqrXCGZEsPU2YPulrdio/wTg7hMPnYa2M3A/szB+U9EUza9Z\nl+BM\r\n=2vdL\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"db28e7f3596365b1d41f14b53d656a743eb28bf3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.0ad12ed3c.0","@material/theme":"13.0.0-canary.0ad12ed3c.0","@material/feature-targeting":"13.0.0-canary.0ad12ed3c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_13.0.0-canary.0ad12ed3c.0_1628717334202_0.7072281873604012","host":"s3://npm-registry-packages"}},"13.0.0-canary.077dcfcfe.0":{"name":"@material/shape","version":"13.0.0-canary.077dcfcfe.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@13.0.0-canary.077dcfcfe.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9adb4dd239ac2dedfadef913f16a64e4e7ae780a","tarball":"https://registry.npmjs.org/@material/shape/-/shape-13.0.0-canary.077dcfcfe.0.tgz","fileCount":14,"integrity":"sha512-MZg0wPkR41LqJAqQnqH9JYfzy3rHtRZ87pdlt/HRQb5ohytZQdNS46EnEYN+CtdrqDRYFxkM9iPuk2//zuEzMw==","signatures":[{"sig":"MEYCIQCGnR3zvDfjVsWLXrnYs5c877OhQdSishhIIarmHx6GUgIhAJZN2TCSXgQhrd41oWJvdD+59kSwe0xM+mK6ahUE9Ogk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23388,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFWCDCRA9TVsSAnZWagAA/OcP/1JckLmjgZsvL6pEjyaC\ncdj5/q0uulcd8zVsVvf0BBJmr1TWaO7HXVTaiMPkRw/cAvuaAtgTEnuJKzec\nkdXEZvf9dZHCQ5cBrPmlz1dzhrNWDPI3NIEwL7/wzXKp+vRQTwFNkriFpNsV\nuKmPUeyTd8tiuEji0eotTYPrtWES0himIa5nSstM6U/EFKhLOzVkHAVhMDnK\nPCC5O2qvKgkFhZaaYcrKrFm9Hios+CxKr++AOkBhokZbLFUauZP1NHbrdpWG\nNh6X7kVO5kBVheY/7PMPL5t9ZMRQWJRnHRGAEuy9urri0Q5SJMFsMA8FtN+R\nzdcoFPqvaS3SEf0Q3Na5Bk+VD9H87Ak+fSkuTNcnQjrk+k7aOV9OzF4Y4OTJ\nHfMrPtuuvnxEVv8lNUjOajUtl4BNXH0/xozCJoyO3ohXRvWaKX4Yx6f1i3n3\n2ilqNYltTGQ7W/g1kZPbPNsKM+jgxLeVsbrOpl+dE2Kr0so9ytAarfbjH2Jk\n59OnskS/H5IDqWX6IgxtnHTAJnzSm8hBUwp1+iWYZ1svNIl3uvrYuE4T4k/Z\njNWFh2TYvnj83r8njoSablYbej9ppVUwv8cJK/R0v0i+ZKEcaw5YkXTL5RY1\nob0SsObZ2t7oezpvhlSAw77KFZRm3i/YD1OT+2y6bcvedTovuZNEMQLXf7V2\n+/Yl\r\n=yw7r\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"0ce840a62c702182bebe1a5f2ed037bc002472dc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.077dcfcfe.0","@material/theme":"13.0.0-canary.077dcfcfe.0","@material/feature-targeting":"13.0.0-canary.077dcfcfe.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_13.0.0-canary.077dcfcfe.0_1628790915484_0.5347913456112272","host":"s3://npm-registry-packages"}},"13.0.0-canary.e3346766f.0":{"name":"@material/shape","version":"13.0.0-canary.e3346766f.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@13.0.0-canary.e3346766f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"03059e43894f1c703d2a299a87de6f502d5dbf73","tarball":"https://registry.npmjs.org/@material/shape/-/shape-13.0.0-canary.e3346766f.0.tgz","fileCount":14,"integrity":"sha512-zuhmy+07DHY/ZPiDY35LMYw9hcPy9JayIiBf/6ozOyKmToVS1gE+x7I0529Cqe8jTC2Bj5/dOBV8mscC5JliLw==","signatures":[{"sig":"MEUCIQCojqoh5ZAAqZpJL91e7FFJfJQEGwwQQbosffI8E2IPsQIgRDW3Cz9hn7YLZ6y1OHrswWv4rk3Eiq+2x1njYrHEyfk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23388,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFsvICRA9TVsSAnZWagAA240P/A3SJw1HoVNx47WI8nn+\nczfMDN5getVMs6AEAix1Sc6hxMI4hFhHjYfjswVVC/J2w+5xZvaWV7RcwDoZ\nPIxm3ujQJhXEJzw9x1SM6bDQ6QydDrPN7XT4939UzcO+j1oDSfydO8WLC8LA\nxj0hH8YzGn2hqeXsNb0NCQlcN1lpPB+TYc8Y5FUQgdRgrnuvNjpc7qRra/Se\nKCttr35RcFS+AjiY216+RJF+b6bKoERpiBgqOgCcnfGTwJArqD+dQU3LCyN2\nO7HyvKrnvVURH0UWf7AMd7cOVJ2ZiQv2jaC+J3j6tAFLMC3QlfYxQ081dES9\nuYWQVj1igtsTU48c4+evtkWRnHjZf6D11JqukMyjfBZTMoh+dF+KRZoYebdf\nQFRsf3lEWuu8zSWhdj5oT/hUMC0mJsXQ4Lzxuk9ZvQPTpVX8sUQZAg6Awhrh\nZLnstHphclj6gkLIhp3TXtOCS6kBcgnzA9kYerWEVBsjXBxEX6OiayfrATiM\nNpsb/KMLZBQda7UVtTGAuiBB/oSp7SAV6cO3qU/Pla+W2mbwHl8AH4AWEtiJ\nux7a2heGjX7+BbRTcjOl6TGCSjMudR+kPkzjZmhZvpgYaa0DzQR3xftAcS6h\nK+t6+pr4+5p0e0O6tQNLua6r2Vs8VprWk86luAweAVl+f8Guv3Sq/s7K2WB2\nQc2y\r\n=5if4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"03da616c76c8b7fab07a24f82209f171a2fec41c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.e3346766f.0","@material/theme":"13.0.0-canary.e3346766f.0","@material/feature-targeting":"13.0.0-canary.e3346766f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_13.0.0-canary.e3346766f.0_1628883912799_0.43425216381119025","host":"s3://npm-registry-packages"}},"13.0.0-canary.2fb068fb0.0":{"name":"@material/shape","version":"13.0.0-canary.2fb068fb0.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@13.0.0-canary.2fb068fb0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dc52b4c1cc0911dfb8492ba6e5f08e9fbbfc7ca8","tarball":"https://registry.npmjs.org/@material/shape/-/shape-13.0.0-canary.2fb068fb0.0.tgz","fileCount":14,"integrity":"sha512-N29hXnQYH2H/vQtJeCm+S8GAayuXcdAVUEg12UVyihPyNziETQbFJh1jwdC9IegwVyy53cE27vzo2iiccqu/Lg==","signatures":[{"sig":"MEUCIG9X7MGPLnVfIIzmschBbvP/azDo0DrTwhZdogbQkEoZAiEAmLKRLAEnwO6M1ArdJgQMFTqMAAszzNJOptrJ3kuNbC8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23388,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFsyVCRA9TVsSAnZWagAApBMP/3X1oK3NyRK2Bm93HgsG\n1VACH1omNR1BMYSuSvdBdZgj09OJeKtP8mtKQG2SA/HQo8Z4P8YU+ctp1GR0\n9CrUrnzbunyX5/nBkoJcFqT2+6H0+fsiWqzD4/f1Q6IlC8yMnRXnZbOqdlmZ\nRzMyuf6lzWzuCsQC5igxL5JA7v3A/GIvB5ch51m90X7fLYYojczUKRSYE3tP\n0YcvbUD2OY2sAdCNbRicyUUrNeQEoLobG4Z1AA1wMFNAPq4Oep5+89HwvnQP\nMGKkzgo+/BKVCWaM09UkhdHc0FXqf7MLh4tgviElZwrbSH+OzEdOIExeCTu3\nfxz7VBR17JY/pPGWBdeYBIT2qpBDNfiyrk5NIeUFZS5rOKaLpC0JrHGaiXbl\noLJY5vhHyStTUrBCSpTOjIQh04KjGQ+gnKo2yPGmdfPA1K9AUQGY6P1TFDVN\nSks/IvsC07yGCZt23E8DfNZtd/rRULH259Guz8xL8gx/5K7DOVE0vHWlQKbt\nOP3cbtThSdLHL2tGj0dKqwu0zcB3VcrJSpWyKdQtHTcVzMb83uHdEtPlSGG/\nYOKnCxkrplTfu7ZEHCawAPDdaDUuOqyrU6z1W6s8HgRmmCOeCmZhYoZL1yjr\n19Ze+usW8FqcwTsNDEcBjh2aiHgqsPTxoTYBD8hWMHt0pzDSn9/WKp5XnIo1\noSPA\r\n=LnSf\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"cd1967c0a3a80639eef1dd76a8e579a4456fee90","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.2fb068fb0.0","@material/theme":"13.0.0-canary.2fb068fb0.0","@material/feature-targeting":"13.0.0-canary.2fb068fb0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_13.0.0-canary.2fb068fb0.0_1628884117062_0.10253370450799593","host":"s3://npm-registry-packages"}},"13.0.0-canary.fb76c5069.0":{"name":"@material/shape","version":"13.0.0-canary.fb76c5069.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@13.0.0-canary.fb76c5069.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fa1f3803dc92e7898a03d047130c76283408e660","tarball":"https://registry.npmjs.org/@material/shape/-/shape-13.0.0-canary.fb76c5069.0.tgz","fileCount":14,"integrity":"sha512-LLkTWmh1qAeyZM7cmYIpCmSyha5gqZaGYg09ddZFPwAorzrY+w0aH9qpNKkYNh+DfppV6Uiif65oKh135j9o/A==","signatures":[{"sig":"MEUCIFtW0p+M68pme2v3QWYexfDLfZGHA8r0oYkJ4JWd2ll4AiEA95nZ8xDow8CAcGDTfbcOs3dkdLl30k1o+tUNmDWi7jo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23388,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhGsWvCRA9TVsSAnZWagAAB2EQAIPznbG1Jd+BdnzX/wM9\nXrWhV2GQuW8zh/Ag7AC9sCNPLfGSsd9j9MTv2oAm78WpSamhgLHMgKJyD9BJ\npw2eBC2J+rkeCfozUmmH32uFMmfhnw3Ire7frGN65AGs/pRe6588gEPKnng6\nOfqH8R1hZTl+rhDagtQyTfEbWqCtdD2Izcm/u+pIRrQXHpr2o3nvmOUUJBVj\n1zYH7lYCRga9crxS1bXmta6Z8DaK+wOtpbaVMegQdwA34lRpeFKrfk2EoRIC\nj0EtCEnngSYDTPK4pMr14aid5bGnbRPaJsFWeYe9IX0w4c4cAbIDUPTA761e\n1YeDBbCbEv/PL8yvjVRvJrJtviEl9cBEGJV4BTORMjL/6UX5bgUje6ce6bdI\nm+PvnoQ1+DrfUGbcwni2h4D2z5PniDOIpm9BR/ZyiOupAwxQKq3suxvI/caV\n/AOin05X/FVpWjPITzZ51qozbkGxlH59ARkB7qt2WVtrwhJ1p2/ZOmH0V5dg\nFpp5TpImCNmL0Y/EdETlrL/Hy4om+S1W1sJvxQ7iWAhYGHwPgetFof2DHaVC\n7SnVRODGFcHQfgkvVPz7jTaG14woH13FTN/N/7+2r3Nvv0v4jQY1zp1OTh3N\nHz8Ew3yuGWX6y5f9mZFfGo5HoA7ih39hts952iL7bNgEW1a6OuFyLEhLPAEl\nUOvT\r\n=qKjT\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"8a969624431e3c1b8d80c2e2a37e5ea5af6bea4f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.fb76c5069.0","@material/theme":"13.0.0-canary.fb76c5069.0","@material/feature-targeting":"13.0.0-canary.fb76c5069.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_13.0.0-canary.fb76c5069.0_1629144495014_0.41691996199181736","host":"s3://npm-registry-packages"}},"13.0.0-canary.457d89aad.0":{"name":"@material/shape","version":"13.0.0-canary.457d89aad.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@13.0.0-canary.457d89aad.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"363db83b015f18417abcad31e69e1b7f12327dd3","tarball":"https://registry.npmjs.org/@material/shape/-/shape-13.0.0-canary.457d89aad.0.tgz","fileCount":14,"integrity":"sha512-7lReF+yAJHmbSC9ww2B5rIIA8bra7qoDJbEHOpoXsdnX+exUePE4vwalM6wsFKMZDw0r4/P1jDk8TbwxC8RerA==","signatures":[{"sig":"MEUCIFYu4owLzFuj45PYfNeUVjR5hUr3wXgrz+AJrtTrASAbAiEAxHOFGuxXBws93J5JhecwEE+gtCWdYDIjMR4LjywcgWc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23388,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhG9QWCRA9TVsSAnZWagAAAcIQAI3IEy4KyOlOBL+9psGP\ngIVZsHAvdw/IZdJK27B8LRRtJgpxd52gAYGV1AXpzU85qlM91+Fd0murAZV6\nz92wgd8NsjwsIHsLr9pPEJ02lqe+5avB2lUJjK6FtJvqMmIaoEdTU7Lm7ikv\ngSYy6Atq57iTtnOahl8OhnQecSUuFdHG3OFGJeev/7vmpt1IzFLFSGi0swMR\n/XpG+Hb++5gxIzY8J5Rv8Cgbp5fq/d9/eFKO09TO7CbzH5Y1CxRHVVWXJiky\nY3pLU/XjETs3CG0vDKU94TVFLyZJSG15HHi77W4ARqrxL+MtQn1f7iNPol10\nGK5okfvNia8YqNQV40HxEflJikjrvm6p20y57QEBOzpf6d7Sj9JUWKXaLB7c\nc14b57BbR9V/LNAwjfisuCSf5p5T44JYjo3EEYOWvIuxfFdMNA/T3VxQXRb8\nbO/7jRgvxK1hxKWgmoALQ/U+PGhIC7Xeu5+4FX1j69btt9C367E5a0KRnaiZ\n2Ld+rvQv+T6phY0NJmAqoXC+bNJZ8u8sTR6d8+ziu+U+H2vd45f9ZiFG8/f2\n4CYnlGiBDqiQEnteUIgVyuxgx1wrVkIbTHNIaCc5IAcxJU1ph4o6o8pPKf5+\nC0i+BV70vIHRsK+T2Vr63ncs85X9RXOhDR9SetBzDwhuwJYCLM2ixl+rztvo\n+ocL\r\n=XvYt\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"e1aeb9efe0d3f4d8670a6ce174d17d7528b34438","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.457d89aad.0","@material/theme":"13.0.0-canary.457d89aad.0","@material/feature-targeting":"13.0.0-canary.457d89aad.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_13.0.0-canary.457d89aad.0_1629213718132_0.10904020638469714","host":"s3://npm-registry-packages"}},"13.0.0-canary.0de2f2edc.0":{"name":"@material/shape","version":"13.0.0-canary.0de2f2edc.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@13.0.0-canary.0de2f2edc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"db09b9dcb9f4d58eb30e0c159b5fea9a2bf3adc2","tarball":"https://registry.npmjs.org/@material/shape/-/shape-13.0.0-canary.0de2f2edc.0.tgz","fileCount":14,"integrity":"sha512-isgU0RkIj/nVst6x2+mrc1TOiJlbgzFmoKieOsYngCcIabFcmSdyNcezTHJYhGUuvzZzjvodnJ8tyOoSu3MAyg==","signatures":[{"sig":"MEUCIEXv97XCvJ3/TfHHfxYyotp5jWgvHcTGHY3zvJzWFcQeAiEA/9PBDrGd45FWZj7GdWtzBdNqfZ76nT68tNm2pIraQro=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23388,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHCHxCRA9TVsSAnZWagAAh2cP/1T7gLcleYn2T9SxqnCi\n4a8NEYjxdF1R5HSSBY8VG5TRE3qE2P/5rZZPrNmV8MdcGxJFs26mUsDbfde/\nny6oqYj55EgT4Gv9hu8rsakFi8YmOlrNON5ONRqMgHZGQ+CWslPNzheQcznc\n1Ez8fZA/sTChqNBkBcDp5R6eHXFXQHWHdstHfgYDD9iVnlZGsUnvcxwRLCj+\nKhW39LGVWZ4G1l1wt7GLKHfZPWDc79sw6LJL1+kY6ZCKE/4E8+7Dx9ItUmiH\n1pjiYCLv/de2AMcUf7+g/S/U0OqH2ycI+4wZh3f0UzI+8vxChO1tHzLCEXpZ\nKR/QtMh6uKASYKHpt9CeK1GGseivx6li3Ue5Y9UWwkqePQz3o6260NdKcLCI\npL2jHXpWwpRjztYR/AgWqAhjHPcy5//gfUPGyrqyT827QmkGgtpRdnpZrptw\nihcx/Q1XIQjYIvbRRJuk7iTkpS5dIHair6pYAcub9q8vjh0a0HPquuuiuKKp\nowWgQdv2Kq7jfiNM/nlTg7KD5waIwfr0OegC4OBjnlBK7KG65pILoSAkbS9Q\n8rjWFzWZXbHDgQ9Z4NYC/zmwYP9MVXRif7DaOAskvh3Ni7UQLAc5DLgj9LHN\nV5oKU9SpHotn5FLk5Q59VKfCAQd/vLJ7CV2junjGMrbzh1WvOyCaA7Y3lBYo\nI8cl\r\n=J2FN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"ecc5e8dc0157f612d4cbc7b03507e3779919d5d3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.0de2f2edc.0","@material/theme":"13.0.0-canary.0de2f2edc.0","@material/feature-targeting":"13.0.0-canary.0de2f2edc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_13.0.0-canary.0de2f2edc.0_1629233649735_0.47186268382291496","host":"s3://npm-registry-packages"}},"13.0.0-canary.1f9259b9d.0":{"name":"@material/shape","version":"13.0.0-canary.1f9259b9d.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@13.0.0-canary.1f9259b9d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"698820292cae6ed56c9bf126cc5c8fb3fc1da2ed","tarball":"https://registry.npmjs.org/@material/shape/-/shape-13.0.0-canary.1f9259b9d.0.tgz","fileCount":14,"integrity":"sha512-X8WW8824C11gwNL5UHsV5wkA16mELyxwcszqC/5j7W6BIHI+x0W+6Ni5hx0uNO7hwNin5J51vDibSjZX9wQG6g==","signatures":[{"sig":"MEQCIDtu0fV8JLEeJpeNmkA1/lN+3KPeYda24WXLwLwBex+tAiBjYRgupblOKrRFZZ0dGTh9rJBw8rcjNj1Cbo84owijqw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23388,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHDSrCRA9TVsSAnZWagAAAqQP+wXypGdgkl/BKQFrIiO2\nk9rDUyJUl7prYa/beLVkogblCqCIEH8pzj679DIN2+Nfxk8RblswITw3xeH7\nMjPlUXdAW+X0RfGaoZczFEdfbummeueAvi9lm1bY9Yf6JrZSS0LEeGdeIXBz\n7HgnQxzCloxaFGnFMdw3W/9C8whxub6U1Xm2HZ/OAz1nklxNQ7YEnDVz67Rz\nlWVcQ99tYz9lAEIqoFKwNUb6lCJPz+RG0XuN/FOZOKIa3g4PyCks7YL3CORa\nYyIZxvWxgjisVXO7fVGtFQs8wXHhrxYuywtY4TXofgwZf1qgrZwB6L8TYofY\nXpbzxKFj4XQqjmzXOqS8QQyvTZzDU6MDyresI2hOR7t2pBlEXLAKccCyuqPc\ngLrW5upMVkW0XyU75P1/KrzhU5Jjf02liMV9TCte/meyXoCTU8otWyPOX3Hi\n5FmJnuKLA/kzXDA0Dei1qZ7lj5TPt0BXqtZURgdHniFqzlBVwjrZwcpgCavj\nmc5KKhTBO4mGi1eSISt7d4H24F96cB/+ZJIMtiFh99Ug6Rhnqe6kTbTDX3YZ\noxgk9r8nGZ8nSYQjPGoxxvLU7onWsXJnJL+WudcU0AaD6ZuWGXVyh1CsAo76\nsXnugvjK393a8iLSNo/gdZhhd3xcK/AkQJe7R55bYbJUg+glTFvbGnekxv9z\nNPBw\r\n=zcKw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"4c2c9aa7510a4854abb7f568046a44631dfe3e7e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.1f9259b9d.0","@material/theme":"13.0.0-canary.1f9259b9d.0","@material/feature-targeting":"13.0.0-canary.1f9259b9d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_13.0.0-canary.1f9259b9d.0_1629238443401_0.3344353928016597","host":"s3://npm-registry-packages"}},"13.0.0-canary.3b9290351.0":{"name":"@material/shape","version":"13.0.0-canary.3b9290351.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@13.0.0-canary.3b9290351.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"576cdb4aafeea893d4e32465f8f991e213ed149c","tarball":"https://registry.npmjs.org/@material/shape/-/shape-13.0.0-canary.3b9290351.0.tgz","fileCount":14,"integrity":"sha512-NcqdaJyzw8mR6O6nUzTjkrtAvhLL2i2XE7h7raIVQhJiBFGaSNXA42/5VlPuF4jfLRwjz0ors68jxmb1XJTPKg==","signatures":[{"sig":"MEQCIGts7ZNgRYkcxSoiitiCH6ZtOGos8bHNhZt6unxf1SGFAiB62+qoRJy0e6iDZ2FMgcXpWRdJ6gzg3P3HReBJLjOjcA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23388,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHJlgCRA9TVsSAnZWagAAe1IP/21LttXt5CfR+BMjepS6\n1YqugyuDCoJRjE+v72ygsZONNHtu+LvSGet9aizY8MTtfU7iVrB1SjgCfCSa\nOhg1GIODVaef8ySkXAvC9HqxYQcqsHAf+6xOA6dWPOUfuIzokhfVuiis5Fz+\nfcR/b3TKz7NkK0kdex3TUPD7FYbhLfPTK5ZDzn0mFHTWWzSK+UUS6b3mrpG8\nsDcxuDeQovCXJg00LqjzRn+d013Nx1hRf55Hsg9UVv03keRhhVeKh2fA/CpV\nFsXXjAe1YC4UfYoqsajMXbBiu3kSh8HIgQv0p28XqQLpIWCcZBmpx3+j974Z\nGzSaphWLRHNwBMQPX/G72ieDLOTfgqcySbtgjj9iMEYZnAudKoVvCvNjwilI\nA3k7s+Fbv1yNwdsl4A1y9U5OuwsCzdzipZaZu2v59LgO+3tmhtHYFjtxfrOk\nNhKay/brKAIlg8pDLifgldiZg9YgmwXeyPQRyGSG+MPG8hERgImFO4S3YX0R\nz2q9iEISbFzr7UWT0xHvXq7lZ4yZYehEtdZZn2VtfZEKZl0vyzKFbw8y9adG\n0qtwaOD18HGzrw9WAEgA+IB87W38SptxbrkhTrLn37McTZFFT/0m++t32oTt\n+W8tZzmgegIhzyMlt/BYcYzn98k9Akikhl/ZrwQs4qcZm28LKGDQQYC10f/8\n5OAU\r\n=Wr1o\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"15fe006947f65208dd0e450f8cad53d361b2930b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.3b9290351.0","@material/theme":"13.0.0-canary.3b9290351.0","@material/feature-targeting":"13.0.0-canary.3b9290351.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_13.0.0-canary.3b9290351.0_1629264223943_0.8790620348860647","host":"s3://npm-registry-packages"}},"13.0.0-canary.43d2eed2a.0":{"name":"@material/shape","version":"13.0.0-canary.43d2eed2a.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@13.0.0-canary.43d2eed2a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a09e38c6245a04330cb065a5219277c4499e9b16","tarball":"https://registry.npmjs.org/@material/shape/-/shape-13.0.0-canary.43d2eed2a.0.tgz","fileCount":14,"integrity":"sha512-EzpPdYNVcCEuy4AtoUHdTmO/JImW5j1gbF9qH2nJKyOmtc8D7WoNNluz5Fo/LWScV4W9aEImD/cYY/fM456cqQ==","signatures":[{"sig":"MEUCIQCJfCyTStyH6/WZLexJXeaPJTolOcHHQAmPoq+N2bQoDAIgBVyr/TxC/45O07NBT5mGhRLGjtpfnw6S0aRo7EADWPk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23388,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHS8PCRA9TVsSAnZWagAAzssP/i3nz1OAPhHkZ3mCbpcI\nxuqDiAumMUhl64F3O0iIBr2lpvQGKz+YJqHOYn0NTvZgOhbbQzAqaZO8wbKs\nHyFRJke3BSPP/qa80KHTytDUtnzRhgS0Lv8v2CszStRMA4Z9cVGHyZS1otnv\n/iWM81db/cZhNb250eSmFANlvDgIDohJmSD7tvdEqc+SGsWZ1TnzKmzhqqh5\nl9QMApkgz9SweOq0c1BA3TCVEwdazIQjDGq1lYwhaFMmRk5NznIu+T+r8iKH\ncOZJf4DQRXE6KiAbDqWZQrE3sWIClTM7tQ+fjuhRnlTLt1USfm4v+UltZmP1\no0BphDowo28Vy9Samv49Ii6AlEz7+VO8gjrRHbTk0yALH6nGh1anEzoV7G2/\n00S4W8cEaqmiBAFZBXmDny9Hgi6wTumml9o9EwvPUAja1rqy1cyOVrKnmNoc\no4gHm78/vZR9B4boBc+T8T0jSTEctfhxXMPaw7iMK3RBNR5PWYSpt4s+WLtB\nVrDi4NNunE5RPl0y1pBVv98sfYy4Ew4Xn7hkSS3QIC7g6tw7YLUT9kIKRSxD\nLT3pU/f+0ZDhGliUUrTi3CKNFUI4L8jWLIMYJk9D5N5pGvLJC3kcikubJ8cW\nwIqTDrKRG9uFV05C9oQTr1qpdPQ/vIakRy4h9RdFFlTrO/5ksrFQxslgWEGR\nL7Jw\r\n=kFmJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"687e2389ae76da9a31b26968c0cdd837208d3359","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.43d2eed2a.0","@material/theme":"13.0.0-canary.43d2eed2a.0","@material/feature-targeting":"13.0.0-canary.43d2eed2a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_13.0.0-canary.43d2eed2a.0_1629302542959_0.7880565115815568","host":"s3://npm-registry-packages"}},"13.0.0-canary.0a9069300.0":{"name":"@material/shape","version":"13.0.0-canary.0a9069300.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@13.0.0-canary.0a9069300.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4d1ad2b093ec58cf783b4433393ffb41ae7028f5","tarball":"https://registry.npmjs.org/@material/shape/-/shape-13.0.0-canary.0a9069300.0.tgz","fileCount":14,"integrity":"sha512-dACxIJ24s3nzo0Ywc/ieXBkoDDGJ5oyrDv8fwj0oVdo2zHpOA5azvK1KIdDJcFi5CJHs4HCCXs+/Phn8UGaGvQ==","signatures":[{"sig":"MEUCIERe6+VB/CfJuf83zcrzKnA4kYruC5J1VoV44YyKkS+6AiEA70Aoy6wCM6G83kOK6EkI+aYanxwm4hyKt+9p+TOmS70=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23388,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHoQqCRA9TVsSAnZWagAAhPYP/0Exq2GWeGVTfODAOLuz\nKVkqpq8o1G5aYfKb2h4E9PQke/v1A86H07MSdk11b9KOsMpKY05VlsIraB8e\n/DGoOm0T4UCwyurcEX7P/w5K4jBzSR2M/1A9HvFp9s20w10+6Mwmo1G1ClrS\nDShzjO40saHRxXIrPQkVvenFULbv7gPsfuvWcpaPipS/z9NVKO7EWit+RZYX\n13piOwTgbegAQeDnCVgr+AwdhabXUfWtFqbyIq+rLkxK1wXfh9rkFnwt5Pzn\nuZRjD2ablxMnJwNOiaB986BeGELrzSQHelWYgJ9BTbxdG3QYsILDrZLGjHvG\nzmjMiay8YVOYoha8DlSOGF720ElZtZz09tEYXkKbdgC726R9GkwnVJOI33gS\nIrqIozEuhvzklAyYOMFM94vCw9/nqDfNfc1ae91D62kDyckzOwtkY1h4qsd0\nae+iMSMLDYjhY+kupFTMfG84OMMhe+tM94eDHM7XZKxZP10KVdDiqPGDHAF4\nViIr6Yw0SifAAIAFqruLVg8bBazU8kiny2Hci5oRaV4RjyQroOSWzIGjMlqM\nPXZ/wabD1scfovRDocPAYFItvB9xF9oKL+cuw+bUa1Gt4ur/skA/gN3ZsOUa\nIiXSIEIm1QyKU77xbP9+WTubFXVlI/UpbnetAVnjbbZjWA0ATM91sSd0MoqA\nLJce\r\n=I4Os\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"a7249c6c2dd2d786b2134e129bbe3b4ca596fee1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.0a9069300.0","@material/theme":"13.0.0-canary.0a9069300.0","@material/feature-targeting":"13.0.0-canary.0a9069300.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_13.0.0-canary.0a9069300.0_1629389866579_0.8640424159517464","host":"s3://npm-registry-packages"}},"13.0.0-canary.7da413ed8.0":{"name":"@material/shape","version":"13.0.0-canary.7da413ed8.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@13.0.0-canary.7da413ed8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0fe6d08d4f81279202e691f2839394d8611b3d3a","tarball":"https://registry.npmjs.org/@material/shape/-/shape-13.0.0-canary.7da413ed8.0.tgz","fileCount":14,"integrity":"sha512-RNCGAhikrYsahYlq4aihJxgtL/Gk9ekADcSr5JOzR1x3EktpGMBwOcw9uqivthvxpzMvYp5gfPu9Bfd9Fi7KGQ==","signatures":[{"sig":"MEYCIQCQZkTGLd1KAiQlqCI/LQ/kwJ8V0OMu8tvR3V5vjU8bcgIhAMDRaKTc787nNV63eE6+dAq8IEqCCwZt2DWQfC2/j0mo","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23388,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhH87kCRA9TVsSAnZWagAAQ6UQAKL1P1U/coLH8+Dvb/Ob\naEa1DjnwKzphc3UsVUHhLiRHSJSBjWvyv+lQKNuGXBKT4Nhh5QDvoFYXFte0\n/3MwTT4lvnwNiCUqgioHU+LwO9sI4BbA3BccGAxLkYKrnJ2kK2zskQoKJXZM\n8lJHakbMolbqpdnOYlVe02uK6YozM2Oe53miK3+nOqHpxa084RMtrqCbbCa5\nvO9TBIpgg1SmxZRgLKVmzOpnj6dpDUBhhfWpYglF5Q9KGCQStjaUGoJxvUy1\nEDdqvQSQhEG1g4QuczEqP/s77WTvG/HLnbcTsDMkwuRH1A01Yiw4tVBdz9QV\nwvHM62gSHG8jHoRPf/2qSs6UND829KBC/iuvxkBwrUpZDm5Gokkt40XCKnbI\ngMaI6iEitUHCqMWiKKiu9KXRXbeuW+BCE4uhUBVcyg+c8QXM+PRV5HpQcjiU\ntomlNUNqeFUCUrE2KQ38UgqeDPN0mWWrvRJ8l8v8CxBJ4SE4tqeOt+SiZg9E\nXZJprYca1E1eFp8DpUQSIIOCCR05cgMyeFksHqSMYfSI+WYZ+CDIGOWMjtks\nwu+c6PoVjywVw5FfqmCY4Da/Tlc2wVU93NWs6sXHRMJgzWyicVCamk8dMIxe\njGiJ6rQoKSaDwWqw+GxU8lPStHMmDAJYqnJhS/V04WKtCn4CGdUl7qQgGvm5\n7baE\r\n=OI+5\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"66fc8a91fb533a43e898483e7c4e1fac92aa0b7c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.7da413ed8.0","@material/theme":"13.0.0-canary.7da413ed8.0","@material/feature-targeting":"13.0.0-canary.7da413ed8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_13.0.0-canary.7da413ed8.0_1629474531941_0.12787992417987804","host":"s3://npm-registry-packages"}},"13.0.0-canary.e1e69fd8e.0":{"name":"@material/shape","version":"13.0.0-canary.e1e69fd8e.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@13.0.0-canary.e1e69fd8e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2a759038df747220c9e91c04056186d2f024ac6b","tarball":"https://registry.npmjs.org/@material/shape/-/shape-13.0.0-canary.e1e69fd8e.0.tgz","fileCount":14,"integrity":"sha512-GrJ7Uvm13fKaO2vao5N6RRWf9turRmKnCMWwJRC1H1sNTA94AlhD8ymUZ7sNt+ZZaKod9o6rq1ADY+nuDueOSQ==","signatures":[{"sig":"MEUCIAe7nXYSghYruKhdfjUXIiWkOnCd/mzWCmVJnPjdebkiAiEA43lyPZXo0TVAN0/dd6TpHdqhpXG+eG2BMuQqxlD+CdI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23388,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhIANJCRA9TVsSAnZWagAAoNAP/RRH/zdO4PgswHGZBmio\nNsZQKhEjbmhWwTXZ3znjbMrpsXw+maJ/DqViVEuheLzrc5kI1QqfNcqAiaEH\nUwpVUUDEWbNBixzNyQjsJ80EuMekaTLNUPdO7+88Uu5F0uXQ1enUFtATEvaz\nkni2QFNoK7oZGp21IXI9KETZHxAX4gyEkzDA3nSVKroFpzuWwifd8xK6psOZ\nEKoiU/wMZDpMGGXv6GN5UL1t0j7IuYQLek1abkUMOb6Ro2P5SIMm2QnCYyMb\nqmTLfShMhEAPKLjG6PfIgbbcmr31SVEyyMSTYZbOZqfwFRSK40j8lcBrZVHr\n0I+D5rxeYsZKTTQuY8UqjTJ8ANVhfV/96kC6hhb42+/DODyG3gHfCpSbvVlo\niY9yMV0tFskftsB6inhAQtixSJi8zeFcAXGy1jxlEEnpBJQh/Xzg15ggm26Z\n+qKiHthJNsDCJHQ+UilUSc/G29pBON+sOhOgseQvlzGvCVmWSzmFPh9VoxKr\nSUJJx4iUgnhynVfC76TrsjnFwIxEx1jSDl8NKOsQ4ckFyZOQ66oK1rbYhVlm\n4fWhcF97Ao3WRLRG1qFhPxE3if7MYPp08m95VUMyZ/WySdDCAHR0wrTLcLKK\nBfBqyDmGxjwqMu/QhFRdtBCz1ws3V4fZcMFY3PJK2cRpOTNZZj+rq3dN+I3y\nBCty\r\n=Y+C3\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"e400b9052366c6e1d6e27533a72ad00199b6313e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.e1e69fd8e.0","@material/theme":"13.0.0-canary.e1e69fd8e.0","@material/feature-targeting":"13.0.0-canary.e1e69fd8e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_13.0.0-canary.e1e69fd8e.0_1629487945721_0.8930572472911864","host":"s3://npm-registry-packages"}},"13.0.0-canary.f5afc16df.0":{"name":"@material/shape","version":"13.0.0-canary.f5afc16df.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@13.0.0-canary.f5afc16df.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b45c9c335db4ccb73d2b554ab9966cdfda9d97cd","tarball":"https://registry.npmjs.org/@material/shape/-/shape-13.0.0-canary.f5afc16df.0.tgz","fileCount":14,"integrity":"sha512-om3lO1D/qkCvylBE6nqfBMZfFb11Q+lRdj7yeBteF1CUHWt90NSta0gnR9Z6kELRSozTaXpwhWvU7/+lcLDJkA==","signatures":[{"sig":"MEQCIHrEs7w5sUjb/91C8jhOmIczi0fScehPs+rPZnWYpg8iAiBTHZd4tR5Zz3BHdwZARJcRvZWtjVZ6AY42D68PSvi7Tw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23388,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhIA/6CRA9TVsSAnZWagAA4sAP/2ROhgtjPtkfiWPCSdRB\nzX9YsDDsyRLxRHE+wYT8N/6BkW+MehrH8R2B93pCz1VMUnxfwGT2gzgERKa3\nLUIpYJqtXts1GR0+spq9AxgtreZ4NDIuujZNAVfYJUB0FXpzMlgFs+sqi+jI\nHDthfVC6vxGiqTwtOcxgp6kxBNWg8ryOrtNPfzjYZM7iYbLsm5SBBgHi3HAZ\nw/s9PT4geydz6lUQCsilQH8ERv1aJXHY++4/cBPIMNign+E03Ynzyz4RpeEJ\nQBPbE6Hlwr8iosyzwzIVsVnxAavWgpKt0jqgGCE2joAjCqpHcoOs+sojIcU6\ne8sf25YNN8HyK+uE0MYG0H9QZeElkxAvdZ9IOl1FkTDMXZh1sOGHesG9KBBQ\ntY1oMiH/xv5h4Vb9JM2vHqg1nBhe56XjUwkZJ6mBOutiPCOxVukXd04XqM/K\n7uHa2OskC6uDWxdkr7xf5laEzly5Mrhq/tUT+SzVUUnmXFDOsaEZyR6cC6sN\nwoFKzn1etvakQ63gbHggECNa0yijmnUfQRYkabbmmpY7AhXZP4Xz8mt3/wlH\nmMCYqiUzNz29zmrJWjMEz5+Cms2RAENP92pr118CdnGb9hF39rtLLQi9izjd\nBG4UXaN4w5ZzVUsLh64tCce4XQJtgSp+xSw9NQ6wuNjAzvSb6iJ5iiRtAB/g\n4Wj7\r\n=L7K5\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"9a5934ef5d223f46f61452bee68b0b45a21e20d6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.f5afc16df.0","@material/theme":"13.0.0-canary.f5afc16df.0","@material/feature-targeting":"13.0.0-canary.f5afc16df.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_13.0.0-canary.f5afc16df.0_1629491194067_0.9894777977271627","host":"s3://npm-registry-packages"}},"13.0.0-canary.28d0d75bb.0":{"name":"@material/shape","version":"13.0.0-canary.28d0d75bb.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@13.0.0-canary.28d0d75bb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3a398577b984c41119a38ede85c10b994d45431a","tarball":"https://registry.npmjs.org/@material/shape/-/shape-13.0.0-canary.28d0d75bb.0.tgz","fileCount":14,"integrity":"sha512-d0oU5oytw3VprSJEMoDbY3uejQpTpFrOVCRG/V1XVnXGTOiE0uwN/KEmz+/IqJljMmZEpM99a3d4WtBbapl99Q==","signatures":[{"sig":"MEQCIFIyH4ZXh+/CQGpmhdPTsjcM6VWvXIlqL9o6EcS5b8ojAiAeQD60srJGIqusuFsjJ/NTla0TJkNA+4dmGB+n6+Wa4Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23388,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhICqhCRA9TVsSAnZWagAAcBwQAIWT+bhgE0K7Joc86D1y\nCBuku3rWLmZ1ZjmOqqEve8AoQ4gXhzPUYO6ctv84fqYOxYTVuyHCzhm2kpj8\nphP0mWbaB/lAMKReTMK6y48+nLqqtEMya7SzEUn3g34rwJBzP5b/G//7OI4D\nXjJpTZ0g8IrujpX7fH6kcU/g3iw+2tUvQ7PPwqsNlwhG/Qa8NsdmE8Q3hpdl\nWlSgyhEHVVBG83i8URSSphZiDMThYsFsYePI2fsNzKOa0ey5om/Ch4/+XzFk\nSQGPtNDiEd7o9LQ2B9Ca4osMRUochaVYG0GNPXUFnKndPlPkMWz3bHwhIiXJ\nBEQi+ptvZow1sQM6VUiXYuJi0GyDaaKDbhT+sMV6ivufGwsp75OlyAF/00yZ\ni22T522quZdtb7d3aNh/jKkKiLz+Kwv/FiQq+99+9a50MJRpQ7JQXEhjvMVk\nrKedf5FaqdS7FoOYAIFYR5GoUn+XxKnMeUV7Uijzx2/7x2Yxhp2M5A1RauWu\nRtE+DnDG6BsLFyUJm+rxTX41lUOVMWW3NpNn/K17qld88QuTS+shtjUvt1k5\nyx0EJubzDh00EvTe3jQj+rI0a38XmoTI4OqwnSJ+Ua6Srnbzll0JiBzpUcgq\nkmTtWHUeFYaiWxGfVpvNfy0UIZl8Lj4lDqVZk/m+lc+e9RBPVuIjWXpG2rcL\nJBeU\r\n=ndyV\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"4becb1aca9e878d432cf8308ec0f14cc50e9699b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.28d0d75bb.0","@material/theme":"13.0.0-canary.28d0d75bb.0","@material/feature-targeting":"13.0.0-canary.28d0d75bb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_13.0.0-canary.28d0d75bb.0_1629498017772_0.43240660433709976","host":"s3://npm-registry-packages"}},"13.0.0-canary.21ece5360.0":{"name":"@material/shape","version":"13.0.0-canary.21ece5360.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@13.0.0-canary.21ece5360.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5db21afa918612dc0726092c9b2281c96d261ee4","tarball":"https://registry.npmjs.org/@material/shape/-/shape-13.0.0-canary.21ece5360.0.tgz","fileCount":14,"integrity":"sha512-S3A9AxGOD/OqIVXaOU9XIbWHTyYHYJD3A5juExcYdNi76E6pj5QC5GqtRZGw7cAcnkkUXpP2OlG+ZBA75oqudQ==","signatures":[{"sig":"MEUCIQCs3sYZa86I6VynMZbINOBqptyS5fx8xqkKTcpLzMuk+QIgYlRuvwQpkyxt2GtW/z9oXh2uleMuVMa6KzANyRGxIpw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23388,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhID5ZCRA9TVsSAnZWagAARdYP/2MdNSEflu7s2cXLx+O0\nY/ZX9/lL7Mi0/ZBV9VO2FG3aNPYGPwe3WQTga4OXUKaqqS9uKw9hxjxXWLgw\nJ/9mQr/3uTsUSX3SwD4FpiY0/sBEEdBCDyVzPYLs7yZVquekq8pp0NrW6pl/\nhVVM1om0dj2f/kNNj/IVPXSW7mbyFEmNE47LVu8z/d9cJtRe5uc/gHf8WlXR\noOxdeZa4Xt+7bY9lmQKEZO3Cz4LYiemoyepY9Bvj7uoTprrgIOzxrWEbJQXU\n301dtU20FKgy6Lyrls8fU7XpnVGEkp4/KYbz1Qeny/w8TkGxGmJrWC+o9+X+\nQSoATPJn4AM2jyht/Jo5Nmi5bbYqOAs7xF/oPhDWCmo77hhynP/exnRmK3E+\nDJK/RNYNWwEiohGTn/N27KSp0kwDIQOBxBWRMozTI4rVZLV5R63v5QAqL99j\nXyU6PVciWJeLqKKR6iyqhNuvzydRlB4GAPhfsNfvYUgBU9An0d9rvJ8tYoSI\ntYQr+4n4JeDl8FoPoPI5wbtXV4khNDM+fBAaF5V0Wyr5EXyNxYD4TxJl3vq+\nsuUMGeP/uSgdFNYGimgHpKSbT29hgo9sQ4qT4SYtvK8KN6KC9aXwe3J7x5RW\nMactP0TnTpJUHN21fNZUMD9vapPUHtdezNzb/2a1p3PKg1XxcJL9/HSbSgt8\nUTtv\r\n=XdEN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"9625caffe59fe4a84aea358993c2811ffcf33e74","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.21ece5360.0","@material/theme":"13.0.0-canary.21ece5360.0","@material/feature-targeting":"13.0.0-canary.21ece5360.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_13.0.0-canary.21ece5360.0_1629503064925_0.5157548726346168","host":"s3://npm-registry-packages"}},"13.0.0-canary.8de07c02a.0":{"name":"@material/shape","version":"13.0.0-canary.8de07c02a.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@13.0.0-canary.8de07c02a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dc08ccf68f895834554e77fd628eeda13cd00611","tarball":"https://registry.npmjs.org/@material/shape/-/shape-13.0.0-canary.8de07c02a.0.tgz","fileCount":14,"integrity":"sha512-auGX+TIv3mDgmz4pd3mOyQn0EFQmMNLJdJreIyliXWlPTN6/0uGqzcMsiEhRE6zlJnoYPAQyTPzgQSxNsg3Pfg==","signatures":[{"sig":"MEUCIQDesz3EeHS7WqI8oWlL532E0GdjZRu5o5paf27g/XrH8AIgBXw7uklzRYczpzRlzZ9RhdKX1JaJ/Djh1vcqUZjrtiw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23388,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhI74tCRA9TVsSAnZWagAA830P/iKiKIMksbyqgrjZBJiv\ndgkcNhfmN1CWzKTeK6U+JnOucrpRGlguB8UTN+DLEQks46br/pFyPQRH5Ey/\nykyE2ehZAaaJPEDcFZK6Xdih5yM7JQevghnQJuDuSZDZExZP3eIEIvfPtN7h\nwvDZdbDI5DMHFlc7sAftMHjC1U6edGNLxNpSuoK1ajEloUny10NWDDfKU8gE\n7NX/hLT82oOBRwXILLz4QMROK1Zj8hMUnRw1o5mKiWFQGAr/L5n08F4mS/mv\nB/yN2rwOf/XQXM1Xu8VvJIlBiSW6g+RsXpJWFFdml7Eb45hjxtC1knnIVYZS\n/jZjSSR62JUtGX1EVAlIFLZhrB5m+/X2V3OXjTvvR3jL/zIuIV4t7iUj6b4P\nnd7VWqH7gBi1KQbNJA95BMzpFppbO9rUWoyMcfMK62G4apmyTaO3QSbDIfAA\nRyyFoeNoTK8uGYqsproexbZ8H9FsS/hWE37EDGQJW3QelG/wAEMpVN65T6Hz\nKO1saIwzQdFKHsqbM4OfGiYRPQw4HQXlFSG1x30UVmwdMjwc32LBYerOby4K\nRxCvI4TC06vUR0MzR2YqgiOw2ZaQZlYBuOqDH0qVL1ftkB4sPxpgwxFtVZGp\n4lLXMCcjR9D4sgNRZuEXWxqP2ZLSq/3Nc4lJWMWqIMt6h2i9Do21DDqNwg2j\nylL7\r\n=v8nN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"e55081eb44f85de06afceb7c0d189f0d358ad60c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.8de07c02a.0","@material/theme":"13.0.0-canary.8de07c02a.0","@material/feature-targeting":"13.0.0-canary.8de07c02a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_13.0.0-canary.8de07c02a.0_1629732396861_0.9354075141842579","host":"s3://npm-registry-packages"}},"13.0.0-canary.65aa63b0c.0":{"name":"@material/shape","version":"13.0.0-canary.65aa63b0c.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@13.0.0-canary.65aa63b0c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4c0e268aa059a3daf9f47b36b13974e45e23db10","tarball":"https://registry.npmjs.org/@material/shape/-/shape-13.0.0-canary.65aa63b0c.0.tgz","fileCount":14,"integrity":"sha512-RCb2c+2E/sNGgzb4/S9rKWZYEsSU2tJgrHlkrLgEkGJ7FhFMTM+CCt3vBcvXzn6whl63UXqFVZJlVl8Hjidpug==","signatures":[{"sig":"MEUCIQCZko4XG6NZw51F1eQoEEFBEtHlXSEFG2J5krfZIbwjHAIgSe85R+FALyM17yXu3kYOwJxBTFzGMGF9/gA0eabPKh8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23388,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJRAnCRA9TVsSAnZWagAAZTgP/iLfEGg/ZtoLMuy8AW9O\nJADPQvZRvqyXU2qQD6T2eJxxm5uvWi4/vwzwYxuJWYhIITtqzRexQahHStVo\nhN8y0ZRYIZ/Qur9YMMU0dy7iHxrH7GDNDPyvqtBk9Mp8J1lYnq056hW5xTZu\neYqX0iERy1+nyY1h6ZQjXX44zkp3CWYR48gt21aDZdbNjk7BDqmAsnQIwZoQ\nmcQUG/Tw3cx4W2gI4wW6zhCuQJYyDlCod9GCL0f4tp5nMbPAILLlBvv0btul\n0X91NcWg4ho37P8Edbswuz932cR9n1/etVyyTl1Lrj/tRuBExsV4jjj/ke3B\nc4x+qSGt9XIl1EhpZK3WMBsxA/Qq1+d/vtETO2iAMfEtrc+/0QfferzNTz0z\nsur34hnjhgUXgVAHcCiXb6vSCOgxl2Pu53/juW8D6U9r4znJgaKlFRyd71ao\n7MApn1pCP1FOLM+6DkGxAHvG2y8Tt/AVXpR77zq1sxrDZ4Kctidtzl4gvZip\nvuiCCV9Lbv8mNk6yi5CopgLC+LP+T/vGzz/Glmpxs4VEjfIz64ADnuGqfiG1\nwf7pFmOiYOhT8McT14RSZAcCfc3431Xetox543IunobGdBNL4xbXkJpDt/mV\nxk6Pmfymz9u4AC3bsjitW/oGfvAiEhqr14CR+gOS00Zrg3rzoqiztZII8Shk\nTx/3\r\n=qkMf\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"0ac2dcf03064da43ca7eb352045fd4da0af02200","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.65aa63b0c.0","@material/theme":"13.0.0-canary.65aa63b0c.0","@material/feature-targeting":"13.0.0-canary.65aa63b0c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_13.0.0-canary.65aa63b0c.0_1629818918864_0.20214485187604447","host":"s3://npm-registry-packages"}},"13.0.0-canary.15981e9d9.0":{"name":"@material/shape","version":"13.0.0-canary.15981e9d9.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@13.0.0-canary.15981e9d9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ebbb34a734a3df8ceb08147a9ac1cbb3134aa2e3","tarball":"https://registry.npmjs.org/@material/shape/-/shape-13.0.0-canary.15981e9d9.0.tgz","fileCount":14,"integrity":"sha512-OxGQP15f0uXO9XFHuoGW5e0Kw4nzWak/LDhwcSu/whx+eiiFUe/N1cXR8RzneDQhOfVbw8GzlKeygEQTvQMKJw==","signatures":[{"sig":"MEQCICf/VdT2s9lR4TCydhL0fGSLnh7xubeoiXkKXTlkVXKuAiACUfnyoLzWZyH27k/S+OH8lFUS0bVBA85uLCcZiMO6rw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23388,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJRuACRA9TVsSAnZWagAAhgwP/iJ9uj3H7hGzTXHJDFRq\nDBONxvB5NwfiJPZyxtr17n9s2pnLUtJuIP7YtUxHdSgCJFbtSN73hiCWx85f\nPe7PHK5/Ed0carQmsmoOpRmOwMOzRtXoVos1bSvH3P8fwEAinGFdxMtq+y1u\nCLTXGp+lG+JDHz3lsvE6X1abPFliDWkPiiRHJnFYGFmiNaUfW/ylhdtyGJAN\ng5cy40n+5fcccL/vyKBVjKZdtoA73xRidwtUbZ7qDq9DAeEwaVY8i72TLJvo\ndOlwn7OGYER+2WSAbghUensyhgBGXGNp4frQCiGbHtJDaRb8Xk9uRVytsyCJ\nBIIKFOERv+4NF2FVVaDTbs90s3DtDV3PxOEZ6f0AHy38424cGcms5n1Ocd/R\nmJn0w9gh3UHagxOmZSWXhWKaoaJVChlk1C53pNtAC9vM2ie54dOIQ3R0um7A\ny3JU7rdL0KwEz0TQe436Dvn/8uomfHOti/ZVxaPJeZxWSf6z2eh3xIabKnXg\nECFtzN0VPG5826zua7woPcyPuIISh7LGYwYYA+k67QWBdjHOpYEpHG0KtVnn\n24yExJ/jMG2WKHP9oGCHBkYEzQs8aRA26BjH/2K2bv24Usf03Uxo8AI31tEC\nHsPSN0vP/2p81b0MsmJ8923LpMgs++v4yaakDjJxYHLSXxp6FksBUkYSkX6W\njEGu\r\n=xZ27\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"93acc5a9963b30cedb03f35eefb49cd35c93656b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.15981e9d9.0","@material/theme":"13.0.0-canary.15981e9d9.0","@material/feature-targeting":"13.0.0-canary.15981e9d9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_13.0.0-canary.15981e9d9.0_1629821824452_0.9665227270942562","host":"s3://npm-registry-packages"}},"13.0.0-canary.fa7520f62.0":{"name":"@material/shape","version":"13.0.0-canary.fa7520f62.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@13.0.0-canary.fa7520f62.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9c97da8725b5495cc64f7c7e0ad4ee37be76778c","tarball":"https://registry.npmjs.org/@material/shape/-/shape-13.0.0-canary.fa7520f62.0.tgz","fileCount":14,"integrity":"sha512-PVCcZrCSK9QV+RjBouyXzKZxs361hMx9B0dO4G1NGr54BweP6ZQvQ+uq4THgMbASbHsTpFRaqc1GESmJiknAxg==","signatures":[{"sig":"MEUCIC71PFDRSkHc+yFcviHdX2QhkVwpZiod8VHDDeAvKHqiAiEAqfywm9Qk5nSRPKwtrYAWWegK8qMjKaW8CFIJ4Wc9UBE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23388,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJXJsCRA9TVsSAnZWagAALK8QAKHkGy8Nr7R+vum8rLqh\ns8cvfU6XQeaZqsa9in1SUIAzgZyGYmuJWTVYQaxknmU7CezfLZkrx8VZHTFA\nyUmZMCUJ8zqHqGdCG9VyVfQP9TFlmfibmRafMMLoElhNLOCHgp1B9kgP9oQg\nK7F3i3MQsvGSxRc672xp1Yn97q56NSSVx/xx6OFbJZWmyI6JmNSiPUoLG9RX\nikHzL5HAQ8nbyBbZZy2Dz56XWtkIp3OsZ90MLeCG6UnOgjQcdkD0f9a/yS6I\nu3c21zAMG97ZWvx380Iz9ioLy9a38iBeVtMLp81iF6nmedbMKYSEH7Ens26U\nGDn8EjMHXwGXBKiZwpvh/5MD1v7vhLyP9BNEbpGM9gGf3TT3UJaN2sOMuZbG\nrARIzNj4WunmnpZ4MwDuAuoY08VV3X92wGt9P/z4mEpeYApWHOh8dNxL7pHu\nZ+E7HI/Q2oTpWqu8ysNEazQXoZ9+Rbm7/C1ws1DjDAWz91NTgfYPddQ6PTZQ\nWbV8WatFfd43sX/U9EkgG2OkUpdJLjMPEzGcIZ8UdLecmX7h3K0neE95bxPG\nxMZH389k36FNoDeplHbJ6kYaEVeXBQTqztknfxLvy4ohhrG9FBr8vnlQslx/\nhpG2gUnGB/y80FS3MDFi32s/z/1x0bZrjs5WjIZ7rnsF8aoOoahdr/LR8iQm\nnEkS\r\n=PkON\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"ded8a7ce355618969092a7bffde0da813aeec162","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.fa7520f62.0","@material/theme":"13.0.0-canary.fa7520f62.0","@material/feature-targeting":"13.0.0-canary.fa7520f62.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_13.0.0-canary.fa7520f62.0_1629844076846_0.49248775020738034","host":"s3://npm-registry-packages"}},"13.0.0-canary.ce25bc3ec.0":{"name":"@material/shape","version":"13.0.0-canary.ce25bc3ec.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@13.0.0-canary.ce25bc3ec.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ee7f931faab275c1498251fcc52d54ba314adc6c","tarball":"https://registry.npmjs.org/@material/shape/-/shape-13.0.0-canary.ce25bc3ec.0.tgz","fileCount":14,"integrity":"sha512-wVGcKlUttAJtHTvVm97UFh/wgxAVUHZzUKDXZkxqcT5qmAN+y63hfRTnmO3WKfwpLBsukCrlSCjdAZ5pG4wf2Q==","signatures":[{"sig":"MEUCID0NDwDqSmzHOT1JXBoWpUB4Nfc+xuLTfpb/e68T9MeUAiEA+CgKhttysKqqfFDrqYKzxylWfspmn2b3ImWadPMShxM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23388,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJXc8CRA9TVsSAnZWagAADFwP/2PxhSWaq6mlHgUocutt\n7y5m5yG2N2qaY7w+Ejqcp63PlSjmT26gjl4E0Em3ixLblGeImhScc/8Fdf5m\nMRD2LGVBuibYWMG8I4+hd7B4fORQ4DxspYkAVbs5Uee51kNcfA8FKsGuuNdD\nZC+2hnuPko0aKUsxVc6uAnDrDqbvueT5VZUWui/YRFQX2D27yXmdiaZ3/4Dh\nY3XbYuEHOp4ZUjzUfgGiIq/zYk/PKPTK0FBCnm0aab2rds0NW1q1WgfG5uL4\n8edncrf5Lw51Yt71iLilmDHOm7OpKKRS+OCVUJPrs3dOxo4X2uVrJt30FAi+\nCo1nkOk1Hps1cXeEuX3aI7P6VC/8IxK2C37Tz1uP/RCHHtMD2xQfmW0Z+nc+\nvkE09cHueFdsmB8koDwu0Ua1rHLCrzi9zpsGncJ4gHqsPGKkbMe3HkC6dwzK\nP7gLK26SjSQPqPPkfWRp3Au6bP6UZzg7JY2dHPnnuwoyj/4F2ezYVm+P0vQN\nnX5vU+lw9NEt1xxWrfZ6brmcPKr7vOYFxD7KRb5332fu1UcktBSNOXINltEu\n95Af4pr+BnX6X0LRHKwj/phnsW3RMnBAWofL4Fz8TJsm1a1oETW8dhHvKpKZ\ngjXzMEIr+KukfQuMPFCoeEy4JxvyQFB1sq1IuOVBFgWFvg4gK1dwmKYrswuL\nCc9B\r\n=8zIy\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"5296a1abf91023fbe0806f06b5b5fce528c40509","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.ce25bc3ec.0","@material/theme":"13.0.0-canary.ce25bc3ec.0","@material/feature-targeting":"13.0.0-canary.ce25bc3ec.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_13.0.0-canary.ce25bc3ec.0_1629845307917_0.25964959618345085","host":"s3://npm-registry-packages"}},"13.0.0-canary.12f5622e1.0":{"name":"@material/shape","version":"13.0.0-canary.12f5622e1.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@13.0.0-canary.12f5622e1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3f639eb56f9d2283a579b6f8775b9ec5469137ec","tarball":"https://registry.npmjs.org/@material/shape/-/shape-13.0.0-canary.12f5622e1.0.tgz","fileCount":14,"integrity":"sha512-0AXGFsW13RHKjcmmVU1rtN9awIU21/TvFVgRkWupKU6EI9hDNOSEhhs5kxuo3XRO5MS0zGjNiQodH8XfApfxgg==","signatures":[{"sig":"MEQCIDBBkU+cxg3SOUNGoKVHoUTh1PlxIA180vFuNLe6/5BAAiBr87VOT4jTb1yhCL3SKG2YPKi7Bhx5kuEzNTGA3+uLyg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23388,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJX40CRA9TVsSAnZWagAALU0QAJJp9b6jzb3owrXt3DCz\nHqnNVySRRV9ZtuvciB8tBZGhNK89DEBIxHBQBlN25iuSOCTax36Ri3c308Bw\nhibQEQXHh3k33bKCRvMiK3az5ItlN2rQ0+JJQWTGfBrFQ9MIGlDlLi23cgUs\noZwet/OYNF3dCrHsYICTW6PPxC1VGaFtJgUyFyqb33xS5y4oVWO/yU3c58jt\nb4HraHtuhIFZAr91fTDgPEQrMLyYuS4rKGS0HJAxmrpwBVW/Wqivp9orPkpO\nKcV2aHsokLBhffEh0n9GeYzCFEpgkq9lHmJ/6CuybqqfaZmR2XVXWCJz7pj+\nVGKGDc8F5u/h47baW3KMyTUcH/lWZWc4mYF1uj+as8WFjD1QFmmXEWr+0wKP\ngYwKsck3hs4PVQRmhPXg24g3n6Uubb1NmxYVYzCAVtCj/UaYsB/qeUtjjNp+\nXJhUzsEObk1ZubVwOrC0tMnyJpnu2opOE+vUvq1FAe+uiKge7xwB6ysgpQrN\n73VdeovMZ9mBzhCqPjStWImC8gwkwEvpBKeGFl/UkiAqMXxHgst4BfkSa86M\nOdehS4LKSVWeo4wDDsuRD9fIRyP4MUikGOej1s26F+neUpy0abioyx6cOr2r\ndL1ljPWqX8Ix5fWwXjgEApy5w7Ui+L8UpEqobbZwjDanxJKhE0dWA5IEi7Vo\n9+yz\r\n=kTly\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"2cfeb72e6002a5f3cf296794da5216b3114fbbc8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.12f5622e1.0","@material/theme":"13.0.0-canary.12f5622e1.0","@material/feature-targeting":"13.0.0-canary.12f5622e1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_13.0.0-canary.12f5622e1.0_1629847092734_0.9450091387628514","host":"s3://npm-registry-packages"}},"13.0.0-canary.d97f8f133.0":{"name":"@material/shape","version":"13.0.0-canary.d97f8f133.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@13.0.0-canary.d97f8f133.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c8d89c1526b3f00aebc302fe00f1ea025fada56b","tarball":"https://registry.npmjs.org/@material/shape/-/shape-13.0.0-canary.d97f8f133.0.tgz","fileCount":14,"integrity":"sha512-eJXl2ZCGtKVXNTgOCqQzYKyTKOKhoXbUG1ivvXZoB62aD7RtepSXoNj3oY46VvNvPUQo9oNLymCEairwRrwzMA==","signatures":[{"sig":"MEYCIQCZalHURGk7ZWAcWC17VaDxUgpLnVzEoh545TVynmXa8wIhAOQTBbpB7crag9bnS2oPsbgMHJX/k7sxs8uqz7nkoWGV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23388,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJozmCRA9TVsSAnZWagAAcTwQAJ53Ef37aUDpF7qtTOp3\nFk4+LT4X6Xt5TPCJ1mF6y9NgrSGFVUB0VmzGalM6W8056MJm8WihHEGVmzAk\nxYkbddBSuQaDzrhFwWDqqPZ2UfJH3IEMsXCJV8ikq/DkCRY6ZDUT+dCNPIqR\nANZ3epUuyr+rD0dczwgI/aDj7ShgId0FuIuYSMqhDNWhTjJNHNYCmaNreecs\nIdMpJOHFKxnyssl1Irp6NOVjZ9soOaXXeuMjMpvYUwjhp4UX5o22+SvH/R28\nLyu7NeU+q62yTT9xz2sYMvLHBxaCykkoVZ4hsRqn5itRJvl4IS0dWrZPyBqq\ndhQv+QEUt6QScsrow0UJ9AXrExFKyootPCbPn72KtD4ng6z6O9DB/1Jdy0ka\nijkwdBLbLE/qkrAQrTIBHUT91M5sL5i5IXfDjTzX1yAmJAmcS3BxuwaHZSJz\nb8SexJb3ECgAkILSkQj8fOE9jhiSRMzSqIOKK2Y6KMzyqgf6661iN8ActHUo\n/zhLgwYPi6u4f1YzAVJGzZEs8Gd4XjQATx8SxeCVWeNZnk5j+8kPqVX+tyG6\nOwfgwAIApWYhHhD43iIITjp0EuZfeJQUUvrPg/ydhfnXpy4pqq8FcZ3hqqSu\ne/xaU7+6mwmMN2OnhSzRTFiHNgkM2BsfbkMa4WT2DDhwwV4/DtHkXo4qfdQR\nk2xz\r\n=U1Vw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"e7295f4786bb26bbc05939b4d6e3e42f011cc033","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.d97f8f133.0","@material/theme":"13.0.0-canary.d97f8f133.0","@material/feature-targeting":"13.0.0-canary.d97f8f133.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_13.0.0-canary.d97f8f133.0_1629916390784_0.506508832753573","host":"s3://npm-registry-packages"}},"13.0.0-canary.d86fb6fac.0":{"name":"@material/shape","version":"13.0.0-canary.d86fb6fac.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@13.0.0-canary.d86fb6fac.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4ee61eb627fafe094fe25918b991fa6aa5baa366","tarball":"https://registry.npmjs.org/@material/shape/-/shape-13.0.0-canary.d86fb6fac.0.tgz","fileCount":14,"integrity":"sha512-NiicgdVK/poqWSAC3o0EaUe3fuLyqFOQiObtrkazQPbSgNmysIlOsECbgzUJyBRp+LF4+YBesR8ULr5EFg5alQ==","signatures":[{"sig":"MEUCIQC8Sus5owfHkF3B1k/tbjMwn2pHyLHh8TZYinAFytabUAIgRNaPSOuPEzCajodwraKxY4f4ZG0eg+MLpkrSxjvjj8s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23388,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJpG/CRA9TVsSAnZWagAAzogP/R/jqmVRtdk7iigY0190\nVyqqHEO3nueXTwXIll2muB9l5qHcJnZkdfTfp6NWzExnaP20bWU76a1pGJRa\nyy2nT68hm4FuhfCXvl9WpQ+jZJimrSmVMlThHQOgycDDv6NyIiwfmZBGsB68\ng/+gv3Fe+3DRIO/Y/KQ3HLXVAxhI3jC3YPlf+2U8Cs/OAL2iQ2i6wq1vsE23\nRmZiGiJXBzuBkCiwWqhXPZ9ecjBsJeTIqZ9AaKas64G+bP4qd4vh4T+6rlpv\nnnTJWAajxQthUUPf/nh7cb217XO+6gAkAeJdwLaBbWh1LTSblpPmsec6suYQ\nZT2/m5lI08nFI662ufF1oDgXO37MwrlnsaAL9Ukn0uSoWYa637WNmiONh5Ur\nrMQgDFKafbGkF2xxU590nJXE8lcsuHX1Bf4et6ZOpMk8k6DRjx1GrI4KJkW5\nIPbwo2r7KL5KdXbU0P+U41aGKm9Q2yYj6BMYI9gZSUhJ4bc0b+PQSpudseyn\nuDiZo8BTHreB3gotvyKZ/N246bPKMwx6/oNEd3mV9AdU7scsdBLidQKeIvRy\n8l2/3kmcKGlpvymN8cW7W+S9FgVjaRpqvEZ55XmjJR/Ow8xcewOfdQ2zoj2T\nwmS/mAVng5H46i3JCqOqqoeXJqCt+QsFKLP/aB2DbQRJHcEbTGMUn1as9oeh\nS0dE\r\n=gL42\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"35d13d1a20fe14c295e8589fe5960bc9b4da1925","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.d86fb6fac.0","@material/theme":"13.0.0-canary.d86fb6fac.0","@material/feature-targeting":"13.0.0-canary.d86fb6fac.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_13.0.0-canary.d86fb6fac.0_1629917631285_0.6366903840473723","host":"s3://npm-registry-packages"}},"13.0.0-canary.e8554dbbf.0":{"name":"@material/shape","version":"13.0.0-canary.e8554dbbf.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@13.0.0-canary.e8554dbbf.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a2ccd8205b06654d8de6107c43ad5d8ff1c5d996","tarball":"https://registry.npmjs.org/@material/shape/-/shape-13.0.0-canary.e8554dbbf.0.tgz","fileCount":14,"integrity":"sha512-yePIcc3S2b7sTTXGH68Io+oE4PsXWOkWxFXlEufvZ7yRIqc8WjTYQdbLH0iQWHPMNkuWG/mzT/4f+Wm7ZpKgnA==","signatures":[{"sig":"MEUCIQCM+8OzyM/mq7HhFlllYkOahST9ERkeho0HDHMCPp2veAIgK6K4shtkWir0MMw08QVPg0I2yaXnxRgLUGU/ix+XhiQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23388,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJr06CRA9TVsSAnZWagAAHPsP/12mOyt0+OkuSnAQk0oF\nH9NqB22U5ud4heZ1w+doyJOZoeS0/XFyUHMqc4u8Iz4SvgrHQ5d6qkIP9sO5\nKuF84Pkuh2aOzpYyTHfw5mXFvTMgp6D3iSslAfhKztuDqjDdV3L0NBteZDCh\nZASbPoIQSdoS/SVXUrj2mY+SCJGHGJozN1pgAp5SiypUxYmch/Vjjpo5ogaF\nWLrAGG8hvQQJ+hfrcStkPpGhTteMf4K3zHX7NhkbAiuuXgCODR8M4KjTai3r\nIgfvwAIeLoS4u0hGYjZm4p5xnmEbbi9Af2WWd/OnjNJ3vn/SLafnkOId26pL\nqJOlE9BxYfStI+ynkddS9ylRSZSQc1NDHFrbLhDIsd0lWM7PQoLwkCbFOxeN\ntLhw0AgmAfUp0TRADbbTDqv4mx5NktqXj6lVjBHN24NMH803RywCleQCrxPj\n1WFGbnN9IY/0/FM2k4+AJJV1O+aQNR2DiA9duQMAfYr1z7qAWp7kxz9xmoJu\n5cHQKVFscQnhvdIFwMvcIvvUJQkE/wXsTBC+qO+w9RvuCBsdWqFJO1LbNRxa\nv4eidq0nCmoGFoEKZIfjMTImxEtINAsoBBNK0UhDU3qKVVy59828tSjFFPBj\nogbi/6icijuf8qNEHyVu+EhUq9/9ahBJpbDKgfI8V5qN/zuavkPMUhVQK7OR\n2ow6\r\n=tOp8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"da636a8d32198c6289df3bcef39340bf76cf8265","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.e8554dbbf.0","@material/theme":"13.0.0-canary.e8554dbbf.0","@material/feature-targeting":"13.0.0-canary.e8554dbbf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_13.0.0-canary.e8554dbbf.0_1629928762272_0.5162489716243863","host":"s3://npm-registry-packages"}},"13.0.0-canary.877e3fb0d.0":{"name":"@material/shape","version":"13.0.0-canary.877e3fb0d.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@13.0.0-canary.877e3fb0d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6a305ea0b9ecd53e1a72cbf34c374e5d65d77da8","tarball":"https://registry.npmjs.org/@material/shape/-/shape-13.0.0-canary.877e3fb0d.0.tgz","fileCount":14,"integrity":"sha512-IO9mfnx5KBkZCtOzXYhgopcOxNKqFFLWgyocWdofzf6kPR6e60CtwbxYGsoEIrlWQATrzeLcv/lpYF8liC8YRA==","signatures":[{"sig":"MEYCIQDxY2xHtKTSCDM6XVSHmoShLxMkU1L5qGlBKs4utoi2gQIhAM741cCo37RF87oBXvAd9Eoaq1MCIDDvvyNbQni4wqw7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23388,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJ7VfCRA9TVsSAnZWagAAJkQP/1YEggsDWJmEOHaB/Iym\nq7TBCP/eJdbq96jrq6uo6eQRbyQ1WLTnkLiOqsr42e7awTwHG78/FPLphys+\nEuZC4ifGEVm9WGqs/r0Gnaksm7tjuMyPH29hPTqJ7sbSYSd7x7kXxYIcqJgP\nz7N7zi9emwDJVFzQ4JBD2mqsSUCKzOoR9+UyRMzkNL9vRN+hROd1/sCdDppS\nHt1fMPajW62NIYhVpcCB6uZXy4yc1oWSDyGVXenswzS0YWU41SlQyqVs7K9i\ni8DqT1l7hfZzauoELaNhxSKV+qeVAt5NDkBG82tWtIg3Al+Ak/MBl07hO00H\nCY/D05eblBa2OIsCZZlVceR58dIgaTQBnIS0nWcRdC/Qt6/vjp5cNi+OqVB2\ns1vTP9dJn5Dx68Cxi+oSW+V3J8vJarerIuokyFtPWr11BOWjjeNXSh4lHN2O\nBWzd/wLjEiuEZXFUgM/KwL7S4QhGSRjFY+Tbrr2IB5WT+VEFc0WZcsjz0zrU\ncaRGRT2C3CyJkMF8pefM7ptt0TuuIX0u/+6gsJD7MiZl31wysX/L+ZaI6p13\na47lEaLwU9JXD3dambJg0V+/4naIFkHZYz2CL0yBA9AgdSrn9GmWTeaSJINc\nuAeXp3BvBpebHPIeQdqgLGUGorQjdr9fVM/UPuq6b+vM4DY7kEKwx+2PYgFy\np4cL\r\n=pItz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"849a956f7ad3e0da0840469b917eb66537c875ff","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.877e3fb0d.0","@material/theme":"13.0.0-canary.877e3fb0d.0","@material/feature-targeting":"13.0.0-canary.877e3fb0d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_13.0.0-canary.877e3fb0d.0_1629992287365_0.3648748703923663","host":"s3://npm-registry-packages"}},"13.0.0-canary.6236f3576.0":{"name":"@material/shape","version":"13.0.0-canary.6236f3576.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@13.0.0-canary.6236f3576.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6789b7675e0115d78de5354a31721e104fe32e6b","tarball":"https://registry.npmjs.org/@material/shape/-/shape-13.0.0-canary.6236f3576.0.tgz","fileCount":14,"integrity":"sha512-Hrufkasv8O4Errb41ufykerjrwzEuFKlepgJt6HTN/xGEevOOrvsXvHISEa22Mt3EW8+5vnzMU+7coTnrhvWvg==","signatures":[{"sig":"MEUCIB2CYZuP1jIxGN0iXSHiQ7xf4McOhxTW+7BFVZkKUAV6AiEAhdk6oXPyAJpmQk5E4qzOTmyqhJcEM3F/+dMZFKnruFo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23388,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJ7vWCRA9TVsSAnZWagAAv0UP/1UTxNkGDGyv1XGX1ljU\n/ujOZVk6+PQXGBjaXF54C8S3vlYP69efBkGjbhbzvVU4MyUVZW9liL1xWuoh\nGKc45s1lV0L/lKxJ69h9Yic8KV5ZXkesH8EvakxArsJ9NWMDA2a7Krwjo/G/\nHwDRqIWRslYbfmidGcKCSxETWGFXuBe3u3cYL8TFFDPmVhmGmm8KDa3MhUSG\n2hXOd+2M6ELsGmWcdUF4oCmh7nQOkxrJst81amwkhLjUTBENpuqSR9cKrgLk\nwmwWNT6CSuNjK5lXC/+Kd+qtl4ildGXYhH0fpjr6+cVKufQH+F1Bb7IJsXr9\nbHKgkXGqi3DHnoW3L/1LXIbJ2/E6A7pyOappti8bygvaP00laEOrj3+ukaJF\ny17Ijph3ICQKRwQNyiyXGAn7zl3NcE8eQtPbHAKAG2axExrl6MxT6E/6cZrJ\nlNelOK/jVWHAOJMbb2q+UcOkV3kzLtQR6CFqO1bOXP6R9PC3i+apx2ixJWxP\nEqYTohxIk9/XuaAdx3ZPG5mhphDnTP46ikaOx2/tzNNty6Wk3LNKkBZCtpe5\nwXXWeF3A8bZQLZnIIYvcgo6JvUmAsBYgGYA763fSbGhKIeNfBZc8UGdl9uB2\n1iEIHFa7JREjL1oSLtzQqr1WkTva6Z2kL8ooCQDTsWqVu4F+s0e+16/JeKi8\nytry\r\n=XFLS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"27220fe16ebbbdcba193340cb99388e30976a2d7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.6236f3576.0","@material/theme":"13.0.0-canary.6236f3576.0","@material/feature-targeting":"13.0.0-canary.6236f3576.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_13.0.0-canary.6236f3576.0_1629993942281_0.5871369167192741","host":"s3://npm-registry-packages"}},"13.0.0-canary.1d19158a1.0":{"name":"@material/shape","version":"13.0.0-canary.1d19158a1.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@13.0.0-canary.1d19158a1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c3027cd8d2183937fa1fafe0d1f7a521d856440a","tarball":"https://registry.npmjs.org/@material/shape/-/shape-13.0.0-canary.1d19158a1.0.tgz","fileCount":14,"integrity":"sha512-w6QBIq+T2tYPPaHnrJ5NtEDALjTYHzr/+EolIcOhQLcGsqPq4bd5kF30I+rOnr2DGFa3YL+l2C0wOFBfgrGKCg==","signatures":[{"sig":"MEYCIQDroPfFPJRCz8ktgNfqczbNCtCcmln9oslqrasvk7McOAIhAOD1eWBX42AToB2pvQt3PDez654UtN8stYUEzCxfj8/9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23388,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJ8qyCRA9TVsSAnZWagAA6wcQAIKYdiyNaUrjBxmydaOI\nf9La8uJa+D0gzT9jT3wfEFp5FO8Cr4Kn6YvamoLU/VLRAN57dhHk7dxM1dwW\nMdGKp0mDyCVd3XS1YNcjj5Hit/vCCjqtH+lWYL2zpoWx2XJmlzuASjhGLeJ4\nb1eomWKTYeHfmrIEC9/pa5VGGet5BR7+l7F9DwsESF43v716lnojsJdg2Tsh\nYlP4Zd7gVLVBVOTgP4exfFEUMLGxuY1mPex1/EI3+Uxtr9qLKevHmvOkn6mK\nmg/pngwf5Patp7PL5HD81pe9vbtBSWy7yb2YIyvsSEGlK7E6xvxq+ntXvBmm\nCA1BuBXqQNMOzpEDgzTBiYoI9Sf5NTNn3f2OfbMVgUuarX4DSo0vR+MDQXEe\nmhfmUn+6thKwCqnVYshczhO2MyO47yJzyEMN14AqO5PP6JwThQgo4vJ/35py\nqTko4uDqNhbAgWe2qt4l3bh/Gab6hqbUKHlmBBbYmgAr+R34CSs/nrVwi7nS\nApoX9RAD++vj9qTK6yC5jVHiqZKMnqcJRNegfCrbhGquPz9X9qM+xSZyZDWx\n7AT/dn5mkcwox9V/2C7DbKOOSEaSNfdVgiAZxQOUsKpRB5etfyCeHQcP6Qoc\n1JXQDemwKoAA/1pgNW6XzvJbYrm9Tf2tzlRswwakHpMCwaYOoWkFctadHtsV\nzRxY\r\n=YQyn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"451d11fe02e89db73e3ac79cab01741c3da63ab6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.1d19158a1.0","@material/theme":"13.0.0-canary.1d19158a1.0","@material/feature-targeting":"13.0.0-canary.1d19158a1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_13.0.0-canary.1d19158a1.0_1629997745877_0.6309749048466042","host":"s3://npm-registry-packages"}},"13.0.0-canary.6adc9e83f.0":{"name":"@material/shape","version":"13.0.0-canary.6adc9e83f.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@13.0.0-canary.6adc9e83f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5ac4febca2069595d83d42db1eb747df0d855ed5","tarball":"https://registry.npmjs.org/@material/shape/-/shape-13.0.0-canary.6adc9e83f.0.tgz","fileCount":14,"integrity":"sha512-WQHrk4MiFG5hf9FGsO1YD+6YwlUS74YQbmP6ZicpTjp8bpRryyp+YIbuxqSJ3k6rtzo9VA6brAv++O38Adqbvg==","signatures":[{"sig":"MEYCIQC5Yf9iZHHwc97f2paFSGW2jFgyTtw/uTx5l/g1otr1YgIhANuwuyBPwCij7l7Dq8PBlBOYtgB07s1dbdrcMXXASInJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23388,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhLV9ICRA9TVsSAnZWagAA4OEP/3Xz881agcLxD4psrfDq\nuDydnS8ZeRY/t0TNOLe09M00coJrdl95HBITVUHVewUDR3WTkhI1f26QXcIW\nzquUB+9mGgd9xIoCfDRZ+7WHdDZ08CsLqLVht4+eL3eGa9H9henMAFLKVwWY\nqd30yWnRxrqRdgutI5Utm94EInxuJiKxBfCZ4kVPPIMPuAxF4j7zOhkzOkkQ\nH2i727mi4lT24h25wnGHfdOr8RBRnwIZ2eomhr3bCBh7On5RhtALzwsmmGyV\nB1qOPW+w8jyw8+pL2VlhRD3badXoIUZhnUQ3mhw22C3ZoyZYrnZUTw6ShvwX\nH/zh28nRcUk+ziyxnxms1GKzIP+FmnfWBCwU83b340Lt7l9+ae3eHhOcRqRt\nxmFX47LI2XhjO5c/ShToDQCsCFLu9PQZ+puBYGMHoBGEDL9gW+Rf44p88w56\n/SWq66tQ22xRoCaVrtsnu2NYEV5pJn4xpW+N92ckPBhbLThe13sUuWbXaFCf\nqhTc5TJcVU53DIuN4ie4ZlZThzFnoke6GzAvdLQ8Jz0wxIJSIoMJTJOTfU8L\n4hWM9sBGG7JrSNZQOF3aYnTLVnOnIAJLgOQ3nz3KJNFxaFe1kXI9OfGmlWMj\n7M0+uz29uO5m/S8ExPGP9UP1sDFMxSKuy8k+wvLYCWmHWySfaxrO8rOMBdDx\nXudj\r\n=ohPJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"d3d9f017c96584c46d77544b9f0dcb6e22eeeede","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.6adc9e83f.0","@material/theme":"13.0.0-canary.6adc9e83f.0","@material/feature-targeting":"13.0.0-canary.6adc9e83f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_13.0.0-canary.6adc9e83f.0_1630363464517_0.8286714163853439","host":"s3://npm-registry-packages"}},"13.0.0-canary.d082790f0.0":{"name":"@material/shape","version":"13.0.0-canary.d082790f0.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@13.0.0-canary.d082790f0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cdae90fc03e91b7dd06b805dc282076cbfa64642","tarball":"https://registry.npmjs.org/@material/shape/-/shape-13.0.0-canary.d082790f0.0.tgz","fileCount":14,"integrity":"sha512-+O9aEI4Q+x/27z09Tv5p73siVkHs/VLsTacoxUDHEd9eFQ1ZZbRKw+/Zx/8f3m0hdbNE47LrHsbOPmMTTFffAw==","signatures":[{"sig":"MEYCIQCU5XfH5LCDyiquuDFX6X+Y2NjAcAgCRkYLq96dm3OBBgIhALkS/4UdEwjgJwRuXySzbVyeqJYTCICjZxGxidHXWbVi","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23388,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhL/aJCRA9TVsSAnZWagAARt0P/0Ev5NhUVr8M1MU30Qlj\nN5xDMhxE6EtmFhwghiTUd9HfC/dbHMKJZPil/KCSS2SJMCkwkcHPyPPyRWuo\n5NazOvZharBGtubRJcUM8Xe5baw6v/cJuupDZTk3TE/itD2P5sYHjXO0aCRS\n3w/EEqoRlC1fglsCuTT4GzVir2QtEIJq6pwIFLKWP//FOtEmsC2fDovCcbwa\nTt4dgxoWLrsy/fReCFr6MOaiOb8+sFgJwV1/b59bb+R3cjXGokbee6jqYDnj\nDjpR41cyKT7psncLLKRc01sD3ikeazAnP1r4VKDDU+e4cyuDQpf1x6+LC61Q\nXWiUbBnzihc20xbOix6OAOnOcNhYvmORTxvqTwzLfPPCWaHGgkl+PcLtlYvO\nNLMLFmMP8BCQuqKWONJIRO/Qoei+ptHR1QolDQeD3z1bO8HSRH9jYXVNmaf0\nhLkS/ofj5N3G8hk5BEGt9blqHWKz4SdA2TJo1ergHH6lgY5iGjJ9k6I9v8vU\nZGYSceouW5yeOJuQF19o01vEhvN3fBefkzDeF5X+ZXsPiie3rcuBIuv9Snjm\n06ru+V8AzQiu6+bN9wObXR4jSEdkaH4n2DDZcEBXYCRCdmQ5wuI37YRGcf4J\npXyoD25IUZSx3wWY6FMKg30QdCo3AQnSNVQrQ29Zf+bZsDSxmy/0Ggd/JGuI\nMfjO\r\n=gXzw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"77212852cf39af4379f15c0daae076eb8b562c15","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.d082790f0.0","@material/theme":"13.0.0-canary.d082790f0.0","@material/feature-targeting":"13.0.0-canary.d082790f0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_13.0.0-canary.d082790f0.0_1630533257294_0.23389979104658254","host":"s3://npm-registry-packages"}},"13.0.0-canary.e2c4f0196.0":{"name":"@material/shape","version":"13.0.0-canary.e2c4f0196.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@13.0.0-canary.e2c4f0196.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d86dd29aec92380f2af3aec9456067c6076a85a0","tarball":"https://registry.npmjs.org/@material/shape/-/shape-13.0.0-canary.e2c4f0196.0.tgz","fileCount":14,"integrity":"sha512-HYs2kmWW10mcA4o/RvIa3L8OX4cBvdUzqXzUffXMRHDKxSR79CjaAxQJ60eEVaRtu6rEMxi1JMAkgSqOjqZ9QQ==","signatures":[{"sig":"MEUCIQD95pHV5j568HV8gm9BG/MWfbaExWB1R2x9Va6V7HMUhwIgEiuqJiUSMILl3Q1kFUdOkKaRluAZNnpJbh8P7PPKDZw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23388,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMDLCCRA9TVsSAnZWagAAj6oP/2uBLfl2mTSQYdqN72WC\n1hlNptL4L2zRFCiXhcxe97AoTbLXzkEIPXnrfOVAV/Lb1NVZ+P2oGA4IZIPR\nlBWs3W0PJlebyO4CQEDTSsrXn/ImNQk34u5yojoQ1yFnqbGCNnAscWcgIsFT\ns9rTYRIWUVCvoZUCWxA95yHW/fEwkM6FWdhqdOTAMyqhf42E6SgQHdt3Brk6\nF4hh+g1NpPoV5eQk4qRAU6l8aAR4uzO/J4oNtU0WB6oDImdCfmbI4u39ZXEn\n3RHqstZ1UWN6cEQVYzO2rAK+cEYi7vJqTgrNX8mUEbboGSFLPu40kqpOrhH3\nwmpYqbymHc4SYe9/bR5WiGihQWlVSLBpOsAOBe0EFWJ95NQNWgRNZMnyjc4M\nIv/j3mQydreAdLEL+Qqqxs4G3RF5dMth0l5250J1ZkoC9HS+8/x6lMy4Gdex\n3gJlj8jvUoq45BMewOv3kVSR4qZSzGRRbX0FRs9CcATWdW67XpCE4g8lLccu\nl+hMGZXsj0mV4iBaAMFqSFn4Mp5oT7827EaucVqfNcFJBvUbBJY06wrVCv13\n8dTuln93F42BYbuAGax7GvDvJWql5rjWtlBN0viXKQIF8UhTjhdyOSZmkOXt\naMh8PfWR02WeBYkf0DY173RSr4pLPZHDBvQcvqGj/8iKRQyuytBkDE0VQ9br\nhv7e\r\n=vV7t\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"2100e21debb7fbebda0966c953fb24e1964c19fa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.e2c4f0196.0","@material/theme":"13.0.0-canary.e2c4f0196.0","@material/feature-targeting":"13.0.0-canary.e2c4f0196.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_13.0.0-canary.e2c4f0196.0_1630548674048_0.9469516691553759","host":"s3://npm-registry-packages"}},"13.0.0-canary.611db508e.0":{"name":"@material/shape","version":"13.0.0-canary.611db508e.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@13.0.0-canary.611db508e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6e4583023182fe73fd9429171d6b4f301a0dbc10","tarball":"https://registry.npmjs.org/@material/shape/-/shape-13.0.0-canary.611db508e.0.tgz","fileCount":14,"integrity":"sha512-h7Y8BYloLSpHhX5sqvz9AxoBEoh92uLv7ZAoCUB9lYsHYMnJtkWsgR4rw4viuiBZi6MZDaOfwmtUTw84juD9rg==","signatures":[{"sig":"MEUCICJ7uA6TE40Ckn9oUV7+N8/W4gVerKuGWl8OKmNozEV5AiEAl4Em5ayrE/ssYGV8Cnh95CoyKE5OHVoN3cDGJdmZn+w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23388,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMEG6CRA9TVsSAnZWagAAMJcP/1QbmBpkD0ulU/O9eWdM\nPlH/J+7yB1rLWcyguisuSxTYncqGKFS1HUM2hpkZjl4oG9DjIYwWp3nMQL4R\nwydfylGpbIelVEF1skrOwSbZF9PoLzc8S2k7fludpQ03iOt1Oa425rRKX15v\n/+dP5ZGtLse6TZr9/togwyAIOw95XW4z3ddJamXv+Gkou7hRT+eBr4ahnTkY\nvDSlOdVEUsU5TNnK70L6/ey65n7UvH0TZkmYPmyd/Xv5j3Ybe420aZytdQ+J\nYA+zX7q/3T1w1KpJHkcqkV+cjuCqYHLm5BxUteQd2kE/ZRCn9+B4Fl8tkohW\nERT+BGoTiOfwgjcrE/AZ5VchOiRxuktVkTAQouB+sXiNckfn+tOcqxkXW4OO\n2X1MlKAK7X3enMpM6sIqZxaNTMPhN92+FeYSiWdbOv5lpXeD7PRRtvSuMHG4\ntjLLd7r9KTqqw2iUjhj3pZE6oniTEMPJs0l7UY7nfy9bj/fj8SAhyWDSjRBK\nyTxLGPINwpeu7dMpK6H67Lv3EDeQidBIcCgArNshoz94N3lWCBb9Ah3xteMN\njeWUTmjHNNKyBhQky64/n5cJJ9ZDtboxUYjLoCci0Xq8obygUAhNj4BJeHAb\nOKRcmxCcnly+UfI7kST3NM52uX+GBsEAO2uqS4ia7ZJwi/ZXUkU4mnz2S2Wu\nkU3X\r\n=BEdt\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"5d75be4b0e067fa5d6477869a053c630a67cd643","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.611db508e.0","@material/theme":"13.0.0-canary.611db508e.0","@material/feature-targeting":"13.0.0-canary.611db508e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_13.0.0-canary.611db508e.0_1630552506287_0.9709817159676049","host":"s3://npm-registry-packages"}},"13.0.0-canary.d4706933f.0":{"name":"@material/shape","version":"13.0.0-canary.d4706933f.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@13.0.0-canary.d4706933f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cbf7d5002023f0deacb5bb58382156d07c78722d","tarball":"https://registry.npmjs.org/@material/shape/-/shape-13.0.0-canary.d4706933f.0.tgz","fileCount":14,"integrity":"sha512-NuyXyPjV+IHCoFvqVavr22heCcx+IzU7JeswAAvS4ihKsdruqPQ3dxxEZ+sbF19/PYcd4vOr4nEp1opmyXxndw==","signatures":[{"sig":"MEYCIQCZ/WvK9AvhG1kAq9H+9DS4JEf6s3uAHIgn1XGG5QYWHgIhAOe+emdtjrrxXKhjgAq+dwvyNK7DhpBmeElKy1KP/fRl","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23388,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMO/ECRA9TVsSAnZWagAAODQP/1R/vbhB37rWJWBgvuQI\nAGjYrpgn2cL0NfetPH4K9v03K45OwVGyDfa9cxAztMpc33gR7ibnDeUFM276\nSkUFTWvVKQC57MRupkyzMRkswHX5uwm+GQpM70zdtk6NIcgQBt/kqzYZY0VY\nIYtG9ZTwzSPaEG21gpYOiw6ziwYVPGL1CTl1lMqS2SOePwsd6VegVhCJx0KT\ncJcr8xEjo3HLU1iDUvG+mF0pKY6Pc63vZd4FDCosnljGA9PchWsXv1Nz3K4e\nyVrmjowUPF08kLQ1QnzkJGQGcfTc/g5Lp/ezo73E+Sihv2fWi6M2I+mchJrn\nZlbDzDzAlKQMlYKPDXhWjVGIXeEU9vJERp2Ilf/bO2nWYxtqOX4psda6VyTD\nxDkQHmOfUJp4eStEwoGXqrQEC2SQ5o4MLn2OeDksYx7WvHYb4jIWiegZIL6E\nkKRvBqrsFOA/2Qs3vjN2lBKvL1JOQ3rpKhZv5l1sRG16VMRcoALKmPxqLCnT\nLLvodpOYeT9Zo1sFBlhjtX3gF5scfQ0Az4EKYeehxPlBZoQqZXAQ0X+6sedS\nj1WJpyQbGtVIUhDI/TFfAt16D0dp37PwPZUmnkO252CTCrvpHP/BJoVPpgeM\n3zb7a0WiviO+RBtUKMAVYKBWSLDFZaSnnCPT5/17qfySHAKhBL7IYW/O6pl8\nmMLp\r\n=aU6F\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"9e7edb1e0621060d55bf2765cadc8f2ffcfa0f30","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.d4706933f.0","@material/theme":"13.0.0-canary.d4706933f.0","@material/feature-targeting":"13.0.0-canary.d4706933f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_13.0.0-canary.d4706933f.0_1630597060835_0.8559477268301037","host":"s3://npm-registry-packages"}},"13.0.0-canary.c16fe03ce.0":{"name":"@material/shape","version":"13.0.0-canary.c16fe03ce.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@13.0.0-canary.c16fe03ce.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bc4e71fe6b74754ca08b139e787fdaf7446b9a83","tarball":"https://registry.npmjs.org/@material/shape/-/shape-13.0.0-canary.c16fe03ce.0.tgz","fileCount":14,"integrity":"sha512-MGt+2/xMgEp/OGVXb19q6eyzx/4pobLz26OywfIPt1KeforcfUDSf6I9fq/KRIkTIpV27D4f7f5DyGjexjmoow==","signatures":[{"sig":"MEYCIQDlD9wYjKdNEme/YSRkmp/FSBOvYBRaO1xuTYqtXXaCGAIhAMT6xQbqPfKf7WV8dQTXJc0gpHHVMHLvfoaljst7zl/W","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23388,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMQ2KCRA9TVsSAnZWagAAQxUP/0MvaJXSll8KgKF9B6+Z\nhRs3iQGHBPBgo4dJyDjKg3nPjoAwkmTBmXyuCpHFdLlhZrApJMBobJZW9/HV\nkHcazPce1dzxX67+ZRPr7fkSOSqTQYF+ge1Ux8J21GwcVFRSclnNjPnG+IqC\nrO0r8d4uNP2RSn0m7Hr9ngUthO6dVM7nmcpY1XZ6a0VLx/05YSq6p2UyGvHV\n9WWEx8ILtVPmDbjgjKIDlxMFnqbum3LARcG8rOs6LzlIwaJmmzWvZowRADn4\nYe5ZSOZKSbZDejPZaJrKiSseFk0C2pYl3nxB0KcI/uP185GTt0OvbuSaPAI9\nZ1tOf5Ymtdl9DpJ+KVOa0qCnE40Ne1IzcYINuL8NHbU1gVs3I84aUDO/rBg5\n3gT8Ztm6na6tEiDIllwpxP7qm823flBbVG7LZ+5WHyddt1HTpKrcRFdg+sGq\nBGwMiKTIzv1qPtQjHtcu1g9rl8PHS/JZkaY53jzfCedfOkq6griTN8jcgv6i\nebD+leHXdoQW59RiYG0vhhbnZevi4TTalFnp2i19MtVuPD+mQkqHJxnUT4xz\npdet/loL3YV43daWJ4o7JFAgx4lnTMoA3eeo3ei/49RUOHhtS/QOB/LJKaf2\nAoLUhFkY8aP1ng23mEnq/+/xDBeiJJI/W/0vYu4QlR+15MXvM8kusRFysXWN\nAiWq\r\n=jYuA\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"28281c91b41ff8002401a21d1210e0fc629d55ae","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.c16fe03ce.0","@material/theme":"13.0.0-canary.c16fe03ce.0","@material/feature-targeting":"13.0.0-canary.c16fe03ce.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_13.0.0-canary.c16fe03ce.0_1630604682303_0.29966011069279497","host":"s3://npm-registry-packages"}},"13.0.0-canary.9203a958a.0":{"name":"@material/shape","version":"13.0.0-canary.9203a958a.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@13.0.0-canary.9203a958a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c713e853b39445aa935d9cb1a8f3d134f82bc856","tarball":"https://registry.npmjs.org/@material/shape/-/shape-13.0.0-canary.9203a958a.0.tgz","fileCount":14,"integrity":"sha512-ShJiCEaZBzwuyPTymSuzOb8E1rAxZkB/eY8QdG+wk+ZWc5Bjfem3SCMXrCgXMqsKEDyREmCNWXljclSo3KVMoQ==","signatures":[{"sig":"MEYCIQDs2jkCEjfFCVoHH5SNQVpVxkIMNZbopJIitmImJjRmTwIhAKYfuJO4niPHPPabH/cC/goCRlmVqhxCrT1zMt7JprdM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMWJMCRA9TVsSAnZWagAAOQgQAKM/pVEQejQFDGOVj0W1\nN1eGUPMR1ZvauCsBr5VBgbFqi9XU/LNAa2yJSDd3ovzU36GHH7uuB5/ZQLqo\njufsLPGHRjtkigOExJ4zemeQnHHvMo2rJfuXsWVOrUFw1txSwecOiEyG4I21\nsb2tlj6xm8DVjGiiydoJJ0CNDEiNyX35R8TiAwKZFU7Ycx5N/78HNjdkMl64\nVTcSR8lDiHtT9AQSQ3ADyg5Bmc1VAOdIO2kqHwXjo4KLiQzNQnBgK7XLZen+\nIEwNxOjUk3aZql9jcIB3RMo2mQDiDpnHeIaGSHbQK3J0cVp+w9P917lHO2b+\n68CqegrlCbPSEH850X+3Ga9m3HcRz1PfJIfEjw3PEayksW737pXSlVGp7n+p\np88ewkymzgJsrGkZIMY6OkaTh/iHZ1aQS457KU4kTvwRjEAbnrgZVXf6P0iV\noTLmRJufIOcXUW0OnQvzy+JyyUtMFHgvSUZ045gkSVAXIgH8xi+D+sIo0whd\nhFYCguzhrufn2eJU6Ntwdp1Xdax62OfEQkkqfNHJBRQdvFoR8S/nzbU7fSB7\n0e6z+W9pD0Q58HRMD+0qLTKL8SsuBsA/Rqnj80Ud2/+vZM9Mfl/MPCVTO/Hs\nzvDD8gR2+ChqSj3pyuPs77Nn99iTxPDs5xJuLR/nRpEmrHqREJRgk3O15YPe\nD7xy\r\n=zLAg\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"2e0f9de34d700b0d1eabd5186c5b5cf8080eaf74","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.9203a958a.0","@material/theme":"13.0.0-canary.9203a958a.0","@material/feature-targeting":"13.0.0-canary.9203a958a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_13.0.0-canary.9203a958a.0_1630626380131_0.6381377112338655","host":"s3://npm-registry-packages"}},"13.0.0-canary.fddd5ae93.0":{"name":"@material/shape","version":"13.0.0-canary.fddd5ae93.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@13.0.0-canary.fddd5ae93.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"006b3ec4f79728de56727f98a639c783285f7f92","tarball":"https://registry.npmjs.org/@material/shape/-/shape-13.0.0-canary.fddd5ae93.0.tgz","fileCount":14,"integrity":"sha512-7exEPU1t6J9LlLF2rQCc44jeOKBwt76XDgSxL7WJIj/Bm0Gr2TklxRVrh4f9ETb+Em2w3JVV4+uUKt1WEuBzaw==","signatures":[{"sig":"MEUCIDW6JHacGzznSCKxhXXPK8APPOb3EheQ4NxLyfzkj+SqAiEAovIoOb3fGCW8HtqPFWuRUMQtGUAsFl1UvxwrHluSZD8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMc7tCRA9TVsSAnZWagAACQAQAJrscgo0hgDexRzgnP/D\nU6t6pjlXch9FwP1QgCbn8LQRyYz6QwBS/n5gUPfQzp1H0R9+DsXmvgKLrT0E\nccW/caF0IfIT8CvObRsILkxdteVVsbIEhYKbOcv5q7TdcSGPcZfee0gqQz6I\nU2vApGgA58WtSdnQNshJ6gwHpWIxmgdtSg5A6MEQO+rCDaSQXtopHtwApjt7\nrBCn5iWn5b8MAPIdYhyrnNZubHWTO7cNu39P59OH4FeyucsHCvU7QZrnNRp0\nNO4kyrEpeKtNeqPDfZ8UVPpRaeSxFdPpErqvSAjbXZg9yTtUlNM/yeKx/4NL\noJM17dRinXCmRmIQPhCQ20e5k76nC441xzsj7+pyU9qX4KFpya6TzGC2hWt+\n7oCWM9j7oM/VEqY07qIvQYvpiVldY/3PJrUb3x2Y8U/k62IwWElNgPAy0xiC\nwj00fRAwndysy5h3ObCh9Vucd5MwCGRA3uPXTJNGoBdxoogPzbxWFdTf4gio\ndyhLcu5SIm4+J5mV4yb9Qv0OFylcxkMsyJw68XkXcIFWT/O+zDinX6ORr5Q8\naGQ0Qg2e+7VRfkgP8b1hffbx/YCVx8mr34ZxSHfjG8FZI26xYzl4Pue9Ny8T\nGqw7CpTzGEMVRK7AHx39yKju8Zpq/NTXN3FD36na9OaaD9WGyVmUYy2uZqEH\nj0u/\r\n=ElSy\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"b5407901afd7b18f851e64db0350e0c38797ae29","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.fddd5ae93.0","@material/theme":"13.0.0-canary.fddd5ae93.0","@material/feature-targeting":"13.0.0-canary.fddd5ae93.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_13.0.0-canary.fddd5ae93.0_1630654189601_0.774457874196796","host":"s3://npm-registry-packages"}},"13.0.0-canary.117599a8b.0":{"name":"@material/shape","version":"13.0.0-canary.117599a8b.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@13.0.0-canary.117599a8b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b77f934bc274d8099d1689def523d57eccd2e346","tarball":"https://registry.npmjs.org/@material/shape/-/shape-13.0.0-canary.117599a8b.0.tgz","fileCount":14,"integrity":"sha512-xvBDaWFh0Nt2lAxXIv+0Avicksj6zZwZdypum/fh0p6P15hagAHfdg8MzOVHAFztsqo4GcPCzOSznL8eB8I36A==","signatures":[{"sig":"MEYCIQDmg4haqWhhdVxqOpw6IkwhtLvzFe7ayzoEQDEEElhMPQIhAOPbDXqZXV/ZkDsrWOtVP+3dBrIAyxg6/b6HBCWoieM9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMc9NCRA9TVsSAnZWagAA43cP/RZR8Jy9rHgqTUxUkStA\n3qIVWYKoA2D93OoIk3xKwIQYDufpCSAyQ4BT0rnPGdOW66eU4eUgE3ZW0ksk\nTYDCyuTpzRJ9MDLXk4CZ8ywtJwFf3jI4qJtmkC9P7OBZsNSTNS7Sflyt0DOB\nMbrTp+WY+HuQThEOOEiGldA8oydVJSQHC+KfUV/wQF9uSuGKymX/dQtIGx2K\nwlH0eHzPxsaMDNK3QwAcojSgm6GPNqUUsbVXxtX9TfV6TZMz5ic+Bgngu3xZ\nUsmEiiw8m/w2umq1m8sWIaqkmYL/MAaknokdNN8PORfyvOJq8WWAkQy0dpYl\nXyDLy6FFg6z+xmynmQd6fnfOWdAJRT6Gdp7HOyDNaNIo4W42kAfAlt4Fy43G\nlc8H/gWPS1t+CEITdFv4SSURx+ECPyvKwN4Tv2Z3Ly60YMVgjNF968kSy2Ft\naHK8hEau3NQshdwOuOVE8V4HpJzRmjn288Tre9rtTSVtLzSmkAcQAddNO6Hb\nGBjNDVB0eSkdtJFZvG+rxzR0sW9fX7pAq1sbqdekA/imIU9/w8RJb0+NzzXy\ncajJuwj9qvpk7owvzXbcGV2cOPX2WaSHlUpD0yPyB4jRzdS3vFdheRTpGPU8\nUJET6F9BN0/sg0KwPw7Du9IpFifaZX+8KpczgMu9OG/ESziVftuiUcGPpa4s\n1aWd\r\n=ykeR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"3dd17eaeb796b36aeda593de120f16c60ff06a0f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.117599a8b.0","@material/theme":"13.0.0-canary.117599a8b.0","@material/feature-targeting":"13.0.0-canary.117599a8b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_13.0.0-canary.117599a8b.0_1630654284976_0.53903263231981","host":"s3://npm-registry-packages"}},"13.0.0-canary.e4180d07b.0":{"name":"@material/shape","version":"13.0.0-canary.e4180d07b.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@13.0.0-canary.e4180d07b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0ac46df759a3df77606a75dd48420b3e934d357e","tarball":"https://registry.npmjs.org/@material/shape/-/shape-13.0.0-canary.e4180d07b.0.tgz","fileCount":14,"integrity":"sha512-1L+Q5ojNMhl4E1vtabT0pIY/iOk07sJqOaxgJGC5Ds06/+KPJpCI96Ritph0pNV18wmS4N1Qeo/E2kTHmaTPjg==","signatures":[{"sig":"MEUCIQDX0RpZm72GCvja77dIUyhpKQjrjx6duc7zNtUsO7ONQQIgf7pef7sMeu5FFYoAUUw9burbarIl5eX1fRKNM0dDe3Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMc9qCRA9TVsSAnZWagAALdgP/jMOh7sII5gJmV8ykydw\nozRxoDYRTQSOWooQ9rEn4/e5EJkX1HIajK7Nez7VUXZI+8w+Fnk3k2ziCs+Y\nVdOdk9SQnsRzDrEaiW4eSfUESukwUBNhP1eI8HxMpWuVtOw2WftC9U1XB7At\njKZnGHnozOESTe7y8oZ036vmXR3anvj3S9aNRF61OiZFQu3PAxiZOG9oZKTc\nkltRO13X+SX9t4cmeUM1WiT6KfbV0Si2RZtgW7wvkOXwAuV7TI8JYWLlMdUs\ng9LdOlLG6ZifI5j5q8KqaV3txDts1en9eAYKM+sFEVqtijU/WsuvNWzjVqgU\ng+OFAq+bjuEZDAvoEwVqbKbdrD0EQiRR32D6rrtH1mRpJZbhE/3tq3JG59Tw\nwROrbmj63ozA95z2k1UCk3HRzS7sNESM5ArGbZhOL/x3sV/0BatG3mDE8q6d\nvb5Xg77LCu1zNTov0nMTlTf61rf5zakjFbW+JKkntv1FxqPO79r8i7Ivm2Jf\nBI4+miqH4rWUpbS3siByeE7G4CV4tAqk8lGDP1n5ByfI21v7MiGB/d+wvAda\nJnRcHzGJ+Haargawv8iqymK7VJgql6unFUZPzI1R8eReGltiYm5jjLx1CafK\nwpD73sxErs3tml+aYvmUD7msG0Ll/kI2BMP2XRiN73ANP9WRJmuVHdHxth3i\nt/46\r\n=+EgS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"3b94d02f75df256cd0543dbdf5062823ee527d4f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.e4180d07b.0","@material/theme":"13.0.0-canary.e4180d07b.0","@material/feature-targeting":"13.0.0-canary.e4180d07b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_13.0.0-canary.e4180d07b.0_1630654314595_0.5763693859747272","host":"s3://npm-registry-packages"}},"13.0.0-canary.42d175efc.0":{"name":"@material/shape","version":"13.0.0-canary.42d175efc.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@13.0.0-canary.42d175efc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7905150816880ceadc83be6807b4247375715132","tarball":"https://registry.npmjs.org/@material/shape/-/shape-13.0.0-canary.42d175efc.0.tgz","fileCount":14,"integrity":"sha512-BzQxGYBlPFXn1xAFlsHbtav9mCXeorH4gnk2CybFMoNacgPWHlBQHeAS4fS/EjEFDXfkahE0Zw0CUZJerTDwxA==","signatures":[{"sig":"MEQCIDbz03iTBy0oQtgGgH+2CMFvIZustRJpq7EJUK2m9i/yAiBHUkKNjLyZJTaj4+moS/aJF2iywAjKYkta2XViOpZbnA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMkJ3CRA9TVsSAnZWagAAAKYP/1RKMqtvuWSvLSpOd0X6\nygaoZ5YKwY9T2sKD7epK3LTh6ChymyeHwy50EniQM3sC/1urC37kE6gefyJ6\nRtQ8eUyinyNC+kQlCafpUUQE3sBq/FwFWechhJOQcNIjcoe02tgVDwpo57Fu\njUvTD2fT3LDGhbgin4ZFrObkmdWTj3tcmN6tRZ3lY2ACTleOXeWNfxGNLHFz\nbA6M0B9U8TINaHUM8apuo4O2fK4IhThdL6riUxKbJOZ+POl275X776XSYZgh\nLZmZXLTyKFFSAM0DJqAL9M2tudAqjCr32m44MazkODKJRKYmmjLGCuhuB8bD\nRDYRt59i3aR9TdVA+qUB91b9ZztPI+qa78EUuGQapdM8G3TZ4ubQS6laup/X\nvNiAke3o0yDV28DFoC3hXYE1kUIfCruvDHfnGJG9RGhtQyrfMaEkAOVgvGgv\nLfgEKxm9P/e//r9xI5nUamP1pqS7eSGDoyAHferHBAxOLJ5tUAYe9GurErTr\nPCMp5s6z/3lDx/yO3PRi6CHGxWwW/P7yGjj/D52YB+Q/J6WefXTk5NLgj7Zu\nhxSFJ6/svTRHADkzEk0GI+7cqolZLn7rS7VIBtuMCfYAwF9bqqVOnuyStUxL\nbgYptBPiack1wSSAxAJcevNH1LtXfmrCbH4D3ZMXhf8h0Lj9pLkDkIukRwgY\npIkR\r\n=UpLA\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"64e749d9e76a60e5559d8b19e4b57da1f44ebf0d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.42d175efc.0","@material/theme":"13.0.0-canary.42d175efc.0","@material/feature-targeting":"13.0.0-canary.42d175efc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_13.0.0-canary.42d175efc.0_1630683767109_0.684775451439209","host":"s3://npm-registry-packages"}},"13.0.0-canary.72464476c.0":{"name":"@material/shape","version":"13.0.0-canary.72464476c.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@13.0.0-canary.72464476c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c4a0ae2b5f7f772bdfe41519bf6fcc543ba85870","tarball":"https://registry.npmjs.org/@material/shape/-/shape-13.0.0-canary.72464476c.0.tgz","fileCount":14,"integrity":"sha512-t3hrA9x/jtKxUFhf+rhBZo9QQ2DwAKZ4weXUGtGUF7HpR/9o6t/gi/Qupo/EtrVNPKoz2E3Z7+eEinZs8+gvyg==","signatures":[{"sig":"MEUCIB9NOAx6QkBxek0GEXIZIbUeXMkS9M4lZyiUudsbtnA1AiEA+uFpya0A4UGHM11LCGM4gVm8mvchEtMgHzpsdlMG0Sg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhN4ZvCRA9TVsSAnZWagAAW2gP/Au2Kj6ovENdXveJ38jF\nGP/vhplVES5XbtcaQM6tNZGalj++tGbwAKHaksi3Sv1Eja2z6JvVvySpN7W2\nQl90IOsmo3Moclf3GuFmmaA5xy0QdkU/OezcKWzYuwvVRWft8n9RQewlQMZL\n6sU8Y0SdYJmQAUPK2Et2f8g8ITA+T1VZSjYZ9u/9CwCsXf8WMsuDedbANU4z\nJ5txikbagone0FfEFD/1R4OXNA5Xgcq1zqDK9hRgijqkOJW4AEeVFkmkAiZD\nnSkZAn+QsThybqsCHYaemzly8zXHUSGpim0vuJJEgSr8KvMOCPE9AHdt9cut\nW+fbxhvFDCCixEOWMLq09r7JtGjn3F9OrHvPNpN8bfkBTdXOIVJCulGbl6BL\nAacVmnDdD6GwH5/siahrja0IipaFyi/MN3e7smqjiVhlu0q6Sja9UW+qpBvr\nxGBmHeLRSDG4nYRCTJ29SIyHjk8bti4CadSqgAnHhOvJwEz6ISXWFauDaVXq\nSHH38OnKcdJ6gLenz5RHe1f5TMpuspg0xgR7JEWKBrQAJNNAb4MPohAoBJ8D\nerF4BTT8pydDGmF8W0hY++5ehRqYDo2KQAuKrhMGRjFtn/b3gD/dOyIUEZbP\nSP1FukldBEdRU6YK9nQNDCI/l1wLiZDzG4c9V09Qw2XeFK3NFxZTG4qXfasA\njZxd\r\n=pV0U\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"4c409a18f3ef0a7ee6f9b223a514471c0515b639","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.72464476c.0","@material/theme":"13.0.0-canary.72464476c.0","@material/feature-targeting":"13.0.0-canary.72464476c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_13.0.0-canary.72464476c.0_1631028847224_0.43812218669699154","host":"s3://npm-registry-packages"}},"13.0.0-canary.37d4db866.0":{"name":"@material/shape","version":"13.0.0-canary.37d4db866.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@13.0.0-canary.37d4db866.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e8c2985e380cefa850d0d664a51cf57da8b710d1","tarball":"https://registry.npmjs.org/@material/shape/-/shape-13.0.0-canary.37d4db866.0.tgz","fileCount":14,"integrity":"sha512-tw12xMpvGa/PAp+Et8IAzvGKmw/tVNo/ZmsWvZ778nnrurOPHC9cLLdQe1gLM8P/mCAtSoJK30V6eU2R70g1Bw==","signatures":[{"sig":"MEYCIQDY7OA6cPcIB3ClWm7n5pepgM7tJFO7dw3M6+xgJfDbyQIhANXjzQQrTvpphYrmPezT52jWhsbkZvhTZvT4t3vY41mz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOhsyCRA9TVsSAnZWagAAXXoQAIK1cltLY0zm8nSpPHvk\ndj3S2YE84ON0zHx32o56Sf98DkSd1h+bYw9doXTVroCH0WxSIAZvkFN5nidr\nKPzfPaZUbNdnFknb2l6jZpiyII1Uj8e29Osnp9SL9al4o4bN2b40wx/xVOpa\nbZB20wum+iqigDS+zaP50xID6RE5N3pP38Klo9S3Se2bSf73Wd16r2xgRVeR\nAGCVafFs/M+KtEcG9ectUuw7V/YKYgRuBQz6WMGG1ALALrMEOD6VmEJKsRer\nLDwvYR1oHe1xLBShFwMGEuTNXjs+GchamHN+zp5S/qglIV/3uYJDO8+pjMlO\nbfhSXpALygfv8UzP4ZCHJih5Z53uz/AWd2m5g0cChivP4zImBTw2Mjl9q6c4\nqZJFRR7VvfB2lEC/r1d7gYNyZ8aDcthTqsvXCdgfXAneYx600hP8N/L0k8xF\n6Cfm+og53aAZx5gnuMP/lMAyztWsrZ3WXzlbir0nE/A20JX2Qle3UNIcWcaT\ncIQMS/9jViqTyCGTKHUu3vIxDWh2AISZx/zfKsxoDfhU2uGSGScNuXaVGRO3\n1HkUKfkDtqWpxAHhazibpPdwhUrRgjeA1QwDZiaosDs8qv7WEuVL5CVFSpp9\n37PAUgjIy0X07yllqOSmdkumsrzTYpNkIBsa4Z6qLp8rIgLfl33On9dXd8Z5\nlNwX\r\n=2OtB\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"25270b452713f831fa1adf302fa3f2c357ba759a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.37d4db866.0","@material/theme":"13.0.0-canary.37d4db866.0","@material/feature-targeting":"13.0.0-canary.37d4db866.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_13.0.0-canary.37d4db866.0_1631198002042_0.4182637077324616","host":"s3://npm-registry-packages"}},"13.0.0-canary.6df682e74.0":{"name":"@material/shape","version":"13.0.0-canary.6df682e74.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@13.0.0-canary.6df682e74.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a89d9cb03e911c3504626ef42b660661d19b62ca","tarball":"https://registry.npmjs.org/@material/shape/-/shape-13.0.0-canary.6df682e74.0.tgz","fileCount":14,"integrity":"sha512-FDnNtBkHnZRqU9WOZpF79M8iiGCn+7Ta+4iDHf4iniY5l5Dr6mdzgYgpbSSRD3xz8NRuGAb4ikWswWsItJ8y2Q==","signatures":[{"sig":"MEQCIEAfBpxfDXL1sKSEkYM0TeAoAgLOPxH6RIaGrmEGH9L5AiA39xsOv/KDOxEbRUDfbJ7bVmLbIXTpqQH13fp5YaujDg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOiuLCRA9TVsSAnZWagAAJnwQAJWeWFPA/QnLEUc4AWyZ\n7k+EBZnXTpF/Pdb5vrVbjzwfiny7LtcHYinVF/lJl8QuhMz7NEvyeulz3n9+\nzPQoeGncqYmqgYNGVFuZzYPlL4vxs4kyk8qvQDw6La6ZZZkPegcNgFkPYzFf\n9oj7TQ1UIxy8M7Tl6y04BXdSkOyiVoXs8dAl2BniBmDbVloTuakaYBDldMBB\ngpqZV+56pY+8jGHxw8f3+6lxruT/Uo5dOnb3aM24MKHjC7CroUP3gzgWCFXj\nS5uP0B7PDqSCvAWqc7V3AHwSMWGPQlPZ8q8+6HM5kmSGuKaLYf3oZYzvlm0K\ng7RUCoyUrUyJIyL3wFIZiij0eE7bHSeeD0REsz91XctT1DZdFM8DnYFvsYnT\nHdrE9jRJer+MTdxZrzRiAIxa2D5Bxgt652wB3LmYsP8R0ycnidvEzcOtwRED\noDZWReVPsoF4mPXIAEt20CvlgPRQJ1LrW2Q3gNPVFyruDVG3fgq9CYE3Z1YB\np8IZvJ8mJCni/IFCPjeOx0JfjP7vuVnq/KiLARLWGVnmBFSHzHdIjWVKqZEy\nU+qTA1hpf7ulDVVPC4l5Gn/cdOGLuZvWmLU4MDJTUzFSIPAmQjheNMSDt2PU\nKR98EmLyXoa1ecpJwopf/KXRoX2QkTqctIs8XL2i5dxp84tRCdfwCOitE1tL\noVjK\r\n=qO5Z\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"f8640926b088e6e6fd8688e2bf177fbb60e83f2f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.6df682e74.0","@material/theme":"13.0.0-canary.6df682e74.0","@material/feature-targeting":"13.0.0-canary.6df682e74.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_13.0.0-canary.6df682e74.0_1631202187573_0.1995716805695542","host":"s3://npm-registry-packages"}},"13.0.0-canary.b49359c35.0":{"name":"@material/shape","version":"13.0.0-canary.b49359c35.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@13.0.0-canary.b49359c35.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0c99e369662c6880a4f6a2640d9b320a5fdbde69","tarball":"https://registry.npmjs.org/@material/shape/-/shape-13.0.0-canary.b49359c35.0.tgz","fileCount":14,"integrity":"sha512-phiPPq2hhuJgK0qhyVtfHO6UC3uRaLLcfpWqDVI5+K6nOuBwVxjOcn0V7vwlMvm2qi5fEFI48umFUtYPOwr+Fw==","signatures":[{"sig":"MEYCIQDP1B3dOMpI9A4LARCllRZ2bdigUKzEd8/ccdic/U7tQwIhAJDs+YmCZyIn4cdPJMZfEPvnshAojjWE7c6eOQV4iRsv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOkXcCRA9TVsSAnZWagAAR50QAIhmcDZaimD9/TTzB0Vv\nVmbeyHtOkpON6X+/8BC28ik5+BRzlbOgmCO8LGCm5P/Sn6AAaEupGXq6IJMi\nEGGilQf45Ch5XtuvOKbaSEWkLxrFsbVMIdSVYsec7/+8Xljebm5CwLBbhccm\nfh454jf5G6AklerTHIn6gHRmgYtt4xBS/i7H3Fwu0O2aHrNysc8nIR9shFD1\n2ATUtiWzWl0Oqg29qZUgYwsIVfHEh5glLeUOoSdlhlSmuAOZo72/JwZ1YoTE\n/ZAmq4Q+41SXeIAMZwiZArgvCuTAAorYjU+DgSrOPzPVIgkzD3y7sNY0Yed4\n5cN4x+PU65TirlfLFb1cDuDo1InBkChgQpiFjBP46HzRQS+EgGjxmi5XasKq\nKCbGfZG5iz9ji99hrIW9V9J35ibpvcBa4D/omf7Ch1exTIWcTHp4DVXS7Ob8\ndyVnD1XKJ52jiXtH/+Fekgd4LMaPjAWDCzX7yEIViRMIjXreGto6DlV4oaJH\n0jImWBn6/nCWfrtScX4vRz/2SxYviM7HtMU6EGA3XoFcOE7I+glDBwqG44AO\nkogANPYA/YgKdM0+rkEDI38/MjomLp0ltmf3MIs0fN8TD6I7ATwDqrVarZrX\noj8boSgnOV7uwMQSj8b4DKfEviaixEM6S7Zt/ZLXeWk9AIL70kKnJoT2zk7q\n8PJK\r\n=ZRH6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"817b18da85c93007b9b038927a1ae036f98f686e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.b49359c35.0","@material/theme":"13.0.0-canary.b49359c35.0","@material/feature-targeting":"13.0.0-canary.b49359c35.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_13.0.0-canary.b49359c35.0_1631208924524_0.03425274062313388","host":"s3://npm-registry-packages"}},"13.0.0-canary.470bd34e8.0":{"name":"@material/shape","version":"13.0.0-canary.470bd34e8.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@13.0.0-canary.470bd34e8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4f4a9e9a507eb06a918e9baeb1c4a3c7c71f0b0d","tarball":"https://registry.npmjs.org/@material/shape/-/shape-13.0.0-canary.470bd34e8.0.tgz","fileCount":14,"integrity":"sha512-aE2uXTCixec+yHNd7J7DFpVyhTynma3slqADfCTQSZeXcY4ufcwNfQyTYN1znJa2HwJGp1ZCpFvFVhbUtToHWg==","signatures":[{"sig":"MEYCIQDCJT828RINiiL8ZbSJ2a7CPBIJc6gAGetoLBMgaNSENAIhAL5OHk0eTn2ivFn0y53Pnn2KxLf+oI93JEUmlX0ZBepV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOkvaCRA9TVsSAnZWagAAI34QAJzj2BKUMGc7UcMcK2ZR\nughh8eZzSdh0mx55dgrHIX8iGXu/UItGXP39yq6tKCxG7uQIChXP8+fG25iK\nOkM/uXUBHjam2OY+C5o/Gbw/OzXb+Brjb6qOK+uJCcpUEYR6nfKs8FfLtrrW\ngRV5f4BrNW0mDxcl4IjkFP+mYNa+2cxEym31DcpZb941mPRn+rakIt58UaDo\nHW8STSWg5wJ+jJrTKMpUNauYIheVChxYRKZEzGXlRQoZ4UU/6NVh5+JIyLll\nn2mC8JsNZ+KkGfXUeksndPeKusfc7gozQwCvSqac63VYAk/Uv9arAzL+OfaE\nEf5rla6lSdvStJfj0oew8cYPVCKnbcq3VztJ4g+V5lm7DIp1GLGF4dDX/KMc\nHlav0wv3D7YxtvjxukjsgLi8eEFa8BuxILHwwo44R/9GOpwQ8UAJIZb7nVbh\n6vpIUolzS6G2sPFeQ3+Rj6Jqq8a2rrwy0pM8MStE3ia3Q3sIK0MkRweBw0RR\nxgaxBwdTlczccW8+oPtwF0GHiZ6nfusluw65TraE57F2fbM1bG/X3eHqEy3t\nREh+25R7gEnszIwyhw3cSnaTkyIsaVP8/O1slRooWKvc8VVexuzkghuKV/gl\nih17cUvnJQgxY1GRZbyVVDTTLy2PFOEgaBnOmilntiEQq6LkqgWhRruQf/tt\nogv5\r\n=sA3t\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"f249b00e3cc067fbfdf722d71dd85392d031ca0c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.470bd34e8.0","@material/theme":"13.0.0-canary.470bd34e8.0","@material/feature-targeting":"13.0.0-canary.470bd34e8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_13.0.0-canary.470bd34e8.0_1631210458766_0.41175441225321174","host":"s3://npm-registry-packages"}},"13.0.0-canary.d48a01771.0":{"name":"@material/shape","version":"13.0.0-canary.d48a01771.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@13.0.0-canary.d48a01771.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"007cca034f146146a5ce8be932e44905ec734b0a","tarball":"https://registry.npmjs.org/@material/shape/-/shape-13.0.0-canary.d48a01771.0.tgz","fileCount":14,"integrity":"sha512-wqSGnlaX4bsCzfn/tjcY7ZUImJV41ZOll+c/DRWkT3PAaG4z3XO6t+X/WE+YUznp81zxfux9cm1zXlofU7rEYQ==","signatures":[{"sig":"MEQCIAtbSMnldfy7UM7KpC+usPDik5cJ6CIthvl4Cq2YeJWsAiA/VdV/cSUumo0qnn2SVJI0we9zsFdLWozBkJ0c1WRxTg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOk4JCRA9TVsSAnZWagAAwksP+QFejQpdWTuMPnvWXpcf\nH7t1JTMqMFVPkRkQAmu8CqHz9Jd3TppTU6yow/bneOZTGD7g7S/+alnhMKXy\nL4cELPsaFoYGXEKe7LjhmOpLrcWkrvfgIX0ztaD6yz41RkAXMsBo+Pt9uFcf\njSoLJLCVwllR0hapZqXs8lzMvhuZz+DnCFdS8ExZ7CrbCBOb0owtGI6CULTk\nOWkv/KCfy4b1kdT2oASZ+HfnWlBM8PjTP7vjd5lVXohD2dugKh3wN24zFpLT\ndNarjp0c5dPoYySl610kYWxupqmwstN8sv/polg+/J06yk/VMnOWd/OzXr8p\nXw0C7BAU8QBmdI0P//hoLZD02pt4h4rYFmLeAu7Pk2YWRJAoMvY79A4Vz8rE\n42722byj3E/MgMq3h6qDcOoK7zZLA+xrEfZ6NcTTaIMU34G8ZcYpobMEsBui\nSw+xhDJ0XJ0ZRSq03BrcEJQp2tlDURL7igY2nJoE3i7tXl0Vwz3ebtleDllL\ntSpq3oHGt+RlE2LZdFxhbfg2e4AoJ8os0YqiG17lfQhWG/qOjGVfdChRVYbk\nIiQcalULjtEinY6dMktFEh3KQ6mrPdg/Jml7jiSPrU8KCLibKmd7q6rDxU/X\ncm/fzenhVb0aWDHB6mizAsW8SXzGXwBA1Ve6cJGKjk/fSV3akB5ISZDDIu86\n3wqD\r\n=VsDn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"6796441e86b583e99919b207640bd02efef6fdeb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.d48a01771.0","@material/theme":"13.0.0-canary.d48a01771.0","@material/feature-targeting":"13.0.0-canary.d48a01771.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_13.0.0-canary.d48a01771.0_1631211017349_0.6019064747644125","host":"s3://npm-registry-packages"}},"13.0.0-canary.13db34b34.0":{"name":"@material/shape","version":"13.0.0-canary.13db34b34.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@13.0.0-canary.13db34b34.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d8987ebe4c00f07546c60409be880eb257af6d90","tarball":"https://registry.npmjs.org/@material/shape/-/shape-13.0.0-canary.13db34b34.0.tgz","fileCount":14,"integrity":"sha512-YY+83qVmHmjTRg5AklwCvAO1HXcOtDl7cdS2maZhqdNemf15ObBqU+fo6MzRDnai7vjyGV2dTwHUixf88sLFnw==","signatures":[{"sig":"MEUCIQCg32xGgAL3Cr5f2LnIioCK0hYWjML1Zmo+LnEl2enAcQIgapD0a/t4ZGpKEChhbjJ2CFEDgmihU6M4Qrnb64EjgAw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOlGMCRA9TVsSAnZWagAAZM0QAJJInQYzEkUbcx9AeK4v\ncEE2Iic940i1Jbd+RSB+5LkoD3qCLaHdjSBad1a6wNQ6aA25RxWCgMyaJUW5\nwXNWbE//kzhbCUgjiLNwP2xHT+7M+FoXXhgSMQyGgny9wVS5Wut8uG3Hd86u\nsMFvU+gTpa0zAPvJW3uOLMn+zDGHIgGEOU610d6SO1sr/6kjxR8xgBUYCX16\nEvgJJUcobt+063w5wAnA9575b+YSKy7JvunbAU8ecrqMw8eB3PbFycnjyre6\nsermHjmSKdlrxg66sqPOHes7DVGavUSiabFcpmFschDxLbeNhixVZgA4s9ft\n7srPcKPXD7lJBTHAK7XRxEJjbiNZiUTLcRtdhabZvE4ReQ8C0BQsajFkWsj+\ndVpEKWs0gj03yAJ12ivovrzSpwPCIVtbhmqzg/U+0e703VUaz5jT1Sb/D7O3\n6KrnNahD6kOH+69lmgFfFvX8y14Xl/AL0D5wCiOURIDpO0OPstpnDokDsBxj\nyT8ddyzpM3/5eYOI0JNvnAHT9eCib+MRhW7Q81c58rxXI0A3KW4DLUhjtiAI\necJ9W7aFGJJ6HQ4JWHZg8LNfwXV3yDGLzo/HYO5AJ8g57HUEyLIXfX7f13vB\nEX+vn1q8nM3KkSK1ypNnHM6MEhcrPLqC2lykmwm+C5BmgTRXEYKHagJShW2Z\n+vdI\r\n=gne7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"7883b32c9c6a3280e801925b874df667e1055809","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.13db34b34.0","@material/theme":"13.0.0-canary.13db34b34.0","@material/feature-targeting":"13.0.0-canary.13db34b34.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_13.0.0-canary.13db34b34.0_1631211916012_0.2655281529647344","host":"s3://npm-registry-packages"}},"13.0.0-canary.864798678.0":{"name":"@material/shape","version":"13.0.0-canary.864798678.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@13.0.0-canary.864798678.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c2af7d6a740b2562dd98082641832094c0fcd064","tarball":"https://registry.npmjs.org/@material/shape/-/shape-13.0.0-canary.864798678.0.tgz","fileCount":14,"integrity":"sha512-FEGLlRg4X77nsEIzPkMF0/dVwIev9dOzbHc2IkZCbKc9Ni34XFdzUkFN/gH6fQovLxKl7rth+EQ9pPJgQAf43A==","signatures":[{"sig":"MEUCIHwyr8LrE3bvphiS7M+bQad8hpmMVYv4DT6jDDzPnM0qAiEAhk6/XRWic9JJzdXzxNiNaZxMuzOqe43r9RozIuCIfPI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOlQ3CRA9TVsSAnZWagAAr2UP/0Po3+q075dyHI2hm+ZI\nmT6hgtXJjlNu4imAmcy/FaYxtzlA3XBrVR9YGqMvCiyAcwpmziUdmEL3+tOQ\nSj3fSb6bj2phJbrnGmY79JHrjiZR2qQFwf+kHKiurcVfOIO4W5zJ80eGzZhi\nx5uYcxFxpwU+Pt+kYqYS46JgIlhLteP8O+B4zQIS6asuNrSdLYt/+Z0YQAh/\nGpE2zUNY0o6OJYVxow9cIfhKZHvADF+7eaFZhK2jSjidNYIFPoJeSy1JgnNC\n6HfwTsJaxW9Ch8RIKhKf3TGW+6CqLBXNenTZpFObS5B37Rgsk53clrHSq/pe\n8TEh+ynqHHGKUlRjjLamRHCWE9yjHov9hmzKTPzt5bPDaSk6EGp5jx2VJg8X\n1fw59+GkJOQNSSF3b9ERAC4tk64G/hhz510us+sVTrquOWNnjHIo3Rvej6OW\n8lZyFN2UAhThYH52e57cuNtXklZn3Atla6lATtLiuHMvB66bTuRnDFBV+kUD\npk/L+M35FcbXGaJSPzMv/xLh4qm6old+sZNLoF/ObVzpKdVIwLQN+PSal92i\n3laQsB5QacLCvpBDi6ao9He+zV3/FJ06KwB/j0LquyxbYox1GyA8TtJ0CQ0f\nNOlzlBLxoK6yAaIBL3Z5j1w7hiPYxi/tFT32AF9KdW9FrMdqG4KrgoOqpNWf\nup/k\r\n=cL8I\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"08d2ae683a56b5e86f7a54eaf5a2090fd4288df1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.864798678.0","@material/theme":"13.0.0-canary.864798678.0","@material/feature-targeting":"13.0.0-canary.864798678.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_13.0.0-canary.864798678.0_1631212599797_0.14537167437154253","host":"s3://npm-registry-packages"}},"13.0.0-canary.d04bda3fb.0":{"name":"@material/shape","version":"13.0.0-canary.d04bda3fb.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@13.0.0-canary.d04bda3fb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8d5f2a1704ff81f57a7e6d1bc57d2bee0734927a","tarball":"https://registry.npmjs.org/@material/shape/-/shape-13.0.0-canary.d04bda3fb.0.tgz","fileCount":14,"integrity":"sha512-GYm3n+fPat3eKZVJ6Dz94Lij119jvZQ18+fUMiYkVX494uf7YcNfodcVsEF5gjyb3d4EwiLGMivc2RHMnslv6A==","signatures":[{"sig":"MEUCICWDyuap2RHAgH5byqKRBL60THjNFLSOb6KEFO1AgpBOAiEAwkDeln4hx3KQ5552kbfYx3DltqX84XrIRSJh8Lb9d0c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhO3f3CRA9TVsSAnZWagAAJTkQAJYX9T5nu6K14f2SqHK0\nDK1P9euYwQiaB6YPJf6OplXr4Fodl+i16G702jQR2hWMgJfHNESWgUIYBiuU\nMTkLsHtep/HxBqyEm9Qp6dIz1buyqgnnXGrSfhjU5imhwY2NNnldcKRcg6mK\nIqdq8d1BoCVvePN9OGf//k11s0Y5OQxigcUpL+OQtfan6jSO0d82ipiga8kg\nhJyAA2W/XSTuV1ayGIWFthejDHIQJfgZWu1nhWqAMhC0OzIiDN7VFjjtWaxA\njbmsIEiSQ8TpflfNpvZwhnmq0FZmyfROjMIe1tvKYHADgD33wEaWKMb6edhk\nMl7DPBhgbeOW4tEFVTBjviww7pHew+fMoywjjPDDyhWR//g+5K3R6urK8vey\ncaGGq3IOmDJxj5ERh7AR11BEDytrC+aZCSEpySMY+Et0gEeQQ0rGrd5IbZLI\nifuLri4CdalN3ExlDsFVWmiEq2i2ntZKd2Tn5PVXwjRISR/lSrBf/jfR2TLt\n39ZaoHIta5+eLEX+QfTWztaOEmWmakRUYUDUFsdVofpl5jrEUoknEchIhgZT\n8cgDYht1zLBoRDiVdsHvTnf6CPg+utDrELHu4Nlq2JfsdFNNpYMABHkQqLai\nqWcrK+yemeJXoqf0CiD/CN8lDvx+3lhy5EjlSJqiTSMnGT0Opne5K1uzOHh4\nJRFw\r\n=nUL0\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"7dcba6a47b77f0011a1f0e22b3540e2a70b285cd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.d04bda3fb.0","@material/theme":"13.0.0-canary.d04bda3fb.0","@material/feature-targeting":"13.0.0-canary.d04bda3fb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_13.0.0-canary.d04bda3fb.0_1631287286884_0.3376281631240394","host":"s3://npm-registry-packages"}},"13.0.0-canary.5533f73d3.0":{"name":"@material/shape","version":"13.0.0-canary.5533f73d3.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@13.0.0-canary.5533f73d3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dcf23072dedcc04d54bf59894648999a1aa6e8f0","tarball":"https://registry.npmjs.org/@material/shape/-/shape-13.0.0-canary.5533f73d3.0.tgz","fileCount":14,"integrity":"sha512-3BfSWdXJU2vkjeygq54S/h4W4+lbh0LB+yama0qH3EenwZlL05UqhuiqbZRbfNIvLqgXoDhS+wh9eBVTDQJ9ng==","signatures":[{"sig":"MEQCIHkEh+lrtnF2Z5cHvuHsBnTKQMSF9yfqgPxphCi68vu6AiBpUHbmFpQiIyLNnqv/QJTmeNZS51F7DD1lLFzmjun9wQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP9jECRA9TVsSAnZWagAAo0kQAIdQZIloI1CVg+BDLTun\nGBj8okn4q9wINDYkCbCn7IaG4ue7bEM9om+JHah4OcFIbK8yLQYLMfbVMT/n\nrv5te8LdsElgi8WIdglEH5/AWtWMLJRwI6zM5ErEN4QKkvI6NlIBKu4eCfdh\nwsFEpF77M4U712QET0d0H8A8OjweI3Yi3P8X8q7qUe1j8IU0QjWFjplHfD5t\nH6Yqp/6RQWloBhcuVmDAAAyubTt0wIeZcvgyYebLTV9oRK9Jf/UfKwGUNnyo\nMQ++OQmeWTRqLYTWVGjLDs+NB5ZMhaUEacxvybaPOCuqsChrgQNP0L4IVUWI\n/1omSibY406MkTNCfVeoYFFbcq1eQak2962I3n7HoQQiCofmX7JmEHTeZYGi\nNNjRn6h2T/LyAqd6ExPK/92yjR6JLxDDZOMt+fH+grU4zjECBo3pwkWGHgfb\nvPvrYrUA41ADlal7UOuSYy4BCzicCs1awSlALdagtjeDZprdSd/bFFxy8JP/\nQ4Vu8iwEuwJffW1E1mY9rFgQ1nzw3T01yrdJDjGweh8s2Ym8vzjy4ShY7LHm\nIwetp2dHV5DaJappgKBeR/zYBINGTA9ylrrfjPS0b+ox+j91uN0YflFhAo6L\ngdVvJAyn0HwsSmY0q+2ppIqgci1suK4eAEYA8f3uZAAdPkh3KGcEXsBQ3/q3\nftp4\r\n=WqV8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"20bf1d151f241eb77dfa3233eb61f4e35d5b2838","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.5533f73d3.0","@material/theme":"13.0.0-canary.5533f73d3.0","@material/feature-targeting":"13.0.0-canary.5533f73d3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_13.0.0-canary.5533f73d3.0_1631574212120_0.54859568560343","host":"s3://npm-registry-packages"}},"13.0.0-canary.08398f880.0":{"name":"@material/shape","version":"13.0.0-canary.08398f880.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@13.0.0-canary.08398f880.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"64bd03dd1a11b6966320f635bd57a3bb65014ef2","tarball":"https://registry.npmjs.org/@material/shape/-/shape-13.0.0-canary.08398f880.0.tgz","fileCount":14,"integrity":"sha512-/9v0Pej0kaxWBPZuy3NHUxD4P2g0BEFBKHV/xWJi9Fbiu7i0qHYjqYNt7YBioLCm4bAgFpxV5wLYGjrSoR22sg==","signatures":[{"sig":"MEUCIEfBL6KO9c8DrHbg+SDpfUdWH/bew+/rVKvtC8ScEEr5AiEAhvovEag2NJmKTN637N2bvRMsVpSA7NA6+m1IbYv4aRI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP9/2CRA9TVsSAnZWagAA2bgP/AgBg3aL/ctYNxrHxLUZ\n9BO68LG8P5kMf5GFzl8CzKaOd40yq52DzI8B2nblBaTGsu81YGXR3FeBXevX\npSw7Mx2OIbMzB+D5gcxc32l+DW3Vtak8Uelic4PZdVuZRGRfb0L9UDTILy3i\nS3RzuFRLOwzb1P9MeG0B5xIf3H8c45JXZo8LUvwAQqChk+H/Nbu5QKVt9enJ\nRImfkIt6r+AOull71T3lhTFlRsyW2mFptYnn79sWZAf6QK1pyVXHjjqt561F\nz1TSkQ1qS1VR2/qhT48qfOqjCVfYxW1Nj8Hakkp2AEpSal26r8a7HJyQS6LY\nsq0Pz0M4a6buYk7bhv2bN3nmlLEqMPQTBK1krJ57TG2SSxtzw2tJEMWKVMDf\nCgods3ruHuB85ZDpvzsmCriTuXxhZv8Vxzl1bpXq9kIWiDzl6nEOBDcYU6gj\nE7G6FVKaqDBedlYrChQ8quqjO1lb8oE+omqhimIpa5LQsV31cb9IVV7rnBFB\nIPKiJhVjB21kkO1764O4HSCcHREyQmUjW+LCcUHijuv+3C9zzmXcSDCQDYBF\nUo92YGtNZtnt4RvvMb9TyZpP9/92NveqHq6Cd2wDsw3ljj4E0c8ApW/ah/Oq\nOwN0Zvn8+YqQcON7EH7F8BxfLRKxvpbv+E/jzmMW6eZtVS/WWeDvhTE6BJ6G\nE+eW\r\n=u87w\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"1a993a7d6bd4a018cc4ae230bf1cc3fecfc16d1b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.08398f880.0","@material/theme":"13.0.0-canary.08398f880.0","@material/feature-targeting":"13.0.0-canary.08398f880.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_13.0.0-canary.08398f880.0_1631576053937_0.1314545655900896","host":"s3://npm-registry-packages"}},"13.0.0-canary.818f4ee93.0":{"name":"@material/shape","version":"13.0.0-canary.818f4ee93.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@13.0.0-canary.818f4ee93.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a2b1b496e3dcf39643b44d5eb84862f42913cbb3","tarball":"https://registry.npmjs.org/@material/shape/-/shape-13.0.0-canary.818f4ee93.0.tgz","fileCount":14,"integrity":"sha512-qDmleaOu6hF7MonfSY0ux9IQHdB30ExS94tQjF6asSepiFF344Lv+3soIvFk5Yrt11CqKIjzckL9JfkXC8LEsQ==","signatures":[{"sig":"MEMCHwGji2jfRQ7hL9DpAiK9wR6n5YgfUFSNA8z42YE+6u4CIEKmA0dfFHBAXEWzaigRM6m8iEbxlCjO+NR0zvExkcOa","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQjJSCRA9TVsSAnZWagAA538P+wagQN96andDEINHuNCa\ntVrfELc7PFJY+9KBe1fshs4YCn9vQScTF3n6KEKF8Z4hywLgHnblwRE7suNd\n7nbna9YW6XTcRujg++fTWarrC2L2sKwnDAHkKWb49n9i7Yb9K1NieEsWXwsw\nxIFi13KISGWBVTaq6b2Tbu2MguL+Taby3xi6B1XtKd5nnaa1A64Toti6+qxq\ny0t8D8A+eKg8x9lML2oOEUNoQ4GbgMKb3MmrBSA+gPssHHyZSYX6vjkWmwJv\nw8DwEExVO8BC/eVw0NJnuRgIYH4K4X1zLDQz7MajePQP2mHtfUPq3zgKmHHo\nkTgKR6DmRX9JCWqblzyHUxWxPJFXS29bZXL0PI3QpW0vfdvebakxmAAneTay\nicvjq6hqkd6dGYomQWsadkhlYHprMU4hWH9vHknOXjLnjJ7VOk1hrXoZd86c\n+qQx4knjZW5rM2B4BpCjDncDvD7nUlOlwGKiG4QGXaSmCvb2CMsoUoKZuEAt\nZ/zYZoPRuyaoiZgPV3v3ID0sX6eNzh1WFpvBWpkRESmXM/0o4OWlxzQfH345\nB3s8ggOzD7xJC8tuduCeUaen6u6IEFXJCIwAEDhbC6cHTCxVOUhrSKc346Hw\n8ZeyLi5u1Ggn1DkthsHvSdGpTP4wmKM2h4gJUWcOE31cgXIgIt16dDzL0jeL\n2dU+\r\n=lPzn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"1d88a726d331a878c9a8721e3237e8cf6df49f1a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.818f4ee93.0","@material/theme":"13.0.0-canary.818f4ee93.0","@material/feature-targeting":"13.0.0-canary.818f4ee93.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_13.0.0-canary.818f4ee93.0_1631728210781_0.50723390344882","host":"s3://npm-registry-packages"}},"13.0.0-canary.8355e14dc.0":{"name":"@material/shape","version":"13.0.0-canary.8355e14dc.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@13.0.0-canary.8355e14dc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"079f02cedc6c68032b1c998258c11157df4d1e27","tarball":"https://registry.npmjs.org/@material/shape/-/shape-13.0.0-canary.8355e14dc.0.tgz","fileCount":14,"integrity":"sha512-Zo2hHZNQTPpbJ/fkpp6288EbGjRfvadnW355y2fMEYk/SocX6F+96eioyRAhGQEaqT3LaBNIOKejdvBciK/20g==","signatures":[{"sig":"MEYCIQD5M8pRb1scyHLqb4ZMfocfhgiJKgLlYoNkDnKeGFL4vAIhAMMXn1SxgqC9uVyp62plq8R7Xz6wEziHojabu1wcPWz0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQkWKCRA9TVsSAnZWagAAnrYP/jTbUZ2ZD1t31da8wxdW\nLhSMw7s81C8flpgikDNd5kLtJbUXiThobV1TWaHiI4t9nP3d7dE9DOthRGOe\nP9OB5mPwzN1sSsk2/I4XIs/BBzwH+JU9YXdzByyICJ90sFM2pNdvnfdNWLib\nh2MXUstrZOHn5VzE6hX1woYn2r5XV8TR8uYaE7cnB1umSdlH6Fog7X73xF/f\nswNM93Fj5Jz73dCVEJ5y7E2kQKJYr9CTAgeqkv9umQKb8UHKfmp7UJyUW5dd\nTLdUQmQ9J39WJLR5wfsnLydHTRTcGdCiQbagYIMsJcmvIJL0ueeviFyrTNdA\nbQ8LzwJXfSgASk0zfN2/DB9W6rFJXYNQePGWXhNTQULC+qHXXCyoUbxCuEhJ\nEY+Gia1kwoir9xNf2nRkl/PuDOOrA+IqhCWBqiiVvhLcdSlz9z+cdb85whfX\njSZ5i++YumN/qiaMJzbEWZnrCTvbizoWzylDDWeIu1iqO3+BCjSPPaF5B6LD\nya1oe7ipA8tnzoll8zhPcaq5vBmuhU5PuYuleZIId6Gzd+M6DdEQNMemU8ka\nmpeVXI46PPLZNj3Y8krNTEXho0FmVtNHnWV2P7C4EmFsNkybbN+StS9DdK2M\niOTlJv/eZllJjVRIBYBurROxd/9c86qAMr6RxVeeqnoWOKLoO5WimIcKr82J\nbwF6\r\n=4gm0\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"065f64e5cbd54d86f092d8d1406bbd0852b2a6a7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.8355e14dc.0","@material/theme":"13.0.0-canary.8355e14dc.0","@material/feature-targeting":"13.0.0-canary.8355e14dc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_13.0.0-canary.8355e14dc.0_1631733130149_0.9072543019664934","host":"s3://npm-registry-packages"}},"13.0.0-canary.d4e16a6c4.0":{"name":"@material/shape","version":"13.0.0-canary.d4e16a6c4.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@13.0.0-canary.d4e16a6c4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d01fa68bcb569e5a7fa28ca9d0ba564b7dcd538e","tarball":"https://registry.npmjs.org/@material/shape/-/shape-13.0.0-canary.d4e16a6c4.0.tgz","fileCount":14,"integrity":"sha512-GHUXdMm/uEkLEKUwGvpARgxvQQjwo8Q8RD25IWwrSSZZAFsZZkR1h1u8Rn//zeUdCDfwBeRlVAhYltc0C5p50A==","signatures":[{"sig":"MEYCIQCmmHly1gUekEDvDso+qujH3FpsvLUoXGt9WVTbfSOPPAIhAMfiVgoiW6noG0DAeH/r4UNuWcDBw5hLNN0eimHWpiSB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQmygCRA9TVsSAnZWagAAKuMP/RXRzvvfzt1PF3gFwg5I\nq8q0iUxv1V+KRaTYb89NtEH8CeKL1mt93N5f8n06z7ih4p52+JcJvDwrG2Mf\nxKi3lsOfN30m5/toAhgyL+Eao8Re2qE/7sUITZYcEbCsmxEJsMHnijGfNrBB\nLnE3C8xFXD11d53b5MCBedG90SDI3dB3nauF+ZI+ZQ+ZMLLa3pQmBmMv3aTm\n7H8medBPtS2zXnviHqN90FTVwP9Rcs9JYGeYw4ya0XcrBayK77DeMimQxwei\nG5DiTrCxtJyHf645efRjyVKaxkeo3j6qOmY/nUY0Sf/sNzG0Qi4UqVFZAP1h\nwi1gmEwH7Gzy9UmGvxtSNwIsPicDNUabDIwEGwDZ0VCIZnNeTChLzssmHYfn\n2F4E1/Af99GYUsajgazF4FnWfzvAcy7nZEW4jCN6fFm9EM/0hY853x7vbcZZ\nV5OYDAZ9h5ykNSRZb+MEEmQMURljNu4nXgLsAzs/rAT3BfZhwrYhqQAUkM/F\nSUtkO5a0e9ruAv7MB892tco/rUTBmWpE/MZMrMih6whOgiGkr4b1UrSgzXZQ\npsMq+vHRUsB8glidV57mnQaEnls7AX2x7BPUDdiW8eSfeob/Lwl8V0DXnIIx\n0T6Rje/TQMJ+GELN7egYa8EgVPwveZmxHeWizNcWAD2UqZFvFma8TslLQ6Bf\nwcz9\r\n=dIVW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"2c2d0c3f7c18e3a2b581679df71df5e7a0e2fcb3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.d4e16a6c4.0","@material/theme":"13.0.0-canary.d4e16a6c4.0","@material/feature-targeting":"13.0.0-canary.d4e16a6c4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_13.0.0-canary.d4e16a6c4.0_1631743136467_0.6806817163212129","host":"s3://npm-registry-packages"}},"13.0.0-canary.65125b3a6.0":{"name":"@material/shape","version":"13.0.0-canary.65125b3a6.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@13.0.0-canary.65125b3a6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"178db2527d0fbfe0d1645ff5d9aa4f3901f24c0d","tarball":"https://registry.npmjs.org/@material/shape/-/shape-13.0.0-canary.65125b3a6.0.tgz","fileCount":14,"integrity":"sha512-XHUqI4ILpPalZyOwnhG218KkNeBvE29SmFDmOD1DgSswLp9UzI+00WPA42gciVTbme5dlwRyeoSBJ/niVRoOZQ==","signatures":[{"sig":"MEYCIQCnVzqa+Fxt8hTCF2QW6Kf3f3bu83zHWup7BRYfIfTBtQIhAOh0959LKF4Y2lalSze++++rc3fJYufhkXD8rzEo7khA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQ7RZCRA9TVsSAnZWagAAivIQAIQEasPafsi97jPuf8zv\nvN2t4CIfCHPs/vHhYLHvD4Gn0bY87lVHGLYW4Tu4yAC4z4GWc7vFhuOGAEK7\nMCt5X5Px5uV+TQezUvGxapapAQceDleg80WNO8hbUSGd4F1A9kerh2FpF3Hv\nuxszgZxWfhWuFMlIN7xf1dIQ3bTNemjYbov9tDs/3SPOWFMwIh6ftrBcYUFU\n2ZsVPGClI4iZfHPtcZZtdW7J5eKXDt/Sr/jG0RiqWcbGB3POW6va/MUhVWg/\nA1Zs9zosTgwmNDyvdSFOP/cYiBhcEkQ8+4WcE48OxCsRj/9jvGQgqobhcx/C\nQ0f7S92mNEzgwRjm7C8XC140bbVIkRgWyVm+Tv6dL6mjPsYBTPKKgxNxC6R8\nQOML0niL2ZW189LPNyecVg+kYvErDB0JSkAa+vRe3/28Kd9ejjbpeukJAzEN\n/vUbtRhdP1toXGN2v5I2WRT4h0izZqsjkJqDMozslhc7DrW4nGzLv2ERBMpA\ndrfLothTwRWWHRJiKo19Ce8N6oTyg7aSk198gwqJEGX5+bJjUA0adZwQPXuP\no9NN3sKGFDgIsbVMteptpvqznTbyM4iajJDb70MW6tTTy+bxq+4SkKCl+ome\ndeWrctT97yZeZYI4g6/1/Zwo35gw9Oc1zr8HxtvOPvWfWVGxF/Wp1N39bu1d\n17mu\r\n=rpvX\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"7f141fcd82e6061ac62fb457dad40c0ad70e52d5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.65125b3a6.0","@material/theme":"13.0.0-canary.65125b3a6.0","@material/feature-targeting":"13.0.0-canary.65125b3a6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_13.0.0-canary.65125b3a6.0_1631827033418_0.34421748623467896","host":"s3://npm-registry-packages"}},"13.0.0-canary.80a583365.0":{"name":"@material/shape","version":"13.0.0-canary.80a583365.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@13.0.0-canary.80a583365.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a50b505bee817af09e5c404e13447ac031c44969","tarball":"https://registry.npmjs.org/@material/shape/-/shape-13.0.0-canary.80a583365.0.tgz","fileCount":14,"integrity":"sha512-+oWuzQ0WMKOnaw3B5jvz4e1tIUiXzbBtGuicxYprl0cjvb1Jhi0dfxx8G6P74+yP1jSkmjzGm9BghUu6JDJHdA==","signatures":[{"sig":"MEQCIF9fijahnN2JmQGXHbYqJNiaTghQnwV8YwTxEkUxAd41AiBRZRv5Qo+pvRpO/+FiUHpMwEB9g7FYfZ04hjA8LWvyMA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"c174baf193216601da7fe07831dd2152585c6beb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.80a583365.0","@material/theme":"13.0.0-canary.80a583365.0","@material/feature-targeting":"13.0.0-canary.80a583365.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_13.0.0-canary.80a583365.0_1631910932921_0.6616681496473846","host":"s3://npm-registry-packages"}},"13.0.0-canary.83900936a.0":{"name":"@material/shape","version":"13.0.0-canary.83900936a.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@13.0.0-canary.83900936a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c7e6fb6ba10ad041f5a766fcd9f058e5ddeb5577","tarball":"https://registry.npmjs.org/@material/shape/-/shape-13.0.0-canary.83900936a.0.tgz","fileCount":14,"integrity":"sha512-yfmXVV7jdKI4wgtlWPSHZZToq7ToWkamF9P1Lb0yWgZng1rcTEQDLPap8QGLzSxdMOwhjbzdvIGcIz4cgj3wiQ==","signatures":[{"sig":"MEUCID3u2f1brTQF3F74czoBpNhI/w/Eb8jRfkMyaO5pylr2AiEA1Bis/IAvW2U72fyQSHHGPLmNVHvglj30KGGGpNvumSg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"ca6026fb6b378ac9a4f14997612369fe29f31093","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.83900936a.0","@material/theme":"13.0.0-canary.83900936a.0","@material/feature-targeting":"13.0.0-canary.83900936a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_13.0.0-canary.83900936a.0_1631921045891_0.11402022318511484","host":"s3://npm-registry-packages"}},"13.0.0-canary.860ad06a1.0":{"name":"@material/shape","version":"13.0.0-canary.860ad06a1.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@13.0.0-canary.860ad06a1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c53aa2269a2d9206c3e2dc5f8396f582d9920b0d","tarball":"https://registry.npmjs.org/@material/shape/-/shape-13.0.0-canary.860ad06a1.0.tgz","fileCount":14,"integrity":"sha512-m4RjKNeIYGxAq7bkGyBRuhXcAJbeyAcHtthAzlC5g9KYJGgdiyZPJ4Dirsbw5wQcF9YI8lLVt0sBWKOnTst/gA==","signatures":[{"sig":"MEYCIQCcAOWy7j0cwY9Pua/peUlTWcaH3cwaJIET1KWWuHFbFQIhAIQ7qHoY9UYpDbanb9LMh1ZoX+r5X/lX7uTNrBZJxDrF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"8f156ac018a526d53d5f5077762518483bfa7dc7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.860ad06a1.0","@material/theme":"13.0.0-canary.860ad06a1.0","@material/feature-targeting":"13.0.0-canary.860ad06a1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_13.0.0-canary.860ad06a1.0_1631921745595_0.3062843008604681","host":"s3://npm-registry-packages"}},"13.0.0-canary.3b8d4429e.0":{"name":"@material/shape","version":"13.0.0-canary.3b8d4429e.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@13.0.0-canary.3b8d4429e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"100e41f6dea611377601700348c78eff4d5b1558","tarball":"https://registry.npmjs.org/@material/shape/-/shape-13.0.0-canary.3b8d4429e.0.tgz","fileCount":14,"integrity":"sha512-PMRrxr7Ej+vI1tf8gbZQWp1+2JYBkazFehcPXvJ9BAjJsZuueH38gu7Jb3Jkd8RcaAXATWLQATVUAQENmakTRw==","signatures":[{"sig":"MEYCIQDPwNeLv+gEvH+CAO1sjkIReAelUg928qZzNZiu691/dgIhAOM/BRd5FyKyIAbcop4vbJ3tJ4YIlD+GBaZ8AK2NQZmf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"c548d2fdb2731631683bc92955d6701cd0c2bd14","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.3b8d4429e.0","@material/theme":"13.0.0-canary.3b8d4429e.0","@material/feature-targeting":"13.0.0-canary.3b8d4429e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_13.0.0-canary.3b8d4429e.0_1632160041219_0.47044550527730644","host":"s3://npm-registry-packages"}},"13.0.0-canary.2da3606b9.0":{"name":"@material/shape","version":"13.0.0-canary.2da3606b9.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@13.0.0-canary.2da3606b9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0a6921ad6e7e171fcc868ea520d8810913e5dd5b","tarball":"https://registry.npmjs.org/@material/shape/-/shape-13.0.0-canary.2da3606b9.0.tgz","fileCount":14,"integrity":"sha512-ulrRvDdFoqRohH5jR0kqJhrFdP6FJve9Ier0M+gMTgRF2GLosNF70/Y21HR4FzUs+RNMEdbp9uyPFl58YEru/Q==","signatures":[{"sig":"MEUCIFYNOb0b8qL/xIkbN59lgi8sVZ2EVEpAvYHx9kSrd/sXAiEAzSwPGtdT/oPHPepFcQEAUiBRaUf6kMZKXVqExwJMOIk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"c452408cf52d900869313ad573c1b84c9d6a3105","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.2da3606b9.0","@material/theme":"13.0.0-canary.2da3606b9.0","@material/feature-targeting":"13.0.0-canary.2da3606b9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_13.0.0-canary.2da3606b9.0_1632166649168_0.39046794338227775","host":"s3://npm-registry-packages"}},"13.0.0-canary.e8c598d1e.0":{"name":"@material/shape","version":"13.0.0-canary.e8c598d1e.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@13.0.0-canary.e8c598d1e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f247d8cb8eefb00b7e6e3cddd03bdc5620e04eed","tarball":"https://registry.npmjs.org/@material/shape/-/shape-13.0.0-canary.e8c598d1e.0.tgz","fileCount":14,"integrity":"sha512-lyYs8vRF+cCRWLnhL7MM42QNfM6fBab7pc2ddEDz/h7CrHBLhNatFHUdm3yswqNQgPPJ1C6Kyx1L//wIJpKuTw==","signatures":[{"sig":"MEUCIQDp3fLtS8bpL2Vlcpd0AGQEmGbFh/XLxOdxodpgXyWIoQIgM9CZXsTft8a0aCMAm5VoumoCXHejxVNeM+TWrPTXA6M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"11ab5557b275cc7f950ff2123684083e6245eafe","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.e8c598d1e.0","@material/theme":"13.0.0-canary.e8c598d1e.0","@material/feature-targeting":"13.0.0-canary.e8c598d1e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_13.0.0-canary.e8c598d1e.0_1632172299528_0.2894826144650082","host":"s3://npm-registry-packages"}},"13.0.0-canary.1340ee9f7.0":{"name":"@material/shape","version":"13.0.0-canary.1340ee9f7.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@13.0.0-canary.1340ee9f7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5bcebd82e5284af71652860acf7e3c0760a6fba0","tarball":"https://registry.npmjs.org/@material/shape/-/shape-13.0.0-canary.1340ee9f7.0.tgz","fileCount":14,"integrity":"sha512-VDBWNZMaoHRZlRiIGUbWtqRvGtLD8TiEbiuHgj/OtGLjPJQhN9vxmTjRUDvTu53RDZDBSBDuwXMpLvu9BGyHuQ==","signatures":[{"sig":"MEQCICwpOCuQSW5Ef8sKvf/r5YL+wha//YYksQJGe0ZFrup+AiB3wRLhgvwsk9gWm+RTU5YFRx0GWx9K+r9i94YrHuV5Ww==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"c9cbdc93fd9954f12cb74ebaf2cfa5806d078879","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.1340ee9f7.0","@material/theme":"13.0.0-canary.1340ee9f7.0","@material/feature-targeting":"13.0.0-canary.1340ee9f7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_13.0.0-canary.1340ee9f7.0_1632333459477_0.5573477815196985","host":"s3://npm-registry-packages"}},"13.0.0-canary.65084baff.0":{"name":"@material/shape","version":"13.0.0-canary.65084baff.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@13.0.0-canary.65084baff.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9d2b9a93ace115af354eb75a571b2a7dcd22b54f","tarball":"https://registry.npmjs.org/@material/shape/-/shape-13.0.0-canary.65084baff.0.tgz","fileCount":14,"integrity":"sha512-JkPXT47EolV+6fjRvtT397VPikDBRqN+9b+SKYQxx+XA7n93sLjMdvCQdIDRCA91cHk8d/eJ6UNQT5FqEuICXw==","signatures":[{"sig":"MEUCIQCYjcdDkHmx8C6ohI3N2TFKzaHXVX1N3tTGv2HawcQUvgIgRTrxQN6RQPG+v6ATVNAeQK+hvvmaOmbEJ5OcEl7pyqc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"afe4cce0d8c7e5038058ea8198ffd72e99e1c941","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.65084baff.0","@material/theme":"13.0.0-canary.65084baff.0","@material/feature-targeting":"13.0.0-canary.65084baff.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_13.0.0-canary.65084baff.0_1632432313239_0.6859191533641977","host":"s3://npm-registry-packages"}},"13.0.0-canary.c79aa0cdd.0":{"name":"@material/shape","version":"13.0.0-canary.c79aa0cdd.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@13.0.0-canary.c79aa0cdd.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a9cbe9b70149d9f7f9e8905bd5e7eac2f53d70ce","tarball":"https://registry.npmjs.org/@material/shape/-/shape-13.0.0-canary.c79aa0cdd.0.tgz","fileCount":14,"integrity":"sha512-qYnrlJzbyGVp7rOD9Iv8FN0VQi6cFPhhvLvpWnb90A7vlVVolDWBLjzcjMgOnt2BmpynWjLaXSPtAUd+6mlLOA==","signatures":[{"sig":"MEQCIDBJwHre82EhwH1VYh0LF00nMBICCxT26wed7yptAf6MAiAJw8fgK5NiXmIjH3eQNXbmjKZsII/ykFsNf8UyBlH01Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"2caa02d38f883966fd5f78948743dabdced9b689","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.c79aa0cdd.0","@material/theme":"13.0.0-canary.c79aa0cdd.0","@material/feature-targeting":"13.0.0-canary.c79aa0cdd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_13.0.0-canary.c79aa0cdd.0_1632490899183_0.2708466775658993","host":"s3://npm-registry-packages"}},"13.0.0":{"name":"@material/shape","version":"13.0.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@13.0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"42751ceb4c709c87026f14340aed1831106fdfda","tarball":"https://registry.npmjs.org/@material/shape/-/shape-13.0.0.tgz","fileCount":13,"integrity":"sha512-exk96+iCjzCujk3aSrvIMhmW773s1Tc0h+MbQKbt6Iv3nHJCyLSiRbxclCHXWHrVwG/9KZRkrt/g2qk7P3VRBg==","signatures":[{"sig":"MEUCIBfGdF0FE0DyFimoV0bQwbxmCKLTevvqkEWBNZDt9zGFAiEA1k+pigZlBG6ps8cMyV/rg2YSAPaE8NsWeRMNseAvrWY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22915},"gitHead":"198431fcd8ff3028934d2cf3a5b292f8482a4570","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/rtl":"^13.0.0","@material/theme":"^13.0.0","@material/feature-targeting":"^13.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/shape_13.0.0_1632512736339_0.06150589926221617","host":"s3://npm-registry-packages"}},"14.0.0-canary.198431fcd.0":{"name":"@material/shape","version":"14.0.0-canary.198431fcd.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@14.0.0-canary.198431fcd.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"28dd790f643c80ee7daa5340f388e270a9a768e5","tarball":"https://registry.npmjs.org/@material/shape/-/shape-14.0.0-canary.198431fcd.0.tgz","fileCount":14,"integrity":"sha512-TRti8R4gfDgirV23Gegeh6ILoSldFX3//AMHdkotnWnC6A/O+h39YE+C3iY/ZVfR4xcffk7cHZBZ+9hjDpbfCQ==","signatures":[{"sig":"MEUCIF35Ty1pkKywHwQR23hBovLfKLmLOGzKajuratHC0VCqAiEApaw8koEJPWS6UFByjUFklNJIYjyvzVGzvaMFd35hwh4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"34242e3354729334618dc12d6bc959e0a8f14dd4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.198431fcd.0","@material/theme":"14.0.0-canary.198431fcd.0","@material/feature-targeting":"14.0.0-canary.198431fcd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_14.0.0-canary.198431fcd.0_1632512781738_0.32889846088923935","host":"s3://npm-registry-packages"}},"14.0.0-canary.9a02b6ef8.0":{"name":"@material/shape","version":"14.0.0-canary.9a02b6ef8.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@14.0.0-canary.9a02b6ef8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6918c3710a3298a9778bb1893c8d1b9d87e738d6","tarball":"https://registry.npmjs.org/@material/shape/-/shape-14.0.0-canary.9a02b6ef8.0.tgz","fileCount":14,"integrity":"sha512-LxEEv8zj09bVImxXR7ZU6642kM/DKR9U2mpT9+3dz82RR6muxuMjdbO8RMpbzzLDHTo3OlICxwWLnqMbJ5cBnw==","signatures":[{"sig":"MEQCIG+K789DjTbuHNNgiyQCDioHRagsWYGZt0FX3NGbVtD2AiA2GdW/oRsa2Wm6EhBJfXnoz5Xx3ZOJASiAeaewV43ObQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"13e91b1150d6339b15d71c44c8743eb9e2026eaf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.9a02b6ef8.0","@material/theme":"14.0.0-canary.9a02b6ef8.0","@material/feature-targeting":"14.0.0-canary.9a02b6ef8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_14.0.0-canary.9a02b6ef8.0_1632575447107_0.8425064231822952","host":"s3://npm-registry-packages"}},"14.0.0-canary.758ce31d9.0":{"name":"@material/shape","version":"14.0.0-canary.758ce31d9.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@14.0.0-canary.758ce31d9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f567e974263bb448143b42334cdfdca77d49cc96","tarball":"https://registry.npmjs.org/@material/shape/-/shape-14.0.0-canary.758ce31d9.0.tgz","fileCount":14,"integrity":"sha512-Va36iLHZd+tuQsFpowDK8A+EX0SFlhXhYRImAr7DlZBlSnhoZ6sSocTiK2cJA5RJ5/ZNmgW2W5yaqc3cxUMLWQ==","signatures":[{"sig":"MEQCIEkuZFgxqKllCCtTsIPNE8NhsKQPKCNW+PYeAuT87AIIAiB7PIlxUsqtrf1/SnitlKN7LKmCTrpQhFtDqIDult0PAQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"09083795b738aece76a37f8a1dcc8daf958204b1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.758ce31d9.0","@material/theme":"14.0.0-canary.758ce31d9.0","@material/feature-targeting":"14.0.0-canary.758ce31d9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_14.0.0-canary.758ce31d9.0_1632763741059_0.26799153298498757","host":"s3://npm-registry-packages"}},"14.0.0-canary.86b50ef74.0":{"name":"@material/shape","version":"14.0.0-canary.86b50ef74.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@14.0.0-canary.86b50ef74.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"64b7cff69aeedc91e4c3140e322170da23a42939","tarball":"https://registry.npmjs.org/@material/shape/-/shape-14.0.0-canary.86b50ef74.0.tgz","fileCount":14,"integrity":"sha512-U6r5y5SVwa/O7WKDSfsCH3B2VIpt182yWqd/MvwqPT1jbw0n3X7NnY0JQpV3hKCPDBb5BR8g/9Q2CGOIzjSBkw==","signatures":[{"sig":"MEUCIQCt52OCGzvWItol9jEo+b7J38iZ/Ej1/pMw9Cc+/5AO8gIgLL5JxOVFJbZkd7twA6RafzZGwnX4HmAgFV5VQMuQqC0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"5941ece7c1e494e720865be940d098a5556de149","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.86b50ef74.0","@material/theme":"14.0.0-canary.86b50ef74.0","@material/feature-targeting":"14.0.0-canary.86b50ef74.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_14.0.0-canary.86b50ef74.0_1632850964485_0.11606799471750895","host":"s3://npm-registry-packages"}},"14.0.0-canary.b2fe3528b.0":{"name":"@material/shape","version":"14.0.0-canary.b2fe3528b.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@14.0.0-canary.b2fe3528b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"28363900bc3b02dde50367437c86e5542822993d","tarball":"https://registry.npmjs.org/@material/shape/-/shape-14.0.0-canary.b2fe3528b.0.tgz","fileCount":14,"integrity":"sha512-7RQDAtwad76kxzv+IHr+ldqgO9uCQJjcjF1Ajjgfa+zsXa1gaSq8NDsj/KOgY6qTljPkHHx2+2KNoqdjhNvD0g==","signatures":[{"sig":"MEQCICG1TyEbgOr6YGkYKPN2eiwVsOAfwtvJYr+KvQXCn+RyAiALjScEhQoJzAGnbSkAuIOihQYGv8ruK98Y9V74rZl/wg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"cce11b1c181ea84c0bfdbef26112377518afa98b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.b2fe3528b.0","@material/theme":"14.0.0-canary.b2fe3528b.0","@material/feature-targeting":"14.0.0-canary.b2fe3528b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_14.0.0-canary.b2fe3528b.0_1632956199735_0.04687381284686554","host":"s3://npm-registry-packages"}},"14.0.0-canary.586e740dd.0":{"name":"@material/shape","version":"14.0.0-canary.586e740dd.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@14.0.0-canary.586e740dd.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ab1ab8973c21ef1d5c60e578a4e4b519dc24ffa5","tarball":"https://registry.npmjs.org/@material/shape/-/shape-14.0.0-canary.586e740dd.0.tgz","fileCount":14,"integrity":"sha512-Q7fSBQNgZOstU9+vfFfXo1bEt3BWGMB9ZCHD+gLW1VrN5yLajZw3/K6qRZrFuBGaUKv4PSiKbCEtCDj5dFnZqg==","signatures":[{"sig":"MEQCIFeJQtwXNwMcfw4j0wjrWhOhqNsDj9hRO5wuIcjI1UVKAiBexRmiRUVbVZzV88Xc3eeQQ59cqiHLd0pF9NNhJU6hQw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"6c765889db11456de00c45d7bb289b6c7cf3ec27","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.586e740dd.0","@material/theme":"14.0.0-canary.586e740dd.0","@material/feature-targeting":"14.0.0-canary.586e740dd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_14.0.0-canary.586e740dd.0_1633019463760_0.9296456050145026","host":"s3://npm-registry-packages"}},"14.0.0-canary.2ac92d766.0":{"name":"@material/shape","version":"14.0.0-canary.2ac92d766.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@14.0.0-canary.2ac92d766.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c572e577e55cb296857b15183992796872c77b0e","tarball":"https://registry.npmjs.org/@material/shape/-/shape-14.0.0-canary.2ac92d766.0.tgz","fileCount":14,"integrity":"sha512-bL53MVh5dELk4nu/3kXi4EWOZ0YZ+meoR1JEsVOcTiCeC4mCSTQknvS1HMaUiujDULmhlph9FCbBGgnTnSi5Lg==","signatures":[{"sig":"MEQCIG7OfRFhfKisEa7HNFR113QQvxsMITR93TawhHuvI+f7AiBxqGJ8FOkEj1W+QD9ral+9FcPQPBJC+7xwb04ZJDNQmA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"3a797e3a01110aeaf8270a13c2cc32d0871a8bd2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.2ac92d766.0","@material/theme":"14.0.0-canary.2ac92d766.0","@material/feature-targeting":"14.0.0-canary.2ac92d766.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_14.0.0-canary.2ac92d766.0_1633462097913_0.47834888800901765","host":"s3://npm-registry-packages"}},"14.0.0-canary.353ca7e9f.0":{"name":"@material/shape","version":"14.0.0-canary.353ca7e9f.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@14.0.0-canary.353ca7e9f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"19f008cead59398b0e0a0af9f4c2b2cccc7a5564","tarball":"https://registry.npmjs.org/@material/shape/-/shape-14.0.0-canary.353ca7e9f.0.tgz","fileCount":14,"integrity":"sha512-4hwv3X6UpYwRDIOL9w3emRENfqGGr/bNcikV4FydDFbL9fIc3gfxXhaYU/mk+JXY0OZE/UG86YFGZq5pKcKQvg==","signatures":[{"sig":"MEUCIBseGty3s43piiJAwFtTmLykLKLDwoCSZ74biJnRsnLdAiEA3CyWLWm6HPRA53xDqmsImJmlbv5Ux0CLoNLeuqLOz+o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"4f091efbfcb52d523712f9b99808d737b06a60af","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.353ca7e9f.0","@material/theme":"14.0.0-canary.353ca7e9f.0","@material/feature-targeting":"14.0.0-canary.353ca7e9f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_14.0.0-canary.353ca7e9f.0_1633718802116_0.3023220425160811","host":"s3://npm-registry-packages"}},"14.0.0-canary.c78ff0429.0":{"name":"@material/shape","version":"14.0.0-canary.c78ff0429.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@14.0.0-canary.c78ff0429.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"27bbcef72ff231f15948047d30e12cf95c934802","tarball":"https://registry.npmjs.org/@material/shape/-/shape-14.0.0-canary.c78ff0429.0.tgz","fileCount":14,"integrity":"sha512-0JSV3+rEl4oKH2JMIlG0yvp+60rYD0ahdVjq+6jgU9CprSaegI1EFRI8o2HFEy0jN0MkSQ4wx88wC8XqWYb4aQ==","signatures":[{"sig":"MEUCIQD+0N1f79Wdors+TLGOGjjLQUdwBaDaLEZ3cwOoEQ4YqAIgAsqFF/s7Tl8rH8cjrkKrpGpBDJMFM1T++YFOW2o/E8w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"55d918ee5ce9842b93075fa0d0ffd2b64b5f3ed3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.c78ff0429.0","@material/theme":"14.0.0-canary.c78ff0429.0","@material/feature-targeting":"14.0.0-canary.c78ff0429.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_14.0.0-canary.c78ff0429.0_1633972909290_0.5257050279592037","host":"s3://npm-registry-packages"}},"14.0.0-canary.261f2db59.0":{"name":"@material/shape","version":"14.0.0-canary.261f2db59.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@14.0.0-canary.261f2db59.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"256be16b1b6e6e0a604198f3c3d29abed1880950","tarball":"https://registry.npmjs.org/@material/shape/-/shape-14.0.0-canary.261f2db59.0.tgz","fileCount":14,"integrity":"sha512-VjcQltd1uF9ugvLExMy00SMISjy/370o8lsZlb1T+xHyhXHL3UxeuWYLW5Amq6mbx65+c9Df9WmlXXOdebpEkw==","signatures":[{"sig":"MEUCIFDh3is4PfegjOcbPuVTain4Io9yzXxxN6g+Q38BMDmLAiEAhe2qzsHOqAdtv1wVqJpC9NQZ1qrwJx9Q2nubz15CTzE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"22c1cb4091a589b9a53b844da4e8d98309c75acd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.261f2db59.0","@material/theme":"14.0.0-canary.261f2db59.0","@material/feature-targeting":"14.0.0-canary.261f2db59.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_14.0.0-canary.261f2db59.0_1634749164084_0.4057495495284358","host":"s3://npm-registry-packages"}},"14.0.0-canary.9803d2dc1.0":{"name":"@material/shape","version":"14.0.0-canary.9803d2dc1.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@14.0.0-canary.9803d2dc1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e3b3b28bde581789971f99bafda22b2f802c2637","tarball":"https://registry.npmjs.org/@material/shape/-/shape-14.0.0-canary.9803d2dc1.0.tgz","fileCount":14,"integrity":"sha512-eZxIlpEsSYPhhx9pQMRBcwifQdZZ1Wx/4pEHebetGrMLEaCcFuBH7OQP6GCCufvC37LBbBLN0atH6o1AsLEw0A==","signatures":[{"sig":"MEUCIQD/4Ji4Ylr+ENaBUs977zvHvIwl9St+Kwc+t+fvDLfLpwIgD3THm7CqVQ52w4CZSHxPr+8m2G1dDxv+5mGA8AOcygY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"4ef0574fd4b362b2609f5dc9bc002ef96f07fcc9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.9803d2dc1.0","@material/theme":"14.0.0-canary.9803d2dc1.0","@material/feature-targeting":"14.0.0-canary.9803d2dc1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_14.0.0-canary.9803d2dc1.0_1634757696866_0.41977371079233894","host":"s3://npm-registry-packages"}},"14.0.0-canary.348665978.0":{"name":"@material/shape","version":"14.0.0-canary.348665978.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@14.0.0-canary.348665978.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ba9875a0cba9a30b1428962936c4ceb3ac5ef183","tarball":"https://registry.npmjs.org/@material/shape/-/shape-14.0.0-canary.348665978.0.tgz","fileCount":14,"integrity":"sha512-FhlofIU5kopGzyZi9vtP0fhJolm1UpF+Wg6SJfFPcTwO8HDhAt5RCg7WB6gJ6OPe9cYDPB15wXBgmFMq8DHiVw==","signatures":[{"sig":"MEUCICse3WwoeUBudJPTa43YdXfk/CVJOApLyDUuUTTgd7N6AiEAkkLolEKGDKE33B04YcsU+6nfitNj1pm1ZpF7prGdPUw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"bf16d95c07dcfc371fc864fe30028299a2d5d0d2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.348665978.0","@material/theme":"14.0.0-canary.348665978.0","@material/feature-targeting":"14.0.0-canary.348665978.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_14.0.0-canary.348665978.0_1634827824375_0.9925888138034282","host":"s3://npm-registry-packages"}},"14.0.0-canary.b2b979a8a.0":{"name":"@material/shape","version":"14.0.0-canary.b2b979a8a.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@14.0.0-canary.b2b979a8a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"81e53c8e1f6885d95cd910c459f055e2fe5f40a4","tarball":"https://registry.npmjs.org/@material/shape/-/shape-14.0.0-canary.b2b979a8a.0.tgz","fileCount":14,"integrity":"sha512-R6jK0YAmdK6v3KHUokyc9wm9SHXSa0lxqdjaQzoBK7kePI/bHVqbywUYNoZ+v5l2y7eETTAQtwFwWyK52NR2Mg==","signatures":[{"sig":"MEQCIAtoIZe2OrkF82ufTq/x8ZIVLVO2rULOAh4vP9JXhqaUAiBr3n9YbhVqWBhKsfS/gAWHnyeleiL2X+8Ve5Lc8igx8Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"08377359fe2dfa41ac960f776df2ba00e50e9819","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.b2b979a8a.0","@material/theme":"14.0.0-canary.b2b979a8a.0","@material/feature-targeting":"14.0.0-canary.b2b979a8a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_14.0.0-canary.b2b979a8a.0_1635433920500_0.6622570560270225","host":"s3://npm-registry-packages"}},"14.0.0-canary.1af7c1c4a.0":{"name":"@material/shape","version":"14.0.0-canary.1af7c1c4a.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@14.0.0-canary.1af7c1c4a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f7e5e088cdeea739db18bafe38289ff6ea74c8e2","tarball":"https://registry.npmjs.org/@material/shape/-/shape-14.0.0-canary.1af7c1c4a.0.tgz","fileCount":14,"integrity":"sha512-sZ3AK8JvLUiylVd/yMLR+4WbxC9zLCibeaU5zz0PFSsbuoWwo4vwWXhBIox/bsLzp9BZPDi89+SG5B07UyPx1Q==","signatures":[{"sig":"MEUCIE/l4ZgJMVEH1Ec5FtGIRMrTTrg/bInvVkcyWG+OYf7EAiEAkgM6F3y/rD6IDlSuW3rOZ5ScDFn2BdetuXUmCiLOWyQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"3673ef3144cd47c5faba873a239454e11e3d72eb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.1af7c1c4a.0","@material/theme":"14.0.0-canary.1af7c1c4a.0","@material/feature-targeting":"14.0.0-canary.1af7c1c4a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_14.0.0-canary.1af7c1c4a.0_1635443554557_0.5082405077137453","host":"s3://npm-registry-packages"}},"14.0.0-canary.4afd353cd.0":{"name":"@material/shape","version":"14.0.0-canary.4afd353cd.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@14.0.0-canary.4afd353cd.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d531290afc5bbab7660c066bc5968b95387595e0","tarball":"https://registry.npmjs.org/@material/shape/-/shape-14.0.0-canary.4afd353cd.0.tgz","fileCount":14,"integrity":"sha512-S8FB86VJsKNo5v01PvyCeOiAjDsnPxuUjvgJoijqohwoK5fsiGEfy+7HRTsuMKvGq3HlWB69Bp4ORk3TlPMNFg==","signatures":[{"sig":"MEYCIQDf7cS/yARuZaxvmEjR2Z7ipxZ5Z1yitcztjhRf9PN4PQIhAJriNN8y8tyJxA62Qeug9mVs5tgP3CsfqG2s/3sJ8z9t","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"491d940b4e97c65f274b1b4d42b3842e9bd3a4f9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.4afd353cd.0","@material/theme":"14.0.0-canary.4afd353cd.0","@material/feature-targeting":"14.0.0-canary.4afd353cd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_14.0.0-canary.4afd353cd.0_1635519679271_0.2932278491073652","host":"s3://npm-registry-packages"}},"14.0.0-canary.a986df922.0":{"name":"@material/shape","version":"14.0.0-canary.a986df922.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@14.0.0-canary.a986df922.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"791c3f911016c5f36c7155e5bd712df015f46526","tarball":"https://registry.npmjs.org/@material/shape/-/shape-14.0.0-canary.a986df922.0.tgz","fileCount":14,"integrity":"sha512-bCXJCNP037tCd0HqONmwh8HAwr+qobS5eJcwqpK0UNsl+5cjudNNyxLH00cBXmR2xTLOqUb7XiJE0QosvXRL4g==","signatures":[{"sig":"MEQCIFvL2wCcLvwFLKl5FkBNZNq4XYuKGEYbpkhJPBOkr6ogAiBRy1ih2xZAvZQHF/fA/mewd5o4oMrpXt7HQwDvrzdJJw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"6fd5c666012fea37f8a5a820b4979cc66e59fe9f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.a986df922.0","@material/theme":"14.0.0-canary.a986df922.0","@material/feature-targeting":"14.0.0-canary.a986df922.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_14.0.0-canary.a986df922.0_1635543288480_0.14124373878026297","host":"s3://npm-registry-packages"}},"14.0.0-canary.c3cdff07b.0":{"name":"@material/shape","version":"14.0.0-canary.c3cdff07b.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@14.0.0-canary.c3cdff07b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9d067fa000298e9dce8f93781a62f067b9a9c4d4","tarball":"https://registry.npmjs.org/@material/shape/-/shape-14.0.0-canary.c3cdff07b.0.tgz","fileCount":14,"integrity":"sha512-Y7saouVJLabC+zTZMvIiFvyA3aWULByM8ky/mAE4V0obZlJjFh7XZNF7iYmEI5fp1X2e8qvQ10tMouEotkPQIw==","signatures":[{"sig":"MEQCIC6PwJoxeWtDA0zLU6XGI3SJi47AquA+nGkd9ls4yxe6AiB12rPw5yGH4NCIF5owH9lhiVFJt/9xkzb/qYDDJryv2A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"078c19c333e3161ad6b51a3fdc993d883bdc19c8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.c3cdff07b.0","@material/theme":"14.0.0-canary.c3cdff07b.0","@material/feature-targeting":"14.0.0-canary.c3cdff07b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_14.0.0-canary.c3cdff07b.0_1636484740163_0.3051850524624986","host":"s3://npm-registry-packages"}},"14.0.0-canary.468392606.0":{"name":"@material/shape","version":"14.0.0-canary.468392606.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@14.0.0-canary.468392606.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"989b0017898ea2c11330d334b87c2dd4230248a9","tarball":"https://registry.npmjs.org/@material/shape/-/shape-14.0.0-canary.468392606.0.tgz","fileCount":14,"integrity":"sha512-5Moq9YGlPX85PPhfgtnp/L6t2ZVf6N2jzZhFO26WCBNOmFQP2Pfdlc4XrNRfB6lR8Vu2bTvLNkQE7LZfCCa/EA==","signatures":[{"sig":"MEUCIQCTK7JdOe1NivwQHfJZK1k9n30Hz6Tca4X3WCKrXdt/3gIgFgw4ghiB/myNFFhA4iruMqV90xXalLGVo8+5tsbTQ0U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"ac451ce035a924184caaae0df5252896a7392e33","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.468392606.0","@material/theme":"14.0.0-canary.468392606.0","@material/feature-targeting":"14.0.0-canary.468392606.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_14.0.0-canary.468392606.0_1636659593904_0.29098552659261623","host":"s3://npm-registry-packages"}},"14.0.0-canary.828f9803b.0":{"name":"@material/shape","version":"14.0.0-canary.828f9803b.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@14.0.0-canary.828f9803b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"622e06c8bce5effed0ecfb09afb9f2b5b3824ade","tarball":"https://registry.npmjs.org/@material/shape/-/shape-14.0.0-canary.828f9803b.0.tgz","fileCount":14,"integrity":"sha512-cZranqIUF/0LX+Y8soSB+gbmeXWjMbfOYGK41G9+rGagjZ95Q/cBmVjBkkrZX9K8ZPeL6TIUjDYGORzqfaNEjw==","signatures":[{"sig":"MEYCIQD7rgk2A1hV2dXLwJXbxt/+GqZUf2yReLtM+WDgU1rI1QIhAKqwpTlCYnOvqVGPMM3dLdhdjxs2IYUGQ4HTGN/GN8av","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"c64e9f941d45dc823621c068481be90a0eaa0f39","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.828f9803b.0","@material/theme":"14.0.0-canary.828f9803b.0","@material/feature-targeting":"14.0.0-canary.828f9803b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_14.0.0-canary.828f9803b.0_1636660236749_0.5763928005872063","host":"s3://npm-registry-packages"}},"14.0.0-canary.8795cba87.0":{"name":"@material/shape","version":"14.0.0-canary.8795cba87.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@14.0.0-canary.8795cba87.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f8a6d54e713543ae162b7f967cb2757e2d3678cd","tarball":"https://registry.npmjs.org/@material/shape/-/shape-14.0.0-canary.8795cba87.0.tgz","fileCount":14,"integrity":"sha512-hOQz+kYiee4IkvmWilg3xGQPe0SKOhc9GeZsTLYlTZHlThsSIjHxtrGZoy2696nYrttDoGK+LQ8rMfEtHZODFA==","signatures":[{"sig":"MEQCICznEEknNjxXhGQZaxOuGX2vNaHl5dESrTZSAKFk0fpjAiAlY22Gk7j+6FC5PjxwRbK+fFKYXltQQFksRkETGJRlqw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"12c2e8ee797434819828bade998610af66a528ac","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.8795cba87.0","@material/theme":"14.0.0-canary.8795cba87.0","@material/feature-targeting":"14.0.0-canary.8795cba87.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_14.0.0-canary.8795cba87.0_1636660593775_0.260129453496724","host":"s3://npm-registry-packages"}},"14.0.0-canary.cd7f8cace.0":{"name":"@material/shape","version":"14.0.0-canary.cd7f8cace.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@14.0.0-canary.cd7f8cace.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f3572c245ba97defade990cfc36b63a16853aaf2","tarball":"https://registry.npmjs.org/@material/shape/-/shape-14.0.0-canary.cd7f8cace.0.tgz","fileCount":14,"integrity":"sha512-TwkcurW4zdX7K9zyEMeC60rqNv6u0eHzNbWySurzNcqyukngMAM4ZfAX9OqhHKLCd1Es/zyyUOyJpa69YjkMNA==","signatures":[{"sig":"MEUCICgYz9u5hlteQXAXIdI8AzVXxL4rCa0R4QAAUzme4ps+AiEAkuwJkf+9msRDtPcVudTbrXOvoWYjcce02THln9kghXY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"6f1e9f39fe9a43e01e67b849cc2a96a5a31be67c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.cd7f8cace.0","@material/theme":"14.0.0-canary.cd7f8cace.0","@material/feature-targeting":"14.0.0-canary.cd7f8cace.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_14.0.0-canary.cd7f8cace.0_1636660693884_0.9229824568389462","host":"s3://npm-registry-packages"}},"14.0.0-canary.207230eb8.0":{"name":"@material/shape","version":"14.0.0-canary.207230eb8.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@14.0.0-canary.207230eb8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"440f51a480db90bdcdd5aee5944859b4a308d6be","tarball":"https://registry.npmjs.org/@material/shape/-/shape-14.0.0-canary.207230eb8.0.tgz","fileCount":14,"integrity":"sha512-kRlmd01rkDATfF+1ELxLC3/ZOKeK8/DnE1Jqfji4fb9oNG2kRA5fqf0FgfvUMILPJShizRTtJsFADE6pYDWIiA==","signatures":[{"sig":"MEUCIQDDQ9uuJKGC5arhUyZbLzdSkpsqRc6ZUMnrbeGuCv3zSQIgJeAl3JMWsQ9kFNKRr5RDbm1CMvzeZ4LlKWnWjV7a6Qk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"de1b12d24234ecfbfbf5a665f46c26b71016be2e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.207230eb8.0","@material/theme":"14.0.0-canary.207230eb8.0","@material/feature-targeting":"14.0.0-canary.207230eb8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_14.0.0-canary.207230eb8.0_1636669451130_0.14315037058228341","host":"s3://npm-registry-packages"}},"14.0.0-canary.991fb99f7.0":{"name":"@material/shape","version":"14.0.0-canary.991fb99f7.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@14.0.0-canary.991fb99f7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0afa0ec39ca661e38825948f7c52b9d989e797fe","tarball":"https://registry.npmjs.org/@material/shape/-/shape-14.0.0-canary.991fb99f7.0.tgz","fileCount":14,"integrity":"sha512-NL+UYdKrqM3XBRhCl8MUtZBFRl8AmS7inF+4Gyh6lR1qkXoHoQR7pzaoy48ZdFhRZv0FpT4PU/ad90iIF3hNnQ==","signatures":[{"sig":"MEUCIQD+Op8zeznD0WGmx9NhbZiA34ydhbuJeHhWnlejNCEMqAIgfmxaQUEBNZNUp7mctZRXzU2kBkUtTEk5xf/xM+a5aXA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"d13dee60c11cfef5bdcac33da4fff6f13626c05b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.991fb99f7.0","@material/theme":"14.0.0-canary.991fb99f7.0","@material/feature-targeting":"14.0.0-canary.991fb99f7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_14.0.0-canary.991fb99f7.0_1636670173357_0.7096901409347944","host":"s3://npm-registry-packages"}},"14.0.0-canary.15db4f164.0":{"name":"@material/shape","version":"14.0.0-canary.15db4f164.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@14.0.0-canary.15db4f164.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a115e03c428d67f2ab85dc5e843f1fc974a8712e","tarball":"https://registry.npmjs.org/@material/shape/-/shape-14.0.0-canary.15db4f164.0.tgz","fileCount":14,"integrity":"sha512-SLFd21v2AXO5igL0gqCpjCaxgPzVL442tEIb8uEMf59pZ3g5uoFP8J10a6+Yq/fbBHFjvkXUdJtZMBi65p/rtg==","signatures":[{"sig":"MEUCIQD+b6wHWX3O5q03ObLBJpDH1tFiDK7WlPXkrJDU/dBJzgIgKmQjCwIy+mhhPhZ/CbVSPnediPi/aJZa7TC3xwUOBfo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"562e11bb445a0e51783e848adc61b690a7a1ba3a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.15db4f164.0","@material/theme":"14.0.0-canary.15db4f164.0","@material/feature-targeting":"14.0.0-canary.15db4f164.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_14.0.0-canary.15db4f164.0_1636738174903_0.017581147518160645","host":"s3://npm-registry-packages"}},"14.0.0-canary.8fcad5a3c.0":{"name":"@material/shape","version":"14.0.0-canary.8fcad5a3c.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@14.0.0-canary.8fcad5a3c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7b18380900d768771ca0f7b418a4b39b2aaf1338","tarball":"https://registry.npmjs.org/@material/shape/-/shape-14.0.0-canary.8fcad5a3c.0.tgz","fileCount":14,"integrity":"sha512-9ljzk7iYJALj6Ai5Hsfb2piW6U8jOzn85zyi7gpzxLuoSvZa0UWMOp1zxD9AhC/X3XmwFxFAAqjndeWw/wxjfA==","signatures":[{"sig":"MEUCIEa1U9WnMRyrx+z2UQ5xWNwWdV5zUYEcnHfjDzaghAZiAiEAmhpC9XOmqGW0tVrhz9oO1jRtTro5kevt+DgiMDAfa7I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"14b654013dacdda833d34b73c1a94811202298d0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.8fcad5a3c.0","@material/theme":"14.0.0-canary.8fcad5a3c.0","@material/feature-targeting":"14.0.0-canary.8fcad5a3c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_14.0.0-canary.8fcad5a3c.0_1636744415490_0.9987651884159605","host":"s3://npm-registry-packages"}},"14.0.0-canary.f81fb1d23.0":{"name":"@material/shape","version":"14.0.0-canary.f81fb1d23.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@14.0.0-canary.f81fb1d23.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"64b24ec94b314413a070a3ad87de37a2813d6426","tarball":"https://registry.npmjs.org/@material/shape/-/shape-14.0.0-canary.f81fb1d23.0.tgz","fileCount":14,"integrity":"sha512-PpRK6AUPWK7XMr96HIrjsr9nI5b0FKsl/3pjIGHYPxJfPvdAGad+WBwajEbZyRoomWoAu69Bbw6TpqU62Nux7g==","signatures":[{"sig":"MEUCIANJnjZbfLI9Kyg2z8ne3Dj1xWNis5By4uxME5jrlR3LAiEAi4rRZBM5TO3avmFf/eXNlv1j7G+Jo+m4Cxd/mIR1lT8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"60600a1b8cf651dddedd6881a54b20db7b75cdc6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.f81fb1d23.0","@material/theme":"14.0.0-canary.f81fb1d23.0","@material/feature-targeting":"14.0.0-canary.f81fb1d23.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_14.0.0-canary.f81fb1d23.0_1636756803325_0.6715113787813829","host":"s3://npm-registry-packages"}},"14.0.0-canary.783f6fd5a.0":{"name":"@material/shape","version":"14.0.0-canary.783f6fd5a.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@14.0.0-canary.783f6fd5a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ae76586c445bcba31c98b06f550ea95c53a3c7b2","tarball":"https://registry.npmjs.org/@material/shape/-/shape-14.0.0-canary.783f6fd5a.0.tgz","fileCount":14,"integrity":"sha512-BxQSxwUpzRHNjfwUCvKEIJG4FAB97/JGiaQ9bqDUqRvmg/S2H3A0ZucbeiKwLgyBZjnVMxqiFDAxDRFkp4A41A==","signatures":[{"sig":"MEQCIHIku6b5KHMIGOoPMeGXAkKOTXt1YI3QGUcFLZgca4s9AiBpQdGBOpcFJUoKGNDlmFp9BvYduE49gK4qCYfQJWUCvA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhk0Z7CRA9TVsSAnZWagAAvwIQAJNXVlPOd/2etrmMhDW5\nps7n9rsIagdeNpGFlPPpxdUnnuwalFz/50EJUpNDXuQDYUwpsIisUdaNB67N\nnhudPJ+0FBXlZNIm219Xq9qb88V35e1Loypwd6cZgNqN7GAU9v6NitAiGyQC\nzVB3Gk1Z+j5oT6k0f2WwKCT/MYlLfbm5ifffJmeItbilt8pFlHqRDSuhIuhz\n4dWtzXd2TLALEEg+tEgaKNwhAzYJ6dE7/zeWaFums+6jf9GDDjG5U7wGC1Nl\nXlnAB+etn3y1xdBh6f1kIRCd3ABiqgRa68svPzUmgTXYwkKMnpSpHXWWaO8e\nqRC04Y5XynA4NBXEaFy/6jl08Untb9j6FyPct+QcfpKDXqqk2/vp0tsjMDYb\niIYuwKFAGclIIksA/EuovEHgmioSFyvT16ZVwTNEGdxnwumckS05uvkNDd1u\nYN4fLPhNaEoWtFbbz2U7SYkSUw9E9/bLgA4x1F66GbUIidzppvzuOFn8CpIT\nEck9g7wpRh2WpAwvSHG7jW5XoNcnL6tneRVlCh4Eb+XeThEHnJgwUrk+JpjE\nm9M21XnJOx4tk83YYI7GmyAY9oi+XYf5LNn8eLejkskRkSQOz87RmjKBFbQS\nnqYQ/oKqbJE+jRUZO+1pUSAGFjKMpnHokwjkRU5xYuO77KhHanewX8mpYytN\n7KcU\r\n=FzZR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"29ba9297d5424f35d235c8ff87e393874c1b0a25","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.783f6fd5a.0","@material/theme":"14.0.0-canary.783f6fd5a.0","@material/feature-targeting":"14.0.0-canary.783f6fd5a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_14.0.0-canary.783f6fd5a.0_1637041787479_0.38718846926154993","host":"s3://npm-registry-packages"}},"14.0.0-canary.d57ec74c7.0":{"name":"@material/shape","version":"14.0.0-canary.d57ec74c7.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@14.0.0-canary.d57ec74c7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"820b7c18546e6144ccab29f5f0cfb3e0b808572a","tarball":"https://registry.npmjs.org/@material/shape/-/shape-14.0.0-canary.d57ec74c7.0.tgz","fileCount":14,"integrity":"sha512-IBwY76luKWhjqcP9cTShoS0SkiSlBQI1gUn1s0VzqRYGc0QQDhk6qVBsgS1e4rjZjqC4Azd9vEjxSSCAu7YIMg==","signatures":[{"sig":"MEUCIDeetKIQPnnfZzJCodHNPC8KTO2uPSU0mgIcxTTOwM9UAiEAzLTyKjf1B7SHcVAKov/LZezIodrlSva+tP9XJbTx/Nc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhk9lMCRA9TVsSAnZWagAAWjgP/A9++9GlzN6MwB/Lsn7K\ni2cjnmPjNMOQCqVVQCLToX7YnRZXRaJM3p5zGquV+cpP0yA5wciHKkGE/qRG\nInDFJQ8gX4HSLg8rTZqtF5J2P5xAkpekRBBv9TyRZe5yh/1YZREZLhzEqbGq\n3yYx+G7EALH2QlgjDe/VZ/ZIIGZPlmGBirAGBYhuPhX1onXKUc9Xy0T/VKHT\nmQB0KTqLt3LDtgaREAKTLJaMJl0/9Il3hPnuYxuRNb0F0CnW5yISvmrx1aP4\n18WGZQGjcLP6fIZbiySv1gaPzE3wHZqsZFEbwdTExCaMMCQYiQ6NjfJ2NDN5\nfPzon7SvhjcKpiVoGyDzoCs/uuYqb4HiZxopIvJDGQTWYUJrxC9Qs7ITCeG7\nyQy0UYogFwez6WRW3RbjMLIyGc4d0W/R/yYTFLUyVqeJpRDxrZ2d7ZXgqUOU\nupfEuGtEgT2eyGro4tPJMkeR31dXkmoWj+pMtTTEmaCtjKR4ZcJug1LKv4oj\njkEsAni/eqzV+xHnywQHKXWfbgktF4Ja6bTg/czw/DgKsI5beIf5mShFcpvE\nh9CUpZTsy7TKE3vpqVwlJOTeuzWmXCKolqt5oKsHLJssBOSNtBkGJ3DJ42/V\nZml5XvaYic85/7FZmhKrTLpkzguL6LsBs8ExI0HfleQau+LH2sQDGWJUHfPv\n+QiH\r\n=Bqm3\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"dbbd8db21de66e88b3e713faa99419e6b2f53c68","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.d57ec74c7.0","@material/theme":"14.0.0-canary.d57ec74c7.0","@material/feature-targeting":"14.0.0-canary.d57ec74c7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_14.0.0-canary.d57ec74c7.0_1637079372360_0.9743651289851163","host":"s3://npm-registry-packages"}},"14.0.0-canary.554c71829.0":{"name":"@material/shape","version":"14.0.0-canary.554c71829.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@14.0.0-canary.554c71829.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d0d569aca4ea7edbeb3497f1a18c6c725aea77d8","tarball":"https://registry.npmjs.org/@material/shape/-/shape-14.0.0-canary.554c71829.0.tgz","fileCount":14,"integrity":"sha512-zYmapi8xJq/iAY28rLWNtE5PwRyX4eRrCf1B/Hm5UTomecrfCDQV83Z21I6/HE536sCOTaaWRsszB68TyZMGhg==","signatures":[{"sig":"MEUCIBlNrr9LZr5sWrl3CU5EKyo9bNgl6v5YsJixb5R0HNpvAiEArVHulpRq60stvfwsl1HuNpWnoawueyJSqcBhZQX8FRQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhk9n3CRA9TVsSAnZWagAA188P/3g4caVtubeePcqhNDSb\n9eRokQmkrdwKZ6APEq+yVrwUT3IuVQxEA0EE/UEN4yRxEFVnhRDiVjQWE5WM\nu6OVCqFaMSSBjTk/E51S3YkvnPotFs047/lmkBQsOzq/6MwbI2p/hgV+rF+Q\nhRbYVzpIWzH6611CEDsdXS9YYhp7ok+59dMsRhOTtTSH1m1YswBqrKJ+x6h1\n4S8KMgK3i+pnaI/TrM2d7HukwNmzcZNznujTw9gfC4hYvTQ1SWfQd0JpIGAD\nAOEkl7ohJAJY2QjYnmpsL+AqkVLXsG4gEZnUAeXv4OdgObhP8bpRHaPYwSTd\n+WYOA/xva842d+VMBKfSC06rgfHcDb664RTnf6kMZvJB2fXfCJx8FVrPbvI4\nZO+1U/a0B4a8cJ6baMKnG5SCfEMhIud/u3jzCmtE8yrhWjDVuHNUvUoXJL8A\naRa8dlF48rLa/jcsBl1gHUUx1pkf+FwUJCpcchmMKxdwIwucMpPpbGO+lBCs\n7oZ1CHzkkh+BT9rgzWPCWseEYDYZh5J0y6yAo8aOJWDVP3CqqZCIw+tBYGtW\nAtjiFbPjaTwdBK1pBNnpX/KvzMLeUDb+D1v8v7fMlVIuP7zT+Avni/KkKYg+\nburxrHSmn+dlJMwiUzdYkWxD3HRTO3lqD27Ipq/ialVVg6n7fBS9997hB6hK\nmNms\r\n=CLql\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"be0799ddf10fc34b46ab20d754f7ef73d9efbefa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.554c71829.0","@material/theme":"14.0.0-canary.554c71829.0","@material/feature-targeting":"14.0.0-canary.554c71829.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_14.0.0-canary.554c71829.0_1637079543065_0.9969973458761816","host":"s3://npm-registry-packages"}},"14.0.0-canary.3ef470efe.0":{"name":"@material/shape","version":"14.0.0-canary.3ef470efe.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@14.0.0-canary.3ef470efe.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bcc375bb48803b640b4109fbcda44a8c63db32df","tarball":"https://registry.npmjs.org/@material/shape/-/shape-14.0.0-canary.3ef470efe.0.tgz","fileCount":14,"integrity":"sha512-X33BwNGL4zIq9m0AHPiGKFYt47Sa+Ce6ANsEm8hLyunIzxyKeJPl2gFkPNe7pblAVvNCcWBnpnshG4cDWftefg==","signatures":[{"sig":"MEUCIAxDNUPfOl44Il0KqDaLVeO4Xk+U85cLphXSFwI5xE2CAiEAg5W8fE8MlIEFjO8BaGBajV4vWQusmUNBI9z16MGiWVQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhk9saCRA9TVsSAnZWagAAZ4EP/jm698q0V7yiKDxDEf48\nEr5KbC0w7M1x9I+M0A4D4H7tdARuzlBH4235qUSKFgOoNKDXHYpmEDFkbXP4\nFxZCUFd1R4KA/IMl2xLNDEJlOehIgZuJSpGnNSU680VAxkH79a2Y0t/fBtUo\nuXSp8dZbsXH+VpZ1pKA1lIxDqcTfwcMhCYEF5kMPUrYQ8dZnqNIub1VrcGkT\ntsjWTdD0lEvS0N2Bir9f+bWy1b7NZzlA4KAUvVJ6sAVs9fDfhOx65utP438g\nAz10dPl27z4CQzsvBKFc5NNPwkerZAI2cvDHcsNPmwjDFS5+MKmAartUysB2\nSHwuLrVCarnA5+x+UFOlH6vn8x2BnibfX+1pe2rsm4QuEHE1V1lDsuuiY0zg\nPT1Qpn4Y9rBKb555hfLMN3HKQBs5NHDgoLBbB+kuANu25tXefiRF8WqATMA0\nSe4HjWQR+dcRkso3vy9QRdxyFz9tPxeqURa/ghg70RjdRUQYDUix9yOfuYUO\nD46itkzlmprynd8zfTAG0/bBjtPYq1QkEfe4m0yV+ssuo6L5q69L7qVUEsZL\nUqEFqWnGulbDTOjd4mBLRm/jFFrpky1+Jmw6XvRGpSWLITDlNr2b0l3RnF/E\nYmUYUiKmBZ5aXDaSMqTErunNBrGMo3VgsoVkxAJKPPPzpTRKq5YJXsn0CwOO\nRl9F\r\n=Ss+D\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"49429a109e0c13bb4f9d8fce0142cc5f142a6afd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.3ef470efe.0","@material/theme":"14.0.0-canary.3ef470efe.0","@material/feature-targeting":"14.0.0-canary.3ef470efe.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_14.0.0-canary.3ef470efe.0_1637079834760_0.2806856367333683","host":"s3://npm-registry-packages"}},"14.0.0-canary.61a28b2b5.0":{"name":"@material/shape","version":"14.0.0-canary.61a28b2b5.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@14.0.0-canary.61a28b2b5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ef9687cfb2c8d887646194bb0886f015fc0b946e","tarball":"https://registry.npmjs.org/@material/shape/-/shape-14.0.0-canary.61a28b2b5.0.tgz","fileCount":14,"integrity":"sha512-1oEUNGRD8It77J9M9gQddj6yplG9SvMDbnd9n6HhTbjw30QrMjV+G+K1Ze2sr8Jl9/kvaPUJ3j/7LfXdoySFpg==","signatures":[{"sig":"MEUCIQDOKoqzp4K9BltK5bRTXoz6K0HLEDOxmLCkfN7gSVgO8QIgARySuJX9gsqhyjR3ZQjFrLUBiIlF/+Ear79kE2wuh24=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhlVD0CRA9TVsSAnZWagAAnWsQAIn1lzxTvjsiDNsBTdYN\ngjxhF0jSALEkUr4pdpzufucu2shQppedq/BR+SVg3hDjkURor/+Evx5vySPt\nuo7X0o/+2oiuhvuM80PurnfA7TERe612VE/52NLN0fUQv3/2JyV5QgohAcME\niOw3zoZk5SdRLavw0ooYxnWh/sc5ZNgGQsAt9oWC6o8SHIZs4+M4DZ8xY4Yr\nCzlsV6f1bo+PETbLTVLt1H0E9ydSGlKwz4GKll4pPCqEW+kFWmvEW4MVU8zn\nXW/8rJ0qsfjtlvuU6zGGv2WuI4XxbExnVifzpv1ugle/xPgYaR2ZWmxKySGU\nuG1diCqw2xUMmsLIYSVXUnOTyHvzB/3HgT33XCFzA1kNmL6X1e665ftnxHa0\nxIsxrfKiV7QpTRYarDNUIRhO+T5f3V7W0KyswavK+y0uTci9cMV0p0gBL7uo\n3JA9OhJbF/J/wX7WYtU2zqL3/LjvcfhJ5bZ542G21SOxk+XDnkUxAt3o0rha\n21vpRmNboIHXC8+Vhxs7BtS48tLBsoK15dobvchyTymoGRF0JBr0hzLbDYhe\nsC1bK8tGV0eA3Ltu8br3r6tZ1S6/JDUe81b+D83rA2aA4xYWyiQFyB6nZYkx\nTuCFEzdVEKZbdOPEgdJwJRhblLgjb94AGLy1xB/h1Vj7tyFClSkn2DJ4xiW6\n63MG\r\n=vMUK\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"314b98aa8ec5a35ba8a45706765f4cd7496dd803","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.61a28b2b5.0","@material/theme":"14.0.0-canary.61a28b2b5.0","@material/feature-targeting":"14.0.0-canary.61a28b2b5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_14.0.0-canary.61a28b2b5.0_1637175540584_0.6284287230629217","host":"s3://npm-registry-packages"}},"14.0.0-canary.fae6c652d.0":{"name":"@material/shape","version":"14.0.0-canary.fae6c652d.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@14.0.0-canary.fae6c652d.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cbd029bc375c1570e8fd493682dd4124baafe428","tarball":"https://registry.npmjs.org/@material/shape/-/shape-14.0.0-canary.fae6c652d.0.tgz","fileCount":14,"integrity":"sha512-VqU9YbJX7rWXk0Ia4h6Y2ryJ0B73hXjcsbZKqymwQqwl6GhKN0NZf8TwfZChG+Aw3LbP5IYnVd047kskB/6yRw==","signatures":[{"sig":"MEQCIHuUtlN1vIbfO6xoSHEPzUtUq89LrJDUq6Ly1h1YQ9L9AiA9qxAdMJmpBld4KI6L1V5HDNzllbi03z+WNHUvYyCwYQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhln5NCRA9TVsSAnZWagAANvsP/iE6iBSHwWq4cGQ6SogK\n7MfiofFFAandDfk3GsPYSgvtpHyyST3ycDg7/KntmLgBfb7mmos7t3wvLjbL\nO68apAMak6AR1uDmqJfDho5HCMkwvt+h3O2ozXgKq9gH2ROeYav0BDGaA8aM\n73eJvk2ef7rmmGO0/aWjQ7vq53ZWysZiuO1/l8k45FJxAZRxLEhwTvAjpINA\nKCbkTlA11G7IbzFzsdhDcmkQjh5c84hgytO41WCR7MtseHSH3PPTVYbrh5MG\nmJFri3QcXYml/g/seI/g4ZuEzSLgIq+/xmpv1sRkBmsuqAlOMh6kdZyZJDVO\nxb0qDAGTcaKuMlkIBqf4+xFla0xfTqzByZA3XrmovMk/hU5sed+4ljwuvkzS\nbxhlR8P01/n+81BpOFplK8ikkIoLMKHr2ZlGd1Toq88Bo+4c/RC2zNMLw7uA\n0bLx1ajQiqqv4E7/lh/FCOtxvGtK+T5JzIglqw5KKaNxJ5/8gspH5COjMjhy\nVkVSMzBxjtNrf2ebbdQDhDgWcemL0/L0V+m2/gpxPtBqAFVKdnhUupbwXxCd\n38OTGJQmxPsKW1QJgSti4QoUi+Q6WLmBEYJ5v0auV6kGZ1+lejsSgV5fxqWT\nR04uLWrNaRXuE9vOj6Qq7RHR2EMaJE7s0jlDSw/GewEijaNIvhLRzgP+Yt1m\niWl1\r\n=lFs8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"d27c4bc9db002b9009b70cb7437b393ce59b9992","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.fae6c652d.0","@material/theme":"14.0.0-canary.fae6c652d.0","@material/feature-targeting":"14.0.0-canary.fae6c652d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_14.0.0-canary.fae6c652d.0_1637252684930_0.8770017869827116","host":"s3://npm-registry-packages"}},"14.0.0-canary.978a3b5bb.0":{"name":"@material/shape","version":"14.0.0-canary.978a3b5bb.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@14.0.0-canary.978a3b5bb.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2acd3ca79d678a87bc0e8aa70ca307d63135843b","tarball":"https://registry.npmjs.org/@material/shape/-/shape-14.0.0-canary.978a3b5bb.0.tgz","fileCount":14,"integrity":"sha512-hiOEXAfEQaGP4BKiC3iTSHoXudzjJh2D/6dRSdHwIYyWEJXKeKUfAlwxBhl1d3Kq3nBD6VTx8BVWKn2AbBYU5w==","signatures":[{"sig":"MEUCIQCojYoaEf1ObiWXJwxsloWX5+yLLGkyFY05qzfMPslSNwIgLZCJXumZi7iR1C4QxhQuvo4MOiT2h6Q04/sJihWY9oU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhl/1VCRA9TVsSAnZWagAAulEQAIaidS8xspgkNFowcBNP\n1ouYPr1uXZBdzNuP812geCyMxTHyx0V1jtmBkk5E0ykSw76EOG45qlipCP/y\nBdBfajbvwGn6XRCXAKl/wa/tXMA38T1sNxxebktuc9+eUm4my7sV31HjOeP7\nsMR0Q620RlT//P/vaAWu3n+8QmNPScaAC4RzM0tAXhTp1kzbx4YYy8XkEeRp\njE01Fq2bVjoD4hkr0h5cWfV+UIHvXrqIHznVi+b9ExONomCq0ayZ/zuD3nNW\n1rg8DkaIQYARDXDY2IV62N3L+2mRx4DHlMp0ArcmO/GIzL2rBDrj/3Hhenrs\nKu1M3CixyJ5kEmXCZ8GBEkF+TG7bYTT71cmHNjo+JZIKyJzLm+HBE+cpB8G5\n9mBITT9uz4MiggurMn2AZrX8bsuZPonWBi8huy/X+qcnhItZiyUe6mXH2sgz\nLima2ohKwc2CxfNduU6JiYO7PUNjKNmArXMUVb/g6fmroHyEaOQXojCVSInS\njyihRJeZjxwfS4aUG11dAX+MPEF3Sz4hhKGwyMvMiPLFiSzEWATt0TQbzAXK\nPYMpZsig1sKaZLrpY8jdJGoRnbAHdACXkfFFKbJcxQGrynyEGqmvFRmxh49c\nMpscyFonwY7SkKQ1nsLvL1LrBvh1UZqFhwxUej79HEVut91r7KzcX8T/g6md\naFYz\r\n=jQ3m\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"0d21a3472967f5ff791662e03961fb034a9227d5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.978a3b5bb.0","@material/theme":"14.0.0-canary.978a3b5bb.0","@material/feature-targeting":"14.0.0-canary.978a3b5bb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_14.0.0-canary.978a3b5bb.0_1637350740874_0.6200212096469739","host":"s3://npm-registry-packages"}},"14.0.0-canary.e6f43cf44.0":{"name":"@material/shape","version":"14.0.0-canary.e6f43cf44.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@14.0.0-canary.e6f43cf44.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"948c0b0f90e5b9ae4303454060046e4d270ce1ea","tarball":"https://registry.npmjs.org/@material/shape/-/shape-14.0.0-canary.e6f43cf44.0.tgz","fileCount":14,"integrity":"sha512-9WszYF2piNPo+0ss3T31rIVplvTDN6Wd8KzceOyaOessOHn8HkFvmaXWabtJ6WT4uU0gqh7d6HEBcnqUA8H6dA==","signatures":[{"sig":"MEUCIEa360RISgDS7mC4gIgVOr2JWeON1fHZseV1B30PdBUHAiEAqtM25LttqQHcK69GBKC+Uu0YcgSd8TQBdiVbLzcmmwc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhm9S+CRA9TVsSAnZWagAABKoQAJcXZPvpbPhRBQxsutX3\nLFwAVSE3FVu+nsFT8MKeE3Kfawwyv4YxaEWbdfAiBEkpGWnshSRzrfVMtH2k\nn0i599ADnWsr+m5gttLJAsOvr/LnmRyfvSWjLkJNRRWnq1cWQwG1nBaww8mj\nivrKXdJSQyk5eBXkFKZ+ZJB/UeiyCuB4d7cyhwtV0CPTEjM3w8jPLL6M7HDn\n5d5WIJQ/LyQm1O0+tsoZWfuhKReUSW7kZRrbzmNWuXvs0Ltko2P+IQcBNnDS\nkZMP6G9HbbLwux2wgcpBUyYYLn0KdTo6X2OWgQndxSez0+4VlLx0A4wRqG+v\nrfJPQgmWGloZUiQJtqGoQy15OTFI+634GM0x2f3xGeozygrCCrVK5AKlVnvD\nfQbzzUXppBBKgT+7mOxxJVM2sLkUExzfZeh95CCZ/LWQyoaNbbZAJRLPuXi9\nt3jp0Yob3+agICpXOzli5m5ZuBAltQrMOCcw+ZGV43O1/iiWQ2tXTLWztCw2\nuvUf35HcJZ9J0eOJeqZG9X3qqmmMPq1Z3yx6+s979lUKu75/61ddv2PwiUtr\nGSCQGQ/7rxzLfu5Mxvclx2tzGkV0tUWMhF1Y+A9Zb9Kj15oo7y6oU7UXLFeK\noiY+fnXtQwivYVCm6Tp/A/rfdx66FqHvhnKYMgSxdsKJxpt/nqZMqUR/dn36\nXCby\r\n=BKBj\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"36200e7acad50905888cd5fbe17075663a96ef91","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.e6f43cf44.0","@material/theme":"14.0.0-canary.e6f43cf44.0","@material/feature-targeting":"14.0.0-canary.e6f43cf44.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_14.0.0-canary.e6f43cf44.0_1637602494640_0.7568685860430442","host":"s3://npm-registry-packages"}},"14.0.0-canary.39cf14bc3.0":{"name":"@material/shape","version":"14.0.0-canary.39cf14bc3.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@14.0.0-canary.39cf14bc3.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0338b375b7139d521a3d0547d6b81647f13ba1a3","tarball":"https://registry.npmjs.org/@material/shape/-/shape-14.0.0-canary.39cf14bc3.0.tgz","fileCount":14,"integrity":"sha512-6gTyopB2GampmOIe2LnbbmugYsMqM55atGoHsuZulzAx3W0etJ5qFkDn8aTnaJrq5xdAcyp7Fu3Ngz6YJhhyaQ==","signatures":[{"sig":"MEYCIQC48FePRl0kQx3zbXX4whvEmZmcfT3oFe0Kmayszca/wwIhAOC5sAMjOuy8WR+smFQ2/YzmpwrlbYtbc7k1hRO+1B63","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnCHxCRA9TVsSAnZWagAA/rYP/3a6WC0+eI0wIsH50+OX\nicEDIpT18RPSDPcwLqCpAaSQu9ocUN88yANJ3SOb5GyzOQFoB8+tllx6HYBq\nQ8j0oO70D884aCos3kZkoOt69EYgZMgYAjEjbpL2yt6R+ZkoibSoZlSVTIFB\nKek/wQtsoM4s5961JzguMi3Hc/Eg3Tj5q0PZFyD5BxnOmOD4uSLvHM8YhKiD\ngeyv+EXpZYONisa4nw31EyGckHXJ13WacnR4Bu1+W6PBGq8C9YSO3879/OKR\n8J0rhC0ig/wjtZI/jY1oCiq4HC2bZdPOmduyHCGxK6+hvkKDguMQsVVxld/R\nVIbsrR9uN3cxo1Sf0WtdIze+VOM2CAgcBofYVeQE8Nm5KR1pYT7gWcFrpbjY\nztmt5m63NvbJtu+lGiC4sY9b/+MMz7cAPtwb/HgiLQ8VxhD7xEIBEECRXNdU\n9O1OpaDbhyVro9JXp8qND1S9ndNUUeH81sYlw5pSAsEt+0MnlAyR0r4FNL09\nzClZWE9VHHXY2yiJwLpr9mshvcGOjoXTdjvv3XBKVAh2hyGTU86CPLZehqIe\n3HSv64bFVWKcmrzp4YE2xTpLOR+RhkbcDeC+OkfOu1BIL7Q4KkY5YzgkCQcv\nSpMhSk5lYCvTII1J5mEBsVb7/i1JkulMjv2QLnjnNiXryAlq6aHLSWSLx9Yw\nxQCF\r\n=0fsH\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"7a4dadfef1095fc344517a394b0286ecb59751dc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.39cf14bc3.0","@material/theme":"14.0.0-canary.39cf14bc3.0","@material/feature-targeting":"14.0.0-canary.39cf14bc3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_14.0.0-canary.39cf14bc3.0_1637622257202_0.7758506582282287","host":"s3://npm-registry-packages"}},"14.0.0-canary.93134d453.0":{"name":"@material/shape","version":"14.0.0-canary.93134d453.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@14.0.0-canary.93134d453.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0ea6cd3f5c560005a992f375fd17fc7ce118a760","tarball":"https://registry.npmjs.org/@material/shape/-/shape-14.0.0-canary.93134d453.0.tgz","fileCount":14,"integrity":"sha512-A3i6MpWdTE33A9yH7t1YXg96UcJMMvEQHcGzogoosxTUksy9p5nkhf2iy2zqmM145mJXa0gIqKJYufQR4bP8Xg==","signatures":[{"sig":"MEUCIQDu16OlVl2kke34aZ5GXzJfJS1rco5Ub9OmImyiS/OOQAIgXOEs1KULsjWM5zqauizaEPYqWKeqOTIKn1V5IHIdmwY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnQsLCRA9TVsSAnZWagAAm2AP/jHoFE3+rUlUHCB/IOdB\nXkumhb4WuW6gFKLpwZvZUtkbtPhMtjxDUEJcTtMcIim3n7VQT6IODpdFDjfq\np1CVG8COZKIjw7om6iPpHoTFLkqXhrCSdJnH4d0P0fOW+YuALFogYXQ2dSSW\nbKEteKSei6IjxVgRDtJgD1SAAjJGyQG0d1Y0a+Ciyx1Sj3iwyZWWckvr6IDw\nLKllIHWb7Y0SNVEKhyzAcwOkbFjZvbAWQlJvgwAxikA/8XhdXBvehWDHOo9f\nGRubZcy4deiOyV8Hx0+Z83/dDlY4Zpmsg5YLFO5Z7Rt0l8bci16fGl3oXj9U\ntc7dnvex/XaH49hx8CBqBOsP3BPOnObDOeajgbDSmnonaSXIm9DmlCfJAlnO\nSUe8/UIfFrjCHHJ8qjACfpi3yvkg1gJlWB2alaTHBUEtWC7EkRMSAM3F38ZZ\n4Jv0nShdgp9n+ATyi9wHoW2nROBgttZRoKO7jNOijIx+E8JqDJgNVbqofvRF\nunbgW4dBT0XktmaQABNOsPzUJlGcO5EYm2riKjTj5LRRzHo55v1oil3IuEap\nnAEf8rDUZm3wpyp7Eu40kzrkkF7LRTKYsPXHSLs2cZI2AIfiSHFN7I7n8a6+\nmD77Kqe+4KBZBGKUKwxd+khdhP2DY7p/W2G+WYciOdcOwvGQrNcf8qbopjWg\njcmb\r\n=i8pQ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"f37d4e46e027a3258621f6950e12796013661afc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.93134d453.0","@material/theme":"14.0.0-canary.93134d453.0","@material/feature-targeting":"14.0.0-canary.93134d453.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_14.0.0-canary.93134d453.0_1637681931138_0.5218050636856439","host":"s3://npm-registry-packages"}},"14.0.0-canary.bbd11268f.0":{"name":"@material/shape","version":"14.0.0-canary.bbd11268f.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@14.0.0-canary.bbd11268f.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3c977598bde383601eb4aa4a67e5d04dfa8fdfb6","tarball":"https://registry.npmjs.org/@material/shape/-/shape-14.0.0-canary.bbd11268f.0.tgz","fileCount":14,"integrity":"sha512-DrMy4EVAsLl9kWcHrqXIwi45lO641gWtjS66rfa/WlblkWRWbVMUHPBJDMCaGcG1/B4s5OphJRE42yriqKHT7A==","signatures":[{"sig":"MEUCIQC316Pb5kqzDl6vXtv+V8A0hn+apNJTO4bCDwnmIgoXVgIgUlcGczJadkPxNp4BGU7KASi1Q9Vkc93DrT3p0f9nERs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnWvjCRA9TVsSAnZWagAA8gIP/2UEzvZGwfgTnV6bP5/f\nNrU9GL3VwvHCEjZiNAnb091q2UguF3cinQlUmnqjkpJUgnbk8rxPWRrY3qGg\nofh1lZxom53S/UXG6+0NV0FltPVLvd4lGLn/Bz/0saM3JBrhWWWIJVxn1PDV\nKncHT3a5kc+773rTw7sl5LjjhmwfMj4Tu3xQAs9pMU1Hw/VKli8/pes7cOim\n5xaXkIl0CyW3Q0vp9xiJkwiKthCBWtDsGqbO8NOHhnRXvq5Au5tLuFHGs0wX\nxd9eQlgJKqnz6erafuyQLWvuxCllrZk8YtnPVGCnFTeoXhYKn5nPhn6VjdIL\nz25VVC9fPk19FL2yngUtPng9sy8hhEyPOxR/EMFlKjcZYzSg46ygvy7UXkn5\n2LvJnQzGGsMRkg7B7fRCJqof1uXO12qTLFdYZa87acyirnhyK2Nwz/21Kazt\navzqHmj5A6skOHESnW6c+pM76wnbQPKi0NHwrGdsw8R+iDCIg19AuxhUwwA+\n2weOZQGoGBOaqpdVdPk1xop6QE6XzEL19FkrpSeUL4oIruM+/TiTjd+CoFun\na5DGLO/ntQnCh+8Fa5rae6fuvxD4zBlDEt4AavuAeZeO4d8H0lPA8OdWXppD\nui0RGmiivv+R5EOFf+6UOyae1DNEwxX0ZfSccYg071h6udOqAAtKwiV87HeK\nG2FZ\r\n=61wP\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"46484a77ecd0c6d7b548301f4e92325ffc4f8010","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.bbd11268f.0","@material/theme":"14.0.0-canary.bbd11268f.0","@material/feature-targeting":"14.0.0-canary.bbd11268f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_14.0.0-canary.bbd11268f.0_1637706723057_0.26570674232000324","host":"s3://npm-registry-packages"}},"14.0.0-canary.3db9c4d3d.0":{"name":"@material/shape","version":"14.0.0-canary.3db9c4d3d.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@14.0.0-canary.3db9c4d3d.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a18f0f62a181206168abcf2f5c235f6a01d53bc5","tarball":"https://registry.npmjs.org/@material/shape/-/shape-14.0.0-canary.3db9c4d3d.0.tgz","fileCount":14,"integrity":"sha512-b2jqhr80v6lKmoTHhMWc/06+9ar+V/mpAMyBxVBOfdBDLVTMU7anSy4HRsq7rvdTsH1OTJnVaHn9oI/U0N2DjA==","signatures":[{"sig":"MEQCIDsfG9rdQWU9GMSCxt6lUdnC9mOXfaeOEeeIop5RIK1nAiBLGNeqr2Fq65EKFy+1bpgY3cAbGPVJxSwgQEjK8e9EBQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnlwnCRA9TVsSAnZWagAA0yQP/3mmtcA9Oo4dbFjjuaic\nDBKe12S7ohM0cFGlIXZYlRoiPUdi0tDeE+T1iNuAhgIsEKAvs3RsaxA5fAwL\nXf87Mr13GV5QoeffP3wCJTs8BlgiaeDuqApEJu+T8HdnFYEsEAS3GO7kIxuW\nymsYyCOUfGWPuGattVtAF9eMaHYR0gX7HmMbkQyIvGJVMGgiMc3knsv4Rkvu\n/N1LlUMgancaGoQc3TKJck1xt0SP8r6++ezW96Lb0gJ+LsRcvO1xKg10MrR0\nbl2gGrN18Pl42gM0J/G2sXnREHNHzcbJV4AHi1pkAN+HUwvx3fZ/sCR1QPiH\nQyPczOC0E8tYHDzvHSuSxx8i4hRex1rtOgo8a7AgTNB/dZjdoqLADKe2EVAS\n13ztkMytC6YqOBRM+j7s1Fdm3LMDW1m+HQJOPJbdLpjgWVOO8+BxmikhDMwi\nYSuKYZullN2Hza2Sm9f6sSdG/Gl2Syz7Bcm/4n/vyEH4RARYmwQSyGm4wRQJ\nW9ZHwTq1uGjR6lLnpxBy6DYZ3QM4g60kMD1KJ+3UNvdqUN3XH9KUQcpCdJ+R\ncXPWL+Ww0cGdWBn2s1UhkxseHd1JChkvP73ghi9WOEsAv4DzVyV/ZaXSEk1Y\nfIcRNcTHBtcOZ5gZS1lMbsIVceD93xVLKXRBpaY7pSMJccXebkL6Kbz4w2UN\n7+d7\r\n=zOq7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"61e9de8c9bd6ef83a5f0949cf53ce4a8b689f158","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.3db9c4d3d.0","@material/theme":"14.0.0-canary.3db9c4d3d.0","@material/feature-targeting":"14.0.0-canary.3db9c4d3d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_14.0.0-canary.3db9c4d3d.0_1637768231446_0.12261288436777473","host":"s3://npm-registry-packages"}},"14.0.0-canary.78305b6d5.0":{"name":"@material/shape","version":"14.0.0-canary.78305b6d5.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@14.0.0-canary.78305b6d5.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d2b6b8508755bcd916b33e51ba8746a64d9b35a4","tarball":"https://registry.npmjs.org/@material/shape/-/shape-14.0.0-canary.78305b6d5.0.tgz","fileCount":14,"integrity":"sha512-QxYMW7vFE9DOBqAU3BT8DXrq/L/rm2RBvLiRaUQT2au/HLBqTBcovbggKuP0pp6LQaKVomAZpKVy+C7o25Q5ow==","signatures":[{"sig":"MEUCIQCB3AoD5q0pBhK44IxQDUrd29yRg9QIAn1PR4fyKOIlNgIgQ18a8TgyXwg5TbjJxfwVwD/qd73SLbkk31BfDjZPM4o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnpeCCRA9TVsSAnZWagAA0nkP/i1hVyJJNQbwzp0JsRlB\nmEr+ly1061eOVI+CeX9j/+5mdIGN8F03rRCn/eA4jnCEtbum6i4OYWygy7t4\nVEFXMrPQtIty4kHhTAIg6DkVNNLK6UVCmJ12kJdqMJD7idZ0/n8h2K/J8zdh\nuVrPzenkSqgGiPFqwvSRdG+E6T8gaxlthvwHNdin261gpKUNLMoPb4CbCkel\ntfd+qFYpWbG7pBWI00stVjoHTbo4i9OBnbnb2UdsZ5ZfiRFDXmmA1AeQWjVe\nS9AeimHp1UHd2ECPsn0v9/oh/b5ZIXM0XXncPPX/cWKXzvsEFuVDSI9+frpa\nNTaIRTZVxshbxF4BslflmBoXzRRZLhQEVijyif+kfv+AAdYfFH/e8s10K+2m\n2jq6nc/kYNi23wNdrdLIC/6sX8IVpGWjaWcGNQoedn+hPETCTHkEqaLiDq0J\nQm0Fv1Ny2yOVLiG0cCHZw2cn5UMIcuG0iy3Sk6QgbsrdMTZVWqo3XVXg+xcq\ngjCeRy+vjc1/CGzDBzSXXVGj+ADXOJ3HtUBbR8GRSQj17Bx+HGFNb5KvsRqU\naqlpi/Ra4LkL8i9RW9Uwe1EkITMoG21mLUznuFwNz/sQf00NhBu5NkQNsQbL\nl6mwmvvAlZuRMyTq10ZPvcKqw78micLnHRDtKMcaU5iwSSjUixW5p7t0IfXi\nV5qC\r\n=bcS+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"2885de69eab36903fec52b85e7001eb561624eff","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.78305b6d5.0","@material/theme":"14.0.0-canary.78305b6d5.0","@material/feature-targeting":"14.0.0-canary.78305b6d5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_14.0.0-canary.78305b6d5.0_1637783425942_0.7965920242883933","host":"s3://npm-registry-packages"}},"14.0.0-canary.43d08ba77.0":{"name":"@material/shape","version":"14.0.0-canary.43d08ba77.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@14.0.0-canary.43d08ba77.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8c92e89f99c7a77b86c0ff945d89b33184a05f00","tarball":"https://registry.npmjs.org/@material/shape/-/shape-14.0.0-canary.43d08ba77.0.tgz","fileCount":14,"integrity":"sha512-Owo74UbKcISJOYHaGJ4hdXLepZHsblRRmIy+qj62Q8Lwb5p8moS0xJp2T15nKSo2AhS8Ghaq3C0d9NQZMYBCQQ==","signatures":[{"sig":"MEUCIAw82DO0cO9lahzuxJv5vvdbCJpJdwH37LbpcsZa4e+WAiEA8DFnAaQpp+67mkBdRP+q6ySu+cmhFdVF6sa4qa4Ga84=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhpqv2CRA9TVsSAnZWagAABdsP/0rWSk10UPRjCOT7zaJN\nbwLH+KklhDb6EiHdeyJzyldoqI89FWvl7wUxu6hw19jFJTPV9t9zZ5fU/9W3\nmTbTug4SY0295vIalL8fY5Fu6oEBjxKzcO2c65/S7OVAgwVCWKagli/3TQfP\n78AMTX025+tO7zV7OuXg//T1Z6DUQXAhmVi/f4rvSJS+rA4wVGEz3mBya8Ud\nkY8Kmy9DHOcWcKpmqY8EFzJrd9bbAak6hSkNELw/82LXUa5Hop2SOAWJuHMz\nXpDLc0XUEmTk//ZbnbC0n5VwDZoirLTPcwlwxqZVD+Yr48r5Du7Dzo4Ejv9h\nQ6SHH8pLIR2Xn/1KtmJ4L53UNo4BT8PrjocLFFQgnqFT7l0y7l2zrQeh77BX\nJUA1R5yUTabYdxGM1EBoHFoyOvtJQIz7DaLLpLxxiTkMxcdHBTQGeI7wdTej\nTPxjCwcfukYwDKiJqZXQlx7LG8lwzSlshJt8DoG3G4212RUCRt9NiPEcp0wY\nR81dXiGeN1zeV9PE2eOzB45wnRl451aBGBU7zJqZETegyOiotuzqLFnrZY/2\nIrhnCf/B19w6nZiPOu9eE8vhTA//BCX18n6fsbhH5w+dAmwcHTV1+KCIA4GJ\nvouuCgTfsnv5dGMxW7Dpjds1CXTih/ysM+embxFmlbhl03u5VtW2xz96gaKt\n1Yc9\r\n=cDvL\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"d1929fe60ad2c7ba249562f1c1702898df8f04d2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.43d08ba77.0","@material/theme":"14.0.0-canary.43d08ba77.0","@material/feature-targeting":"14.0.0-canary.43d08ba77.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_14.0.0-canary.43d08ba77.0_1638312950293_0.7615435029773427","host":"s3://npm-registry-packages"}},"14.0.0-canary.17a072535.0":{"name":"@material/shape","version":"14.0.0-canary.17a072535.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@14.0.0-canary.17a072535.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4ca080293a7ab2c3f5779414d6821f5adad6f52c","tarball":"https://registry.npmjs.org/@material/shape/-/shape-14.0.0-canary.17a072535.0.tgz","fileCount":14,"integrity":"sha512-RfkdQSsxqX6mphiFOtApgLDdzs0nsuctQt3iLQfXNCUx2T5hrrGZmlBwq6YUTiSdLcPuEmTJxdtUn2W62a0BFw==","signatures":[{"sig":"MEYCIQDldYjal5zpsFWXzlJqIGn5Q7k9Da3iUHpZkqvKkxgn3wIhAP963q4xg3RLa0gPbfjFhPJL2g8A0DxveXZUHx1v4r3J","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhqQrNCRA9TVsSAnZWagAAG6MP/3H4FV1KR6nOHBdO8GWS\nORbquCYZogka0h9pd/latsSRma7QYFSUg0+LFP2LjFB3jOkRNP97wiHr5eyK\nGc58ZXtFXAVprOUbLtzH7uqPKx/wQI0OslaF6Txop/emVrh0uX8XCfBOfRfP\nFUbPWTVQ80yv3L1r+2CqLo+zlLlgWaTzdTsr7Bx/UGgxhYsfdgnHZH7fpNyV\n0+QPqdqVIaMkfbXz+yzhlDaX7gUyFR+nn1Pu3F9kejdA1eAFHFd53noTfP2i\nVDU6UUKNMG6y5rgrkJLoWGQ5TjF291QMx4iaN8H7SqBQMbX8V+fAoERnx1Xi\nFtP9n0VDvGbkJicWFYxb6MaMd/2wDOkOjbp+4F2H1Ry34QfQVoZ3GAunp9UW\nBOH1X2Q417JmQWvSCya7SZ9KScbd6LwGjVjpAUf7hJTzpbSTFwLo/hLnkgwS\n+czVcMnRW0HPyAR7lsQykZyCArOkhQrkrZUasaFHbo6wJela2uhfsVIketyD\nPmOJg9uHz+Es2DxLvy2Y39+YjhHruMEtn89JR5N780L3Sds5cIbLRUC50Zo/\noROpdqjt/pYsMJvUU1aW7HmYHejysUeBUGDWmdIgOzOGJEyt4LSVoB1exv0a\nY8h89yjRTglrDhln3/GI3i0CaPWHg9oBREsZa0D2yWjhpgjP4zT8NeDXVcbZ\nzOTf\r\n=CPtg\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"317cda93b55159038a12575fec5c35e9ff5460a6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.17a072535.0","@material/theme":"14.0.0-canary.17a072535.0","@material/feature-targeting":"14.0.0-canary.17a072535.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_14.0.0-canary.17a072535.0_1638468301222_0.990033576555176","host":"s3://npm-registry-packages"}},"14.0.0-canary.5d809696c.0":{"name":"@material/shape","version":"14.0.0-canary.5d809696c.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@14.0.0-canary.5d809696c.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d4e99b6ef97fd1bf4595ed9aaf0cf732f8911d62","tarball":"https://registry.npmjs.org/@material/shape/-/shape-14.0.0-canary.5d809696c.0.tgz","fileCount":14,"integrity":"sha512-t5Ts1+tB9guoxIB0AkTXXqvlI0IsTGraaQh4xLbcCMKZU3JwgHdF3mDUPkg/BOJm8kNM6IeTgT2fvN2wQSgMVw==","signatures":[{"sig":"MEUCIA1oee9wKBY0tTwDlRKmB/BT8kEuSQHWgITdtjwlgSZTAiEAqfBnRff4ynoXmZdyj4LzosDkQyKDS9gfAJpYVB8ZShE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsO7oCRA9TVsSAnZWagAAVToP/RFEp/rg3sBkm11KO4hh\nWnbLEEvdMiY4y6h/sOvKM5UWaQFSB76b1QI7T1y1k3U96lhbz2Rk6W0vPOtl\nu9OHr2tLHIAArR3DL8bYWH90E6N/IWbWCF2a2wu8hCOIq0+6LsZ/o+FSFvP6\n+UXsxawc1cDI87zMih3Uq/5vFHdQD5RghCAn2blYqDss4XJym2JwpOaN2vSX\nt0fR7y8Djm9kc+ru+pVZiLCTrtJCXq7cRwcb4Y+EZn9QFpY0NGQdBU+ClES4\ncC+wisQuJ70Zlbh155N6h9o2GqFY4wXQbsW3SVLL6f9GJrtWl+E3MztbHOs/\nbypaXV2lcFZ4BVkdQl9U/4yrnuKBQFz1RmhNqM9gAOUJs7ZAKF8wt5RzySrd\nJf8/WGKSadSXD5Jw+Pd7XfOyi3lKyopFy49JJU9KYrLpjjeKU99XsH6JpKok\nM+ltO224PWV7A5IR0Rve6V9jpPstAQAVhr6xXJDBBs4Wm1arqzC1rpeArAuI\nAejQfOGRlQ3Lxq8QIQJpFcPTF2n7zwM8lHYnsRicX1LbSa1tpHfpjudpdCVZ\nX2UHrixQCqvutQvvmdafrkRSB792WyicRnK+dKKbq6mYtHXUUTn0T5cI4TMO\nnyB9i0ZluLCwhL6sQlOcc8Nft8gAVaQuk0WEH3kVO8XV/uFFs7187pKlmGSy\nESgZ\r\n=PX5F\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"955aa3e4252f722f096ceef387b285a197760b82","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.5d809696c.0","@material/theme":"14.0.0-canary.5d809696c.0","@material/feature-targeting":"14.0.0-canary.5d809696c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_14.0.0-canary.5d809696c.0_1638985448515_0.4199729620253232","host":"s3://npm-registry-packages"}},"14.0.0-canary.b6510c8c1.0":{"name":"@material/shape","version":"14.0.0-canary.b6510c8c1.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@14.0.0-canary.b6510c8c1.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fe45829a38ec3e18803db32d32c90811e3268c4c","tarball":"https://registry.npmjs.org/@material/shape/-/shape-14.0.0-canary.b6510c8c1.0.tgz","fileCount":14,"integrity":"sha512-3DxvHXkJ7bwbTb1Lh5yl1ixPHXVeODcjNffunotdctUI1+6uvyl08stTfGZ/9W/wR0XId01gmDBixQz39VJHuA==","signatures":[{"sig":"MEUCIAwL44+mWnFCexoH0zId4BFAyEQtKJLVKIiRyGcFtSOVAiEAv7NDRE06UvpgCLhqv4ud3VQyeKAlZ0DUNHXdxw7Pw2U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsPQVCRA9TVsSAnZWagAA+3sP/1qJvT/4kod2EX0Zn0bl\nnLxo0fFb2CE/dH4SPWkprPcjSELmr6KeUvaUAe4SVHhx+/Cols0hMrMQ2eW2\n/4nc7hg9d0rfPuI3PZTEr3IEOtD8T+7+ZJq7WkdTxY/m+hvp/RAGu30+6dp5\nlFDvRAaaO2BjvKgBCcwUcKmO84t5wgYzzLogrjxyEzzFwfXRCJBXaQH+h+0d\ny6pHj9Mn+23osQwJEjVS9gR7vgykCOLeoHtA5GADIe1HlGjU36JvGYHh46za\nK+0Ro93mWjvhYd02hnq8N52M+er7dAitMOfMCdDnE3FPYPC4sCqoUWCVNlb2\n5caN1raXwox3d5gq0rxGqakPjGEV75/bMnjUhD/52xXDb6iZ6/mvbsBq/k9Q\ntIbCj2oobXWtX76FpcOE2x1cXkpRoJDvpukAfD3vY/bXc/8MhXfIKFY5TSVq\nYhemwnYPC2+AZBqQHDleEQa4FnHjL8OWIrbHdQWp0EIofH3rsI3kIweKWZHJ\nWslG3kxDHzL1Hatl2tEMaT0zHOcJM8u1ocng3dyjwRyuZasOFhCNrL6zokzf\nipeXNp+U5FCFp1Fo1Wf/BRMxsbe67G6S0xzenN8IBc1GCUmzABTAvgYdC7R9\ns9Ya1Gwd7h795MZxXAXhxqeLHqzCAenuccnHnuwXkFPniYszffRcBmcI1ACH\n5F2c\r\n=4cJQ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"7b9b6695d55be857206c67de94ea9741aa48bb38","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.b6510c8c1.0","@material/theme":"14.0.0-canary.b6510c8c1.0","@material/feature-targeting":"14.0.0-canary.b6510c8c1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_14.0.0-canary.b6510c8c1.0_1638986773270_0.3225611564620823","host":"s3://npm-registry-packages"}},"14.0.0-canary.f460e23da.0":{"name":"@material/shape","version":"14.0.0-canary.f460e23da.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@14.0.0-canary.f460e23da.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ef4ae777beaf15ca0f9d7f537d9b87f0afe2fac4","tarball":"https://registry.npmjs.org/@material/shape/-/shape-14.0.0-canary.f460e23da.0.tgz","fileCount":14,"integrity":"sha512-Xbrb5jneoyaoFv+wA9HqcpuMVF+R5Is7UG1fhcN3YpwidA+Pvg8h3ZWcubBIl0bw/dbf55tXwtn1zX5zqHEn8g==","signatures":[{"sig":"MEUCIQCVCb6iJwE5f5J/ZbYjfo2EtnPsyX8ciBEapYCmxrrsowIgX4sUSiMXqLYhLQYVErxsKIrIW8JhBy/+cegZoAYka2g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhs3FUCRA9TVsSAnZWagAANv8QAJhOFjWxT7QCxBWGik7G\nNFGLdons2zHSRnv/pQOe+5bHX+ANhnLh8rP68Hnb2uAF6LpBoUxszIrlvxhs\nodw4Geld8tVrqURJBJwOw75AJ0CDBc0Jesq7lT0rcOURAC0vrq0wHw0qG2PO\nNcu8RreLPfRB+Hqlo0Taccto12w9yP2MHvigCbgvPy72X2d3j9SOqRA3axh3\n2t31XeJoM+MPqxHghw+VILoKD1mxLYBGuHdWaXA21czvBKUlnw4m2sgEHDiA\npCsFg/NayigHAdXyu8bQ/T2biPp6D+GjglZx+zwzyhNmfYxSOhpGSFxQS5K5\niOFPst6b8kQAUUBQL6eNSo+YFwO3fTxkLJJ0fMuxwCMaz7oot9CnDo91+gp9\nv65BO6SWdEEdRn8Iz1WbBNtTimxBWNm+FFUXEAVtLHN5V5MJRcKuNc0thgzn\nOEnu5yTjI/hMFBszvY6LpLkEpPSLIig0Kvqry7PpOSN662b40LsA1dSCNX34\niIYSqq6MGbKldEI4uLoGCeCdPO36PnfVBTe2KrCK3Tg5Y1i1VutMRMaH09A+\njurqFWpAzfz0TXvggpnKbIw/Fy3GQ7X64B94+uqT8xv53gMv+nAdUK+oTfXo\nRjnqr5JC8DbdWY0gfsuZ0z6CzY7IGQET32qmUKr4KqodxVC6MpF1Ol94F7WY\n2Twm\r\n=jmuc\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"6d994090cf732fc4f1fb93f91d64e265cada1b1c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.f460e23da.0","@material/theme":"14.0.0-canary.f460e23da.0","@material/feature-targeting":"14.0.0-canary.f460e23da.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_14.0.0-canary.f460e23da.0_1639149908813_0.7716214149608913","host":"s3://npm-registry-packages"}},"14.0.0-canary.7d8ea4624.0":{"name":"@material/shape","version":"14.0.0-canary.7d8ea4624.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@14.0.0-canary.7d8ea4624.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a27569775a6b050baacd4a90a5521c25ccfee57f","tarball":"https://registry.npmjs.org/@material/shape/-/shape-14.0.0-canary.7d8ea4624.0.tgz","fileCount":14,"integrity":"sha512-QzQ7lMpKbyR9fJywiQE9I0WqKEuLY7xfmJWe+oyH1lkRyPeR8hrctJNVKphuLCwTqhw5cyKNmaKhcZcklDq5dQ==","signatures":[{"sig":"MEYCIQCnnz2i/0u7ApQxEBJV3uYWa5Xt35DjI+RY0/UPvD+p+gIhAMm49cD3VO/s5hS60tHid9Hx6Uazm/71EU5cjwhvaDvu","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhs6p9CRA9TVsSAnZWagAAjWcQAJ4l9dRRoRN+uP6u4Lif\nJe+sp2DI7KbbDCb7x1gUBhvts+jaPEGNdxFc9hUo+r0q+SrMd5QonPgYhgoU\nswvvsHW++ZSI2b0gEC40JGJL0JyqlbKpjBer+BXBQ2PmjltoZb6wN1QXchi0\nBJItYXCEZEV18E9q0w5EJn4LzkGxhLkOKbRNtc2O8ZE1mnx5pIn4MNUefbwU\njVvBc2h8GdOu0Jwdbj/QGpV/eR8t1/GtahPHmwwcSqzyV3+UShTvn3CGWg4C\nmr1BuJ0nqqtdfRlz+YOcKUXWJ/SwK6SU3vtZUNQQvFbv9kJfp6uENCTrW99B\nwMOEqJTwZR4LI+Su0ZP4tgf+tpXoL/z55dEt7tOntuoFP5q159g6E2B/+F/0\nuh9GTlXZMtBaTCdVvQFW4WcS75pMBNLsmSfvSQZv1Z9FQuUqY9Wbigf42BEF\nYlc84zZR2ssht269fd77Wgu/oiFn0Hf6+D6RAQhEB64AjQlZSyhUjh7F8l7q\nFVNeATuhjda3XiJlU1wxf5XU2FTJ6b682ZTgxMfspBwyq7JXUbq/sByq22bm\ngmATHTTex/b6B2KavqFjHR+fPJOykc29GqUhc96tmlW9NOG8LuXp9Ih5tR0J\nkvMfyJ4lM6rruIMkerymRdMxEwINJT/7lEsCwZBhEPwMleqFPfafW9s+uYct\nufbZ\r\n=AhGH\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"c5733baaefa11aaca3bd6f32fb2ac29c20894738","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.7d8ea4624.0","@material/theme":"14.0.0-canary.7d8ea4624.0","@material/feature-targeting":"14.0.0-canary.7d8ea4624.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_14.0.0-canary.7d8ea4624.0_1639164540990_0.9036335179999087","host":"s3://npm-registry-packages"}},"14.0.0-canary.8fffcb5dd.0":{"name":"@material/shape","version":"14.0.0-canary.8fffcb5dd.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@14.0.0-canary.8fffcb5dd.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0b965a838ea5c78b0ecf6a3b34be5fb2df68f4ff","tarball":"https://registry.npmjs.org/@material/shape/-/shape-14.0.0-canary.8fffcb5dd.0.tgz","fileCount":14,"integrity":"sha512-km7igwDt1QFQifMkjzaFq0htSnAq2EonlbZ2QcHnuTlawsC0pwp8Rn0/+Xl5xsg0pE+lY0dZCML2ZHXeTbxJjg==","signatures":[{"sig":"MEQCIBXhdwoKiHQjfbmUxVP6CU9tNsFoQBUkdaV+7dDA2VDKAiAJnrFApraf9dEAGu42m9S9TrTQS2DP+eJdhAzUpMadQQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhuFvYCRA9TVsSAnZWagAAQzUP+gMWMQQ8kPSJEUFPakBz\ngsEjQBSWWeCzNRRdhDL8nr+oGLdBd2H25Ol61By/plCDGOOYBYCPbNyoSga2\nxN69AZZjALlBMQke9cVfz4Ag4gALK8dJIn5oCVAP0lQnjlo0C1OuYLr1G8Gu\nmJHCmz4lqrmxjEkruQocqq6dccVHshhHPlYU83E0vu3/MczDZeneSrNJWKdg\ntBGCRGxAVfUgNi2q/CCQ8Nv+D3qAsDrf8nNPv8DAr3Yysda9saBtTovQIRcn\nypkFPGwwlPQ1wnWMbH3vAxUfFekqcB0lHNoEiYZ7B+wh/d+t59wTlnIa7lXq\n0vINyUcSk/yPz3VzHmpwelM060UtBqlJoytUuPvZ5TBPbL9JXn4H3frzvKu8\n7xocpb7p/4bRH+SjiLKyRP38KoOen0jNuZY3O9ByEtUQgOmTWbuhTzygV8Ow\nkjstNu55H2maDnqQYYYnhOHOMasu/Ps3Fnoka81DVoRn5AfVarJzqC3/aaD1\nIshPrWQluijN7SVL88+OUFrFhTzZNd5YC6EhQ4XJVH/USZDVrPrNksketOc5\nTGsDD2z/Ux0EK92FmLBdw1kgYc5BVi3apNFyIYhoEb+WxOgD5AW3mpTGb6A2\n4rb+4pG+P5rK5g15FcIUFKW9YlRSphRNstkto0zySNbz17X52eQEwFI3LwlC\noudB\r\n=SsaA\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"ed22e4daefd7bb5e95668ab484a3a4a65793437f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.8fffcb5dd.0","@material/theme":"14.0.0-canary.8fffcb5dd.0","@material/feature-targeting":"14.0.0-canary.8fffcb5dd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_14.0.0-canary.8fffcb5dd.0_1639472088611_0.39382550970930486","host":"s3://npm-registry-packages"}},"14.0.0-canary.21e1cb9be.0":{"name":"@material/shape","version":"14.0.0-canary.21e1cb9be.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@14.0.0-canary.21e1cb9be.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c6e5dd3c9241b3a7093ca1d90a8c3671e654f975","tarball":"https://registry.npmjs.org/@material/shape/-/shape-14.0.0-canary.21e1cb9be.0.tgz","fileCount":14,"integrity":"sha512-PAJr1cwtjfJQ9pzT4lmDR1kVTcKpepRnJ/fsoqEw6raVAc4kwu+6CdkWixvpOTQxIMUdiFQGtn4WeF6R+dN4lQ==","signatures":[{"sig":"MEUCIQDEe6HMkfXNDdC2WUZUA3dNgoKQVC4u73CPqhDZ+RcQmgIgJWS43RY24nPjEypqHCQ6EdvGOmRswgcXHgxl7mEy+wc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhuPL4CRA9TVsSAnZWagAAGyUQAJ4Y/cMW+ieP0gFcmXsx\nIitUOku3Kx+MPqBBmY9HXhrohtyc9uojY6HsAEOYwAN/uVjWwBamNQ5pkx9F\nfaU1PoGXNGuxElrhAkVSH8OtiHk5jvrgLtyAUnrnZzT8tOceiJYc0JIJKTfw\nbig5TluO1Nr3vlCowQnxYR6QjnCB+ygdT2iyVB7jm4fOPSHgkMxIKgpFC6sY\nV6l4ccfnT3f6BnTtL75zjdsy5nwmP2+WCV12QgqD1MLCYWCizhPOUy4hJgsU\nG0qIL3PhlJfPRFYk0fcyfmOYVsigekrNUL+nipfPrnPnT9tq2uA8ndQmwrmt\nBMH9q32tn8veA1FXdBgy+q7xbLGS1Jx0494ZXjrs3Hs+dzSINzxr3puuarLd\nL5JPNJDFcWhmH6tVcouagMfFjWalC68R5ginAwTkoQDJs62t5deY6yg4zJ6s\nAtS7XpOxfQz3VuSgvuQBM3h0yNLyrQ8jP+YzvlLIrzYASE377fhM5axpTktK\nYO0RQnSOGUtlbUE+uH83Hoijk2ktMM+4assGOWM4wfq1wCW46jnDJF3NEWed\nDg1GAIRCrRyvPICWfNzQ2HwvYplc8+9YngE+7D0/U3ctbTjHfxehCXRkFBle\n6mQq+h+dtXCwnlatRqY7t/c3q1d8wiJ7DMMiENzL1yDr5I7B3FJaYcYegjLR\nUG89\r\n=ILuT\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"091bafb203d13305d394af0cb6817b1bf05c64af","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.21e1cb9be.0","@material/theme":"14.0.0-canary.21e1cb9be.0","@material/feature-targeting":"14.0.0-canary.21e1cb9be.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_14.0.0-canary.21e1cb9be.0_1639510776519_0.87450251422396","host":"s3://npm-registry-packages"}},"14.0.0-canary.ba78e8724.0":{"name":"@material/shape","version":"14.0.0-canary.ba78e8724.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@14.0.0-canary.ba78e8724.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"892b6cce31b2a581138016026edcbc2d13bd06c7","tarball":"https://registry.npmjs.org/@material/shape/-/shape-14.0.0-canary.ba78e8724.0.tgz","fileCount":14,"integrity":"sha512-ofeNNFiqkUlKg2bS7mvpHnIo7pAn775xKS7/3OBsd7JG0al1GSDzmKV5Zxw7wpAoDAJbYteWv/b43kkzk/l6yA==","signatures":[{"sig":"MEUCICXIEu5tCnirGL50G+Rtlo2iaEgomKeNerzzo241BZasAiEA9FrH9YBOD2kALOlNxZDQSZxDUeBkMsw0IeYq8ic1UfI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhumheCRA9TVsSAnZWagAAI/4QAJYjMfNQ6YvvW6zeX19X\nNR6q9m/AHilCxRvg6ZnSHEF8m55ips8BtGtasFXir2tqe8O+1FE0AT2z+Nan\nCmNA8BEt02CftFvHPCcJF9AdacyXDsxeTwbRHR5Dcrm9qx8k8cD4F/1U5Qkk\nva+pFw3wwXd6ViEs5zA9r/QXzgCVk8NtQNQYeiDepFMuKQvRDsL2aD9vz5nc\nr+ZIJLr8bKmQtF/YWOge8cG99i27VmrBrPyaqXp/PBOlhK12zzmQc4mmJgLs\nOuI5uC9rnNKcnzx4J4hU5/TukMAwCnCLsLcNgSwg8yu6iCQHUTXfrK0c0Zhu\n6iGpi2iQ2OSkinKXiaxJSHGSvA/mJ7iGzvyVH3CwC3ilGAU8P012V1L0wOfc\nQyp23hdLR7bhmOykLVhtAXEKJNSZGvny8hkKTWl95nFmdgerp6QxCbaFpIvV\nzPvj+7o6qcazlloCAC5+i25xPI2rwbwnBylQWQVIZVo8s+P7uoYnHOovIFpQ\nA4gA6SYPJbmCAP3m+aY60gnT8otrsxJfA1QJnsbWDUJcyAzjHqMdrh+19xFZ\ncF0kzHtCWWGIB7A97+vM+KXclq6DlPg6GErbdAo8tuK4FHsiT8BvhKWzMV+P\nZRLkJtBe/xlcsVVWkMhxpIFjzr17MHQhDw5Yoku/+Ua0lfWwwGsyfSU4GwTk\n5YIX\r\n=QV3g\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"396b66ccff73478ac662f95bc36087e71ae8d980","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.ba78e8724.0","@material/theme":"14.0.0-canary.ba78e8724.0","@material/feature-targeting":"14.0.0-canary.ba78e8724.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_14.0.0-canary.ba78e8724.0_1639606366218_0.8582317775585606","host":"s3://npm-registry-packages"}},"14.0.0-canary.e3e073c00.0":{"name":"@material/shape","version":"14.0.0-canary.e3e073c00.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@14.0.0-canary.e3e073c00.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"695abe0aa4f290a5b446188f884fa9a34a8bce90","tarball":"https://registry.npmjs.org/@material/shape/-/shape-14.0.0-canary.e3e073c00.0.tgz","fileCount":14,"integrity":"sha512-o0G36hmN9RYYIVkvPzcqbNyCtm6Dgy1gENIqPm+N/t8yDd2I2nhCfsGt98A5iGmUtSbhiRuL8qOnCxNJlWAKgA==","signatures":[{"sig":"MEYCIQDrZtMzUd2pqaPPQIcGQRtMyAlGvdEYh3OIndraR1l8KAIhAPY6kIRUY7o9O8zqz/mYdQsfHBWsabtZvbPAQ1A9tqgc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhwPEJCRA9TVsSAnZWagAAxn8P/096nxMFvepWksRs+S9h\nbK03BCFKXFXMB/suzHfgwk8SsZFNokgkpCNtYZdtSYwdhwWcXr3EOqCsILI0\nxKm7SX6+ENgw+6Ty31NGigFAUvR2YBklLaPQG81pRC1hS5v9+sxAKLugQzn/\nt1oydvaWwBhSGais3d3mbh9kg1icu0ypUM8xXhij/B+/aGTHVx5V5eoqR36t\nHAv9QmdEbL65iYhEtsWIoOz5AmWlgCPy6KZCZDdxyH/6/ETmDQG0xcxR64O/\nu1IeTnf7Jgjs/Jv3NBg6LH7/8+XrUrhm9ZI7OG87hNgzjPz520xgoq/Ld0z6\n8soIK3ARmKnqwZ6Hdnuivrc2a+R/OUGYfmZ8pnTvSYN9h0sirh46vQDecOdw\ncZcl157W3QfEzWoqLANx0ONkF3Bmdf9xHfvWFMnjCiqGDzBpXPaHWW0c1Fr2\n4IwWCw51QvTbdkhOtc648BH1wReHC3TlcwEPTXjiGMSKf8f2q8lIT1/ZSe4n\nIDEl3ORhGHvCURNAnrVHVzGspJPcs8Gti7CbYnCn1FciqV7ZW8u3fkFlufR3\ni2hEL7Sm1UDGZ++n/9x9aQBomMhInVFPhl00bUOVIuW2sn2xQQZg3bfNHVSJ\nV3TFySX/Zyqo1VsnJcV3JDbeH39MuGknBx5DpH1RpxlTXJCGrgRItPxLYBik\nICy/\r\n=1T1o\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"6ed0d4833cc10e9b5406989bcd66b072aaa259d3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.e3e073c00.0","@material/theme":"14.0.0-canary.e3e073c00.0","@material/feature-targeting":"14.0.0-canary.e3e073c00.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_14.0.0-canary.e3e073c00.0_1640034569812_0.8644576552496215","host":"s3://npm-registry-packages"}},"14.0.0-canary.3366a71d7.0":{"name":"@material/shape","version":"14.0.0-canary.3366a71d7.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@14.0.0-canary.3366a71d7.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4122b50fa50c682efb547477438a76613a39ae6a","tarball":"https://registry.npmjs.org/@material/shape/-/shape-14.0.0-canary.3366a71d7.0.tgz","fileCount":14,"integrity":"sha512-OW3qM5Gb3P/gTcDdRiGqZIEpSJ/Lh2JpZxezZ99s5b/NadcZKHaWbiac0FneCDggZ/rnrxJmk0gojuJQWRlS7A==","signatures":[{"sig":"MEYCIQDkpczQZUdvPsy6tR/mpFqed9W66amUEFWSmisWv7gEDgIhAIoyqsaE3hjfUbUS8HySGy578Gtss5VPKuj/NO8gI60x","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhwxrNCRA9TVsSAnZWagAA1roP/3sE+yYRZdpKkXM+V/zM\nBDQ46u2jOa2soqRrMmwSavt+oNa86bSpc5AcOLFU3qiG/rPOqSUnwrOKbf5L\n2TGCaP74RUBggcAu35PmjAImXgRITW7goJseTCSpLlx3Hx/awCQ5DB4LnlLr\npnvZdL+33qLy7qd0xrBBCcr/bPmQ1A3yq5QJz4AEJT0TwOKgOutSWpWnzGm3\n4logs4iAFCDZjs9BZQR5fGsMZJydarPKf2FNr2asADeCsk9dzR9pQaqzsMb4\n0Ix9qnT+3SBQ0t+RfpmJNhJVQGwqMWTcuLui65LtfCHesK8o1pqoPDP5WsPa\ny6EuxHRzlMObEALv1k6kRH3i+nq0dr85wv9dhn5AyDadxKWVRq6FDJziYhCz\nu4914egLVvJm7gmEGuSx4Seb568bFKy/Hyj3hbpuUHhzSoIbzuevJDFSKziy\nxjhnSFlmxRvgcJDOloehfgqUYnGT4LwhcneaUWypW82ph2KRzxC6WblfQQb4\nouz8xIX0hJw9+g/t5oJkxojmiORUyzhpIZ7E1LPZXNejeCZapZTX16G8AMIQ\nFygf05rcSuugVnL9WKCRUDQu0rZsDmRhXQ2k9i+hVMvivfRcAR6RxOBlTyZb\ngU6tcYeRENy9w8BeV5EJz/h1jLYynnDK0SKVK7ZzD9yA2NTTWRCtFCom4PcG\nJcmD\r\n=Mtpd\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"36f8040c2829cecee06f5c8f52e08e9cabc9004c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.3366a71d7.0","@material/theme":"14.0.0-canary.3366a71d7.0","@material/feature-targeting":"14.0.0-canary.3366a71d7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_14.0.0-canary.3366a71d7.0_1640176333157_0.5328209937396249","host":"s3://npm-registry-packages"}},"14.0.0-canary.c047f7c19.0":{"name":"@material/shape","version":"14.0.0-canary.c047f7c19.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@14.0.0-canary.c047f7c19.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c49f40a88b0fc74ed166eb241bf0336f527f5197","tarball":"https://registry.npmjs.org/@material/shape/-/shape-14.0.0-canary.c047f7c19.0.tgz","fileCount":14,"integrity":"sha512-ZTXzd9tnp3KFOeao2YURJTS9AUuGjYBFVLb/HxgAtTlrxMMYE3IouBSXRv+r7eDdnWSPsKzIzz64hX4Y4hs7lg==","signatures":[{"sig":"MEQCIECKByuoMBlFPzDu6Fv2kd41Uut6tyrl1Wmi3Y5Wwfv2AiBA/JbQDKf4xMRAr6EmPNY/z/FiVActZYnEx8nDbduCwg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1csvCRA9TVsSAnZWagAAgeYQAI6zD/vQBRpZM9F3RSwv\nAdKQ5uBEkd1cI3EW2zD6vtDYECPgPsG4B6qKSiGV8oiz+/OGAVpRMmP/E3GI\nhHWa2w78UB6FURY63WMCPDJspNDaGqckcd1CTsAsNdr/iIxyUboJrQGEdiMs\nTTqifaZmO93vOPk7frqNSs82hau7zYJvzdB8P6+xXM2RxjCsb0ny2RGyyA4K\nAQG7EYV/t/RfDg7TuQoG4xcY+elWpIl9nDev7wPtgy8AtpBSKqPnqhfHJCv6\n0iwW9V3KovYwJwaq58M2m0WOagYZVviPf4AdpYUC43bg8Q2YMhXpr4D9NzST\nifgjg+z6s6e7yd8VugdNuRqnByi8tFSWjb0AihyFpEz9wQ3RzaYlD71LsvyQ\nRfTL2Q6zqV5ldsjgAeHORE2SPh4nw3/ZuaNL/nkEM23DZxL95m2SlxjUJ3Hn\npS0fgfuLGjNnBV994puNSxZWOAcTejEzvrF04cQLdTU7B6cfP6odq/QCkRgO\nTxC9HdVm1q3kYSICeWwx5/N0zfksSz192GKYJSBPg1xCDDm6Ffg47dDUFdki\n5fZ3OzRXdkhdDFQSgl6gsnuOWoBzkZxzdC5149YePrZ8kesPO6cGAgbaEKH+\nkQNA1rU59DL9bqYt5y3eWnSUWHaZ8XaQoaipfS8XkpbVJvRRI09gBMwkBCuo\nzG43\r\n=y4jg\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"f89c0e152ba1bb64d7b262b279d38cf5d93dd788","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.c047f7c19.0","@material/theme":"14.0.0-canary.c047f7c19.0","@material/feature-targeting":"14.0.0-canary.c047f7c19.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_14.0.0-canary.c047f7c19.0_1641401135317_0.32183219022662435","host":"s3://npm-registry-packages"}},"14.0.0-canary.05db65ec0.0":{"name":"@material/shape","version":"14.0.0-canary.05db65ec0.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@14.0.0-canary.05db65ec0.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"54f0669c497a6db7b0b69e60051d1c3040480c0f","tarball":"https://registry.npmjs.org/@material/shape/-/shape-14.0.0-canary.05db65ec0.0.tgz","fileCount":14,"integrity":"sha512-sLCPlTLLjlsLE57O2araepUVT0Zc28CBIeEXDxXEnTM/IskZkOTwrm7Hvyt2AZdSxybkqv1bEBh7rCEyNDxrcg==","signatures":[{"sig":"MEUCIQCxn3mEse7CvKPyOlYh25/U7b+dd9sKGhh7TnJQjloCXQIgO/WqUp4Nfe5S8FwqdTOfG56yYHJHLBpIZiqVbBCiLvA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1yNZCRA9TVsSAnZWagAAIIQQAKQK9HFTYTsUKWBzv6NZ\ncsLOdDrEorLXUNlgGXnlaPw2hkMRxcV3VCG9yK/toobfvP5EMNMIF4raFYxa\nABTxgonlB5GFsPMkCCywHjK8Uf1DrqH1VZQxoVjoWNVUmLiqE1RSboyf52c3\njPHL554p4IVdjN7/6Dlvznpb+HcuNW7Ak8aM+clZ2jQRpgaYisHbKVW//qbf\nrxUbeiqvGq9krmCR3ZvM7lVbnP7iNkN4BdIpy/zji/54f6Krot/WODAV67q+\nSrjPybPXTzf8MDENlIyw+Ikm/gVQHSC0YV8u1/+/d2hMe2NkaTxLFXAcW9Fz\nEcExZeQWmkwwu5rNny2WfRd/9yrmdfpo6jfQRhNv7Hpnm8q8i7hmgmL9QisZ\ntIydxY+y6/ETjje6JIK2NWtH7GWKj3ld7NknNBCmqJK34HLSv8srQ5acX6v1\ntw0AB1IrMZ4ajFJ+EDgzDKAxDXSPJqdhOUmHg5XehldSxdfclFy5ULKTInsd\n2ETV1Nh7CmEbYnzk1GVc2ZPfBPKEy97lLycYYq0TgShd6KCYND03Tz65Ba6K\netOFs1DbO2bbRevnCJvhbNyt+B0swxVxeJjL8YQLUUQLAX0ZB1VOk9XvGjGt\nmHjnO3lR01XMQrpMaQYx6v0jKa2ShR1Fih2QQ0AvKk00SRqVsmUBaTw9uOah\nggaV\r\n=7dGj\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"4ee3c4fadb795ccabc127e2a968744c5bed23d38","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.05db65ec0.0","@material/theme":"14.0.0-canary.05db65ec0.0","@material/feature-targeting":"14.0.0-canary.05db65ec0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_14.0.0-canary.05db65ec0.0_1641489241754_0.16851339880644955","host":"s3://npm-registry-packages"}},"14.0.0-canary.6ca8b8f85.0":{"name":"@material/shape","version":"14.0.0-canary.6ca8b8f85.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@14.0.0-canary.6ca8b8f85.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"71982a209a55f27a9b5c5566af6a1410ee46ca27","tarball":"https://registry.npmjs.org/@material/shape/-/shape-14.0.0-canary.6ca8b8f85.0.tgz","fileCount":14,"integrity":"sha512-+hf5BpZSAc1BWSNWmboESZUKDmZDnucVenj2RU5G4OOeAXRfTehttt17BM+R2EjvST6ajbr2W/pX2NcG2nAUcw==","signatures":[{"sig":"MEUCIDSGbELz9KF1aoV8C82AWk/04gpsZIgajePwbrOI6yfAAiEAip67HDZ6pWRlTDOivPHnp2l9/ZfTIf76rsxbGwCBwiE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh2GOzCRA9TVsSAnZWagAAPvYP/2MbukeGvaxMyDzqcopm\n8CnZNpJyPNeR5eIPiRG1Qu1gt3PHxIVTyAIhlvNVnn3/bEgfgcvBcqest/aQ\nmRaBiJhRMyXOuGN4lC3vNrJRYAfyG9Dr+YBXTsxloxhRJ1w6GyTlbuYb5OsC\nsahdQPgqqWatD0v01JqOiInomTOQktJg8gAxPE4rptTXO7qRU2wXxLjFITae\n7gBJy+dF1S0w2zi88e5tBpjLWJXgqGeTmA2fTocf0RLGC3BWMu13mBnH7MSk\niHROMw+XEt8ONdevN5kQqLSnwuSFkArfcH6XD8v5s8CFmlHO8RHyiBYLe1Tn\nZ/F3nLQUtxhlGzODPJgCgCCugQdHov8MgFPqJ4sf25lgAXpWo/sBFNzY+/n/\n1a434zoc+dFIodjE/4YQj8RgODggxzexjELhEMkPkT8zk0b9ptDON11Hl8xs\nS8KaTPiWjSBNj70tkPdjYPPJT33Kn9kTdH16jk0drIHt2buGnP4TL3XLNOiH\nvQ4cxJTQmZZfV7y5FpHu9fZwLp1pobV0HjfHHJGymHOhK6P/jstEswXJReEz\nfHx1lbqsHHDxVnkyozpvNeAVgFxAVAoGiSd7fdd4gzBlDodHNLHbD8OorVjg\ng9frSNQFqZJbAqHmslyVS5Epp/cSaIeHzrxDEYvR0Ovb26CSoLZIx62Jt3dh\nI8NA\r\n=upT1\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"b3237bcea052016fff824f201904a358e2cbeeaa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.6ca8b8f85.0","@material/theme":"14.0.0-canary.6ca8b8f85.0","@material/feature-targeting":"14.0.0-canary.6ca8b8f85.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_14.0.0-canary.6ca8b8f85.0_1641571251511_0.8301653351124787","host":"s3://npm-registry-packages"}},"14.0.0-canary.173ee7a7a.0":{"name":"@material/shape","version":"14.0.0-canary.173ee7a7a.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@14.0.0-canary.173ee7a7a.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"75568e7e72f07682e4b34f1237642a3b5c033072","tarball":"https://registry.npmjs.org/@material/shape/-/shape-14.0.0-canary.173ee7a7a.0.tgz","fileCount":14,"integrity":"sha512-2DByEjoS/2+b8hMGXVnfuCjhcu/s5JPCpnkIjBpP4gpUUH8Ty/lEpIXVcLjLaX0XlKh9NbwLZtRlFxpWzo0fFg==","signatures":[{"sig":"MEUCIQC4rP9Vj1HIX4HEoHG9Vif+ty5hmqnuTVtzjOE8vg8UfAIgeA/vCzeZljYTleGGNgfBVP7XeVUuuUdjB3kjawrVxLI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3GSoCRA9TVsSAnZWagAAxKQP/3eEvMS0g3GvlBipmZ6N\nthFo83/tRJTGdn6ghqH8w81ndHQ2skCPwc/7UGHgGCFhIae3Jk9i22cD2yyf\n/vZBnBwJxeH0yUy19Ifk4/R9maH6JRkc6Xof3ivUNLqVh1VEEmsC/dkEF+lW\nhah5AXHFQuIfezZ5yzO0AzJlLz6Q0V7szTm4WBz8MM/nRQ2uIhSlxbYhu22D\nE5/VH7Ru0Za7pkCabV9A1qEyUXTLSgnZxNIT/jJWTtJzpOIUD5C1myujiUbm\nQVYZqqqCVP4AlYGOC5ELzNdoqiywECdEZF8CWAt4JOe4EFmP7SihpqbtM4bf\nKj9cdTpzmk1E0GfXeAGf2ko8JJ+rr5xCgBVRtQxa1TQZXeJ2zSRFLbARedg9\nF21nf1ZcJ1zoKBMg7Tab34bZUbbGHCZrQjQBtZfmTXI4Iu2MJSCQIPLrxvSJ\nEhCLXZp41fzzKRstgVf7zA6sHrMdqLOoPg3k5fbvxoo7pjYAbPgy50IeriNi\nZzJKXVhDSLjO3YKSiXsACM/J+domaux7ic7Gh8C5wLVu3FsusXCpkMp5KnH4\nXG2dlC3QLv3v5RSCQQMWSp/uzvR36fdhUBfmUE8F0VboY63EJrGuIpALC2cI\nJTRde98jvdoD9hnTDMT5hvGRHEO5x/7a09pLkgKfRIyAzg1lF6wv5W+teXKe\n5gNG\r\n=AvuJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"f034f9d63d29784b9608c7c25ea586070efbd27a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.173ee7a7a.0","@material/theme":"14.0.0-canary.173ee7a7a.0","@material/feature-targeting":"14.0.0-canary.173ee7a7a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_14.0.0-canary.173ee7a7a.0_1641833640087_0.44678594302629704","host":"s3://npm-registry-packages"}},"14.0.0-canary.b704e4dfc.0":{"name":"@material/shape","version":"14.0.0-canary.b704e4dfc.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@14.0.0-canary.b704e4dfc.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"286e24ede13a28cbb832cceceb38c42ccda13552","tarball":"https://registry.npmjs.org/@material/shape/-/shape-14.0.0-canary.b704e4dfc.0.tgz","fileCount":14,"integrity":"sha512-bLa71ETZqv4Wt/psDaSSPxRT3RqNUVOc91zx+6aeyhxHtCLcJT+gX4yG/F58pNOO5b4qNIQTTXMLeh+q61Y3pw==","signatures":[{"sig":"MEUCIQCP97+lIy1fce5EAp6CVCDxX+KxkPaclITHCIRxy1BO9gIgV521k3fRR4zgpTFtvAw3ELMCkekvGslq1HQ3wOEA8xQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3HvRCRA9TVsSAnZWagAAPBsP/RQGZ2+zYIhAWfiXoKZz\nHtzBrEehLMHeisyj6WJPkMG6Lqvkl5CsloxBisM+dYy06t91XzQRo0ytswTv\nk1NC/m2gfH0wMjMAUqAgpzN+9jiqKyvO5LDp8SwwkjF1p7OlmNLYhDO1g5iM\n9cP2X50VshGufwRSs/+/jMYW25gyK8Z5Fmxp6iTKzih/yoriDr7VuAfcZZbJ\nXlMO+Ph1TvEw9UV89cK3dWc3bc5Culmo/4OchF16YhYsfz4+WmLsEvD6CHAy\np22uKkYGp3HNhocacfjEmaeqcBelx0K7t8htPuy6+FoqH9T9K1sQlEURBJpz\nzpdAUdQYo0QPpledwGHBKOUkTJSZTvCXzNAycSVCUaebY8KvulmFCMToBrJl\nI8IrnHi3wfRXbpMcM92tiZCDTLejFcTfh788UNYj09ZF5IhqBZcWzhRoLko3\nyEY9j3psiprM2+RmoA05xAWLRJiAFGhFjzRiTzPvE6BbYSnh6moDKSBgc2pt\nt2v6W9mfwH9lB/LtRvCByxGla4o6XyxUm+5emq87f07FxCSBKXRb0KBGEGya\n9oa9osruhu+rWDlWh/F20+nRrttIPqxAGTFlZ4GrOA77u1ELuh6g6oMvD5Pj\niShrNzo1zdwcndPMfbZYk+Unk7eqnH6hg1NtQUbMw49NS023MMPTxfFrjfxK\nsuzY\r\n=nm5g\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"7aa8626c10b7e0fe9826c55e7f08c4ab0aa493bd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.b704e4dfc.0","@material/theme":"14.0.0-canary.b704e4dfc.0","@material/feature-targeting":"14.0.0-canary.b704e4dfc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_14.0.0-canary.b704e4dfc.0_1641839569383_0.7298014522301659","host":"s3://npm-registry-packages"}},"14.0.0-canary.c14e977ee.0":{"name":"@material/shape","version":"14.0.0-canary.c14e977ee.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@14.0.0-canary.c14e977ee.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"df4abaf18c8444638046e74d67ff266451011080","tarball":"https://registry.npmjs.org/@material/shape/-/shape-14.0.0-canary.c14e977ee.0.tgz","fileCount":14,"integrity":"sha512-kN0R36Wdi7fDw/wexY7DCVbl7AMb76XMgxGnVpuiztkR/DT5q1vOGjE4v1YWGRS8vMACJoR0mJ+EY0zMcmjY7w==","signatures":[{"sig":"MEYCIQDlEzn0ivjXfNCO2SNb9RFbM6B98qag6zhRirK65NJjgwIhAPzqPZqEThsOzIfwDGFhg/PfL41wDFZq77MpDn6gO6Q/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3acCCRA9TVsSAnZWagAAwhgP/06duTyBsZR9wd3pfKRH\n0vy/X1tIBuZd3qDuy7/P9QZDYry+FOrwL73ed8nibV1iVTb6K9QK5gXMIz/a\nChOwsL1rjI5dez3/qoCJEHSBDaCKdlBI2wHuXo7Gc4U0LaK3ynd3viPo9dpp\nSy4dPTJqCLrevlCSNY5G28MNOwZQYiAp5W5+ce6R0JndB63zXA4Sg7UiAqkW\nO+SZDbbBjUUuzKXRRn6xoeXyQU1aLh9IIqQyLfEh/oVpvSMlEOH/QzIh0i6G\nLueGNnjBJrSFjYHEic5MQhAl9L3r20AIMa4ap8DXZg9rVr6w2P+8RUKvIHxq\nl3JFH7kVfFDuJiAKhT8+WJ5ZLj6LYCrWq2Rb0mcpA9Y4VZj8Lp4ya+Hhqs7+\n9ErwE7cQTFOgSGZq7Dt9T1Uliu6E5/QWolawdXCxNgPSXNan7o5uDA8CRoxO\nI5AVPqbgHVEz8ETy5O+WJIMAZT5LxjnYoxVN2Ovonr5HZchP7/AD/SbN/T7n\nkcuGvBeLbDU/Ak7j5Da5DVo5n1nbt3lw934E6+rQAR+zf8eat1T1cyXk7FxB\n5Kv2uPX2DOHtpQqbUIRhZIlOoY7e06alp3ulqYKRFXi7Gi8+C/n7tod9ThAB\nhFRzqePNhqP9KCllCmsy++6s9+gyZcawgrOlHVmVl4nD53Hiv66fsCOWuLCw\ntIiv\r\n=AYjE\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"9f7e1b7371c604a5d4692bdbe25aecc578fb16f5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.c14e977ee.0","@material/theme":"14.0.0-canary.c14e977ee.0","@material/feature-targeting":"14.0.0-canary.c14e977ee.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_14.0.0-canary.c14e977ee.0_1641916162724_0.9602739277496624","host":"s3://npm-registry-packages"}},"14.0.0-canary.b094eaa4e.0":{"name":"@material/shape","version":"14.0.0-canary.b094eaa4e.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@14.0.0-canary.b094eaa4e.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d3bdf30296ba4dae6fde15e05ad579e90ed96564","tarball":"https://registry.npmjs.org/@material/shape/-/shape-14.0.0-canary.b094eaa4e.0.tgz","fileCount":14,"integrity":"sha512-/829o4oNtKpO2T+aX29zZpliUdPlXO0HejwGQHDwMEJX0Qntnu9WDoQLW2uV8n9sfcDICnbkF9vYRgPbcYDS2g==","signatures":[{"sig":"MEUCIGXYsYHRlDhZIUccrp2PeP/GA8Oj5tyKC8SzXdyDiqCVAiEAxpXp6eoPBq7sLr+Brze2iVu/IP0fK0dIKftJy/OWrt4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh4cP/CRA9TVsSAnZWagAAtooP+gPtx4SDWg4qMyWgkrn5\nXjtIkZafMDPLW6UDbnDbK3vIpVPql7CqnTUgab5i6noExtXAQSHnz8BbCNLR\nN+KR9DYgfU/0Ogx0rziH4yCV3HHCLY8ZCfFKnod5QuQoFCB+oCgDgp5jztHy\n7WV1syxM1FScDtvr/OfUK22vK88qrnpsES+kBUrrcxJGndlKvelNITOpx8cU\nMhbnyrhmCDTt0qghSCNVfyElDtXQu2vWZWUn/EctkHre9Jtg9r8SCzrHnAN8\n5YP3gGNjlTihGsWFBvt4//Sw67o9CuOujNheF6F+SenpsENsF7o8PVFpxVex\nHJgfKW71oNXro9tIlV3oved4rjxXRy8NAkuaq9/baMSUBScRZtT1G/90ttyM\nM3a7m9Yof9rjmGXTCM4Kq/wRxKUDwXltBfws9vCO6Jj0MOBMzNV2nLmcVVDO\nCjYBTn3RYjFkc9uDNC+Rps6LnC/NnICkVS9pYYk6KleXV18jBoqWFRkDs8bj\noPq2sP5zSIRucGjAOnA/ZyIrLc2x+f/E/8M1diiIGepl2F23GJsT+Qh0dZUj\n6mAhfCdhww4kB/4b+sDKH4/Msa5qNbq5mmQ6+c5RXYL5n536QpKPcdo/fV86\nUO1wgTtRhtsVdbhw5xZdBe45VEuTgW4zZ3aYvkbX+kKlecbN/2X2GJUYYcIp\nepiO\r\n=Yshj\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"6b11b48b933746de14be90d79974d10e1fd48289","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.b094eaa4e.0","@material/theme":"14.0.0-canary.b094eaa4e.0","@material/feature-targeting":"14.0.0-canary.b094eaa4e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_14.0.0-canary.b094eaa4e.0_1642185727033_0.3723267855361223","host":"s3://npm-registry-packages"}},"14.0.0-canary.390220e42.0":{"name":"@material/shape","version":"14.0.0-canary.390220e42.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@14.0.0-canary.390220e42.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7284fa3d781a0e40056861bc7291eedefc284965","tarball":"https://registry.npmjs.org/@material/shape/-/shape-14.0.0-canary.390220e42.0.tgz","fileCount":14,"integrity":"sha512-h7ZkCaVanJiHSEzSZY7n3CDlaKU4cnzCjMP5dsor0kDPX8bpnNHEA6DQRXJK71q0Nqf6zH4FktBwNhsHN1GVDg==","signatures":[{"sig":"MEYCIQCkzqzyZhhhUI4bF1ZkKsC+kGiNVj7LPviNMDDKLB99KQIhAIJXUOB2n1w8N7xSKDXTgrtmslLwvXHZb868LgqQEGHI","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh5Z1ECRA9TVsSAnZWagAAUyIP/3SHxfhVS+yKjaqhqsrO\nkow2xdcguF/NHP2G/MvRKKxeA+UiYRB25UvVkHqUFDRGX7GieFd/EyuVSCYj\n+pxRpvexKND+OYW3p2e1ODxY8nPDlFOMWtHyoGrczbM97QpJisgK6nE5aQUn\npON9Y2EWK5vIYKRmOZwRVlePpRb7K2sxMAEn/aM5GX+I0PRgI+1xNI+6ZwQq\noXrbkazY0EC9LrMJICqRGbGxaG0tPOkUg5Xw47ov5/iiWWnWtcP0Jncw1DBc\n+rFLD2svunK0wW+fqcymPRcY1AFjnHO2kM1CiITWgg7J6A5t3O2A3kdtr5Hd\nRzfBGL6Q9/qVwXI43XU7WGdpC6wpoFN4Ntx0ET89+HG2omJ1JwmT8swZr5la\nvrKH7UOgBIzXh9OSjqoGZsucDC2YqADSTuUhuamgvwQPVbEpUOR9WQO6rMg+\n8ijKA1OytUORD2cJV3CQUFQ+Lln9uKVnyFcOXxzyySNxq57o2tUaih1lXzIE\n17cAR7Ho5nTAjVJxgMMCwcwakkLAZ4XSNLIuijBCmiq202rzXNYAN2v0nB47\nSZTs8L7mZOW2GXhJffrAFKIWD0BAtgu51aCdMAeydNivcgtzlQnOqXRep9zQ\nSg5l+B82guVowIeSYJD15Nn8NWYl7LAbybHPPNT+ynL6JZu7huA9eZHTXnRC\nu8rz\r\n=0+fg\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"dd9f4e499bf257838f40df3957ee3c321500fe37","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.390220e42.0","@material/theme":"14.0.0-canary.390220e42.0","@material/feature-targeting":"14.0.0-canary.390220e42.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_14.0.0-canary.390220e42.0_1642437956020_0.7805619955015053","host":"s3://npm-registry-packages"}},"14.0.0-canary.4b5391f8b.0":{"name":"@material/shape","version":"14.0.0-canary.4b5391f8b.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@14.0.0-canary.4b5391f8b.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"45abcb79ff24690e6832bf753639c15ecf98a550","tarball":"https://registry.npmjs.org/@material/shape/-/shape-14.0.0-canary.4b5391f8b.0.tgz","fileCount":14,"integrity":"sha512-Ekh/a2cRolEj5Wo0iT3rc01snkj+ajeqT9rhqgQ8GNRqk1kiiKJZyEW0eAL7ijJJzONXH5GoXoOLzoyAP5qpcQ==","signatures":[{"sig":"MEUCIHLwgGAOIolCjDL7bFS23gtzFtoRShodp6o06CGyhAUgAiEAypjr6FyTxoGu/k74wgmzXHZh++12zMj8gE86Fwgyyno=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6KRCCRA9TVsSAnZWagAA9rgP/jZIZxJdhc+6KEqHoB3m\n0xC4OoabDuFbgnigqNFG4jM1ETNg+V0dXhlhCxNP1Ox1yvDgf0owwyIcO7ft\n4QHxIuWquZNxPRkZIirK+1cNdKkFD+8Kte3q2yaH3HIXnYYs6yis8egJpxvq\n766N7K6gbL+wqp1jHs8lMlOachq/W4y5VTiRKnZPJ7yjXfQ6DUF9wLge7twi\nGEa+GbZb01HrgLo3SUnWSm4KoqV5fSgpbTOUKr6HxR41lmSuXh4jdomzd42l\nUaTJZQ153aPcJ1kBJ+U6HqK2VIWO8TcoRmGJmS+QtUUiTJGnzBPgzNlwFmIi\ngUK7WqZ5mS+cKQnVGnZ/CGLGX21Qe+rud9lhaKj3D8gmlkaPOGVtYjI+9yak\neRTadLWBC0+xsB2LnlzMaEf8Re6qnEUiOvSY6BVosk3jDOSd4CW4vjQUnA+X\nQeTsh+dZNyGLB+pB3ZsrJqxd9TV8hEDw+gTDgbKzJ3f9N+9NlW5vZVgEGkWn\nJ2TOEbMrQTHESUwmSoKjL52VIno5c3HtWP2UPRZj//GNOjLIJT+4SrVRU0+3\nTcWIjSoKhUKsSdLuctjkADeJY5iKWw5/c4jk4v8vR5PV9xANGhBQs0mEdZrH\nUSmHGh3y8hU5de7Yv6dHd2jGvvRy/usRTBZXxN1if0tci0B+yZPt/I6uGcAS\nO9y9\r\n=N4/U\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"09410b4524a4005be30dd18c47d4214d6eeffca0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.4b5391f8b.0","@material/theme":"14.0.0-canary.4b5391f8b.0","@material/feature-targeting":"14.0.0-canary.4b5391f8b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_14.0.0-canary.4b5391f8b.0_1642636353927_0.7603798727198043","host":"s3://npm-registry-packages"}},"14.0.0-canary.cef6bc623.0":{"name":"@material/shape","version":"14.0.0-canary.cef6bc623.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@14.0.0-canary.cef6bc623.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1e6afd8301eab82ac3faf1401b9f6bcef4bf7cd4","tarball":"https://registry.npmjs.org/@material/shape/-/shape-14.0.0-canary.cef6bc623.0.tgz","fileCount":14,"integrity":"sha512-7Zu/o7lBSKatmGR4ruE4ouImSc5QJc62DZvcxJKwGFT8IluINFPBj3HnA5x/QjU5pYFUT9KDIduTO4u/TKnpgg==","signatures":[{"sig":"MEQCIAo26VoYawk+ti+If4GbGeoOc1TbR8XpD5ZQ+8o0EWc3AiByAJrZvIqZJReUp8ZOAS32G3F+LV6o8qpVlmBibM2rxQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6KoMCRA9TVsSAnZWagAAB48P/A3wmR0I1yJKxWu/KRV6\nDdV3MZb6S4YzVQxvp7AlDlXbd4auKcBswFKTF9xpVnVBZvRPG257Q25oXFuD\nbrhj9T1aRYSzFNTsQZxag7ifGkPxMaUwpBklOWMYmHUIPWnJw9V65a76NvV5\n4R2tV/iY92rhTqz+Jrf/KZnS7JIRb8KkTvlo4psbR1UY1GchnDv3IYs7lDBj\n9mAesfqVDQOX28ZT2BCzshiiG87dp5n/L4VUtfeQRneCIfUUwI0d0DyEBfjs\nEq9csqsoDoLT6bpp02ULFmCFSPbsfYMSZEiDjQcYuMjatIRgdtTHdPMPDmip\nH1k92S30mrhNhVaii08Lpjj/JOzY5uhuIdwEkDLCmWS60pPQlapyX+b3atFW\nm8ggHIuBpuB5aKI76UcvCwa50q6LBOpA//UYRS4+/jlBB+fo7eiNl68p91Zv\nQ+PpYO+druEpzN48aJx99PdU31W/lW+mQZWRM8t3UHKKWLXce2V4sfCqXq5R\ntmgaDkiRjsgIR2ojjhDhoJNX7tu/DR7vst6+whkD+Tw7PW0i2r6yXcpZwCyB\ncxlsbvi0EHwXwWRX0baCkSvLNHLII+TdFP7t6drOpWy1v3oH798pQxDClMHk\nuXYFBs5IVYGYHjRIySPY0UbgVPFI4UtAX8uo7QFXtys4SRf8qL0SI/PWcC2j\nXLfT\r\n=C1Mq\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"6bfb214d1f6768cd968026313c7de32009b2da1c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.cef6bc623.0","@material/theme":"14.0.0-canary.cef6bc623.0","@material/feature-targeting":"14.0.0-canary.cef6bc623.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_14.0.0-canary.cef6bc623.0_1642637836126_0.8204376093213379","host":"s3://npm-registry-packages"}},"14.0.0-canary.0379179c4.0":{"name":"@material/shape","version":"14.0.0-canary.0379179c4.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@14.0.0-canary.0379179c4.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0dbb5a2f3ccde153e7c26d9ae404a5112d120526","tarball":"https://registry.npmjs.org/@material/shape/-/shape-14.0.0-canary.0379179c4.0.tgz","fileCount":14,"integrity":"sha512-Ocp1wLznI/PFqJ/ZiRdIwps1i/mlZJw8obQ00rm0/ielP3WIePuDOFxkHgd7272LIOpbd3Yd1ek/+JGy3HRwLA==","signatures":[{"sig":"MEUCIC0vmdxlOVsMJrY8St+38f8ePTRw+g+Di0kYw0mBWVKpAiEA98Yx44iMq1pAuDEmsJox44PivlpDunxhzWQeajxsRnk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6a/TCRA9TVsSAnZWagAAY7wP/3FAFFKo1PxqkX1XoeRg\nnkpWM5lOSV+eyEDJ/L45JdIPEm78EWFUEeMr1o1G6zFhsmfSTamLfhvqqd7V\nbWY83tFXHS/SD8yfLO2/iP+06Ns8+UnhxFv0HCcHzI73uRgZGjJc4J9r/Q0E\nOMzB15tlDfHDlybIqxoO/fyXUuSh+k9mSl10GWqLFdicl0Cy3O0xvH7pIzHb\nUVze5MjctYP1W3XdKDTjWuyIikNWA3nkjOVMCtIFnvypq96xDXcz5B6Ktp5K\nO4uT9X7RI90gf8SBc3XYKZT8j2yaeTe3rOYQ2YD55g42Yc9b6rdYh9otetM0\n0U0S9mfWoTn1/mdC95Klpg9wdwNxWE7dzwRnSc/gn8yvY+ntkfgvlqVvvb/H\nJZroytYwUAxb7p76AB2Hhv4tPwba4o8Qgg8/j6hCldXwZiUzzK2yRoRpdrr/\nOPwBuK9J5ec8iPPYA1E0Nx3O6uwJB+IU6umN00wuYsoL1Smsdo+EUv08mRiG\nw07TTIUUpj4UVAJYznbWjS0OuuL+oAP4a1pc92JvOyjBYeF5c6azsU7XcG/O\n1vqeAofOqQODswRpSBU9BUhaUjXPsmEgFKJ94F9lN3AH66zwNfgyb3BLxlNV\ngqGtDz6oKB/ZWRaEKs1pLRcYjRU3vWIXO32eLAjrdRukFR2gUxHq8soIcBZV\nm0mh\r\n=kvOc\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"fd62b4e352900f807c8308b282906b51227baeac","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.0379179c4.0","@material/theme":"14.0.0-canary.0379179c4.0","@material/feature-targeting":"14.0.0-canary.0379179c4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_14.0.0-canary.0379179c4.0_1642704850804_0.5000679133991845","host":"s3://npm-registry-packages"}},"14.0.0-canary.e62f3dabf.0":{"name":"@material/shape","version":"14.0.0-canary.e62f3dabf.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@14.0.0-canary.e62f3dabf.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6ccca9b49e615a6a093cdf090e736930b514be63","tarball":"https://registry.npmjs.org/@material/shape/-/shape-14.0.0-canary.e62f3dabf.0.tgz","fileCount":14,"integrity":"sha512-FdxumfISoQW9R6Syb66ab6vT+BXwmOoAiOxRxkDVQRLya/u34bd4pbHMVBroxOJA9rhw/IChrwNEJqSftcD+4A==","signatures":[{"sig":"MEYCIQC/x58bJ72yn9nDHEX1o4j5EmevRS7uVrXIuPt7JXNG2QIhALbHaHQ6yD0kZ/JQSiz8B1sx4eph/yaJLxzIJvZu2qlx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6zusCRA9TVsSAnZWagAAbRYQAJyraHXzA7rLygTDfVib\nJ55KwOAEa08qMkJQwXAVf0qlCZ2KqqYcnumf6rvu4WvQFGQjDFALF4JhM1u+\ny9cITPYVeyx4WEGyV+wBuirbo6m2wBGgxhM8NUA4mg7odPikkO0JLjQqrUOb\n/YT6y3A5J16ixc1xQbvzKsRIKpVtMviTslM1QH8kPfPKkDz69mrglAS+wJs+\nScLfEu1Ty06M9xXOvijNl2mTWm/pFQ7gb1KKDlLj3V49ry4AU+JGVvM/EB85\nQJsidJKq0gxPLua3W0SZjH0JKijSjjp6jyuXWuq5MSDwSD1JxG8h8qK/KvV5\nR01GgnEI/zTiL84J0juH+0NPq4GJp1CpuOwV89oPslWZ5nqvRtx9zb7Il6Nh\nCiFSZrRcA1y8KHr/HCCdETJhqI4bSbXcarLczo5wVbgnk0s8M8nt0tK5Q7Fh\n3KnCfh/SQPZQZo0yCxptHkJjS9MxQ9ZsJtgOC6FUJWCjj7girFkuHhtCajIO\nyUbbJwyKuTcL516Sv3mifW0Il2GHX79cjeKOwMua135hJK8D+RkgNX52wHKP\n7mwmjcL2KNfE6u3hScno26B94asBEvUOjxGln0PIOE/e8RqtDdIRnxWboNzw\nGFFQBIaiUX0UL2WhQiZK66B96H0Ty3fhY9LUfaoV8hoFhv8UJHBr9TOii3mk\nyi1p\r\n=nkiH\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"7f7d12458af5eaac6bd913db605b5afc3753906d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.e62f3dabf.0","@material/theme":"14.0.0-canary.e62f3dabf.0","@material/feature-targeting":"14.0.0-canary.e62f3dabf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_14.0.0-canary.e62f3dabf.0_1642806188532_0.9986418839123268","host":"s3://npm-registry-packages"}},"14.0.0-canary.3e20c1de8.0":{"name":"@material/shape","version":"14.0.0-canary.3e20c1de8.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@14.0.0-canary.3e20c1de8.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"173fbbe24a630c356e04f299a9d58b1500d63200","tarball":"https://registry.npmjs.org/@material/shape/-/shape-14.0.0-canary.3e20c1de8.0.tgz","fileCount":14,"integrity":"sha512-J2AXlWgnS8m/dbHphz03B70gX8b5s20RkTquVs/HYkXuLGVuQc52KnsA6ubCg95BbfZZir7cP7ab9dQXDf4scg==","signatures":[{"sig":"MEQCIDjikiIWoMUsQaJqGbkAfCIcurCsAy7hSJ0lcn30KIQkAiAHWlssaJ7JdZaoaIlFrcPZiNvoAod0wuRHvuR0UfscFw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8BfZCRA9TVsSAnZWagAAgCMP/i3vp/tQXvrtZk3eeXpS\n4OLRfdqFnBxSXm9/t3kEU5BGW/JEbQ1KtYBT6n5e5SXIEim/Lz+hShL7Cbf2\nhrzCSURiXv5yPmb3m9Dd7wj4Ay3rJ0xClKxvb3q0Z2xQsiW3u9JkAWnZ3ab9\noxRGwAsM760lfbdSdbn2BiDa18aKM8cTDkHHkq79JekBDw1eYJdVxuZJHQhB\nj6oBDs6QqUurt6U5Vr/iusAD2p/Enw/z/KPPQQn7f5czLJDzpWUqEE88G6s0\nLyxjUWlNlkjyq0c4Bd6fcqw32WnVN8txY0YfFvYfChbsJi2fH+Gn+gknN4Mj\nrrqIzb4tr1olrkRwkJYm0FI4IWmMka7Hftnwk3cIXhaEmmQPN0aEresGTZX3\n/VYsKDWBee6x6mhoRMR4EwqZLVARamNvuPGFvHdwwzJGWKqoI6sDw7GGhvhK\nt3mvfMDWXaFFZNeZ+CS7P8qbt04SYZi9VCtHlQX2pl+XriBEaD4yjun6bVaZ\n1hLodq+EHK8ycrNdpVPa6mWuOjInMB5a/n4UlMszsCHwCQb9cKOwYlGP19bu\nSEgaV57YeIoZWGMcr9MSAfjnsPMOtVVz9P9LdrKUrfBqjI0eDwvBeaf/cKKQ\nXC23y6rPb9XyDgjg2I/gJkybwKy7xEWbs6YRRK/w9Fvp/rR+oFZekiVT/b0s\nEVSK\r\n=XjQp\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"29fe61f3aef5a85c7a462638b6c2b809a3be57c3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.3e20c1de8.0","@material/theme":"14.0.0-canary.3e20c1de8.0","@material/feature-targeting":"14.0.0-canary.3e20c1de8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_14.0.0-canary.3e20c1de8.0_1643124696995_0.7520819978455338","host":"s3://npm-registry-packages"}},"14.0.0-canary.9f9d928b2.0":{"name":"@material/shape","version":"14.0.0-canary.9f9d928b2.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@14.0.0-canary.9f9d928b2.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"25978a15cc2245c841d2714a71c058b7b2798b1e","tarball":"https://registry.npmjs.org/@material/shape/-/shape-14.0.0-canary.9f9d928b2.0.tgz","fileCount":14,"integrity":"sha512-PSersoFM0gjKh8Mo0xeBHs8v68CnzznqrWB2uD061W8DX5VZ1sY8/fdt+YTfOMzu57Gq44/fGXFXCuBRuMMXFQ==","signatures":[{"sig":"MEYCIQC/+IFgyAww59X1hKC0EZR5uA0Yg1Ia8y/3x08AGmLvcQIhAPMW7bi/NwCr7VJt5W5cdFBYpE/zGK99eUMo1hTKRaqn","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8uCtCRA9TVsSAnZWagAAVFQQAIbOUVuckdaO8QRVZFLB\nSU1SwpT+KlpCjYlaXZ7J5rJj8HhtfscwSTd3dpydPs7uOC0Ee/yjplUv3he3\nb6yDAAcNFnQzSkAEMwmOohEbGGIgGN/7LDpPA94BGx4/xlZQay9CFsx5GM2s\nhscwiqNfTNBo+yBHCvvi1mLlhILaDkudIKyy/Z8N9J1jqRSxgdOq8WmkmIvU\ncIu3Ci3wICf2TQ1vvjf27OOqYRPMmH30+20IRmin1I75GjgT5cAQOPW7bFOR\nuQqdzo92WfI7qFw6NKiGX+R6zwIE55r8RdskdmAMvciaufCndLVtXOmW7o4v\nQqEBd5avF+HpFaxniVhXs+4NQmEaovfFqdzR7Ka31hPCquLro8iGPYJiPWQz\nI/DvF+UcMbP/Lc5U/ymKtceAT6p0WWVVT6sO/bXcZ4ImHBCciF++YwuVE9Fp\no22rZZStJkS/BaFdKRGeAv/DAsTUZdRo2atXgbTBGMqb82SLw09UDV7cJy+v\njfF81/FgJuALQIOgSoL6TYNCvvO8mUC0/N2JIS/cGHX5nlIUTzkUO/+/yPAx\ntrirnGw/A8thEoc/W+aMsJaFE3EJrx7XLVPPuhULcyviJDlcwdd4LsQK4R0Y\ns7QFxUmt3/joWquZkh1rClWgZTk36s0GM9oPOwh72wTl/sGGDV5qftzZm1l3\n9mGT\r\n=hYkI\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"2983c7f2f01e1912809d6004e47ff0c7c27de38b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.9f9d928b2.0","@material/theme":"14.0.0-canary.9f9d928b2.0","@material/feature-targeting":"14.0.0-canary.9f9d928b2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_14.0.0-canary.9f9d928b2.0_1643307181217_0.5041053569397733","host":"s3://npm-registry-packages"}},"14.0.0-canary.a2bcb065c.0":{"name":"@material/shape","version":"14.0.0-canary.a2bcb065c.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@14.0.0-canary.a2bcb065c.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"73c81b54f53ded659022ee5540fe64ef5d4c2680","tarball":"https://registry.npmjs.org/@material/shape/-/shape-14.0.0-canary.a2bcb065c.0.tgz","fileCount":14,"integrity":"sha512-o/9cZTgleZFBg2q5XLs7Bpy3ga1jR0yjnnHWYg/CAn3J7+OUivA1ibzPhbbkBmSjL2eBvi6FRkCBOr5GId0HTg==","signatures":[{"sig":"MEYCIQCGhrl7wpDR0XWcQaZGmew6+0B/iQpM0c9Px0C757RzVAIhAPyDhqpdvEmK9Ql7Mk5lMnaUmlgCS+GjGqeEYEuI75KR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh9EXTCRA9TVsSAnZWagAAto8P/jGW6IUpdxSeQjfR4hyn\nSHnEY3hvNh+1l0CHjGAWaOV1ts6thyKEwyFCXZLh+Uy5CtGixZZ6wKqmlWdr\n/2s1Plw2Brbggyb4oJVyH1jNL01xd8SigDDO7BuLFMJY4Ep4QXw3bq+SEhac\n4W0fPj6OHUDw3YH9Ys69n0uuE5tRZ/08NUhYGwNQYRbOaayjC/AQ9BNZ08sQ\nJMa8AebyzMwQE4AVCnaXqIAPcsRKLYzFlDAhUl5J2yt8CUsd/A6F+ZwxSmtQ\nNlc8hBtC2+fm07vIADPx8s9M6p8XpKZnW/G9EQJ0prTiODxlcv77O/zsG42a\n6ASTnVeO300aLFL1bGVBbi9f0I2CJQM2+qVv7c7rPoWdAb5WwOr4T7qHgrlw\nPGWRI48BfkCHUeruuO9ME5eBVJcc4ebyR9g8sRsX59XJSwkOzra+SKMOYD4o\n8+od27mr2gZO/P7RBxm2vI7dkm7rBugk8jDxH3CUB1UxB7uh0Bf0h9P5LeAp\nssTCSZJsGQYGlKCgtwFJw9LlDNnkY8ec5kNjCtyP167N6DlngDwayWV3ljOA\njfAJ+/D9IB2Ih2NtjKfDRSAoK7xwG5rNhjRnjBeAjm5JsZ0E1j0MOUTH9GWK\nLQ1tvbuFgM54JT7M+OB+iqBtous00cLDMEdXaIjakxQT18s3x5EqQSsdV7+3\nB1fk\r\n=o3Uj\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"7f175ca37545bf0bacc2b94f7a18a2a3fbd5eec5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.a2bcb065c.0","@material/theme":"14.0.0-canary.a2bcb065c.0","@material/feature-targeting":"14.0.0-canary.a2bcb065c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_14.0.0-canary.a2bcb065c.0_1643398611544_0.8694395343880303","host":"s3://npm-registry-packages"}},"14.0.0-canary.4e66fb2e1.0":{"name":"@material/shape","version":"14.0.0-canary.4e66fb2e1.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@14.0.0-canary.4e66fb2e1.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2e743dd89756ff68236dba4a1c5b569d016ec9b6","tarball":"https://registry.npmjs.org/@material/shape/-/shape-14.0.0-canary.4e66fb2e1.0.tgz","fileCount":14,"integrity":"sha512-hcxi2Dv02ELHdAkVhOzNyD18b4gvbS579QNLP9Iz0e60Y9CEhWlxMxhYUwxZAh/NB72XUNIh+cI1Bqf8KcdD2g==","signatures":[{"sig":"MEYCIQCLV1Hr8jFraU+b0Nhv+Md088qDcyRawQ+3TNjyn6bqZgIhAPl8rzwwRLewrwBM741wOhl0FjbxpnOuul4WcKM2ldKE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh9EbbCRA9TVsSAnZWagAAQbkP/RqnvKro/DSIKSrPDDu+\nXWs6fioFaAlG4/oDdaed/OBnqDNCNyDzdAESv23Qw36/7STzDvTEfJo70dWG\nIBLhWS8+pRB4fIvXdCZJxFAx3775gEGeeADcrfpxEZX++/vzaOVlnxfr+EUV\nn38pqZQVM4zRHm8jOwb4RSsBMzb47EgZa4x7sd8pb+bHxuNxgk7FS441XC8s\n1DoDxXErSex0nEskz0c1vaZ2o9poi/uc2vd5/5mn27ZK0zQ1ktUHTSBv4mQG\nUb3yyeT+a+bDxpBUgdqRqBrMnuBHQmI4RKBvQY+oYEKN0pkINbsDjOzF2iB0\n2GOva5fXiY5xQ6+KUO5m5saVNg0Xta0L8xHODULVoIeRFAnsX7tnB7YW5RQM\nGOuawSlWiJKqYkZt3ftAi5pY2qhpjKB7eRTy055MVtmme8s5RfdFN/vR1wNF\n+W8n6QVvV+eF0rNfOkrYj6HHHkI8UR0N0ROwbqWj2hZmwJkEmFQnDxXnzs8P\nQ1yQuHfzK6QdsVr3XcfhOZsJASBQa4AT2arWq1D3YvZJix7zvZyKKucGTPNn\nMzRbB1PCSRWoezVu8VfotUV/liI1rrwspqerBPLz4a0U4EczX1IXCYwTQ8Ws\nbir1lX5M8IbFLHjOFZ8RScXjoJcvcO7tG6UIS1NzrzK/2eMF5ImusfnAU1IJ\n4Hfv\r\n=qyo6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"edee6a64c210815507bd8460fea3df2591cf0d65","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.4e66fb2e1.0","@material/theme":"14.0.0-canary.4e66fb2e1.0","@material/feature-targeting":"14.0.0-canary.4e66fb2e1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_14.0.0-canary.4e66fb2e1.0_1643398875006_0.08369393655002066","host":"s3://npm-registry-packages"}},"14.0.0-canary.9736ddce9.0":{"name":"@material/shape","version":"14.0.0-canary.9736ddce9.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@14.0.0-canary.9736ddce9.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"129981d77db3823942caa5dbb8feebec1821d072","tarball":"https://registry.npmjs.org/@material/shape/-/shape-14.0.0-canary.9736ddce9.0.tgz","fileCount":14,"integrity":"sha512-/qhnzfUqjtm48cdDykpw4q13V7NrE1kcIF/v9E0yG3y6uqOne3dzgB+2RT7HD8ECFot8F3sHPadVFx1f1gQXfg==","signatures":[{"sig":"MEQCICv74OhbqYrr6697+lOEI8qwdxxpytKnS7+FkiphXfhrAiAf3LAjmJHb4iPwlh3NhNSlQzK+KTwq4xdUzXwPfyABGg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh9Q21CRA9TVsSAnZWagAAhMkP/1trGpv5Cb5j60uSMy7l\nlGH/o1/2T9/OOChswFaWzIBx/0O28L4F6iTzqG1jX0cC10kuV0IHZC+5pAZN\nMWxnivBs89FvHQbEuAtMfVNE8WXTarH0oHpvhpCP+2u28f0DHRcqpLdCqvot\noOn3R2GJzFBdeDzzX7ZUhefHjiKa9DiB34FtcZeBaLaHZKGNQdY/eMvVaTDd\nELRsOmaG+MuWZyJidXGPN5uzpcvJ9U6bZPImmamAq+O/OQVWAHQchiHeaUJJ\n2YDOiRqkul8Vq552xtKMtI5/AASW8GNV9oVwMGiEgDj3jG96nPblE4kU/Q6B\nlt3jAWn1EAdtCV47eykPRe7tawTdSvG9ZD64f3vThNx/++CoUFOgHccKT+2M\nO+Ix++emqZ49p2/ZkrJLU4O8IViUPLweTe6rBCLA/XQCIp3mATEj28yVAeU/\nV6QTgCT4fhtO6phLUAgZKO+0Y+jHe/XTSS8UpxEW3C1pOhuq3IawJd/ZSZF2\n/iCPUlXWZbdSJ7FbS/dg4RlNaXC4fLlj7kI/dthl6RP13ixHHBL/JbEn2kqI\n/gdoX04tYvQYisaDe5GsucOav/eMZjbfLcYHk6MtwzNu1r5cm9sGUQHEAr2Q\ncyfjHIsnkSG1WPrs9Vfh1svM3WyzuoVTcTQ1gtix5HdLo5DKBpkmxAHSxyC/\nOeJG\r\n=/jot\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"d76de36ce796a981bf5e48388104bdb581d17529","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.9736ddce9.0","@material/theme":"14.0.0-canary.9736ddce9.0","@material/feature-targeting":"14.0.0-canary.9736ddce9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_14.0.0-canary.9736ddce9.0_1643449781444_0.09552142636648098","host":"s3://npm-registry-packages"}},"14.0.0-canary.cc4ed13cc.0":{"name":"@material/shape","version":"14.0.0-canary.cc4ed13cc.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@14.0.0-canary.cc4ed13cc.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e8013baf7c6fe7a98363c772bcf9a09369bb9efc","tarball":"https://registry.npmjs.org/@material/shape/-/shape-14.0.0-canary.cc4ed13cc.0.tgz","fileCount":14,"integrity":"sha512-jMv0L5lL8NQouznjK2hU5AMmWHsDCkAPNZ0NwJkGyM4b5NC1MFhOlqtasmrpZxVfvcWy0gHU95PbkUAKVCIDvg==","signatures":[{"sig":"MEUCIQDP3IOupMHTUvyPNfCMbl5m1nS5Lo99ETYFiJi17quhMQIgOR9vD2AlmvTqs9RlUk3uA7vHb2WQGzFkBPl+OXEwAZs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/W7nCRA9TVsSAnZWagAA8C0P/1m18Gu1klJ2d/ahWOo6\n1N3+UB8pBzmmEMN41a44xrHb2pN5IOlA+OGRyJ/4oaDe8FJyMzT8acjRGfvD\n7nx9ntvSCe8Lt4xjsMCJ0nCV2MzC+2iKFOzTBMULVa/Fvz3P9R5ondcTYZQk\n3cPuiTlUmrD4HCmTbfAuu+22NxpZFiXrjswu9QmxaMza3XEX0EJMEQalOo3e\nnGTgePE5qhyb70Kf9NI83Ux2VysMeiOzR3x380u8RyzjepQrsM00HuabNbig\nek9OZBLb9rfn04A+bUeSmV3SkCtAGQq3urqCLDT6GEEGYTDmmGVE/Fm6lYHk\nTu+pP0JUk54WMTnwzPYQBHXEgbAcUoMIOwzNkX5yLNv94zuGhNdL4LWToI7c\nC6AD8cznrPeL9AwvtARCoxJJgwUSDpAvdKaGImWa8F76bzAl8UvwK6VrPoPB\n6fv4ELhlS7F4zSbczyG8w+PwxmWhtjPxGpNkA1ko71sfSj0BFpY+aEP8ogZm\nAZ7D5N2GO8uv/5aL+YA9mrxGc+Khiz2bCz2VwyOyMKYr6lNvNbRFPh1ga9Fj\nrVcmzwIGwST74u1uUfLl5BUChER3XPUbGk44j3MWchCMB0dOL0V6NLBY+7uQ\nw6IZJAN5YCbZQ5P8S+c1+/g2iwh9omhmX1XiFHmEEERkj9ljmyz6ITYZ1/rW\n5DrK\r\n=4qlF\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"15c769412cb0230363c372a7d45bc6bc10eff8e7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.cc4ed13cc.0","@material/theme":"14.0.0-canary.cc4ed13cc.0","@material/feature-targeting":"14.0.0-canary.cc4ed13cc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_14.0.0-canary.cc4ed13cc.0_1643998951691_0.2880749327828114","host":"s3://npm-registry-packages"}},"14.0.0-canary.dcba26fe1.0":{"name":"@material/shape","version":"14.0.0-canary.dcba26fe1.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@14.0.0-canary.dcba26fe1.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a600be7fb890599106fa33cc161c3040d2ae86c5","tarball":"https://registry.npmjs.org/@material/shape/-/shape-14.0.0-canary.dcba26fe1.0.tgz","fileCount":14,"integrity":"sha512-OQqvmsXPH7eWQJkzyhi5KiQyHFwwjCM9ADDUSr1d3eejgLW+iFUMvJvU3TSakfsvZTz2Gwu6VUnQCLOuPZmxng==","signatures":[{"sig":"MEQCIB8TVGzTW6JNmlTEiEYZnztvWEXXBXiZhA9mGcMxxS9NAiAJJGlBdABgx6HeJn1dP3JYdcSR6YGxEq5X6PptPthz7g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/aEpCRA9TVsSAnZWagAA6WwP/iHLDLm0iWVqMzHvpBqi\nYP/LpjS5KiPSuJID6k9ssKfveiT533V+/J+4MUEmZhqr4Etwcz5G658MXk7b\nYlV/kMhuDQA7wh6M7unAQRkH+W6XFZaJLLmwzUVAY5fCSoWv9UaFmPeCaHGH\nRigSy69cnURg/uPWfLHe618wL5jdsmb5brEGmLm+GbGf4OVyanQ/kvyD7pLQ\nUAUPRt+am7zSaUwJipfshog3S4b5wJfo0kUNAY+CAcSQbE9Wm+YOo1XPxWde\nO5uj/AzLsQiZOPMGivvMmbTmxnywamyIrZeVjD4xzAoqe23sXR00OA8ymmJh\n8xQ5J4YNF0zJ9RSDimpWuBs4oRToVVR20uCiUkd//4vXTkjG9jiZ70oVG1Aw\nHR1O/+KCs6fpALcHC8wq/aQAG5GDkB8iLfISOOm7Fq6U1SJ/ebXEswIP4Xn1\nJ52Rvok44OfjgmAl53s42FHJR3MgwReJRps+qAfd9qJ1t7rsXl2QZb0shi6v\nQNGY9fnH81hT0NNipqpPe8LKcnrKOKgjFBS6Fm2UIR5dJqETLmhUuMzB6CfU\n1nHg6xquWVGAvmqUH32uEyxu5Dw9BJS92LXdYfNV90tetlrDNvUPOdIB3USt\n9cf09/rKs1wj6FSTb62x1oVjVdrws4ASQ6rjg/YE8PHNasOUDzmZq6/hyqY1\nn3Km\r\n=wF0B\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"ced7dd56d5d3b017288f0575d6e773c03f01d0ef","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.dcba26fe1.0","@material/theme":"14.0.0-canary.dcba26fe1.0","@material/feature-targeting":"14.0.0-canary.dcba26fe1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_14.0.0-canary.dcba26fe1.0_1644011817565_0.4007243708130046","host":"s3://npm-registry-packages"}},"14.0.0-canary.ec54d9046.0":{"name":"@material/shape","version":"14.0.0-canary.ec54d9046.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@14.0.0-canary.ec54d9046.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8190663468b8417e9043be3e76368d8ffbe299da","tarball":"https://registry.npmjs.org/@material/shape/-/shape-14.0.0-canary.ec54d9046.0.tgz","fileCount":14,"integrity":"sha512-JLwzMal4c4XC33QbcYWmX+v6ryjtm+IUkB8wOHFgDatkT1RR+XlCO3QXMlJidqax+CU5Cxef1RsbrTt5jl9aAQ==","signatures":[{"sig":"MEUCIQDkAJ2WPfPODUBZ70mG7A8GtrQhUJUmNmIWtK2vBipiHgIgeD2jwSe1gZcp1ELZhAvYEnQoIe6AYhRoRbeDmjKGjyQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiAT7QCRA9TVsSAnZWagAAlscQAJ/kQBsF11EYPz7AVym6\nOiF09PBi6Jm7gcfSVDf2KLtI/CdeH0tPgQCumhf72eXVt5g7b0X1O+IVyIw+\nHbeXjR8T9kxX2rdX4UxiBJWobFaSgC0BhwYl7VjHyUOIDL3RByCAIl6LWABx\nPgnIZWWQ0YnEdnz4+Xd4PKTe0PXPSMKA1ty9Pl7o5ek0Xf/3tAhDIXMZpcs+\n5HsJGD0NL9HQM+ov54gCE5iwfDYDN3WAcVBab6GuWvmXZgJVj9txSgwx8o1Q\nEqbCdaQFhmHK+fQ3qJ+9kq1CROvCmwe07Y4c6bCwx5fsIEfpo0yb3rVHpP9+\n79rOBctSWNUJB6zRQyE2ejetFEPHChuGTUsjlsC/W+aQETCokcHpIkB0c1fI\nQG6MkaOq+YD/kI+gj6fePYdrbs2Y3j3Jk0fbEb0vqLCjJchRDJkFJgepfk/K\nb0xgoJbl1AOKJCJjsk/9szzPbQbSRGK+bqnqX85PN4OKMTJilnlkkkB+ijKH\nOP+7Jw6Pkb3292nSZqpd5mUxS//woRh0kb/b8u0jS7yHmwL6Dwf4SzEnD6bv\nMrO+zo6rIVQLdnGtfT4vENu6Yt6Kjyg5gOAr6Wnk33z6B6ESQgm9SiQuBCCw\n3dgETREa1+pRkvGihjZW+K30dvdEXJ2alJLcriX0jx//BJe+eMkxbS7upshK\nvX16\r\n=NQPr\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"68f6bb151595e8790d7092842d6c137ef93ed770","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.ec54d9046.0","@material/theme":"14.0.0-canary.ec54d9046.0","@material/feature-targeting":"14.0.0-canary.ec54d9046.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_14.0.0-canary.ec54d9046.0_1644248784448_0.6047956036396287","host":"s3://npm-registry-packages"}},"14.0.0-canary.ea9b5b463.0":{"name":"@material/shape","version":"14.0.0-canary.ea9b5b463.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@14.0.0-canary.ea9b5b463.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"42dbe23c16b27c0a12c26471ff61b2b69e7df363","tarball":"https://registry.npmjs.org/@material/shape/-/shape-14.0.0-canary.ea9b5b463.0.tgz","fileCount":14,"integrity":"sha512-9ZcP9L91E853QbwqSs8O8yndS7CLTIFGexwhamkFOoHON7Cj+7ACcayCNo3homvvTZ+31tUI+/vinmYAcz+87w==","signatures":[{"sig":"MEYCIQCU4JMGFAclpG5BRWrIKtZSiGJKH8LjtIMDmm/Qa29G0QIhAPEft3Cb0zSucOddGaQgstpfy7hOACp/juF/YDSErEL2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiA/+XCRA9TVsSAnZWagAAiQQP/iJI31OMwV8ImBH2+ddr\nGXfLJw6I8yIwKPOp4uCRVH4o51kBQYw71uNXD4iyS/O1DxhROirokJSdx2DU\nOIkWA3PZGe/ekq6aLsI8LgCR6ADOz3XeNaQ9XdcD2MMCZ0Dwhs5/RW3dEx/7\news9cynwu77KPvi6Y+FicNzy8Ruimrn5dzUEpUjz6jwxPIM7sK9TP8MNhd9F\n0TT4U5y4loFL7sRSvyqbOZS1X5Z1xqQBovjEElnIAZok7fkSX1ckpxPjCHUR\nQi9aSmkzag3WR9SjVz9znjN3/RCDbzN2wwDytd8RVflOMtNZjITG6fojLEKO\n5TrYpy6ryYvhHZZovxyFMAgh2RiDd4DYH0HBVb5urECw3knweDIsT8T8Nk28\nvanEJZ4KmWFJw1jvLjvmo4NDQpiMLNdxfBqiJ/PLcSmYztppDiJiwAJM5TY6\n8LGQ5jEKyHj+VauHTYXorT8uqG9v+DUMPxWXksZUq+k6zb8aT6kOkBtdH+LG\niDqiUUIuFFlp8BvVNEcNCDHvS+4F7BI3+g/fwTSZjAXV4vQ9Nr2PM+lImMng\nfqhKmRfAQxxU8DP8LkHQ/pNXAepVqfBrvopzaJNPE5VZBOlV2CP3vK1aEaSf\nk+y5vB0wHWaplmSIaqNH8jSel78A9hQ2pUF6r9I0LSQO4mP7edzSpqMwfjTp\nQlsK\r\n=0mEz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"ee827dceb9fd1c47516461b8ddc28b66702f2c04","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.ea9b5b463.0","@material/theme":"14.0.0-canary.ea9b5b463.0","@material/feature-targeting":"14.0.0-canary.ea9b5b463.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_14.0.0-canary.ea9b5b463.0_1644429207267_0.07698810952557911","host":"s3://npm-registry-packages"}},"14.0.0-canary.96ea061c1.0":{"name":"@material/shape","version":"14.0.0-canary.96ea061c1.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@14.0.0-canary.96ea061c1.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0ab1c634591718b9d8224935199cd46fb0ccadde","tarball":"https://registry.npmjs.org/@material/shape/-/shape-14.0.0-canary.96ea061c1.0.tgz","fileCount":14,"integrity":"sha512-eInakUBOaL7wsWui+hW+YTTvH47TkuVO+0BIHLy7AaFTu/tfdDFHvqVA6uFjIVOnnG0rsLBp3S+NqrpYV3uEOQ==","signatures":[{"sig":"MEUCIQC2v7B8im6cUXqWl5px34QaqOMyKgO67Huhk6rsIq03BgIgKS5ZaCMHPKY1mzzPIHvkEMIViG9XIHeZ7IXOiTDh6fw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiBA70CRA9TVsSAnZWagAAMiwP/2t25mussFUhTftLkVzz\n4EqAywQPvEhMS2ndWeJzui8aeVJg37rlGfxAWP1GPp7L/ba4L135gnh3gaot\ndRJsF3uK4hrJ7m6rSNCEVhxIPGKIt0NJM0bmTdiqBQRVwZRhUksMzs+6Asbb\nGENriemL0uNQNZU1lmJRtzFqxpSO8+5Ex16oWyd4571EbOg0YRpZDWmDyfN2\nASyBwKb6tK+dsK/PyzoFdj8rXkDXwx20R5tE0KRV2VFA1/ERMVL+J7ekLfNi\ngCvp014l3fJOgjeau03Y5XzZ01DKEAH9uUH5Jj8hUKEhHiVkOLPK2NpgYSE3\nQboUSY3VNfitrx9sZtbvdeTpuFfSbk8YpHjedlySiTxpD5ss66l5Da2Hkuuo\n5Rehx2heLJ/ePXvitSEsaVLZc1wZujd1M3mCEQuMiwpsHHTQlR52AcZuwcG9\ncXswtu6+/Sxi39W97nY0p/hb9vnq5XrMnrF2lWRP5cMX+GrQWXMCl1SV68sO\nkYDkY0CLYW/64aSYcC1t7c0eAv3HzmmU8KHdQiqeL50TkQJYsWFLG8uMU2Pk\nCLM9wkWwdYxFrHPXrTF1+2dRBYtsUH2TKBRayoSix1ikoY/NFoTumBHEsDDh\naW8KhMyrPTYEvtvwCnQwHoMRZ8cWLVclCy8aEUtcAyIUaS/mUudX8KdkbwWH\ngkt9\r\n=6527\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"b1a410c21f8ac6405b364e437b5af7eec06a2020","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.96ea061c1.0","@material/theme":"14.0.0-canary.96ea061c1.0","@material/feature-targeting":"14.0.0-canary.96ea061c1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_14.0.0-canary.96ea061c1.0_1644433140134_0.2081598135131988","host":"s3://npm-registry-packages"}},"14.0.0-canary.e00181e59.0":{"name":"@material/shape","version":"14.0.0-canary.e00181e59.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@14.0.0-canary.e00181e59.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b13ea4d986eb04f1905881b475b684caf5276035","tarball":"https://registry.npmjs.org/@material/shape/-/shape-14.0.0-canary.e00181e59.0.tgz","fileCount":14,"integrity":"sha512-8HNzOzkU2yATFbDFhtDTn+C701pkTH0L2GNez0qEQMm+1+I+HbQxtZT/M+foxHBjGY9VtHkMW5zFoMTZHF+yLg==","signatures":[{"sig":"MEUCIQDsVxdPRIbDiZGnPnqZib4JPBrpbSlap+UShk+Jdf/wTQIgKRY33Pka8KPq7G60rfbZ3n8JXB9IMjWCX+6fhYdcNRQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiBXA7CRA9TVsSAnZWagAAH0QP/iONuBkAOLRcYXclUMjH\nsim6sceU8c3GEwfPmV0AKD8gUJ2I/cYbe+uKI1vGZc7VwZ5XHPckDkCVTsMT\n0vOhnftaaIjXG3CtWFA3c2uNo9uJLYYwLrTxzgl2UE3vxiF/peEEhDs7y5+R\naw/ydLmAnjjq1ADbjcfbkxKEoA9SrFc4v+eDsM7l6H0Mkm7XlmN1QpdAK2s1\nSqjhZ+yeGjdHK7rPg5531XGwonM7dHpMjsbAcFT4zqfkOXn+h0s29JgLFSdX\n6SEXhS3ueljCyDbCQ5KBVSqhB8i2q/mOCOPZb8mCqHnrGbu6Xah2EIB4VNwd\nJXPeRKwW4j6EInxIWV2Z57u+dnY3W4/I5qlm1xel0wdaPP2SOgotfpve7iJU\ne/A7B7IYiGy633olQys5KuBHGh8pZDYknX0nw7/den4I+bO5/EDuqg87BwWM\nKgk/e/hLxJnEH9Z9xhEZ+XqEELtdTezk2NGpL7PX4p3kCNx+JJ+zM5/eyiNe\nD32Zv/wKgjevemJf1ACtj7hTLBc9jotklmkY0MAZgOGCCyfCOtS4kn6x9Vp9\nrAJQwjGFnSgHCk5VezbayFD9yU9wagLdiN02WbALn5idyK7YAfTBpg26dPIG\n9YlBxn1eh+g9gkamouL1xozZH+SoMsDnBjczudvcQzPNbwHPYDTn61Cu+VzT\nmUTN\r\n=GT1H\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"7e9ce072e9ec1ce5820d347b59d99209542a2bfa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.e00181e59.0","@material/theme":"14.0.0-canary.e00181e59.0","@material/feature-targeting":"14.0.0-canary.e00181e59.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_14.0.0-canary.e00181e59.0_1644523579233_0.5515750903855106","host":"s3://npm-registry-packages"}},"14.0.0-canary.037285f9b.0":{"name":"@material/shape","version":"14.0.0-canary.037285f9b.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@14.0.0-canary.037285f9b.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"904b50c26837dd69c85044010eab9a38b2ebfb36","tarball":"https://registry.npmjs.org/@material/shape/-/shape-14.0.0-canary.037285f9b.0.tgz","fileCount":14,"integrity":"sha512-vUpSZMYbtMBnz3MkAVY8Mu+JBjIY519V9A9490XnnI8iY+/a3eJ7swD+RYYnDx15C6cnNNxJKzwt9Na2BCPLOw==","signatures":[{"sig":"MEQCIAFgSgm+BbMTWiIeIMQ6E4eykfbOLyXAostMdXzg13YDAiB2o6anXywDB6qP7SimpJVXh/OdlWsKXYXPvTXPbcZv+A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiBqr9CRA9TVsSAnZWagAA2e8P/1rUJLWYidtyC8i0FRi/\noEJ0u5WpcDKZiTs7IVUCl9pOyB/yvwtox8D/5SaEBCHsKXnBzERfL4/CMrKq\nY/SrUMme7kkyjfczs891QTWM0EeB14EGoj0xOY+2xpo4exDzS+0+7XCCpH6d\nvsNtopOs75AKILKV1z+Pt1Q5qC1In38syAFfenkv+8UpBhQk3fN5gx3KHD1L\n8KJVz9PrIL7Oi8Drl50oCTYMfobTntSL+iGKapXdqHu496kqfUMeo6aAOFsN\nRaRQOXASqeUFBZa+pO/zxR2nV+7YrxEMoDONYPw5H3fP2+0h/3IzImGv8zOC\nv3e3aNgILSQ07UqH1aiTORCldBIMqs2zANCto0wck4MSYPon+JyqGEG6dIJd\nRBVLPfhg7hZWU0pFcF8AK5XRk/BGioBmKvj1x7uI/BBMwP537ZkgsMUY7IhY\nTA1XSTqHZT+uLugag5F95RBFrjaZ4PNFpHeaaeqPkXJmkmkeLEhv2nfdA9GA\n3heOBWVW6JmUNCBhuMWPNzt/jGPZkPDNqJPP5juE6QUGDCirFr2VO5Ii3WGr\nzNUZYVSXd5N4TKHkGPJplCpag/pVdCjETEEiQDub4q0A4v2BijbXbJEAxPmX\nQHtWgQq7W05OZhgABG8FPhu9KcGM6goKbsep8iIuiCWIL1kTN4exiji1kcSR\n68zG\r\n=wfaE\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"a9bca201560da3f96e435e6e070baee148bcabe2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.037285f9b.0","@material/theme":"14.0.0-canary.037285f9b.0","@material/feature-targeting":"14.0.0-canary.037285f9b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_14.0.0-canary.037285f9b.0_1644604157352_0.14653823170258473","host":"s3://npm-registry-packages"}},"14.0.0-canary.1aaa68dda.0":{"name":"@material/shape","version":"14.0.0-canary.1aaa68dda.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@14.0.0-canary.1aaa68dda.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"683b23bd0c9db727e927255246ccf7383495f41b","tarball":"https://registry.npmjs.org/@material/shape/-/shape-14.0.0-canary.1aaa68dda.0.tgz","fileCount":14,"integrity":"sha512-krsDFXsbFcCY4vgn/Eqk38QAcDfETKq6kVGLCcP1yQl2kGYv4NoSCmGcyhcQHkJ+Lemyg9SAAnDrZwSUS8JfsA==","signatures":[{"sig":"MEQCIE3++0On5JukO2jJ0C2yBAJYS3MpcL4Ded087e6GxZehAiBtvR6LEXBnZ5VGkdi2eP6rRa5n0s4MeaShDHMqLiL5cQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiDVUfCRA9TVsSAnZWagAA1M0P/Aiafmq/P/pnN6ehBGwL\nTPSLjD3JNZY/ATvryrOBaO51uA/3F77jnL95hKKDE18BXi58ksts0VFfSZa6\nEhtvDVfanBExErMZxMy4N44kfYHJiaEq8u3TRGV3Qm8AHAIGoiV5lZ/Xdeqy\nY1AvZRQ0Z03bs4ZozHOGwSI3Wbtjyl1SGYmmDszHIqGg/JjFHLzLX7UY5blG\nB2I2DyLpAZKV1myvMVPtXhoy73upO4biaim7Q1P3vcZM/jVJdUwwI+QmDhLY\nwSs2taSUPCKHHfOvNPNM6K0DFkelp4x/iSgz5WALe1tu6m+z2irwwKxm5hDr\ncvhI7VqyQBDP69oDOARFKi7YNZyReidMoO+cwkHNUzgCFNDxmOjZmuE0UBGs\nwECtbvnWOQ5+n/ojjoyz7DvfkTQbmM9GZUkh4XEtYRx4odyxoVsKqCGc4NOH\n50W9lvg1ui119GmDJ2UJuC7y5Gsys9dL6b3B8h4XghzuD1aUzyzm3jf/Nj4V\nE7zZa1IECSD8PrrkFXHjOJ7MNkJ1r6G5qE5YVoSyQiWxnfRh4XFNd/B99+7p\n1eq8kCAZTBeY/P6g7yw+xgkzF/CRq61LLWABol7RaSprtQD2cwkV/fgKszg/\nIzJQw15e5zjXK2N2Ul1iaKJd874PwhZ8v+9P/wvTc7m6xtjyLa26LvxBCuyf\nmHnx\r\n=RIvd\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"49eaedc3ce6f1f8db6a6929143c077e8f65694f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.1aaa68dda.0","@material/theme":"14.0.0-canary.1aaa68dda.0","@material/feature-targeting":"14.0.0-canary.1aaa68dda.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_14.0.0-canary.1aaa68dda.0_1645040927825_0.08600308568430104","host":"s3://npm-registry-packages"}},"14.0.0-canary.ab4aba1af.0":{"name":"@material/shape","version":"14.0.0-canary.ab4aba1af.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@14.0.0-canary.ab4aba1af.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ea0eaa7baec62af0871a9ed743c18dcaf9420216","tarball":"https://registry.npmjs.org/@material/shape/-/shape-14.0.0-canary.ab4aba1af.0.tgz","fileCount":14,"integrity":"sha512-vjQYpNSF3s3s4V/kPFS8s737Hv0UD6JXjjuXwUL8wu0HXbtjAM2OFkPNMtAdAUCUookh0hhSt/KDt53sFg0A3A==","signatures":[{"sig":"MEYCIQDJIhOxZWOK6mneM/wMrSvwHWmVXLYyrDTGqcwX3ZZPnwIhAP+WD08/f8jBbw9t/wF+dZ/skM1eDc2ZFDYAnNdzLDX7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiDpDoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoBQA/9GN0sIqvOwsx7ukG6w8EJ1oZfHuZm+y7Itr+3C4yf+XN6yxWP\r\n0X1IGPBWgnEW0NABFxoyTwkzuAe7j4AJXAyOCklKbcwiMWLABl3RD1S/66t1\r\nUAlqm2Rh+lHir0NFihRcGwChAiUihW4Zs7rvoZzQp76zviVe7jaE0WIhfokg\r\nCEqNVusd6TBEj6UqM//1qh9auOVc7pI5iFArS45BqmZJeUCj+SGWLXDLCOge\r\ncqfS5WkFj2AB/XS/yZxEneiAylhjbpM+40OGJU0zUw6UTqvq3hXAeFAkWVO/\r\n4QyUC0+gYnUd6Deg5vshiX9HiUWNZkIQCrgYxpg1BUvxn8utRWqw5Igbd74y\r\n2oOWyUgJUtrBPFgLHtl16usz6HDm2sPfIN3Qk993pYNzwi0lWh24gMAPj9Hd\r\nBPx9imt8bNjOrlehOiev+RRUabBNdhq+8zDoW5KPfxPDhlwRt268bauJCD6p\r\nau1LZNixunr5ydZZ/f8cHyisPWQuXuDLwxh8MyYK+IzetJvhfOF8jff5SEsh\r\nukS8yKZL+335aJNOXeHBarluMqWOecaDLGh3cE09e6Z8YkSLBAhTsmkc/uNl\r\nbQKAErfCUsAFVDWc0p6qVf0sasPSnCT90I/pQTJgO62sFax6TaXL7XBVqRDu\r\nOlhxUbx/Nafp6jw6I9Hb8/lfJGd+GZdOCJw=\r\n=JP7A\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"89aa095a35d4a006012f1de893cf181c5725f676","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.ab4aba1af.0","@material/theme":"14.0.0-canary.ab4aba1af.0","@material/feature-targeting":"14.0.0-canary.ab4aba1af.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_14.0.0-canary.ab4aba1af.0_1645121768383_0.07256282393218005","host":"s3://npm-registry-packages"}},"14.0.0-canary.e58552c6e.0":{"name":"@material/shape","version":"14.0.0-canary.e58552c6e.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@14.0.0-canary.e58552c6e.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bc6f2e740f282ad5117458b1ac90051b8c5d3aa2","tarball":"https://registry.npmjs.org/@material/shape/-/shape-14.0.0-canary.e58552c6e.0.tgz","fileCount":14,"integrity":"sha512-3TqwUR3umpy7zshxdewSio/s+nMVxdiyj+v6ozb2TtHNXXtipblHrV+PYoymTmCmXmZpEXQI4krWcld8G7iylQ==","signatures":[{"sig":"MEUCIQCmFRJt9Dw1FnE09tRxfK+m9W3q8g2vgwfxKPfBbFKrNgIgQyLHqun/v4+GLlSBNVLGisnQVNRa+g84RsXknRjPd6s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiD9+IACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrlYw//cOuUEJcjRzRljiLFeEZQ6Z9UyHXUNU8/E91hWs8dDoH7A6uJ\r\nfOC9s7tzCcY4D4qAFIzXVCG28ZyLPcsm9BTHerU0KqEuXtYApJUS5AOgNV7c\r\n6SwKytMK0IX7CGpEskMGOvAFRe95PJkiy9mfDzHEckjeGEHSOu652PODeDPP\r\nnBLy8Bxw8RKZJiG+Ln9GOXNOxNAL3VUHxQ19ZMgzolUicwxoMA3bSkJtWsAq\r\nFTlI2Z4RH2EBKFTv+svHoAzQWqTLb4ipvDZOk1OAMHjXmZ1iMyywZU4F7XJY\r\n2SOYPVt8m2rUW8XkqgStFsrOhqBGsYi4tx+/Y5CGlb1YNQCyJD0O55goGede\r\n9K5dNVF+ajV9eMhqxOz/HxEMOQsNw6VqQZUh7byTF0dfNDtQRmMPUwoZVwa8\r\n2SY9mZUdfa66lP+K4EXeXje6VcXJlP1zNqT6Rhx++vL6g4tiic36EwgI7m9e\r\n4D5qyhCjrGGg+5n051p3HJ+Pk304FqdjQOQCtOHkrrkUiOOUEnfsk7Gnvego\r\nBGwk/aGB3vPAw6Oe+a3ZORJoWsvqvmRJR/RXqA///pJDcdrBCuh80lO9I+yh\r\npzwrEkesBTrnU9ellMb/eVGTfFgxVw0jN3Ue97c4CzikHh0vSa+tg6T7IC0X\r\nUJ2X1jvJfhHMFXTvD87KAbmugZp3Nzz1Veg=\r\n=LROC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"6d5c1a026de93c3896f05529594e5b025f79a060","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.e58552c6e.0","@material/theme":"14.0.0-canary.e58552c6e.0","@material/feature-targeting":"14.0.0-canary.e58552c6e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_14.0.0-canary.e58552c6e.0_1645207432484_0.4190953413720746","host":"s3://npm-registry-packages"}},"14.0.0-canary.868793776.0":{"name":"@material/shape","version":"14.0.0-canary.868793776.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@14.0.0-canary.868793776.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fc22d7855e7bc9e08ba28b36ec435c53405a8a77","tarball":"https://registry.npmjs.org/@material/shape/-/shape-14.0.0-canary.868793776.0.tgz","fileCount":14,"integrity":"sha512-mEO4Rd0/1j1py0RgMWdnJ5mKDbYMOjfnRduReS/7I9s6Qp264Gfr0pR5KLpdtywUGbk2vrr+MfOPRFNlWbAORQ==","signatures":[{"sig":"MEUCIBSartI+Qi/lS4cFEtDqVghQJdFrR9lfbtIJ/u1G5QWGAiEAxHXNeNpQTEAtielQiVTbiRkYvAqD/Fq7QElCe9k+76Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiFTrsACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqQAw/8C1GdnILGK67CW+UgmUoc/OnumKAcKujY7mBr3HWNP/0iCh2X\r\nUks+kVq/wsiP2OwELY7zkB/TfVIHPOPBuypkkXtzlWPPjKgAcmNLQ9tHguTK\r\nsnO7PqW0Po6gO2VqH6Vx/hOGJ8bZOpeXce012+bXq34f/K20/SP33mZeKB8v\r\nM102PNQrSiexFvCxwnXfjZJhWofCDltn0H3NPGdQBVtAB7T73Atb24mNv7+F\r\nDdX/nVltHodBjizA92XyWEAA9/4yzINpFJGTm1fx0zHzKmnwy5fiU/VpFE4u\r\nK/Eij3/SftADi2BuoiUiHa4XjLyHu6phv3Fk/zCA5BgF0NF7blgO/L/DTfnC\r\n/ILP1Dg7rBy9TUS4J4optQhv8KCo5QqfaDmW1uIyawxc0kkHcYCaQzMeLZ/H\r\nzs0m6hsHmWo5MNavOEyGdRUkm8NUwuD2X4loYU6WJGzA7pNvWEPdsCMdCrhB\r\nCrxW2FaAOZFev6jqF2I1+1QBDB4b3t8Zfp6jFfr2+d+M7dF5fnBwdlsuiv9b\r\nfqOgB/lwojUDb2UhdcTc1cm1dAaqHpOzo2UOrEwjkIBdIJcRqLSZ4NYLhLgY\r\nN54AZLWjoBNTnJ1n56B5u1l+cN3+SjbzkF+J1zSaRI6vPWF/vprXuOLuYsv9\r\nd4+KELCKaYXfLamz/N6NlneInqKuR1ah0yk=\r\n=u9oh\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"78272b55e375cfc80b8f288ad4bcd4bba3d8493c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.868793776.0","@material/theme":"14.0.0-canary.868793776.0","@material/feature-targeting":"14.0.0-canary.868793776.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_14.0.0-canary.868793776.0_1645558508097_0.3003166016838823","host":"s3://npm-registry-packages"}},"14.0.0-canary.fdc37a445.0":{"name":"@material/shape","version":"14.0.0-canary.fdc37a445.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@14.0.0-canary.fdc37a445.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"daa6fd8298259365d20c9580ddd8b2675176ed6a","tarball":"https://registry.npmjs.org/@material/shape/-/shape-14.0.0-canary.fdc37a445.0.tgz","fileCount":14,"integrity":"sha512-gh9GltNPfkOTtuyfR1yu6rM1XqTWkbO2TzTohmzZ2X2d3cFn+Qs077dWRwhyI2+CEWw21+6z93bClmiEPFNhTQ==","signatures":[{"sig":"MEQCIDbhwZG3KmnM7PpDOmuuqkvNQqJ4AGPYwjLY7wWOHEyYAiAtp+6+IQ42HXNk8ONcIv4pSz9crWwQT0FjZPoARlBy3A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHRhnACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpgsQ//Se2hbck/mYc7L2aCkfPT8FzZI81NS/leXcsz2437nETIDQWD\r\nUXnYARISbVQrv9IAnBlggGoNfzFMFUQ0nRv9/Lo1NVOLutdHvAxJsFZiaFA7\r\nbPW7+RxD+rE05RTmOpYiREoKt6SHcJKu9oxU2n8F4Kvqell31UsNfFHWlkkh\r\n8WCp4YcJjvvnWhzH8An6fzWarh8SaxfjNsMB9yKyTtMN8NxNI/zq4qFKfhEe\r\ntryizQpCq2b3Em/evQ3MsjUvkcgQf8TrmsLBXDLDZB4nNxON0ELlVoKLm6HW\r\nFMKEXHGT0dwWgYvs0Od16LTv0PIxbHerG2gqAehhNRWm2TmkQVqN+uD2DGYx\r\ngWLELwbqPH1lJ2qHrixfeMuF2aGqHScWT1+Vf/gy0dWUTZF9ib/gYHH+ZCjT\r\nDtTkw8NgbHlIrxXfoO+O92Th6L2Yc31Wmz3bo6sV7cf7fHHwA865/GVGtbNO\r\nWsnQ5ZYmgajn/CmkNnse0Kdeke47gEnjTt6xsVQo512jKskjHoAyD9kWCHVx\r\nv8nn2LUDVYcDqJSD5o8hWZT7LWrBmDhJuAID5GGuoIlbB9RWBuUn73plYnyf\r\nK5/v0Yup3fbUVCqP4ggtpSgbGeRApb9AAdfak1TgKSTWIgpfEQCd+DWrdzaL\r\nlWNA97G2QNW8xuYnyogp1wHUgRv9HJugkMk=\r\n=4O+P\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"5a8fd2fd927d036e44b0b22f48d858fb848e504d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.fdc37a445.0","@material/theme":"14.0.0-canary.fdc37a445.0","@material/feature-targeting":"14.0.0-canary.fdc37a445.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_14.0.0-canary.fdc37a445.0_1646073959571_0.5052367893306333","host":"s3://npm-registry-packages"}},"14.0.0-canary.43c7d87dc.0":{"name":"@material/shape","version":"14.0.0-canary.43c7d87dc.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@14.0.0-canary.43c7d87dc.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cc64f5d84beb2dcd093b858f263e2989f7ab3b9f","tarball":"https://registry.npmjs.org/@material/shape/-/shape-14.0.0-canary.43c7d87dc.0.tgz","fileCount":14,"integrity":"sha512-SOHXGiAtstMX4PxYyPEDubQJBgRD4tkUBdOC0uAOpxVDDShuXbSaKLZEWh7liP0y9RYBtOQd5oF/JEJcr5Ri3g==","signatures":[{"sig":"MEUCIQDXAdte/SiBE5hIbHxPATAhYxacIfQgwhXcsdW/IaiC9wIgB0pWmN9XvpKpOkYhtMGTo7M4qdqkJv0JLDjqzpmoD8E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHjyqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrgaQ//TQsio+UaAfFeqSAqiS9DFMFEqDZDbLEEV4QZGd9yKRe4fKw6\r\nsI0b3GwLjwOD/HOW4M99RgiS6J0XhYAUWhZI4GWmsHkaWq73BFYvoyVXkIEW\r\nU6B1YBBFaa/ELfivj/ZNoVXgJY3nEaaI6BwEF7MCdAzhSkLtjAZA6c7se8q+\r\nisHWa8MVXkRa6aA5Z9lgai5KwhtkOivHeK8qsPgOUkl4jfwS22hDyYgHBkQ/\r\nLlpUSdEfmVnZOkFWRU5qeUT4WGY+Adr46c62yjYyuG7ZnJ9NyMw1tYxu4/GX\r\n5YwBxQ5v+2gX+IfgKdaSBFwJ5b9aJDftkaDr+J1Iye0jV6o+drFeOmFPYLE5\r\n4R7ZIr3C8tYwdIezXAffT49x3z6i1VUAjKkUopF+XesH8Hr12g5jwVJTZ/ba\r\n1aLJ1UpGvRm/+OqKt9QE5XKfmjTFLuX5VTFvUCEs0pxMGW3NpjyiC0jNoVYm\r\nvXzOVtsJB25zDDLLEqNkhrGcDCBFLLkEwIwqmtCI+XPT3lH6By6J4oLOiuS4\r\nTzHO+ZAo5vWmpjAlFeyzHj8tbibViEAegh8BRkFD5tSYNlp9e5M0hcYbZft/\r\nPsLptxqpCblYBd36IsKcErbraNa36rVAyBQnBe7ri848HGxbxL+TFZMsIdSB\r\nnua7u39ys1IaDnvAAJBBHjSxs0MBHPORpb8=\r\n=z/vu\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"c03dfa84e200bc6d570c73762d7ce507d0659e76","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.43c7d87dc.0","@material/theme":"14.0.0-canary.43c7d87dc.0","@material/feature-targeting":"14.0.0-canary.43c7d87dc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_14.0.0-canary.43c7d87dc.0_1646148778422_0.753471119288019","host":"s3://npm-registry-packages"}},"14.0.0-canary.23043acd0.0":{"name":"@material/shape","version":"14.0.0-canary.23043acd0.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@14.0.0-canary.23043acd0.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"223851f4292e0e4edc5583bc9cfb5b4b9c686954","tarball":"https://registry.npmjs.org/@material/shape/-/shape-14.0.0-canary.23043acd0.0.tgz","fileCount":14,"integrity":"sha512-JRT2iwYz/0odIrh/rVeqMJm/fsNq7EX/Qy6JHmi3jVB5gjy/LX5z0W57yDax8V8QLPhUPeo71QAhk0eaZB+0XA==","signatures":[{"sig":"MEUCIQCK8wty148YXEJ1LxcfLB8QuI+TRqFJk8FkznLwxyCsSgIgdmsMwTsEJc1HSUYmr0XX64wqo0QA9Xaad0cNtk6anA0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiH9MkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmouiw/8DGKs+UewP2veX1KoHsUG3a80hymQ5MGdO9IrXeewSHr9Q4U8\r\nRSOBZS2hMRItrbYlYUl/pg7IZFS6CnPEIb4Nao/H940xhRu5TVVDYT8UawCY\r\nxVQ/RjWT8BEAx6D15xUuXqRPXdJm713ECfSLvXDpyMlWnEJRy+Yw6wV4/GfT\r\n4lN92lM9nkRcp5MHWLueFxAcTnidu4UHyNR0ObRI4P5MdzSmmE2Zls0MVr25\r\navbQha2QIyJ31+6Mk/YqnvrWWujbS1rAXhvneMczsmYBE1HKaujgI/APH0y2\r\nEIFTzTyvgnX/HhRV6bDESZmXNF4MzzASfB2pjXEzUmPL+PEM1F6L8iH1ZlSr\r\n3pwgp7ewQogjbcAMi+/HAOkJPhvKpOouZkfTWSwnOGQMTdJJbVaru5B3TaDh\r\nST3DtiC2PZ/CRUB+QYseVz52sdvs86NYcBGQzZhPoA6GFYofGO3SsDBmDnEp\r\nJ0Yyv93i9t4P7vqJ+FUBOIKeXKRFQb8z7aq/owE20FgSvb71N1kznE6q37wF\r\n0mP7cwQr2DZ3SDAGD3/GjWGBTj0R/P6cs3t+t35Jitp80B/xDdUKBAs5fjne\r\nxGumOGHZiyE0wFoAhB6Njt45Q6+SCA33Ard4+LDr7rBsKBas/tmOUNTScG6i\r\n1xoeKr5dLiQfRdF2t/DmcEuGxbMrCDmxI5s=\r\n=MgYB\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"b1cfc3908c111a04a69dbaa90966642093f79e86","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.23043acd0.0","@material/theme":"14.0.0-canary.23043acd0.0","@material/feature-targeting":"14.0.0-canary.23043acd0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_14.0.0-canary.23043acd0.0_1646252836134_0.9208898571236985","host":"s3://npm-registry-packages"}},"14.0.0-canary.6505e61c5.0":{"name":"@material/shape","version":"14.0.0-canary.6505e61c5.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@14.0.0-canary.6505e61c5.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"81c602d6296e4729ad273a3073bb19de6ec5f210","tarball":"https://registry.npmjs.org/@material/shape/-/shape-14.0.0-canary.6505e61c5.0.tgz","fileCount":14,"integrity":"sha512-H3hHF6kHVgOe7EIsAZpLvFg0gH8phVSyiAXqNnv+YYOF1MOimG9H08F3Y/x0bkL+yRtbpli1dkuAdn7AwroWFQ==","signatures":[{"sig":"MEYCIQDyHid4Y2k4xIYyNDrIyqmLr2XH/y2G/Y9/dnC5ue6GMgIhALP88lt/W5m5uTuhAXwgxbPcVDsafgi9hyKs+BvNwX85","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiIR5PACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpQHA/+PdWK4pFN+AqG+lAGhoge4DLi10B041csvOjB0oE9eVUYRAmr\r\nGR12nuCczN7VnrHnUURi1J8EDoPrO+pmYyXdkw3y5s4Nqd0bf0YAfFxg1kUy\r\niyB9oxWYT85kDk2NKIVem0X1sjkOLxSuZ2SppBzI8V35KIoIjd0kpIWOptmm\r\nH30aGzla4WTon8d1cmwjgZtjVaBJElqk8a/BpkMlhXPHSO+17ISOcO2/dffc\r\nWNf1R4iE2THrrNeERBC9G2vFj3/W9TanG6k9u/z+FH/aO6s+8gIwUIqd01Lx\r\nCt0l3uQE5TrABdcYd4+LgW/wVpQp9K/YOnEGVs5gulA+ZVW8/twgjSjbPz0t\r\nQfosfZZwCA/BvtkyR5XLQ1hQmzNoJ1io2Rt2KYE3/9ZoVFyaa8Br2SXxQi30\r\nPjeKuq7yAu++T2ZklmHcUVe3qjhCIh4es0v+FFYgf7nZzwzA+s12bxdKF/DN\r\ncRmab/q1kjqR8D075w0ZLMb0tY5HfjwuMpKSxu/jVvB30L3Eq+0QRlZF7fKb\r\ny0PuHZDpgaL07P/5BPCAJloyUCF6E5SVrVH4UX32fTXouqbiLXIEOXh7I+P7\r\ngGIy4+Mf92vUCxTkTZWl203DTQmoeBlJoUjnM6rNzU05xjkr0nrv5qiftS7m\r\n8+AHYZQLUepn4GE0vnt8hD1CfloEgHHy7RM=\r\n=cZfu\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"c9070f0099aa35dc2460994d2d83a8330b996c5c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.6505e61c5.0","@material/theme":"14.0.0-canary.6505e61c5.0","@material/feature-targeting":"14.0.0-canary.6505e61c5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_14.0.0-canary.6505e61c5.0_1646337615116_0.8185414983196364","host":"s3://npm-registry-packages"}},"14.0.0-canary.16c166154.0":{"name":"@material/shape","version":"14.0.0-canary.16c166154.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@14.0.0-canary.16c166154.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5d2de88f6a3d83c784f17d1d68f45213edba3e13","tarball":"https://registry.npmjs.org/@material/shape/-/shape-14.0.0-canary.16c166154.0.tgz","fileCount":14,"integrity":"sha512-tlRCr2h6LknHI8HUGzNM9rrEdzx1V6zK5NSE9oSBTOjYmsrbrQO7+PYQPRu0Lwg8eIKiJpvZQqOIK08YzzpK2g==","signatures":[{"sig":"MEUCIGugRgboLy8n8FncOGp9k+KBqImAo2W3oHj/4DeIua9IAiEAylfTto8bFQ6fLt8AImBQQKUHjRa+ZsBm+mNIeJiIt08=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiJ+UjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrfoA/+J6lKQ7VJlizDzpQPVIuf3neggCo7wlz15A96klknZF9E4eDg\r\nDRGIpjCUgrMITqslwMXsddJXy9wmhKeY06oeTFJkOeEfTsSNOj5JrunI7HMw\r\nYMsgDusiUPHgXXU+Vd9TlIb99rOezROqQF2QLQg0MN2L/ylyNiicmNuRuikR\r\nerxLulqAFFSMx4rxSUL/eI0B7pcU1/X0ZcQf11Gg6hX1XXd5L5A96PAMDb99\r\ndGSut7FYBlj/e4KJAdVVN5pLyjJ1LCB35mmdsUrVZ+INSF7m0Uv9x0xy68yV\r\nVJB08c6j0nlc19xyQeBV5jlJMp/HfyKH7dC+TOgswtetWYU6j55/eRB6FfF5\r\nViZtm+4ptYNgobuq5B3q9+JzU2RXglxTr/3fnQe+tVE+6Wnz3rfdNY52GiKH\r\nbm719XT2yj0hzMXxlHvN1SKA7jKMJ0nc/SOjtcS1QCwCyZrw+qxn0Ef6Ij3b\r\nnIxNxmsbh0VBraep8OVmL6P5A2JYVZOwsOPAGURb91WSIuqvuDXf+9f2HCci\r\n8HeOsiAYSEzHHJ25AznnTAO6KCkZRJaWz0V4vRjvqFzu69sigt3zhxA5lNqd\r\nSSdEx4wCbF6ppVk2rDSoZKmGHWcUkPBkLVEe6RvAjnuSLMNk+HTVv2Zd073K\r\nCYDj/q453KYijfAXAoFdyvhIKGtD6kDc4RE=\r\n=w+LK\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"dd1bb8b4a67220dc0120ba2dbdac900e51002949","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.16c166154.0","@material/theme":"14.0.0-canary.16c166154.0","@material/feature-targeting":"14.0.0-canary.16c166154.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_14.0.0-canary.16c166154.0_1646781731467_0.7105411904020711","host":"s3://npm-registry-packages"}},"14.0.0-canary.bdf1d3771.0":{"name":"@material/shape","version":"14.0.0-canary.bdf1d3771.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@14.0.0-canary.bdf1d3771.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9e913e440e6a8701d25b158cc00a4101218f2cf4","tarball":"https://registry.npmjs.org/@material/shape/-/shape-14.0.0-canary.bdf1d3771.0.tgz","fileCount":14,"integrity":"sha512-l9dLBwtszXi7iHLUjmyEsN6ZUdg0qBKapFCP8FfngvP48x2DM76S192PU3OoSm/FzzSuCb6eh52UipTsWF20PA==","signatures":[{"sig":"MEUCIQCvQREAPj5yK6pmcn4+ddfXUdMKIblNMUyzNIsRNgKPlwIgFbaQCoXWjrKCRMQNNDRJjOGbEWXWHHYyGGgEJE6T7JE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiL1EBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr50RAAiWnPMMQteIPCMkf07wfz/sipNkUXAL87POlAA9UIcKE0Gf3L\r\ngAxTuWLUiILBixGyclmryFFL3+0uqHpqrpB42ea4pgcVTUw5wAmZs2YMViQA\r\n7x0/ijPzAqjL31HwLEUX3fuKalIIJ0Vp9Z6xp/wftYoAvKvOLDCU0+sB6hk0\r\nM4wbrsp+NXK9+/x+MWuOTpqvN805Cq38jz+Zu/KMCUyy+yTmuoO+13wAEOXO\r\nfilNeuM8QDvrotTPXY9vpE4xiSBGarOtbmMu0e2dW7IBxi/XMQi80LLH0aNc\r\nyj3VVTNVs2jYmVBBr80yu0nkHzgLe3jeLMfdbrKdtK1MOvhYOw17FjUwZYyl\r\n3IAm+/aULmNRwQMzdHTqR488N2Q0g7xZk6mWUIO5wZPI2l2Gpswsph3XZNb9\r\nVoLCsbi99tZCpTCDPtWPfim0OQobcgWXShAUOOviz5rBxmBRKHhD/9Ehej+Y\r\nSAonwczXwCfMA25a+H2cGwtS7qijIq9acbBE+Pa0xH8GSwosn88ZhyjMgJiz\r\n565InP5XvA8OeEJ7EozmG2pLW9LrC1nNeRM8N+x9ypuayNYIS8DNBKaTcDO/\r\nIG5DndD3euxMKWErt4kqaTmjt5GX2uercCCie3gB/vJL3vRuO3UQMnVViTeI\r\nm0PiQMCs5MKpeVD4AB+i8K+KC+cTEv0Vhhs=\r\n=+Q6t\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"bf598649c7389f49207c410e58144f75a67cc4f5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.bdf1d3771.0","@material/theme":"14.0.0-canary.bdf1d3771.0","@material/feature-targeting":"14.0.0-canary.bdf1d3771.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_14.0.0-canary.bdf1d3771.0_1647268096922_0.485448495903948","host":"s3://npm-registry-packages"}},"14.0.0-canary.cf4292778.0":{"name":"@material/shape","version":"14.0.0-canary.cf4292778.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@14.0.0-canary.cf4292778.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f97537931a5bc4ef501628c74d141edeb0b8be02","tarball":"https://registry.npmjs.org/@material/shape/-/shape-14.0.0-canary.cf4292778.0.tgz","fileCount":14,"integrity":"sha512-+TDoemO57H1WTj4wVjImfO9ApbyVGaEdGUHLYFwvtamkq/Uh6qv06ikdQ/Smb7/HU6Tsu5Brod8G5PAXc7XouA==","signatures":[{"sig":"MEUCIF7MMpSwlciBBgrEcRNxgaGJQfTAEr1Xoi56xXZCgOWGAiEAqLjh/3ToCuC46YEbv/ESQkqSYnMmR/JWuKE+SuWrflE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiL93lACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoDHw/+MeQtxKhLxp1pOCVEouSeagN3pUJhMLuWIdPHvJYwOqPtUo1N\r\njbOTKkyintfiun6C0hHk/kr/tWwiQ47QVBgrOd2SYeIZrkvJ4nwRgqu+F2P3\r\nnzPaelNs/de8NXUo3NofjfodO/Sk08KppAL3VTENEaly//1es7G1BkEhkH0n\r\nH58RU48OCrEHImevwjdZ3DK+iHnTTdytmusyvNamspkLctlqoef8sbRF8TgH\r\nnniBq81ryET0f56WSMY67biBGkA6HwtnnPFdVP3A2b1+d4BRlaUCcY2MxqrY\r\ni3XQrTiOJilJ+wnKqG5ksfVvw2fsHnSLveLPbOG+1TikeCaq/QcBD0uGPML7\r\nY1dD62ZlfB6lh07oHQMomld5ZWWmZXei0W4hx/LXE4T+8uExrwTmnFr1K6XS\r\nKL9KpY+31poC4QFbEi1b3iUcX33VNoGo2XL4q7IeXINEU3bu+d67cL5zfrrj\r\nxy8VPBCrAoAUuz+22gY9NBarAIGhU0ytFEJ8WeXaVVzFJ+MhkjyqXxNKk9m6\r\nUYplZ2otVzC2d8UZJIYJML9CfWT9DbhJikRw+2do85Cj/SmhA2y6XXcqvlFS\r\nxbcnwp0kDriFNFjix8C+MA29qdaNlf96G9iEywuMWMevd27aB5F9KyhPuwkm\r\n/nfpifVEWdF5woX32jLS305Qo3KFxGIn3F4=\r\n=bpiT\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"85b1d5db9650586ff51d999fc12531d07489d13b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.cf4292778.0","@material/theme":"14.0.0-canary.cf4292778.0","@material/feature-targeting":"14.0.0-canary.cf4292778.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_14.0.0-canary.cf4292778.0_1647304165587_0.4545663274757825","host":"s3://npm-registry-packages"}},"14.0.0-canary.bbd43e0e0.0":{"name":"@material/shape","version":"14.0.0-canary.bbd43e0e0.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@14.0.0-canary.bbd43e0e0.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eda3b097ad784c7f76a46e77c13393bbbb168389","tarball":"https://registry.npmjs.org/@material/shape/-/shape-14.0.0-canary.bbd43e0e0.0.tgz","fileCount":14,"integrity":"sha512-pWiIZ1kxNWsYpcS4/49XQNdnrXkPSg1gdRpoLQ2A2F2c2wHjgw6rE9LaWMdZTdUj0tU6ZuDcBQkVV05eqbGf0Q==","signatures":[{"sig":"MEUCIQD5WAabOwHxlck0QoOQF5Nshm9yXmUXAcuk4MEgJ3BeHgIgAJjlcNLGJz+HMd1fDs+eKnoIM3e3rGpHmlv7oGaswUI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMk1yACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqWYg/+Ofrwo+0W+y3GDSlGtFH4wr55ErsCejFQDt6e1lQqU/cGmLDU\r\nlQ+QAcF2BGVRFnunozvtImSNMHrC9eySCH0KSVKM8lzIj72cm2c4C3/w4Hm4\r\nC4gtR8HYwpWvCE372ab2pkummWJgeB6oBkqqgRh4weXjcoIBUWpdxHrB8w66\r\nVgdOUkjYLYwCPJDDHaciO0wnoZ+eiUIaMZvcjVfflKmtuTztacMc86K9EdRr\r\nl9RTs6tS8hri0l7BYmP6fV7AunTEzxMT1fAVUERnqaANxBHQPzARIG87/Se9\r\nZfC1kPLDYOjl8xQCjjxdPkRRjuCwrr1S5N1rE7oGT0jzUSjqYoVkHJzf0A2m\r\nR2s+NLV0d/w7qdJTWPaaBykl8jJIiG4uY2a2cEOrMzM4/Oiw3aCG1eC+ttJG\r\nsleFE1gtReIt2fjt1KupVLP+EdH15gQTo9fPTBWCjaABhElOip+JNCWJBb9z\r\nYHnKrpGqKes3MrJgXjuXDqu11C9kjMr4+W0d9Ng3tsBMx5E757qwnfnr063h\r\n0qPnv6YUbqjGeNi+gg31Ruq11Y044rCMK1XHtrdB4n82ZS/G1btWgaDtU+vi\r\nWUn1NXAYkOKZpANbVDpoU+55wYcYAfIl1jhVbveMyAZn0eDzHbEEDgImcINM\r\nzPTTwIS6B3INxCCmkpaZlsmzB3WZNFe/VBI=\r\n=TZR4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"bd60ebc6c6267688058726d6f98421b0e815336d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.bbd43e0e0.0","@material/theme":"14.0.0-canary.bbd43e0e0.0","@material/feature-targeting":"14.0.0-canary.bbd43e0e0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_14.0.0-canary.bbd43e0e0.0_1647463794149_0.10382123972765989","host":"s3://npm-registry-packages"}},"14.0.0-canary.1b6afad86.0":{"name":"@material/shape","version":"14.0.0-canary.1b6afad86.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@14.0.0-canary.1b6afad86.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b2ceb0f06e80d8a3c3c05552964c33e5b05f5202","tarball":"https://registry.npmjs.org/@material/shape/-/shape-14.0.0-canary.1b6afad86.0.tgz","fileCount":14,"integrity":"sha512-g2VQ6lkgv2Cv1IBufXs3sLcIqQOPogK1Jn0fzKzLKMExaaLeEz9JHKDnltpGAbxNMyRSB8g77XOwwoSEH7u3GQ==","signatures":[{"sig":"MEUCIQDc0VBp23FY+FhvszLGQZV9AX4m6fKW0eoxX15W3q3otgIgKHPTTeP/aLbyV84176gqRJw336jq/gRDq56DjL2/snA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMlCdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoTmg/+N99S7kgee4o4Cu6J0vuY1MhrFwOMDxyS14ShGqapTQ8Dco2g\r\n0eMz+znpWn8nK/67nwRtcOxh3pP70A2WExWFKnzD0csEBlxcHi+7zNWKaevn\r\nBylBJRokkyWRsJOwIvuHlMzgDasW5SkrnULeQDc1mJGm6qQLAGKLpD5aocOo\r\nHAeeB0O2r6/nYZkRdlCe/Bv5+FxJEALxbJR1gffHWc7y72++v7gFxwvekpJv\r\nDzyno2o70Ntd0D7tiDUi/H7EuU3YAFwTikM2ECk6r2dbS1uZGvyGEkdll4N3\r\nQvcbKpUjIbI9Oq5Z3JKWC2+i5H2QIOaonx8NVxsqlDUmD4893J1zQNIxFu0y\r\nOA6XqpfQLOCq4vtxGth5n7h+5j7xL99ff3hLoxD7yWLoIIsTv94juT/WbTBp\r\nFOMtwnXCEzrDWj+mXYVG2PWOtQJAMWwTb6rvbX6UanX62I3n/qTa3AesCwty\r\n8pVxvS0By7N/YRPWN9gjhb9deEeLTO/u/Iacn7Y6YrQeF4HrokO8Kuys2JzE\r\nImANc3xNY7jZy8VJDsSco6rhCensD696M5QrflyBnjDUeEA8ikE55AnkA7fU\r\nH3MAJ8QHLM59CvAP8E4hW4Vodd1ltEagVFtPls4JjE4clA2pgb0q/W/xVkPg\r\nFm782eOTVIua3wEIl76HW3HXNYgVdaqexZU=\r\n=K2Cq\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"5e32cc72145fa47fd2155c83c81cfa7ba5e27db8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.1b6afad86.0","@material/theme":"14.0.0-canary.1b6afad86.0","@material/feature-targeting":"14.0.0-canary.1b6afad86.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_14.0.0-canary.1b6afad86.0_1647464605213_0.8078128169491399","host":"s3://npm-registry-packages"}},"14.0.0-canary.bdf9d4af9.0":{"name":"@material/shape","version":"14.0.0-canary.bdf9d4af9.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@14.0.0-canary.bdf9d4af9.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"784290c6d08fceb2315ba89e362f568bf6d4b385","tarball":"https://registry.npmjs.org/@material/shape/-/shape-14.0.0-canary.bdf9d4af9.0.tgz","fileCount":14,"integrity":"sha512-CNQHYCgBrDy8HF9sa0j1ymHAz40uk5Ll6VN9uAMgv83WccaK5YkdmP+8MgSIE9Y9JL4uGR9dWGi0e3TCCRfHAw==","signatures":[{"sig":"MEUCIQCKJmozD5TUb3eCLFagjZ0sYAAr9pp2nHJZXLdy1BwBKgIgMgHSxH4YKFr80qIQCNBSn9xc/rd/+MN2GUc2SmiQcoU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMlP1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqlRBAAmlx4xsGYsUepGarTqfDEKjcd58rSidE4V3s4FM8CWsbwWiO+\r\njz8XRNlDxiWVCiJnB6tXRN6vFtc42r1g2uDtH0N64ZJwcSm/cjpA4Ysgb3mX\r\nigSD1FSPWOozl01EYrgotE010mhG8NKT7D/ak6P1gopZhkmWS9iIRYzI7ZIB\r\n635Vo1FKpTQSXXQSpt35SU0orV87K8I7Iq7+cSrPusMkRgqPeCPcA7Gi7Zip\r\nHNsw+kBQXSu1b3HEu99+lEHWpqkKSITX9SuwaVBAc+C0cIZmJGP6hHBGNnyf\r\n0npcM5wwj+0aoZQw8FSfTaq/qOOZup/UUhKBQjOkfl5BjvaEJAsv9/5+XBmi\r\nTqHiqAp79BlaIAFr9/1WrsztJmeXgsYS8WeECmigp/AhyThN2x5xT6rCVnUH\r\nH3scMSJZbEtwY4y3HYqZ2xfBJYcQ2mpeazOt+Iz4xXlVtmsohbb5iAzFt3qI\r\nc+ZD+KvDel76aNp3IHzZstCmO7oJ4zuccEINfz0YTES1it6x/lRHUJzU6K5G\r\nclmUCBYfqsO7jsgvr8Q6U0UYcIYV77Sq4h4rxym86JRhcv8kfITC55zernAe\r\n3fJpYUaT578Rlwle0gnCpjK75Ol8tGmIKgLx1tG8WXFYnSAq9mW7jIrn5ed9\r\nAHPPo4jD1kpCX0R6Vq/b8jIfFAtx9B/YNMw=\r\n=/lze\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"413f4cd271111f1b118401821eb4bb38e7fcbad9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.bdf9d4af9.0","@material/theme":"14.0.0-canary.bdf9d4af9.0","@material/feature-targeting":"14.0.0-canary.bdf9d4af9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_14.0.0-canary.bdf9d4af9.0_1647465461375_0.9496191436623518","host":"s3://npm-registry-packages"}},"14.0.0-canary.32b391398.0":{"name":"@material/shape","version":"14.0.0-canary.32b391398.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@14.0.0-canary.32b391398.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9d81fcab077b40bd5c0edec16fa04bd94b008e6a","tarball":"https://registry.npmjs.org/@material/shape/-/shape-14.0.0-canary.32b391398.0.tgz","fileCount":14,"integrity":"sha512-QC9QyOrHZTKmIe5a2IPb+WZJgueCwpuEkKNGsOEEFI477rnXuKL+gogHdzM8MR4+7ZO7Mb/CZxUE05RwR3V6/g==","signatures":[{"sig":"MEQCIHOzR4xCjDIzsnVTfFztzrDvybem26RqA38SICLTifKFAiAC1Z5aKzYZv8NRFBJ5+2GBRXO2fSEzYwqujlZASLVAVQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiM3bjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqeFw//WQxsZG7tnnJZhrzkGQjZjnVV1K7PJ7l9abrV6Rh3P0Rk9XMi\r\n6wwuwXhxwfRf7nLxi7aEx/ihl6WdSUeEAdwHNZk9TYtStk0f7u/rSbLmcYW/\r\nN8OBTlWX7Kc+ILoo1RtFNwTZcssRHEQUxRGo0fI4jsvfS4sYBZ/rq0wGVtOC\r\naj+1b1Q0Xlxiaxb161yk/g+QXSLmycJQgNGUNN6AL+/APou+v9V+5Kk3uiER\r\nCcN3Ec02PCPzRbv7lSY146adRAFA/dNNz34ticRSqNxXjocoGSXXL8H71/xP\r\n959ABNfAzGvLz+NCsrR5wsn5Tz7yA75UGTH6uN8xbD7iHFY1Zu2O1CU3InmC\r\nq/4q3Y8wUyCs1ny1WbDeMGJMvNAspG8GCFaxjhh1QEDH4fkDxHeLsixJ/b5b\r\nsV1irnm7xCdnPulYucxY8PhRsoeN3fNqmYEeVGWFW83RDgjGy+SEMfhU12ze\r\naK89VOYMwOZi+8laBFi26hGiEACyZYfktWzEo58VTJhQ2a4/tKUYHbZjFsYA\r\nXxgen0hSJfk9Vf+pmLI8hRU8lfZRJRP3+XuF9mQM6fmnejKvD41CV+QZw/Zc\r\nuzHove2CDDwEdE4El9vhXgvb4sHV7pgN1+Qe1nHF/hvzglXU0z13DG6zeZmn\r\n5DH08JgpLVRPxCT+y379nZxxrSP2qj9BEbQ=\r\n=TcSz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"8a457bda7a5cedbfaee9da752ba2dbc093b45ac6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.32b391398.0","@material/theme":"14.0.0-canary.32b391398.0","@material/feature-targeting":"14.0.0-canary.32b391398.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_14.0.0-canary.32b391398.0_1647539938971_0.02190668850064248","host":"s3://npm-registry-packages"}},"14.0.0-canary.ae8a6a3a3.0":{"name":"@material/shape","version":"14.0.0-canary.ae8a6a3a3.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@14.0.0-canary.ae8a6a3a3.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0abf392994fa74f7c4ffc6f217634d843ebcf62e","tarball":"https://registry.npmjs.org/@material/shape/-/shape-14.0.0-canary.ae8a6a3a3.0.tgz","fileCount":14,"integrity":"sha512-1ZO/WDyX5tu07TRuHl0/eQPdIPaGAKhjGuyP+Di+bzrkvdKy2m2jqR7ZWghEyHa4c/J/38LlyKsA9KRduEa+qA==","signatures":[{"sig":"MEUCIQCRWz9hdl6AJ8//frIU903n6pdckrXQ5qEPMqqPLCINcwIgGjzzhjxrmjqXaOaV/g8Sd0RMmlzB85LRTGgLhzNg9rQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiNLWnACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrtyg/9F3JTJsM+Cq0sD74NzzzJnFzb5LLNN/8KfXT/NeDVYHRTfYrO\r\nNZsAFlPXeSbqGutjY1HyFH+nUCJLlP+5/bXe9mlXt4Vh8jCP6nM3eDd63AI4\r\nxLOv8LWly7s5km3x8ve8nLedx1ooGkxBcYG8oj2fVmn1vpReHasT9OjmRNRw\r\nB9hnMx2GsH3oKRnkGwioO5cRKVzPquyFWowlRJJzFM+aQvzBkuP32vdixHml\r\n+lGam+QXJWWFX/USNtp+aMnDiVItEIe8ITgnZAQ9c55UX5UbBa3oAsWIUnWA\r\nIexUtoFN+cHdxJw1rDhuUdCk5KVw3Yfn1HgJChStYjrald4P7AfcDBgTFMQF\r\n+GGfsJne1Yp5/xg8hstbHGFR/jMY6nSBXzVO+uwf4mlWj3Ea83SvrYRjf1W6\r\n7mRAlSnZb//Gv1vPYA9stPhnNmbBqJobmtMfXomtcR9dTyeAg3ZJrYGRK30x\r\ntmp6Vo6Kw9ifZqtGmcxl7nkwEHlhYs09Darj0KD8nSs7q+gMmagFSN4uf1lk\r\nrYSJZ64rCzWRJHFrW+rIyKi0oH0n80+QsafzNrDEZElNPkAaVDCPyncBkyBa\r\nG7yYo66dFALSL60L1vvE0oCdez/lmDn6A7j786lVpn/w0b1rRKi0yTTe758V\r\n9pHEg4RZ9x5b4MKBXo89CvuEswpgjcShkN8=\r\n=EMhQ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"783283a1304f941e05b3ef25b9a589158368c595","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.ae8a6a3a3.0","@material/theme":"14.0.0-canary.ae8a6a3a3.0","@material/feature-targeting":"14.0.0-canary.ae8a6a3a3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_14.0.0-canary.ae8a6a3a3.0_1647621543250_0.8133830343527204","host":"s3://npm-registry-packages"}},"14.0.0-canary.cbd9358a6.0":{"name":"@material/shape","version":"14.0.0-canary.cbd9358a6.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@14.0.0-canary.cbd9358a6.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1e3518f30ea21ada99669fbf79de5ad9caf55fda","tarball":"https://registry.npmjs.org/@material/shape/-/shape-14.0.0-canary.cbd9358a6.0.tgz","fileCount":14,"integrity":"sha512-iIgtROdVQxAO//i8axbo8yIj9uQxU//YPSGGRCb15OWnBaAG8z9PkckHuK7vsX0yxsxrMKGm3N/EfokiUXj77w==","signatures":[{"sig":"MEQCIDHXguWlHp6m2p9EIU1mKSqy5ZYQ8H6rwIwX8NgEvvdyAiAU6BdabAoE5d2YGBwZdv3YJwgA/mX0Xo6ZU2zXDtRWWw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiNQ0GACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoBLw/9H0d9ewiPetZXt6zIeAN9nwyP2ZYKCFHf1Dcd7pKWkOxoXIiZ\r\ne1cYdDlbMH+5Cz29pWVzpaKv6WcTZ1PDFVUTNzLY1/2m9NWxKxy0IdxBg6wz\r\n4BdzWbKe4wa++3Zdy9FMScgcmI4QRSydDSUDuMcCoWjRpikvaNZpiaKHgaDM\r\nnxKUHGtZSepepY8oCAczOocI9CYa14UImRzNAHk0dkNEILampbqkJNw38xUm\r\n2RwdWyoTUDYOuY+VzZ5Qh2PFl4wOj+U3H57DIq/OMyrfVtLniIKKOGPWSFXl\r\n2f4Pco+ZN+qCLeSX9KBDmGIjDV97VxeSxIp8HGaPoONUt+CT36FNP1d59U4f\r\n8yaGY5qeflidx1MPwtpGy+9eHOmOhdPKfIY8Z8kKCvYDjNnc+GUJhivjfy+t\r\nd2s5+BvoD8rRVSkmZMYnRJt1yAfqNPmdrkS7YdukMP9aG3+vIFfAXsbseMtP\r\n6Tct24S7SUMVU3A1nEae1T/tbZz3FO3uBXIf6K63e6OzpxwN5RQ48dqStf52\r\nr1vovYDrC5Jy96zjrCId3NRtpPd8q39YQPVg/6oBSBOjUIccXmKphXt/VH0R\r\nc9aLuiGXN9pjpnuZftTUvwgfnoEdQsezLp425PdnrBpdwg2hZvUDSH5mChzj\r\n7b/9sO3npJJ7tkGeUawdxpl/glqrBfPA3HU=\r\n=hF9H\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"a4296a048e6aa0c1ab8e8d2cc6cb8321c24dab9f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.cbd9358a6.0","@material/theme":"14.0.0-canary.cbd9358a6.0","@material/feature-targeting":"14.0.0-canary.cbd9358a6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_14.0.0-canary.cbd9358a6.0_1647643910002_0.23091613546314682","host":"s3://npm-registry-packages"}},"14.0.0-canary.dcfe49c98.0":{"name":"@material/shape","version":"14.0.0-canary.dcfe49c98.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@14.0.0-canary.dcfe49c98.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7a5c02900b95d2d6786a9f986ecc332c88f067b3","tarball":"https://registry.npmjs.org/@material/shape/-/shape-14.0.0-canary.dcfe49c98.0.tgz","fileCount":14,"integrity":"sha512-dn8ZQcf+95fEavnJplhVZnNlXDPt8woYv8NIpGQivyKsTY1AJGr6AqYUO/nB7AgnjJmaFCEacTuSQKfwJGW7kw==","signatures":[{"sig":"MEUCIGpZHY7SA5/RQoW9Rsfd1vyFeJCbGoi7CQ480kYePCKjAiEAynd6OEJKtpC4051OgOImC6ZAXsp41fPh5F7N5HG1lrA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiOMdpACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpi9g/9Encg112967q3YZVgLoGAWG455MVeWs9haR9hJey1LqqXtIz6\r\nVS+AjyASOs1bV7nsCWcLwob6BzIazJ/ztHag7AOd/rImVN4c1+neD5QLWXHJ\r\nVFYxJ7Otp3xPRMfC/6oDxOEfO2wjnXdNErefoMCWxpYR8xz6r2QGsFj7nOxh\r\njpatI326kLfZaBUk0h2cF/nxjr4qJ8v6S9BOzL23dlJV3pOV84coIVTdb52z\r\nct8HSbsJzNAxoyivm1rnt/lMrXTMC/BEP/Msf4LB7Fj4z5drpE8FmwadI1mx\r\nv6tf5zi+UAGMZR9tgsvWyAFnUwUkJXfGWuUW8dcVwBPZOkHhclb5VxgK3uCW\r\nRJxUzGt39PoHKKNv86GRPZHU8mgGKiRcgG0lIzntV2BJWbnvYU8afveUn+Re\r\nNLK/uqpLWtrU0nrRF50dqUhCXjTJOY28XdayARQQLXwqD+7ZwmujIP4wjK5H\r\nceGIz/LfelLdNb8FbvC9emAn57+NBVWTRpx11hhCzA0HpXfmIVOwrRCIqjsG\r\nWRleOwkcidz4w5b4YOP/JE5a0rJNw16BW/uoEmnV0TaySQt/DjPfDqYeE0tG\r\nXxvKJYrr8Hdh0wfB9hr9nLrdrX1gqRpNrwoan3U6AhkNjqAM7TiwuPcX96Pp\r\n2RiqFIeDwnGqsAjBrvpjWTReVzxak7UK9kc=\r\n=TfRK\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"5b68455eaf6aaf2f571eb64a1d8a5edaba58d37e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.dcfe49c98.0","@material/theme":"14.0.0-canary.dcfe49c98.0","@material/feature-targeting":"14.0.0-canary.dcfe49c98.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_14.0.0-canary.dcfe49c98.0_1647888233299_0.944487781648518","host":"s3://npm-registry-packages"}},"14.0.0-canary.f31a833fa.0":{"name":"@material/shape","version":"14.0.0-canary.f31a833fa.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@14.0.0-canary.f31a833fa.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"70ee01c6f24a971925c7af0960659d014e542fec","tarball":"https://registry.npmjs.org/@material/shape/-/shape-14.0.0-canary.f31a833fa.0.tgz","fileCount":14,"integrity":"sha512-W0tSUXP247EcIGvMkL9VCOk9LYxMc/gPhcLUdewO25uXXVIFHZvTwKiCj72//nv3e0NqgzAdUt7J0i1YY0Todw==","signatures":[{"sig":"MEUCIAOogSSQMUhErxzYeKRqr8aPgS3Ea0SpTdtVGzDbr3eoAiEAmvQNsGuPv6YjCvUvP1MwtOOy7jTkiaQ8orVg6WaJ4Fk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiOm7ZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrLQw//Wj8YfTAS6nXeAFlHRhy/fqBpeD0asS/vZzJZ4PO0pgE2/GU4\r\n36EFNrkbnGOkk/uLAvfjf01Win7gHowiXclWwijWiQW7WOipxw+lLhoS9T67\r\ni99Ff0GUy3hcMKLc64rMezTrkpFCsuXqmPtvd1+j0zWn+9OXY7CFmPyYSl0r\r\n+zGCbyLwHFYU1ZtT7OtyjllT1FRclsf57ZO0N48X4Y3zfqlt8ASgPzACAC8Z\r\nbam6z9q1Kb0sBRC9+VRfuvHwXW/tNhC/jEn6Q0D+F0JCjLGU3WDVZFp+8W5c\r\n4NApXbN7O2zmQxb2c5ja1gwdxWsjx6pLhH0GGLO1eqaefIcACKyHGzr1Cfmq\r\nZiHk0B65jHCRDi5FLusi/94JbE5wxngrtJeTMM6jp/URJJogp4nK5Ymh/Vr0\r\nbTixzsxQE/xtMDIeIZFHQU1oW+qhVeAXQLvNgPdtZPJ9lm+ZKk9q+Or3DP+P\r\n8xoy937QlQ72jDkPvtsOEtiDUBw47PSu4hfu8wZ7jN5DPi/8e9ROr7VehDXr\r\nvQfsJrvGToI5g/Fjxw7qn4V53xs0s7agG2eEV8CvO4H9KpeZzBOuK/ZW6htx\r\nEK4vPTKhVjpeUVMud4O9tB0j0MZ/rA+aHp2a7aV6OUSxwGq1beD1rKVE22ot\r\nP1MFX9kXc3DU2Mv93BhqYilSF2RBQOjs2nA=\r\n=0vHa\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"28572f217366c634964a133bbf0ee0b8e88b8126","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.f31a833fa.0","@material/theme":"14.0.0-canary.f31a833fa.0","@material/feature-targeting":"14.0.0-canary.f31a833fa.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_14.0.0-canary.f31a833fa.0_1647996632997_0.6788656995523368","host":"s3://npm-registry-packages"}},"14.0.0-canary.4b92e210a.0":{"name":"@material/shape","version":"14.0.0-canary.4b92e210a.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@14.0.0-canary.4b92e210a.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"336e8f321943d2e979042f1f4e642f7a493984b5","tarball":"https://registry.npmjs.org/@material/shape/-/shape-14.0.0-canary.4b92e210a.0.tgz","fileCount":14,"integrity":"sha512-/hkJ0uL3zVkYleWFwTLskczQJ7CKBI/WGVjecmWf4oQwpHd1008jZVLl036RunaVEKTlk+VSRtZWVFzi7JJrJg==","signatures":[{"sig":"MEUCIADBEAMMGCTZfBiLjkW7W1OlNaEntBYACx3Cd01GxUGFAiEAk6Eay4BIWxK/uqdySzstzqe+Z1qEPOz16mbFH53smyQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiPNIPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqN0w//YcsIsbbCSXmwLBSLqqZFuwlJmSfQaPhxMZgzeSQYyvgItoma\r\nwFADzLfKe+bgDiHoxQ2f5lON6fX+DBWqvhajlGouzbomvdU7kqypFrmBw4k7\r\nEboSZp4kMbCLqRqEv5qbcrRQabO5nJ7dc7fdwv/3PaUi/zGTwWZ6ub8uWyER\r\nN30lB30IJmgqSeoYvMXmanXOHEZ575hJq8y/Hk8B2wxTi3Qgnzx/X9kHIoyR\r\ndMBA8gyZi5Em+cslXCwaP7KbQ09ssYcbC6PtjmGIBaGo+oNuvpix3X4aRPs0\r\nrr4XxIDENbMwFUh8O8id3urF0OCHxlc1xE4FR/QFAd7cxvmYsaONJV0CFnhX\r\nXNIKs1QMLZ0wZXO3t0QH/ZmHyxt+P97ugLdqVH3PtOV4TyqCQ4bQ5CFN0+Eq\r\nsMEGSy9H9guwDU2tOCiwzrQUeGrsNbsFdtYs9tgatF3vPHfCv8+5fUdvpLjV\r\nzzh9QoZtKZzOQX/CKrr4zIujibnwpjDW+BfNpee/trFyVlYF4nFYnb8lnZJq\r\nyazbwM5eOGFwzfZtmeBRauCn3jyOHcZKTA4KEjRhoF5sz2IgrmN03z7Mnfvn\r\nNNn3LCgRw4zI7faji1fAYIzdVX0URUr4moYL1+Z/jjDOR+MhQ5iXdo9A1KgH\r\nBwr63BhyojI+U1+WnYheNm2cRlMTHACIVvw=\r\n=uekP\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"e9fc48f242a1815183c2b4c74ea1f8bb9967004b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.4b92e210a.0","@material/theme":"14.0.0-canary.4b92e210a.0","@material/feature-targeting":"14.0.0-canary.4b92e210a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_14.0.0-canary.4b92e210a.0_1648153103404_0.10189829678394013","host":"s3://npm-registry-packages"}},"14.0.0-canary.a657abb61.0":{"name":"@material/shape","version":"14.0.0-canary.a657abb61.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@14.0.0-canary.a657abb61.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b5d182a6f797cbf990eece531d077acde03f37a0","tarball":"https://registry.npmjs.org/@material/shape/-/shape-14.0.0-canary.a657abb61.0.tgz","fileCount":14,"integrity":"sha512-sZCOnMrclOyvTytub4gfzbeNTm7Cvpit7D/wLzAQ4exC5AKSCguJsgDjXekZkHbUWhjuBTjXynCr5043MVdtnw==","signatures":[{"sig":"MEUCIAtFCQw0pBKO9sgvJ/lRM8Cvd8oPLpk1DIbOfBELpcxqAiEAtlheDXdN8J2PPyJrWZBOHhFpBYXk3zwP2bl05FF/kFw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiPNcRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpgdQ/+Mr5Ggzago9OkdqQWnP5A1U/67J12OM/oHKw67EtoL01a7RIG\r\n81l1BD+QzbYIN6P0wbHGIH/GBCQDyQ+u8MaxLSiUeFrkMo6nlkMx9s2BBldX\r\nH6xq64ZUPG7vUrXgfK6ObbAr851wKWFCbOP6c/ZB3LJc9tzlIjSszJKyr4cq\r\nvGsLldgeuB/AAb0g/HjwMt32MX78Y3h02tMH9Sb+HuDnDQsf0m000DfcpgTa\r\n/cT4J7BVrYdQq9KCYtdOd+OMNXmz4+SFZQfDQYXeqpCBy2M+smcMlxmJcuiY\r\nBm88r3mNAVb1MbvMiJ2t3SFxMqLxq2BpsVoSCSwmjcG2Xl0LpLtwYcqZ28JT\r\ne5P8plCSAQsMqtTnMqSh/AJ1lVSLAkJjWHtTPFt9RInMq5UnZGJw1XmbBbHT\r\nvGnp0CNriH4xLvuvBsZLFK/Zo9Usb1UZ1FkRrg0BL22Y9oMrUwW1zOJrtnP7\r\nnIEE/isex1OQx8qN3RXHNt7cXJ1QvKs8HYS4REJ3QJ4JSJGzNTS2PSGPH283\r\nE9c/kELE4j/uhRMUWyriKN/is/9p6PKL12UUPhJD8v0RQlV+IlYYqvyBhq4s\r\nv7Opvt+lqs3zsayGxNJNO5nRFDd4DUq7NSsp30KVSj7yjf2D70z+sedFft7a\r\nXDAS1vkZvZW2XGDCeTe+7O4yP4RhMPrySHg=\r\n=BNPb\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"b17ff714094456afc14ac1ac896e38f85e300743","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.a657abb61.0","@material/theme":"14.0.0-canary.a657abb61.0","@material/feature-targeting":"14.0.0-canary.a657abb61.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_14.0.0-canary.a657abb61.0_1648154385457_0.45453226833257454","host":"s3://npm-registry-packages"}},"14.0.0-canary.443f63f50.0":{"name":"@material/shape","version":"14.0.0-canary.443f63f50.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@14.0.0-canary.443f63f50.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"60c2c1261bcfbd64deabde66eed4b0796d7da9c2","tarball":"https://registry.npmjs.org/@material/shape/-/shape-14.0.0-canary.443f63f50.0.tgz","fileCount":14,"integrity":"sha512-FggcjXPWZg/fJTuNBj0AKW7wXtZgrCMchZ/YQ97csjaKAsDcdH9MiI01GsnihpwisDWN7rRpspSD+ah1Pdy5+A==","signatures":[{"sig":"MEYCIQDzr9nelQ0zL3NZXSQfax35EuAw6WHhYbBJvzaLPddj6wIhAJKs6C6ajlxBcNCGjs737ULQdmGaHbE6/usRMMWkfIml","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiPkp4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr1RhAAjHJjrzPoMr82nbONGhDbhUXxL1Jvps5EK7oGJIsOo+uscyvS\r\n9haHtA0Xc9jjsEfGNWrsR8SwDjIN5Tmxd561NvZQ3rQC05AGw7jCRR4tT+4l\r\nVag0hMEfleHEwqoi5xF52FQJrBaCdoEqJp8Q7f+xRcxNLJx2eSz6eXBq4W1e\r\nj131WhrUXkROI8Cg+frfqi2Y4PA1k7KvxajnMnk9mBUCUao1kqyAb8oxgjA6\r\nSUt7MnFlQH82yVmpTgqzIoUx5D2gAXzfxYI/o3gj8fJI4eqlgL8+QTMPp4nJ\r\ns54WKhdzKnE0RGS3TBbYlp2Sp8lkL7bemaALgSC7riw9w8SL9lrkrrmrr/Ju\r\nYFKfoVs5PpX2ZWJK2eGsP4NKPiuhANVKaZD+Po6iBQXriuxzgLZiuz9mkRPB\r\nDVfKkHrCMnxPirBX0z/6a/zOtx7xG/LmcQGk9/bahhK/mQFTCdxa/bKFkQt2\r\nPOs7r/o0OBZprRb88cZpG3kwSZzvedc4nSndWtjbO4zEgDL6hpx4y14GmdW/\r\ndHQsjrjSjK6b09oub/6QmbVY9/linbtHYX1lPzuoIZW76ICTQBUbLWERG2aF\r\nAyglQVzEy8ipDII804YHSljVKwF9FdF1oIuU7vI/CSbSNmCSjcgCUdRm/t7L\r\ntHk+TCQQCmQAAHmbqomFPE7rHIC6/l3UbpE=\r\n=TX5l\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"0a9e4a4d027bc972dd036582cbc94abd30d3cd60","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.443f63f50.0","@material/theme":"14.0.0-canary.443f63f50.0","@material/feature-targeting":"14.0.0-canary.443f63f50.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_14.0.0-canary.443f63f50.0_1648249464747_0.7212692109733321","host":"s3://npm-registry-packages"}},"14.0.0-canary.eb382f318.0":{"name":"@material/shape","version":"14.0.0-canary.eb382f318.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@14.0.0-canary.eb382f318.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"612587680345dad9b238460b7b9f7e8042727ba8","tarball":"https://registry.npmjs.org/@material/shape/-/shape-14.0.0-canary.eb382f318.0.tgz","fileCount":14,"integrity":"sha512-W7LM4vDwWi/recyv2NpOTiyryDmHCbTAZF26H+lgNb4J+AFPybou0q0uJNWqki4wD37MRsqItZ8LPPnPSaZmsQ==","signatures":[{"sig":"MEYCIQDayaiXVD829q/1rxNTmwXIbcnKH643EFS7ukD0LBdoxgIhAPsf+bUY8cSarDbDt+xRJc9jCrGWuoc2Pj8UlThMZEER","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiQ0M0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqvHg/+MgoXu/HbOsPmMo4B9Z0NE/wuOOwoYDpg25BBW5M9Eb+Qq619\r\nc5xLxnHaQBVn7PUejgT8JSYeWmHs1w/DLYFTzpiNdzXnwQ8RlVEwwW9lgMMb\r\n7nuNOk/a81LPqrOuxjq7Agjp12w46lm87XpOQIcurZfNFk3bgC5mB9lz9kvo\r\nCMqfzSqS8pIJZZYWYTF0Dg5fk1QPKiJ4eZglu3+T8AFK36pKzavTdDt88Hgv\r\nk07xjF1vW8SWXnXSqu1H6D/V75YI+n2iMU/aggbhDisTxLmk7sxl1D5xReyp\r\n6vnAJfDx9YLLDPiMpyD6tTYxwhBiIKt0HqbQz2Zbsfxt38AocCzI3hHKYi7z\r\nPNxfR32fL1VGgOcYnkuyz07RWLZM9hOyb28oOvPcVmYcxP+hamo5TrbcwucC\r\n7rTQpn3yLVZFRoWxFZ0sMrJiKS3DJ/IO9+dO8eVgJJLDJVW1GQAou5myqsoF\r\nqnk+wiQ0/TZbyPh28KtbiQfxhBjZVJMcEeFpL7D2s7LLaGCLE2EVOkuu0iCm\r\ntVn0ug63F7n7GZoPE8OlRiCz2SWT/uZtYMoV+URihyizc1/YKpgQXc+EDT7l\r\naij1B0YkWykIEkmx4kv6NTgJQ0I6Ipc7WfhDUGqtphkCu7D60K9KUbt8FrbW\r\nf5Wm4Eeq55Nj9p1AAzpJ6aqmPohc1eXySKs=\r\n=PVz7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"9aaa59e82abd1f56fdb3d963213242fe4f989c89","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.eb382f318.0","@material/theme":"14.0.0-canary.eb382f318.0","@material/feature-targeting":"14.0.0-canary.eb382f318.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_14.0.0-canary.eb382f318.0_1648575284760_0.2551621121492935","host":"s3://npm-registry-packages"}},"14.0.0-canary.344d52823.0":{"name":"@material/shape","version":"14.0.0-canary.344d52823.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@14.0.0-canary.344d52823.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"85d2567a4c834d0bf4114cbbfcd53883d32a2814","tarball":"https://registry.npmjs.org/@material/shape/-/shape-14.0.0-canary.344d52823.0.tgz","fileCount":14,"integrity":"sha512-VhBLGnNw4cCr8moFnixENU4JOguR8hgwvbhDjL+wLjqKCZUUH/ltaMru9N70sSDKoOoaGMhKXdaHqlyDA3hOrA==","signatures":[{"sig":"MEYCIQCaaeISgOLbkqRXiYGxsoU3unCxZe/maE4VR8OCFiSCQgIhAP5O0KY5YLZn1StLfXM0+La+LwhU7Cwu+hgcwL1aIf/E","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiQ1M5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrrIw/9Fm8gHGFgktXJv/0lGFycggpPkuUuZ2cYc3xGY1/KFCRvW6FK\r\nlG9HuInrME+wp20U1M2pYO3Znc/EdPpp3J3zhJYvKGkueoJ2iVmN2/+MTB3E\r\nLKFnfRVJLpOrou124GA497J/Qqz+WHTyqaUIt8CdcE3WdPLlLhJoR6jVYsCJ\r\njMPxOq5fD/gwl2RRpWjTlwGRX2E5MdqBNl/LxXP8XRha09dAucZkPJEIFJLZ\r\njcISEXrvm/Mminn/7e/rdwtOPV11zwu1Pn3tm8IDk/l5e5M2nVfvu4WbqEIi\r\nd9PPN8cDVyaTVdNKIq5AW9G0zhWDD034RP2+C/akHG1F4gLGAsHbRezKolOD\r\nmXo6gWEWo8lD/2ZcGouQ0VUtzT98eiF7cWT52tUYD6/aNd7fcUxeOUxI491s\r\nsothtS04ZaAd1tJ86lPKVpWqlc+eXeTyIR6qGYh6sdhJLSM3VAYmI6Wf5vBA\r\nSoZfaCTVDvR6JAahg4OwJi/7yp1EqWDdbE1rmc1TVdI9u55Z6VdCQfNzBvMh\r\n4h6xpWG03iHdA/anWP+TrZHVwvLkZXc2Hnp8539spHJM8hUFIOZucYXIxou3\r\nmJ/6Qh7wm5MpsU+LTq0n6Zbxm9cJQ50Wzkgo6LdrHTZVTldhYyCNs8v5r+aq\r\nRZVLcnrb0pY3obIpAbLeYI7CiP4+TFMG/DQ=\r\n=M64M\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"1d0b3e3b77ca281daab88499a03131363e8ce97f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.344d52823.0","@material/theme":"14.0.0-canary.344d52823.0","@material/feature-targeting":"14.0.0-canary.344d52823.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_14.0.0-canary.344d52823.0_1648579385304_0.5041571569066114","host":"s3://npm-registry-packages"}},"14.0.0-canary.4e372fb49.0":{"name":"@material/shape","version":"14.0.0-canary.4e372fb49.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@14.0.0-canary.4e372fb49.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"07757fb933fe2ffa47013b3d0a25270430826253","tarball":"https://registry.npmjs.org/@material/shape/-/shape-14.0.0-canary.4e372fb49.0.tgz","fileCount":14,"integrity":"sha512-tY8Qw+31wGCMvrGLtQmAbF8jL7FxmXN3dU7uasWC81uLp1WF5M4Yf375wXW2g6szaPTYl3/EuSPZP145x0lMVw==","signatures":[{"sig":"MEUCIQDwLRn9Ek0i41snCoSytlP2gD3R19i7knu9fAvKMVqQdQIgFe0OGiAcKrEVItPI5pFrq955z/+EhBkJ6A75lxP7prc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiT0psACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpUbA/9HVC1Eb2AbTLxW37klJts6VRwmc7m+ioIhNCpWaSj/yssryba\r\npC415A3rkuo4ZSx0HIydhoKVVhtldORi6KAc+xkTUFilrWGQC8JAZkQbJQhZ\r\nhIFk+qLNoLC0OMqxr6nfhhvnvUYYUuNkdCFRpHR5rT/8o8/S5AdSw5sv+ilG\r\nnmawa/nYZb3XTmVygv+iOBYxcQshnAHAJS1z+RCOiNrsTxhsVWhsaJRmha/h\r\ngLyELFnEgzLcLmxJkZ6xkrY5bmkevY5gn0ROZiyubf41dXWjBftI0HlS+onC\r\ndZJlSCtjn8QLlcTEW4DtEH+3xpVjR6SfFdsBozEbgemF5uF6UstzqHO+T3AT\r\n4lJeGCQ/V3O9A0xNYGS8fsDD3GE/6O2bfZHLCeFvWfD/Ch0nCqkr4oCqEJo7\r\n4uxrnbm7rdJlx98sF63s5lMXLYP9ZjBfWLa0iAk3TuhcAoZDqVNmyzop1Ffc\r\nL5cip3Yd54dBXL4Slz3JFWUcKBt/0KRSjyi0BCI4PxqLy4cmg0z5XExXNRbr\r\nU5YQVMuVjOMbOiDuQJypyXLfzGIbEyn4PPDnrxE2d2SwRQlO0wi75eMI+3Lo\r\nVml8hL5ZbGbznRgwAr4zkRzVCy0f2Gb/5pmXPIJRK352JFt2jbUWRx4n615L\r\nEpqOtityf2gDGO3OzP5mlzQayxwfS94FeAE=\r\n=Ahrs\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"013d3cd7cc6d83c59581f40ea832529343f43047","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.4e372fb49.0","@material/theme":"14.0.0-canary.4e372fb49.0","@material/feature-targeting":"14.0.0-canary.4e372fb49.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_14.0.0-canary.4e372fb49.0_1649363564303_0.2678873259877459","host":"s3://npm-registry-packages"}},"14.0.0-canary.3e30054fb.0":{"name":"@material/shape","version":"14.0.0-canary.3e30054fb.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@14.0.0-canary.3e30054fb.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"efcc3d638df9fe66fc12471b85db9ff43fa213db","tarball":"https://registry.npmjs.org/@material/shape/-/shape-14.0.0-canary.3e30054fb.0.tgz","fileCount":14,"integrity":"sha512-5gZImwyX6o1GzolXdd9DiaD/QU1m7TjaFUu7PAtWaOJBTp1SECjcLlYBxlLqA2xGx74SzrPiBqdlexbFY1hZdQ==","signatures":[{"sig":"MEUCIQC7I5GHHRgwGdHUd1YBNSSPYWG9I6OsRtij2ZlbyZffsQIgbu8ZFfMZnxz7xUgWmZDCG2lL5fILba8898kaaqMWnLM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiV0srACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqNWA//YSgsEFDFuqZz7h6x3I3HQThCKU54j7P311CcG16KL+cvYKK8\r\ndrkePA3WNGvDceGrL+k0ZpnPCKdISujvtI7BOG2vOTbnIl6RJfBK3Y77i5hT\r\n7YtYheQg4cW7RVzmnsM6H+XZtiLGCvLAvfgYS03RMXSBQpz7yng2iYHtjfDn\r\nCFOgAV3DlIwvVmMTZ9T+VmxM56PrkLmoeoDCoZaJpVVslJ6zDXF/oi1csif1\r\nq/etQxyBz0bO3eOlji+nUCbRTZdFzGo/rhq+uEZxbFnSTU6saeM5gRCfhW6W\r\nkSizn8OZptXw2GTF1FjvhiG+81DjcM9GfLTgX8gbBkaIirosNCGVf8XIRrZX\r\na9xpKz5olErozJXU+o8a0RPZIIM2MaqKDRt1cvtyp7GehN6rvFkUsQth1hVZ\r\nz/ICoYJZnqdB6DTBrRIMynP7qdkVx4RsUiuoTSnRr97pdaWFWNH7xfKIbB8t\r\n7yQT4vuNKMfMTCF20ldn49j972REdo7hXU7qtiGcaUQUlwEyW02vnastu6et\r\neBgKwwMi3wdPWtALFjFUQAKeck5W6DgttKlsLVbbHyxiIAVIyPXH+EcY2MiW\r\nL4LPicpsF1ckiGWXSuQrZnSKbPGRnvXibAUWuwmTE3CCdfCuTO9rmk7DmNWo\r\n+Ga0AMZqf0SQKi8JWAjrGEl2i5MUfSUSdhc=\r\n=ydT/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"04d79139861b90bf3488ab3f74e4bc33e6af1c8d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.3e30054fb.0","@material/theme":"14.0.0-canary.3e30054fb.0","@material/feature-targeting":"14.0.0-canary.3e30054fb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_14.0.0-canary.3e30054fb.0_1649888042872_0.33655515867546404","host":"s3://npm-registry-packages"}},"14.0.0-canary.8c4da223a.0":{"name":"@material/shape","version":"14.0.0-canary.8c4da223a.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@14.0.0-canary.8c4da223a.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7d82f28c12064581573bc49477fd55e68292e3bc","tarball":"https://registry.npmjs.org/@material/shape/-/shape-14.0.0-canary.8c4da223a.0.tgz","fileCount":14,"integrity":"sha512-KiJYRKvRMpfeh1c0S3eqmGpOQ2DS56sRRO7zQbMg2QGzSMwAeTo5D7JLgGWffN/ApOjD2+e8opDCSUOUiJiCMA==","signatures":[{"sig":"MEYCIQC3I5eXryGGoKaHqav6HEz72kb7luJjb15n1xEVR0SQCwIhAIh/K/AiL+hoOm+9XRItpOCPxf4AsGCEr/nNY3pDyHsP","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiXtQQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqe9hAAgaSbYoBQII7UaLliybtzeLa30zHH9C9FLmDkQh98WA5JQcm4\r\nC095gqUQTJqF1sSrs2Wfww59gFLS246dXbUhOPzTFGfLfkXsOnARfnk0a4od\r\nj4D6kBeDVL7+X6uuRO9Xq5eAdoqZt7zQD3aVKw41CQq+2BDGst/CQiLRCWJZ\r\nID3RqH/uVBWRBzDAz7HQY2PUVAOJNdgLtn94zhdK83jEXk5auIBw9m2n0LBQ\r\ngpuaVBGFGnTxVkfXPwJC/NprKB3xr5uwrpwaAmw5oo7mwQ2+uD7ns4nksCtN\r\nt4B/g/rHdEl1AeXvXanzUCH6HY4gBjIIU5I+ua4odeo6PNMTpUF41FwWaTny\r\n2g1xwdAAd1PA7fugb/SO80XuVk/tEwj6IVTlP+TJoN2TanyWnSuoReYHAVkT\r\nppTxDNdvGBSr9eeyoCmIHw+gnY5Qq4BpK9zp5B5Q3L/5t0NTsIK3RPQdclhk\r\nLbUUWJx9rqXgxZykRkH8puIFMc+fA4Y0fe7xly7KYNByvOjg8xhERvi+qSiR\r\n8PXjRAGKhQYu+H6XR4PUqVh3Vx8nuxIHZezXit4b80H4sjBs3+CSQGxbo6FA\r\nCDvzBA3QdmxYKIjR3aYgZkyjxh05W+3TyUkmnr5HymMeuRaB2C/0khuF7cju\r\nXvt4j7y5iZfwBTLc+TRzDUCmPH8KCChGbUI=\r\n=FTK7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"a5f798a752de150dd0a004bdfc90979ab4185d1d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.8c4da223a.0","@material/theme":"14.0.0-canary.8c4da223a.0","@material/feature-targeting":"14.0.0-canary.8c4da223a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_14.0.0-canary.8c4da223a.0_1650381840030_0.7360024367828644","host":"s3://npm-registry-packages"}},"14.0.0-canary.7de8965cc.0":{"name":"@material/shape","version":"14.0.0-canary.7de8965cc.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@14.0.0-canary.7de8965cc.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"18814a8194bcec8b20f5115da7034fd64cf0ba03","tarball":"https://registry.npmjs.org/@material/shape/-/shape-14.0.0-canary.7de8965cc.0.tgz","fileCount":14,"integrity":"sha512-oWkXwZJDzAQDTyFwprK6pjyZwfrl1DWmMTaLugVJUVVwGwNSLgtjCyHYdM7mDwIpzHi2pwSblWVKNrQH24osTQ==","signatures":[{"sig":"MEUCIELAZQIZWLZo9eHanmfyPvTp3rYR2cYVEMoo87IvcmhwAiEAylu73bX/tmqV5pRUgI+Ts4Sa5nZB+w9OVBFh0Tss8CQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiXxowACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoT1g//TEd42rtEkXXGy+l0nVMQBE3iTxVu1PY9ftk5O8GyHx2WkRdK\r\nLCnAPpjdubGJZ6TUblCLRkiUPViiImS8P0pQAlVLVG7zJlUi+7FyqRR3rOBr\r\n8RwHTcP1X52PrMl+o0sXs+0oYZuVQ0wQkESBeLdu3vuvzGCfP3Fghc6ethTi\r\nnn3YJJAFTdIfdZYfbFaYKjvXVTa2vV4x2+9JRPryt9KpGVyN4rcc/wS2V3Dn\r\nV6QPVoYJa3O7QVd1alrrmq6LAh1fwq51yMxJn/aprIqrfO3FO+N6Avr69DRZ\r\nwqyC+9Ir1i3ojdtvRBxdEhvkczun/LQAb99SlnGl+yTUPyAXTIWZHTyLhZSZ\r\nDY0tIFCCgXjMeBcmalGBTuPordygbWl4/fvAZrCXoJ6rJI4ArVyGDENpHM/g\r\nxrkEt3jH7mExNIf+ujZITN/VaA8oCjyYu5XehX3dy4gzrZmRVmttaOk5pxny\r\nSUViK01UclPNLwV+nciT8USRz+Nr+HmEEbU0L1PRca4DS+uCNuERo4fhpOTY\r\nYKB9LMHHY8cz9Z2Z0fQXlulIOW//dhKArz6c7lKaJ1deXSXkjLxdrxE7AKcT\r\nSVhvcLK5ZD5A16yh6b97F1riDGoPhFQHZOYnXQvRawTKfpPtU45ajIWV8dA6\r\nPh6mXKqY1k/ULNVME1HdrAF+nz5bx4H6qpI=\r\n=gNNW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"538ae755c197f0d9a1fd3a2cab5000c498987584","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.7de8965cc.0","@material/theme":"14.0.0-canary.7de8965cc.0","@material/feature-targeting":"14.0.0-canary.7de8965cc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_14.0.0-canary.7de8965cc.0_1650399792340_0.3708011866871568","host":"s3://npm-registry-packages"}},"14.0.0-canary.641ed0851.0":{"name":"@material/shape","version":"14.0.0-canary.641ed0851.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@14.0.0-canary.641ed0851.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eb84fd80fe777558b3322cf05f898196b2a1a78f","tarball":"https://registry.npmjs.org/@material/shape/-/shape-14.0.0-canary.641ed0851.0.tgz","fileCount":14,"integrity":"sha512-BstZxxxGNZn1jNXod7lIxpSytDcouFwT0IXKxjz8a0gPsIxnmUQa6XhKApBtmhHoiU4o066AJhps7qkKrK00FQ==","signatures":[{"sig":"MEQCIDabnyVEWGfDH8xq1XhOyXgZTosclGafsrGoo8zvn4FKAiB3pSblUPWaZda1uUx+y9GSCxu+jPCUM6pp2F39NI4idA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiYC9KACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoO9g/9FRcKYwG7F2X7d9EbHvD3lg713/r54gWixphHeHsijafs3s8o\r\n1MsETiin1fN+uWi9gYgoYz5kaPFouE3bBQYV9X7Aq79yp7E5AqWNEljvmfh8\r\nLwJjGIoaSeDQbVNCesIccNMC7pO14WjcS9r5TRvzpdNZHwElo3a6VV/bCBsg\r\n4IS9QSnVsIBQn4fOKgzTjSHgSR63hFthw1q4foW7HNroM5HrVCTJFHwiMACm\r\nDIua3RRjAQnHTS0iVeqyFDcHVkth96jnU2c532vyf0Toj6GQgPct/HWAhk6a\r\nU1z2bXLcO0rFhJU026T4N9yBV4lGPRv24KUqsKc6WUT1DMNe62RUyowuUse1\r\n1QwTYEcyBm4A4lBaQt9C8tVI0t5pxSVkLgsH6+W1LEnyI+YLd92GpnjuO/m7\r\nnVPbXOyV5iVoF7K3X3PMTJYiN/m/8Yp7ct4VR7rq1G3lFibqtzgSHijw6bwe\r\nZUuvzoQmM6ajqOsMUgycMEH3wKcYgwMdrBBNGDgig1xqo1pKAu0xUhPBuUjq\r\n9Vi9UNrGTeraL6cKjU0XKG6jME5GP//E9vvWvExIpo7RZulkzqmeIYOqDb8h\r\nOHCrXBoRTrIMp6XF5R0EPROZcI32tHwCdr6BXKqKPJt+yE1EoIfrRZTqA81k\r\nSNxUYKUFx2Smim3g9bo1G9mNHY7wJAMB1nY=\r\n=dgN8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"b45ef0f6764b2048f5027d4990cd48d6bdce11ec","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.641ed0851.0","@material/theme":"14.0.0-canary.641ed0851.0","@material/feature-targeting":"14.0.0-canary.641ed0851.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_14.0.0-canary.641ed0851.0_1650470729938_0.5344568534434626","host":"s3://npm-registry-packages"}},"14.0.0-canary.e88f83024.0":{"name":"@material/shape","version":"14.0.0-canary.e88f83024.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@14.0.0-canary.e88f83024.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3b4c58880cbef8ce41ddfae15d8ba5a7e22a832d","tarball":"https://registry.npmjs.org/@material/shape/-/shape-14.0.0-canary.e88f83024.0.tgz","fileCount":14,"integrity":"sha512-gfbv3SqzZVanOz/Yfhf+shg+h4n6RJsqs9z51igQTLYldawHY/tj9w3t2n6FQtCsvKeAdRImEWEE20bqtvb+TQ==","signatures":[{"sig":"MEYCIQCMn630gWZ8kNve5eYkc62ZjqLbqpc4rCTa++CJJw4SdAIhAO1WoaJUdCApaleGq0Pt66VZUCgDPDDgrVqtOgUWVyUE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiYEcwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpR4g//QN54QiXMruLPulGyoBI+f2OTgAwvv4wT8CiXnzXKTbxsB7L9\r\n9NUEh7p4CqDKA/1lAF8gnVbJ+VgNOyZ+ItYkJFWr/U6+mqOQRdWew7DdTIre\r\nEjTAWQI2zvvYeDauSv1MgKeB3NEonKQxUJ+HQoAcjkcU7EF2F5ziiJZYKK57\r\n1WzRLK1X6bNoK+NEn/hkptpVkmAd/ySSeVk7OzpHAYEDpO6+t6LexT/8WaYF\r\nsc7Hzba6ThgIj+N3w5ynkm+NAcBwa56yuGUsR6LbtD9StpciDFN9mKw3b5R8\r\n7R1J/N7F9mhUXlS2fUaj3CnUpwN72XVhi6T0Od70UOhQ+OMntM165s9xyFVL\r\nTBzXlfswPXlJRHSIsdIgqzGiOSXO9nOZ+9od3RxJu2iBryamiqJr4SvWZYko\r\nyXnt3FPFYYdQuS1lVYg4Kzd1QsbFElPZr0x3AGGeIkqA89NzN+OUWIW9dWr3\r\nFpySrzqscm16o22E4d1r343ZX50PprKVKk+p8Zm9MtDt+1pk6xtbz6hZ0JNY\r\nQG2WUYYP7Vozl9XbHV+Cy/V+i8XDBQ8UDEv7PagkKifLCEUmzQtI6qrZjjDr\r\nepb2uKDD8SoSV5yno+YzBrS7kON+g919ZIRnKng+59C8kDs463CWTWQB53Vh\r\nEUVbq4tnVFE3EFe7QXzRkhjyZdtju+fAbvU=\r\n=a96Z\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"e9fdf51ad2ddd3dba754b98348bc356126b5640e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.e88f83024.0","@material/theme":"14.0.0-canary.e88f83024.0","@material/feature-targeting":"14.0.0-canary.e88f83024.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_14.0.0-canary.e88f83024.0_1650476848741_0.8711086166037991","host":"s3://npm-registry-packages"}},"14.0.0-canary.7321d6254.0":{"name":"@material/shape","version":"14.0.0-canary.7321d6254.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@14.0.0-canary.7321d6254.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"65aaa6dcc89e7c31c3af8026bb00d180372f06ad","tarball":"https://registry.npmjs.org/@material/shape/-/shape-14.0.0-canary.7321d6254.0.tgz","fileCount":14,"integrity":"sha512-HY3b5V9XuZKWs/WPoycYIxRmIkK9v4r48yyMxqzKK3fGqBOnAh7t2P92KXzMrsBaeY5iOLVQpZgMsiduYdTawQ==","signatures":[{"sig":"MEQCICoRcfB6/PdFD1nWWhO0scT34aVWIeQjG3k5DGsBu5aKAiACE7JoV+OgG0YIse26ZTdePjZYCiBhURiVuj5i56Iwow==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiYGjWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrwWRAAkN4vIqLnnMWixzM+M/0Mu2qhH9K9qpz/cB9ocZQFcJcI8DFj\r\nyFcppBVKt6jFaUhF8Z1GijCnKB/nYTS8qm0OVM13H9StXt65pPTxTmkjRnxP\r\ngUwgAOotoZpKKHkAzgzGgXzY7fAG+kozFxK3eXS7jG2RlBC2NNIYMC3lFj1Y\r\nbAcTSnDaSswbp3aQbL8LLkxLLlYkit/zyL+A0+Fn/BxlpkTz39fHgisoK90s\r\n6Ual+zBp9EnJwndhInWj2Q+NS6O17OGzR4FI6pB1DGjfzjqLwG9huC5PCChF\r\nl2KC1yGZTU8Bk2ODSURQrKcHh/WjSR1EaETa8RNpKeUA3QS9s+0Je/a8yzo1\r\nOjFSbzG5JNGdTEXo96pudARqG8Wba1OuMwOzACZGhmfPizC/Dddpt7zlkHJ9\r\nAU86SQnSMSNSz7FCR7nLVeXU4S723heoiIVJRYI3nYu8pZFitth9XINcixNw\r\nujFWgn0isOVomMD/UJUAHm1srDc0YLKVg7ydWb5EWuPJZSLSl4S0aQqHPm6J\r\nmRM5wzd2xb9GOeLr+RwtjtNWEtVbThCiDLeeXxp/b/T4MyrVSIKSxekN7CNz\r\nkEbq4rillcNXRtSRVfH1J54jEKslERR+XXA5O/GaDMMNa2WCrwOEDNbFGVnF\r\nSshMXXyxt7ZpjgnkDwL6sYX6PH7LrVxqpck=\r\n=deQO\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"981be270463043c4b45845cdc3efce353eb53b30","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.7321d6254.0","@material/theme":"14.0.0-canary.7321d6254.0","@material/feature-targeting":"14.0.0-canary.7321d6254.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_14.0.0-canary.7321d6254.0_1650485462405_0.43359707687560745","host":"s3://npm-registry-packages"}},"14.0.0-canary.3ab956515.0":{"name":"@material/shape","version":"14.0.0-canary.3ab956515.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@14.0.0-canary.3ab956515.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"70d42f08ba600b0908cda2d491f09e240c253967","tarball":"https://registry.npmjs.org/@material/shape/-/shape-14.0.0-canary.3ab956515.0.tgz","fileCount":14,"integrity":"sha512-GDf/wiuwGkJ0ma9cQhZB2D/b4NIZERPiTQFEbLL2T6yJMlb+kjMwAB5oTm7KHOmZ1Vb0dGsIxWaBnVMrr6/Olg==","signatures":[{"sig":"MEUCIQCM3QhzgEwU7XozD2O80gKrbra0HcA76r6bstZOEa3VfQIgJYtNFTMUYnNgR8TXGV1JcI1GdWE2B0KgJ4h9cI/RKos=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiZrfVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrBFQ/7BS8A9ZsHsjFfkXBMgX8ry47pzHywWf0HY/qw1G/R2CSvUhcx\r\nJTtHK0xchYCAPFjO8Lf95R4BvWqj79F9a+79W6Ht/KfsHsaJjhXgu6ToZqri\r\n0lW6IKFb6JDXSUjLnGb9kPFxHs8mQvKewhhbUlCnATsvBfDOm0Z9E1fcULet\r\ncc0zGhWFwiWnJiaqpQeMAkib/bIbGtVJU6KocHQSi0XXQNnELRlH26kdqxpQ\r\nJFGDM2BMsnzZwgs0Ozi1ElXgOD9t/iwDYUaXZ4v/gW3kcccB/yVv+o3wde0t\r\nLGokU8Sgb43/tyxUw6hHPbWhXxK33bGdviGA3Y9zHnr8QPGWgSmCW8/fEBWM\r\nRv88ZbGDryRbzl9Jd64gbuMfkP2Fxn2U90Jt1uwp4SNYAmp9WvPDMgtn26/D\r\naFqYDr9ASaEnT+6UlYnhgw/XlUaoq2PjkQY4wEje5LJukfk/nqV28/vj7aa1\r\nYG8PX+PIFVGksgp7LagmaeK9lQFfIKIM75eD23901eXFlCeaELG9VqDXnvpE\r\nmmWkgVlCI5Vox9+J2NJ1aGvzaOy42uxGjzHd0Mylrctq2/b6TGR/pTl+vcWA\r\nUOb87Wzb5Dpcnq8aW0KTBJgZ+60bRuQKfwDGsS5aMF9MhCJih7+6jKK6NHi1\r\n9j+IkJQhjoiHMUpcxB3mD0qBd3tPFgnGsys=\r\n=0rH2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"a09484c5e8d50e8b042d5367972a9111e0432c38","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.3ab956515.0","@material/theme":"14.0.0-canary.3ab956515.0","@material/feature-targeting":"14.0.0-canary.3ab956515.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_14.0.0-canary.3ab956515.0_1650898901528_0.8931603243469304","host":"s3://npm-registry-packages"}},"14.0.0-canary.53b3cad2f.0":{"name":"@material/shape","version":"14.0.0-canary.53b3cad2f.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@14.0.0-canary.53b3cad2f.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"60d2ba5ae2c428997cab78c65a29bcd6029f268a","tarball":"https://registry.npmjs.org/@material/shape/-/shape-14.0.0-canary.53b3cad2f.0.tgz","fileCount":14,"integrity":"sha512-RyjInLCNe+nI/ulKea0ZLHphXQDiDqYazS25SRn18g8Hoa5qGNaY5oOBncDXUYn3jm5oI5kFc9oif//kulkbjg==","signatures":[{"sig":"MEQCIGsM5UwWszC0K9+Cuw5VdioIVrKICVFxBOQmgTJFi/xFAiAw/Ge061oG3NsZhEBh9XlETP/vezI+7VGSzg0vUsDlPQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiaTrUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpuZBAAmQCZgCXxnTfVGKos/NW2ldf7PAxF/NvJY6eEXIzZNtWIu0m1\r\nsSaKHfQkJJaCso/RnaUX14Ci6VPTHLJxJaQde7zs+DB0IEURLD4X7fvgbK8v\r\nAT+L/krYDTa/Sh2bu8kbpIJsWC410Dx0hYrhCqC1H/s715YW83ndikpQR0m4\r\nDvwG2lpwZgvfvX4RDNtbNSIgnGl3HexQT5ysbaBMpRnK11eM9NKs2YjMgoVU\r\nJ8oPVSJmaukYfHewNme62ke6pMYs/9FajOxwohTCzwBve+/8fpEjNIZQtnVN\r\nSkpZ19bNIYj83mF468QW4wvn+FAi0GX0PEHIspu/1+43Q9RUJvrwjOegAtzo\r\nYVoCYVI3h7tLNPHe9BZiwL28M+4zMe+U+FvA0CC4iWAj4pCrBam+jMsZpY1o\r\nrrG4loCpsTazlhm2xsJ3ktwhlIctYhrs5d4xxZefyHVYX5oDW8d5bv9+qE9L\r\nZzDFV1pWbYkrKTnidCLiEE5dec1ZTJ3VGg3KUrCCQlIOvDjDp1VJQvFQwkRx\r\n2HQb3nJXhuisx8s4bQmbooSqvRGfxiBJY4tkaSy4OQguzFm4ssLyZuaA7e3N\r\ndHfxVO3ugL+6nVkrN6+xqt/9l1diioozNBj28H/+3qS7cTd4LglcZceCJV2p\r\n/Ut9lnR4chPrLDkeRq4I9cFpFvnOoH4PJHc=\r\n=W9GU\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"ebeda2e23436103241b0e82afd57b60f74599133","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.53b3cad2f.0","@material/theme":"14.0.0-canary.53b3cad2f.0","@material/feature-targeting":"14.0.0-canary.53b3cad2f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_14.0.0-canary.53b3cad2f.0_1651063507943_0.25389584042445534","host":"s3://npm-registry-packages"}},"14.0.0":{"name":"@material/shape","version":"14.0.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@14.0.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b58f39d743394c2ff7c57f0f004f0aabade2779e","tarball":"https://registry.npmjs.org/@material/shape/-/shape-14.0.0.tgz","fileCount":13,"integrity":"sha512-o0mJB0+feOv473KckI8gFnUo8IQAaEA6ynXzw3VIYFjPi48pJwrxa0mZcJP/OoTXrCbDzDeFJfDPXEmRioBb9A==","signatures":[{"sig":"MEUCIQCoQ+x0uydYfkZi4DTjg6ucDS/AT/J9mBsEhtmFUFlJRgIgXONk7Wm3GzGPcACiOWVNmEDMtOe/WZCP5ZZJVdux720=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiascMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpbPA/9HT39iFrr+NX6VSlVFys2u5oi7N5m9WuzemJFaemwOqIAmvNW\r\nIQbvMHdYV8URodHC6k3VBShd7l+HT9nCGHEVohtKGbdf7aftc8EKGZHtgsxP\r\nilzWxoutBLn1mVCd/xjTa6Ck3jIaePO6SUtZC353sVAgX0BWxCh0RxnN5ojI\r\nyFHxnR1xWU7P3Yei7qq24nk+Vky4pnj0GfPgUDXzT3JcgYa+Zr3PU2qBm4oo\r\nu71u1bgDAW1zKgCb6lU9T4aOg74Y3hks4vqag7zTcWGxSMA9TmM97HmM1s+1\r\nKDxHyRoKfjMGAXwiU4heKp/eHhvCcZGPzVkt2BnvftTnEuSOuenBAi0iSl64\r\nN/Vpti5aN/Mu72G2xagdIetf2gyuc1K5I5So16x7s7woELO4dP+zBlu5647d\r\n3JXmw86mU26uXYpvFRCoyqNLzoIQ6LBdhpf0A6zCBpZ58eVr/yc4nvQHB+KS\r\nrwDQ3wKIrV/0taSvVcpaAZjnlbkCO7ZpW4y72lz1+HEjVa7dteKN0G8HNqkZ\r\nXbZZR9Xo1g+hkUdPxRBks56WhWJWgWLHnL9iS69lLFhAooCKe3ZaR7xx5dlM\r\nsVi7s59Ye5Wz0U6Qf75E2xuJMlyaXgqmPwzKagK1VqsS/aX1olwgl92TRVcT\r\n/M6UWY0przybKNmb6w1dDblTgJPyhHn4xlY=\r\n=9D5E\r\n-----END PGP SIGNATURE-----\r\n"},"gitHead":"432c815e58d61a257742836f816cf95e271e6ea1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"^14.0.0","@material/theme":"^14.0.0","@material/feature-targeting":"^14.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/shape_14.0.0_1651164940508_0.3319349088891439","host":"s3://npm-registry-packages"}},"15.0.0-canary.432c815e5.0":{"name":"@material/shape","version":"15.0.0-canary.432c815e5.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.432c815e5.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3e15d52a5a3a2d27576971f1ae983588606b9b1c","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.432c815e5.0.tgz","fileCount":14,"integrity":"sha512-uuQYIzg5ErmePmr87JA/DagbJwigeLxmadSwIHik0vhsqecDMRTrEP3K6lxsWj2tn1ET7ynaVbwLz0OHGw1EzQ==","signatures":[{"sig":"MEUCIBkec1Hv/bBuIw3Z+Kw6zaG7icHE23wqI27x0zutnJ6DAiEAzJmFit/8w+18/jdnjEEg9bR3tDO0Z993uZ1ix8rX3KA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiasdQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqTXw/9Fwt4C46ZHgZhiSCboHyDq/Dk+8RgEOHL23usrjL4VkP5TZHR\r\nkklpTK7NykLZsUtAKPDm7o+enQIFN6ftQ1njBVWtv3mfLRRSW73PC9E1qvgf\r\nh1+l1+d55zx3J+kVrmae3t9FgZioBpuw55ggZRA90xT2eWLDlFeGN3c+UGOU\r\n/LDtc2C7G2CobO3acSBl9mgr2Swgp8s4BAd4DOrxxoswwBirnRj8SxWskswO\r\nX3/8J9lCsx9MwOObI7irpKqf2a12SPd3eqTnYNbRGAURvJfcHIiG3pNPufOh\r\nlK7BWxfgmXDJYzb3/EzhSW6n5fc8eSXFrKmofDgRQBJ15Y1+wE3VvOrlU9o4\r\nzJB7/GwXECXq29+hSPfkLI3ykxzjcIoGziaQkHhNNlOy5Q+FEKA7ju4GnMi6\r\nG/aAg72gfJ4VwGfx2YbfC2pY4FZTq/FSOsKEUMmg4KFpkuvBg+Rcs8wtSAxq\r\nLQx/I9zHhK+A6/jdIo3bmsiXko3xpPEVH2qnzsA01qDaG3r4YRO+xUZipQTj\r\nUyHLz7m34KRv2/P70TjgDOh8hTEe9MoK24nIJUKR5hbNGJyjHL0oISCZaO5S\r\ngGcBKaG+Hy9K+1Cw4iYvC39H456WhVxK/TZRIhkumuIp749QsgeHdtprrbnL\r\ndpsibCB9pgZKdXDM/EwdIDVmAOFHPw5eOBk=\r\n=v9ZI\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"df8af7a4f190284cd9f3bb1756b2f443509424df","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.432c815e5.0","@material/theme":"15.0.0-canary.432c815e5.0","@material/feature-targeting":"15.0.0-canary.432c815e5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.432c815e5.0_1651165008462_0.824058104406062","host":"s3://npm-registry-packages"}},"15.0.0-canary.a0f01f669.0":{"name":"@material/shape","version":"15.0.0-canary.a0f01f669.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.a0f01f669.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"75099983247158938d31d45df5ecd3d02c350c73","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.a0f01f669.0.tgz","fileCount":14,"integrity":"sha512-/VrqnNJinkm5mQObedloUDIArqBnO99TKysCZoo2jN5tVpadg7Or7supz+t8gjihWSEPeCaNjfNOOsQpi8WR0A==","signatures":[{"sig":"MEUCIQCO3Uze69YB2kQ++ghPZsqJVVv5qKyUSlqvu8neERUGmgIgXqjhgb0BCKgddNaqWlQQh22QIbViOf12u04Ck+Zd0C8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJidYGkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp+Tg/9GrGAXUMsa/dWodAUscWNliFzTa+fAceGnX1EM0miLAhfPvP1\r\nLlRWwzJdmV7DQSB6zTzdHQ5354LLik2enEXlQXgLgapja1XDz72+WyseF97z\r\nBk8Y8XynXocZlucXT7eiG0GNA5XDmAlRby317SvkmjCS7kxsJAIBEO3C1Aja\r\ny9RKpQhtkvN8T1icUrpfGGrG4Py6X7guL0/fcz9BiyzjU3x3S1s1cMEcY3Oe\r\nWpjN0D8kDrossBrtaCiKEmO1zWcuvQP4anzpx45r3pypCHj2A3qE+MY413Sl\r\n62x77LQddtfTc8j/VMZ+e6+yvY2HWPE5jxgDdDTcXGmmzJshwq5VmjeRasGv\r\n31W/V9x5Z7FXsFxKocb1kjDy0lx37p8ofiV2UATFBwTvDvBgJGAsvxZeMjcE\r\n8lr4SwX6utEpq2YLttu3CUDwDHdsPioSG0qw6UYoRoiZLt7dDWg99hZTxXvI\r\nxiE09mRCyD6mEXIyIqdmB7tEeUH0JSiTZXHsahAyAF1JW+fFmMloB2bs4q6r\r\nOconF+Z8N/n+BpyHfzpvy1T0XHkw7iuWhnxaa+doVns7fu1Hvxr0DbQg0+7h\r\nFUj/epj5se65mYYcgAu8X1tw0H+qS8NJRFsKdd882OzJ1YTIK46CDOdCF89q\r\ni+xI366EfFRTXx+ZMqHtLvLchM48+KjpQYs=\r\n=mEou\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"51daa70df3212a8d73c545c86ed1c57273d41688","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.a0f01f669.0","@material/theme":"15.0.0-canary.a0f01f669.0","@material/feature-targeting":"15.0.0-canary.a0f01f669.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.a0f01f669.0_1651868068208_0.23990524120888357","host":"s3://npm-registry-packages"}},"15.0.0-canary.276cb39a4.0":{"name":"@material/shape","version":"15.0.0-canary.276cb39a4.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.276cb39a4.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7d470d19ff1c00056bfdf080cc0298bbbc42b108","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.276cb39a4.0.tgz","fileCount":14,"integrity":"sha512-hdm2rXzyNBD93mH/ZgW33ctHEmUwfVI2mCDLjZ1nl3oE2pmdSxpzQf89Q5ooSZaT07BZiq/A/+I6s8qBKq6pIw==","signatures":[{"sig":"MEYCIQDXsnr37V57AXAERFaHzCTBuMBb+DHKGVG2cwv62YOBWwIhAPiWCWkhSHniGugBPJd+XLwtS7uFVfgR2iWcELMkofcu","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJidZOmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoGCw//Vug2RF+wxuxkC2aNk7KyPmSFuqa/mbIcn+3aLzd5fkTthe1n\r\nblHhsxgeZAmJN6eeBw63ReCPX7bbOnHJgTZquW2SVP8a28gu30PznbEBjSLq\r\nEPW1F7HSa+NyJSH3t0eWQoolLbzZMN8dlcjgQQwYh3yc3hMz6fNx45yrdcL0\r\nCf/1t/pi+ZZ5JRnb5RSoQEDRfbZ8vseTJGUV5Xz9zVjbh+phP2/q9U8TxM/2\r\nZQ+z4rsWyFSzodqnvd9r1d0lYWd94MCJYSl01myN+EndOpyX1D1IChWExeA/\r\nv7QXb8La7OGGrTpE2n0aSf6kYrWbcHJSoB55N3cWe8aQ1g3Wp98pGRL9FjtN\r\nS4ztNmEP7eMwrSGnaoFh/ufT9jHtFDqRXykezXllUVuVLJocWQFF8uUAI/X1\r\nlqxUP61uKLp0AVGi8vkPUMwRKvAanXV+yddGgj/1qf83n4Wp4Peq72E+94+W\r\n/FqsJ6kE0ytN2nS+mDqApxC8Po4nudymWj6OQ3dYJ1mbsRZeplGfW0Kyoi+l\r\nBt4912eIsXMSWulcgGFnNyZ2lRsaDLadGeZ1MNAhE2D87p6BA4NsMm/JCnU7\r\nwDlWEPhYdF+PgtKPuML+ktfH9xO9j+SZMsg45hxOzxUQ5V4UK9itpyZ/IyXv\r\nyhYMwrdRPas+eJrUVpOYBtw0urTcNkGpY+k=\r\n=4Xxq\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"c57cd64760098925aff1fbf0bc2a73d32dd2bed4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.276cb39a4.0","@material/theme":"15.0.0-canary.276cb39a4.0","@material/feature-targeting":"15.0.0-canary.276cb39a4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.276cb39a4.0_1651872678382_0.3617444779891972","host":"s3://npm-registry-packages"}},"15.0.0-canary.4fe98ed70.0":{"name":"@material/shape","version":"15.0.0-canary.4fe98ed70.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.4fe98ed70.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6f18218164738e344eb8b7f55056cb58757bfe05","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.4fe98ed70.0.tgz","fileCount":14,"integrity":"sha512-FJS+YTe0Y8xwnAh5FxEKa/ekPrzaQL/n012xghjT/MkJzxqKJB84+OM6xN79t5JLEdxcaDvi2PpF6Z3qHW6tdQ==","signatures":[{"sig":"MEYCIQC+wT77/mq0MflcsMD5B9Cp+AEJOrFBWZe5TquVTnqVNgIhAKu/AJbL53YybIjV8uoAN+Bo+0KfYEiG1E1cflojGEac","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJidZlnACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpYng//WnHJLDQifWUbifwhsoq6nUhjVHXbhStSiZleVSjZC+/Ejx1f\r\n1mNLN4cyf2omd7ZTdYDSEZXGD6s8QMcTfPqaDJeSLMyFk/R0QiAgJRkaToDf\r\n/aqXZ5uXmrGlMEEKWka1VpcGYd6vaUR69N58hhA37WOOM2Dcp0Ux6l3Jlhwt\r\numWWu3BVMObymeqOWJgOQpaY1Bv46k+pErZ1lzgW8FePIKeLYmM8fzjlFsef\r\n4hhj3Tf6jHFPXJ1RayC7jOUFvlkjihCiprZ8PsvfhENkeKerq2eZVBj6NG6A\r\nYzwcskZrB/QkzRpCxTpskJyVsnF+oBlZc9hhxEUUJMCItJH54/v2uGsQxY92\r\nrEjA7/fQG/rPf+JKUBXkqaY8+LBSH2hx84+vGb68td1IkRB13hL/LJXS0g4F\r\ne3yGo5c3TAnnY8pFFy9DAljFDXJPvgD4NRoSOU72Xz3RsqAZHMZFz7/i7UC5\r\ndVADfN4SbpuAOqvYbGefwzfmkhGBZDyl+pmzY5NQ8Q3YcFpPEVVulf8201w0\r\n5mJsQvmoOboUYmC4jHUp32Y2wsjLWH5Osu1yBy5WSHxUM0Qoy5kf93G95dKD\r\n0yD2Qq2JvM3mSlhUDvSxD4xIG2AwA+Y0/i6in5D7dohaS5cNVe9054S35fR/\r\nazIuZ1EBTHcg0CTRMkyADOIrvYNe7rv8Mvg=\r\n=GsDi\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"353fde061dd090ede4416fc2477bc050587d6367","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.4fe98ed70.0","@material/theme":"15.0.0-canary.4fe98ed70.0","@material/feature-targeting":"15.0.0-canary.4fe98ed70.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.4fe98ed70.0_1651874151603_0.19205552945468307","host":"s3://npm-registry-packages"}},"15.0.0-canary.58b130a3d.0":{"name":"@material/shape","version":"15.0.0-canary.58b130a3d.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.58b130a3d.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"64d41250618a53b8ff76a5d00baf9e550799840b","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.58b130a3d.0.tgz","fileCount":14,"integrity":"sha512-T1f+No3eNNjevuKy1I/EuvyEU+/peELGyw5KcnHxjW/zNu/UcWGoyrJ3FFkIMUSBaU42HHXHiKZ01rLyk+FUyQ==","signatures":[{"sig":"MEQCIDJkuq7jnQEUKX4AO4kniyCLjFk4IKoNnQXuFkYqMrh1AiAlW9XyvhTR2yxdRRiqBJRcAIZP4rVkU+lXz/qaSEl7FQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJidZnzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp9xw/8CRJrUzbLipScAjRD5OQ3HeHhnZbvRDRpgDkSD0QfRSJfxsad\r\nUoJ+MuZFDjV285ZJl143L5hb+r30dzbb2vAqQZV5MpDsqUOgQwVYS3oTMzyo\r\nMK4QZcJg2HtxSwjI56IFyHYE0pweGFHKjSneBP4f9aryx4uHG+OAaIioxcNR\r\nUziWANX5vnifkvtq3QMlNMBC4Fc0BRwLy0WuaIY1R5HCxDb3Tv4TfEdFkeky\r\nfWjTxjc2hqRse6B/GDUZ8oorNYnCFc4/Ek2eKC/2DOLBdrghZg0LZ+oyqgQM\r\nPKzrfEUh9n5ObaFNRsuA09Hr0hi3j4cHltFs1JItbk+AHubl5643RJaUJNeC\r\n3Mey+Qb1UzSQ27HeW54c3vfJCZVXwb5uZrJeXj8Y0hfiS/nUAW5u12B62CPh\r\ntk5HbHaeampuZPrLZIpVZxGaDLh5D2CFtS1dcgaIrrVivrPj9egnT7WcXj5g\r\nIEiZrSPjRxythLnrjxdbaAzR+EWnIMuvz/+r0Jfetw5tTqfNUqvVb5Gnxufb\r\nGYEuL9neDtfhUWVZyiNZ7O+OgSJtEUVsHhgCqR4AglqiD2jNn6l6Ia3N18Gd\r\nZgJEr+eGyWroGikdAYkuz0/yFS8sufpTyhkahLodsctViT5gsLlpcqWBg5tk\r\nnJKQCHrFRs0L9XuUAOrL6Kc5wVB4KTVL/NA=\r\n=4JsZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"58c8ada7946689a0a59acd63cbd49b6c987c9853","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.58b130a3d.0","@material/theme":"15.0.0-canary.58b130a3d.0","@material/feature-targeting":"15.0.0-canary.58b130a3d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.58b130a3d.0_1651874290968_0.9871452594682193","host":"s3://npm-registry-packages"}},"15.0.0-canary.ae278a2fe.0":{"name":"@material/shape","version":"15.0.0-canary.ae278a2fe.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.ae278a2fe.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c211614553689d7715dd5221b7bbad56ba58a602","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.ae278a2fe.0.tgz","fileCount":14,"integrity":"sha512-qEC0x93w4BL/nGro1QjtDPKaNjfZUnNyhnDXj4wHUaxEZ3XCikrjIubm2GLP2doKdobnoV1xSfwqVVg21A3jdQ==","signatures":[{"sig":"MEUCIDeK5pgb3r345lz+xJQJ6ukKCuAghB/Id3n6iLXXJ+DgAiEAhFtEGpuWDNGhpsLCbeKfe+9nNIwQigiSNN6Htwm9eRc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJieTIuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoWaw/+LVXfB4268TCbv8k1EJ2DOAFgBfdHwHO6Az/FjlmL4k1FfSRt\r\nVyiRYulQ2CpJGUfTgSyTK+Sh3OThWCORhgeHmunCUrkpENyfFPC37XAb25Tq\r\ntlcaTMxfYylaofCrnUQtVTttXBgWRARtJmANIdvKdeDdV8sd0a6zTxOPMPkV\r\n13ZGNfpg92Sy1zLzu0jj9BaqZPKwFc69Y2lnXQ1mEqRYvHW3mByNW5G510tS\r\naGr72kG0VOb9EzE2D8T082mxDFyp9ZpUZ8aI1dhmsATJqdFdZCBVdtsa/5Ue\r\nG3yo3wnyx2IYbsbwUzR1cJM0Fr8qXQEikn/G8GYyGOqe/YT8V0N1uOOwIRbP\r\nUP0PeWdEpAccOHGgfS7ATmFChiUvt0iSnv/RQFnhSXa+V56Itlqu1AM7mips\r\nuAEzk270zgswD9+xgG6ZA8LFkAV5fcgpSAv7BxqRYIJmBXFswWyWRE5TQdh8\r\n6Iirh3df2txp+hfYHzrVXO+qneqkxDbGoiNvWEaQbkuq7VhyszTfd7OVYX+O\r\ny7+d74u8QvnHQXIGrAnOwdVpdsbYJb4quoxSeb5qa5dHpwUoiRDPliMPochC\r\nE6tlBbrFtRNFLPZoqKgXds1IIBonRlIVGqVtZQvv2noov8a5ffSmT/2veF6O\r\n2T07HwpKM4i3bpqLI3ZS6aTNp6RRUevUP6I=\r\n=Tb8X\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"bfd08e232a3a514dd5a38dcd77d17df365502ece","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.ae278a2fe.0","@material/theme":"15.0.0-canary.ae278a2fe.0","@material/feature-targeting":"15.0.0-canary.ae278a2fe.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.ae278a2fe.0_1652109870603_0.9026780096382747","host":"s3://npm-registry-packages"}},"15.0.0-canary.bebf5bfdf.0":{"name":"@material/shape","version":"15.0.0-canary.bebf5bfdf.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.bebf5bfdf.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"41b65bb27846c323ca4e02b301d272b78fbc3aba","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.bebf5bfdf.0.tgz","fileCount":14,"integrity":"sha512-KsK6GlRN5iRo9w+RL3xExn9FmqSdrQW5JrQbi5sx78OGU7W/EIaEykoEvoQqlmh2SLWHYlHnz3GdrgjFaQPWZg==","signatures":[{"sig":"MEUCIF9ykcfQLCEcqJAY9nJlvRVOaPFiKEU2CXK75r41mXQLAiEA1H4Z/fDiO2580dqrUcjWchGxESgb+vcqn82JqLN+OiM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJieyIIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq6IhAAj8IluPVR/dj21+iy0yXX223vCoHvIuxvEWYPr+UTDxZjBbV7\r\nL8NYo1SWmAN/2+6rlgy4oqWg5k2Lt8YcHCVU2ynwweWNiT0h5DSV2k1bGezH\r\neCUOnIfqWg91pEWxJ/LI61Zjan2G8Q7pjeJ9JObfJfdWNV790Jp2n+fxFXJW\r\n8jdDsFkCN4xm5Y74/ClYD7xTvlSLTkgLI48v07qMkDHkgV49dAvruiGPCPNw\r\nxOt8xderiA8yTHkfKQrI4Qbg1dGkW1/oQhUxA/Q12apDQDINSJu7TK/jVxuP\r\n01bWEqS6Sz3NoHdz6Dva1vZ+EZGUBuhMGeMEEkrGl+gsQlGeyYK4GsWRXRWD\r\nM/Wg5Oq9NYdZp6Ld+JItMDKdPK5w/06hZKA3dAkZRBYcQj8f6JBlqcE2qPp+\r\n4E1SE9GyhZ53yG0f1lGdd6shmUe3odiRl8KE++r8D0te1fHWvobmS9V6NY1e\r\nZOYTVcgC46ckVXSqaoco3PrfAtUaaIIEz3X/Jl98fdlIFePGEclMwG563XNn\r\nt1RzoZ9qy2FlXSTwCzCYgMinkHRMt2hvbEkLH7S737swytN3st/8Dsc0VoMn\r\noJnWxL/H26Ka9wXbaclfe+pLfMNuQI/WcUmqWZjJgBNgkqTDoiJY8YkO0T48\r\nU+D1FuoL3FBlRR2a/WcwPPApknT535caCh0=\r\n=JW0f\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"61d3971a411616375c31cb3fb763fafc120c9570","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.bebf5bfdf.0","@material/theme":"15.0.0-canary.bebf5bfdf.0","@material/feature-targeting":"15.0.0-canary.bebf5bfdf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.bebf5bfdf.0_1652236808384_0.29167908892027694","host":"s3://npm-registry-packages"}},"15.0.0-canary.e6072cd6a.0":{"name":"@material/shape","version":"15.0.0-canary.e6072cd6a.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.e6072cd6a.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8818b2dcde15f2ddf86334c59e50edd19bb44359","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.e6072cd6a.0.tgz","fileCount":14,"integrity":"sha512-ebmkELajRhVThNFX66sfz0DRU/M24XqqJWwu/CAju+Syv5k+x+8LDBTx0B+ud7kht3VCDZUbs/vUrlcUN8ROFw==","signatures":[{"sig":"MEUCIGAydgu+/pR7MBDVlj4OEigltfKGd+cvzz6fPlVDIdJkAiEAiooLWJIby00LDKkkuarIjoPTkX/QKG/caKLtpE0tX9c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifBoIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrypw//d3cOTzSrhYJS+TSBEdYTjV5ZSFirj1/ErXzgp1eDNPDUPjJ1\r\n3WqYJ6xe6vSyQ7o9jRyqQq1e400yYZCc98nyM2w1/QaGaOTVYOWwC76doVFN\r\niIdaL8jzZIPihOEuf8iJ6xhvYg7M6UVJmJshmBQQlh1y9wVCzUIDvtdmEMdO\r\nLd4123rfOJtngvPBxy8w9mTcO4VVIMRYBI11R5pO5bXwbGevq4sLxswZbQeI\r\ne9M9SZWQfVsjKYQZNXRS4FFsArLpO04tca5VBFo67IDvAw/YNAUfpS3huJ1O\r\nDEqzowTAdpmqBGVDQ1a9IzENywhWOXMeP6NCWYMTrIjoSMVb/35zmKJPl5F2\r\n6GQhwd59n+prwVV3RuHOfGZXaOWax8HA/tUQmFiQKU1panzr8FketIZWANkW\r\n2UAFPYItjS3h0lpvaDvplDKJ6Qo4OdCjvJuWzoXmeP7YvBYlxWRv20tWOgXG\r\nHZ0rnN3EXLqj8FHX5yEtaDR80uEr/XVLJEUMdLhP8nL09uKkgYj3lzBQUPzr\r\nXcatzFoSJonJ/OI3E6cUfQ1lqxBGWVFzr02pekY4rM1fj6co0yH0YnGWuwxw\r\nO98zBal87Z6r/USAShZ1MgCbEuXdNr3EmeZPl68YP2yokbMRaLBCUYAW7CcI\r\nTvfxCAWDN8OkbpATANfK3b8+PBzD4gyHb44=\r\n=Ogld\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"ef2da678e66576709be19aed16a880b00e73a039","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.e6072cd6a.0","@material/theme":"15.0.0-canary.e6072cd6a.0","@material/feature-targeting":"15.0.0-canary.e6072cd6a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.e6072cd6a.0_1652300296010_0.37112739499615044","host":"s3://npm-registry-packages"}},"15.0.0-canary.5b40eb988.0":{"name":"@material/shape","version":"15.0.0-canary.5b40eb988.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.5b40eb988.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"53e01883b99e054778f0a5a0f38f2db23994dd92","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.5b40eb988.0.tgz","fileCount":14,"integrity":"sha512-8z7y8MVClaP5QBFmCw2ybqtCevVCTFgXTjFypaMQP9/H2ukeNS8hKUvCyWa8o6LBrsh91j4wSXRIWAnBhptNCQ==","signatures":[{"sig":"MEYCIQDtd7Zk93scQCWon05Vl6yJqg3HaEAXU8XoFs0CcKXqzgIhANWZKCHvhB0HrnlM90NODCVDEmVCxZgXowj/ypSiYG2K","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifHRyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq+6g//UddUcCFZB9nbdKgo+Ka7nZpk1nm8sbNkW5wYn9a5qeUUr5FI\r\nLE6zIuaadAt4TQSz4QXS2ricXdb8SkwrcRqlpQLkpj9jTGIagYgD+SttPOQc\r\nhg5upXIfdyHnmrFo95LCgui/jKRnzaj9nnqOy10SoorwEJpE2pmPAWYQFGbk\r\nPqR6VcP82w7yOjkh5RFxH+O5xUJCIymboPSnxmRezey61Jupa0gPtHPv//DQ\r\n2FibEcpQh4Zpkg3VU45oAud7L6joG9q/iZyr7EDbtSoH0zbVjH60BGFvCHhh\r\noVlOs9h4Ys+FHlF91+0d+cnbkDl1+vf/oCKjC8c/RTZSjMcKErdhUYYjrG1u\r\nrPKCo+eQqwoM7zPh4igFsphNRB1N/2KCyxz/4IB1S5o32DX2xfOETXVqkbIt\r\n7eoD/BH7+ScsY8CBGW2VD2iLbcaXDnjukSMbYjsmA2zjvLFncOHhmVfUDV6+\r\nAK71t0qwIlbIE+LkA/GF2Omb4Ik80jdMLot3JpEo1cuIUk9ZM7VN8i0cZJsD\r\nZiQQ3ZekxExJMa7XY9YjX/e/Dk8VG24RbTUq7EKf4qt3kzZ6QZ17jQ0idJN3\r\n8vuPUXev2vYSnl7i4RxgpmK/BA25K0z0Dx7wAbRuwWFCOg0hZUDrsZ/C1DN5\r\ndZkjI/aZk0JAqM7TxSAjWZzG0ulvv1IAzls=\r\n=rb0W\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"c30f2a613c97ecb48fd3f9ad7b0677e51a156449","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.5b40eb988.0","@material/theme":"15.0.0-canary.5b40eb988.0","@material/feature-targeting":"15.0.0-canary.5b40eb988.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.5b40eb988.0_1652323442037_0.7046703385482844","host":"s3://npm-registry-packages"}},"15.0.0-canary.6a61d62f6.0":{"name":"@material/shape","version":"15.0.0-canary.6a61d62f6.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.6a61d62f6.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e27552bdbf2603d957b8246e8c017df77809c766","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.6a61d62f6.0.tgz","fileCount":14,"integrity":"sha512-hj++CN67LElIezCE1ZYwFXsJ/6zjsV87dF13joFBCrxd19Q5YQS6fobS+QOpqgkhDyRqzxaRE0PAUQWckfsCYg==","signatures":[{"sig":"MEUCICPkiyySvONV7YXJDa1dEh9jOMgR2b8vrb9+yxDp4JdKAiEA4/7M35dES6lmac0e2AHDeebkC8R77J+072ha2J30ehM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifW1/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrrKRAAi9Vj3Fo1zdzaZyfS+9GSdHa/ylvBwHd57o+/TP0RF6Z1qSsG\r\niAWd1HljySHu6So8SVD25Fo3uZVuF1YVm3tmnoMv5ImqAWm1HVDJdSQ3UNFH\r\nmtTyfmik8BWcY7jPTxFPuJZ1Igw2QJk98IQbzzBvDiInoMwxntFogvoy3jIA\r\nveUOtsrCw0VvlP1zZ0nLGYzr0u2dMc/Y0OjQ8S4vjyCuVCHE3d5s274r114V\r\nS4n9mDtmpIjc+r/VR0RzbF86eZaO1MS68wS5mgIWX7cNseIHmowGNy5yAIvE\r\nor4mjvvOIty/y/CcWUBuNn38qtPF/vwDd8YDe4/+aYUVbbJXiqQ/nq9MbvB0\r\n0OqCfk+273aLpsWomXEKqpvPM9YBXcbuYYS4IU9cM7y8XpNvC65yVkKrmkyD\r\nS+tLNoUYPLOYVO83XVyrSte+Ua2qZvVk4VV3aH0OnlpUooH9bt6iNYbMqCEi\r\nU7myyDy1SlHkxVqLhuJQPMz1x6hcXBKVUPy0Y1neeCBH6tIG+C20+eMSpMi1\r\n/UMIDUgPTAas74X4sQBBRsGvMazwY4+mrAOTjLIjNLn38H3Gqc7UJsgTcE0v\r\nJNXjHJd16ebmWjsmaSafcgAVNuzBrVeP/Qq7eYUZhRGMVEx28HUVnj9c5RAc\r\nT3apjdxSkighYT80antIu3q71ifHPpr4LOo=\r\n=YyVa\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"1d46f0951ee9f725b870919613271f00fcb1b521","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.6a61d62f6.0","@material/theme":"15.0.0-canary.6a61d62f6.0","@material/feature-targeting":"15.0.0-canary.6a61d62f6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.6a61d62f6.0_1652387199437_0.38592608100765635","host":"s3://npm-registry-packages"}},"15.0.0-canary.05930a453.0":{"name":"@material/shape","version":"15.0.0-canary.05930a453.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.05930a453.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"10159ecccb681d07835c2cc0e377afc811ac4a18","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.05930a453.0.tgz","fileCount":14,"integrity":"sha512-NR8ffiBrvkuT0mUwjp9z9M7Xf+MFtqn1q6v4ufyDQdWDEwjgJFXuCs243Guy/vpq+SktVkTLyI1sQR3nQX6muw==","signatures":[{"sig":"MEUCIGEt8PSGfYWubyLGKDKT7QnlHDn8kKhGcOqle1u5PIAKAiEA1DOKvbhwR1fp4+fhpEM/iR7W4GUetx3DU5xn6Liru6c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifqe1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoT0RAAjK9gD4mFMT6wm7E+7JLpn71vULuHH8iJZXP925nrmdnW0IO0\r\n1coLdVPLWYNDFq1+pSHCU0dFUxr30M4ynIEEUnnfm1POOQBRtRNoscpuEu4x\r\n8+ne27EyrPJgua0nkI/+z7enmtKyc0kfohONVmKTiZO/No8haf9/TFq1XQGO\r\n26qhWXSUMHsm9hDT4bK44xQIvsNyLtO2MO1GU6jMLJjAtdh8IZDT3QodmuPB\r\naQkEEY0LfSqtpmBKydbZ+L9YWvH5nU7rARSgIC2lBgaSIyu5dCxidoax/POo\r\nTnoj/85Aj0TXeLR85JpFJVqp9VvLJYXXUl4UZmJk7kQYne//UL1/9SageZQ9\r\nYpK46aPFhXu8fWXmiyd8n/wJ2uc9Sd4MhSxos9aAdKK2y/TThjHuq9n7YW+g\r\nht1v38v2CbW9j8gYsqwofzRWmLQXkHsl50S3aq3+G/KcObQ4Xtk6N/mlabTz\r\nM/reX0ugfLxiOV1beWXT4j9SWSD8gmPmVfYwFnx8VfrENsIcNQPyVfbC3PIv\r\nDYbQ5DynYOvHb6TSllGNpAnqqZCDslrIlc9/AHfzmN/2dKAensmx+xGMFlh3\r\nH2IvQ2CYRkgGr+FVjauvNoFkCXhppIeIQ2fLqH55NpTMuorwrbSI0V2OpxWo\r\nemt45yzNbp2AMXg8okvg6fTo9rxQmJ/KR1s=\r\n=sPNO\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"e6dfc2d0553321fbe47e71fb414cfc1152b0ef8d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.05930a453.0","@material/theme":"15.0.0-canary.05930a453.0","@material/feature-targeting":"15.0.0-canary.05930a453.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.05930a453.0_1652467637606_0.12708444527473484","host":"s3://npm-registry-packages"}},"15.0.0-canary.c0a11ef0d.0":{"name":"@material/shape","version":"15.0.0-canary.c0a11ef0d.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.c0a11ef0d.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bc88c766baaf15e9262a30cdb7b036a6ebfe2858","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.c0a11ef0d.0.tgz","fileCount":14,"integrity":"sha512-449v+kjLa1REj4IxShSKWyGAEBnLazWMP76yk8tQRheKBMSC0DXLZw5RRHdXIeML6Kf3rThmY+3NrgprUhsVig==","signatures":[{"sig":"MEYCIQCE2wzuFZvWNbSBhIHxQDeML8kq7KiZvLTMnOhTTL5kMwIhAKfh5+Aql/lIgBJvkjMaJbgnNZI7vuCrepl6DNjJWzj1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJihWyTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrNvBAAnJ/SrV7gNxvw6hfXwuHPRFJ9WcZ1RKjLq71n70pZBY9cCk8a\r\nPJH4SpwSZh6ZRUg8GDQum0wbhH2tIGQ+FjZ/DCypkIycfsQc7+l6P1N8ejaA\r\n9j4l0gq0rvQx9P8Pvk4VxrqOZQsEf18xWwXfJqI2YQgE9f6kFZhqhLfGsqi2\r\ngX5cMsj1OegWshJfGNgK7tNggrcUmn2rKdolPZMoCbfNW3YXMRiPLFH095YY\r\neo74G702eV8AHWPru1N4ZnJ0Uc0GoHf10Sd8eqKKHAGE7zj2kIxI5O1anSLo\r\nylhTeZ03I6teKFEqej2a/am33fzk7YTD40+ggHAyjJ0kCvWAasqWCg1Yk/79\r\ni4zpdFcXjtsQ5K3Uc4U46tK+ucoddn+KK9smhlALEc+h/fPuE4XwKLoNeViT\r\nCxvzEzYnBHHC4Gxgd+NYrE+T3wXMdOEdHRgfrTxGgmwgRmBmmD88azYdxKfh\r\n0eD7+XCBKe+IQWCfLLGI+pE1fXJB9j/C/L3vOd4Ar46aX8gd5l7C0kBSBPft\r\nam6HI3wp08EsxGEHOzCgPEhCZyoftxlxDVB1Gg3r/ecwRnR961I3EnV8kvhv\r\n3So6cFjfopcJNqIAPeG50O6ODaaXe9xTrHJoeU6NLEYk2GlxCH0MXWpD9LFl\r\nrb4ZhpIvypfAzFbUK1P8wtQfjqpUBoL5dMs=\r\n=SUdl\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"a97df68c1dadba0530f5fcda79fb8bc3082d963a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.c0a11ef0d.0","@material/theme":"15.0.0-canary.c0a11ef0d.0","@material/feature-targeting":"15.0.0-canary.c0a11ef0d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.c0a11ef0d.0_1652911251359_0.8263250252691199","host":"s3://npm-registry-packages"}},"15.0.0-canary.2f9b268c0.0":{"name":"@material/shape","version":"15.0.0-canary.2f9b268c0.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.2f9b268c0.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4decc2b8a326bbb2b64b66b2839ce912d3d0f94e","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.2f9b268c0.0.tgz","fileCount":14,"integrity":"sha512-sKZX3qAHLdRcP/a4gyeQK9zQ0cyRQjOtPSfUM02T51vF7VCBa2nfdRoGd3UysTLkJChyqPWeM7/xkuAfwlCB/A==","signatures":[{"sig":"MEQCIEHiyRJStVvhYZ6d9ZsOiiCLVrQOxPUm3YnlFNjiJDZVAiBK2KwGJ+VcTyFT9Hc+qVCxIkd28/AVOwohzU5T4lbxGQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJih+zLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqTvw//c9R2ZnFrOz1tX3Kx7S5zKJ45dDMmDNehsGsTYCd4V4zbPPPM\r\naZQq8F9J4dLSKb0RSnRydmyitNWsj60eaNULt6N8Lc46m1F7PEqRMnWUeoDX\r\n8LhXjbyTd+TWsWU7QNjC2Mufp5jTM/svHOFTU1BgdEsOvDEu8113So3a6jNC\r\nbitu+m1muDMxMrUX7SNwrGf7pntyTEyakcduUCAWQMQ3kYArFh/c+K4pF7uS\r\nIq5EB4NuvybWjuL9hLln+19dzjQ1g+t0nCA8FpWxw9EhM81pt/JUTjlukmdc\r\nSqPIFkazCY3d53BDOI2pgdXAXnxCt13A21pcnFj988Vouk5sl7cpLYcAaXB5\r\nRlzHulV2PZ8iof/mr+xGJ3hYcMk1RHF5bcBOdDAtcBlOpixDCtjua66IUTYE\r\nQN4ve2fgQ3aanOjXQ9H8mHSPEH8ltAcsa6sHhJYvFb9sGR1H+gnHys9/BDQO\r\nzZ3/BhiZa41J29EVCMCiS9oelTPhF6ueba4LSIiwLVZDUayZNIFHWVuIuBtM\r\nbzfEAKmfa6+SdoDFVaaW/e9taspvOFmTEF0L4bmTYo2of+sdvRaDuBXJSj0j\r\nObMJ8LSJwFhghBylaevuk+A07ZFUbmkLC6ul6nJCkEYZ2igKiqz2OQej4/d1\r\n0lqumn7AQC8xOZJtDteV7H+cnudmZpL3Lzc=\r\n=0sNy\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"29832a4f010df39515e01d98656d2e77ac1e47e0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.2f9b268c0.0","@material/theme":"15.0.0-canary.2f9b268c0.0","@material/feature-targeting":"15.0.0-canary.2f9b268c0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.2f9b268c0.0_1653075147516_0.9474010552697774","host":"s3://npm-registry-packages"}},"15.0.0-canary.7741345b8.0":{"name":"@material/shape","version":"15.0.0-canary.7741345b8.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.7741345b8.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"60fd151c5027c00815a53875a38b22cc49b83867","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.7741345b8.0.tgz","fileCount":14,"integrity":"sha512-My6TXBHhi4Af/4ulcVcTOfQTd4l+jppFUW7JGv9X0vSPVPdG+NZlFxSQe98qxzZcs+15vYdUj+LmXm/RcmSwGg==","signatures":[{"sig":"MEYCIQCDm2EQs1LBkmlMSH3WpRmhhS8rmbRbT4HlT3wSoV3EWAIhAJpjvCZS75+C0nRJKIVwI5bUjtgDERZtmiWCzHHFcdAh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJih/PbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqSfQ/+OTKEzF+MpV7xvnDCTfUcKNwrnmjSXGgdlxKkW3PuYGgfCBLJ\r\nRKzJLf2CUjOBDJpDaOdWXKk7VRLKdNDZ/bpWwQejTlotmubDJjshj83TIus/\r\nx9b8+uxZxf1flKZd9O98whfBAD1wAFHpCQn2H3FbXE7Ie2qdf3PjSrADkzOK\r\ngqfSKvpi4xPkatXjYK0rJF+eoGya+IsIivfX6QxFIHP/QCSVu1ulgakALWvp\r\n/To1dwQHibp1axJwRmxWP8NI3J+cM84hUPcM3GfgyR134r1WfTZJVkybjlhz\r\nOvVx0NoiXAMN3FDQNgJWT4zxqA0wbWZRMRPSOgwPiIgkKTUPPkkwZdTpgxUH\r\nE6UOOIL7ppXs43669J8E77faurDi7KYeOD/HoRXxmu6ZNjB3dMFVRHM43brS\r\nIpGMkWgKLx+uqQGrgosC4hw4mvTC49+8Jnv03QtlQFkXnONd1sa+v8raz/Pc\r\nAWNnTLn9GeocUYuB6KbYrtuHGCBgEpZ64KeP2cL7o/quIMm+3Lwt+mC1Gdkx\r\n99S0GZc5VqlNw6kRoRs57JUm32GPzjs+hm7r0RD9yvNXqG0bOSnyBltEfLNn\r\nkxcZ6Mk2tnPXaOUiGnuOx6qGf6nqVY/ymJL49Rf8/OIktyBgPv1RpuxizxFc\r\npOR+uMGCajh8lkKNBcz+axZ5me7pMdKsf+4=\r\n=zmL/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"2e61e5e8196d28c1bd4d1c7a12c242276c1d8ec1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.7741345b8.0","@material/theme":"15.0.0-canary.7741345b8.0","@material/feature-targeting":"15.0.0-canary.7741345b8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.7741345b8.0_1653076955068_0.5878774741419253","host":"s3://npm-registry-packages"}},"15.0.0-canary.f807e793f.0":{"name":"@material/shape","version":"15.0.0-canary.f807e793f.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.f807e793f.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b701475e592fccbf70713029729f1b4ce31010b2","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.f807e793f.0.tgz","fileCount":14,"integrity":"sha512-AJnvVf596nSEy+G/qE7Aw3LdxmYoagSqokEND2FQmQRmB7RmFFnF3jKNq0N76COy8Qtxyral1AKKrbkjhcikHQ==","signatures":[{"sig":"MEQCIHFrnX+fmDHmrGraLVHjyStThPkQr2nvXzxP8ejKQ/ARAiAWMDB2ps7E0fWTmbA/xSrQFFIQu+t1YeWa0WFM9Cr3aA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiiBRxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoogA/+LLv8G2MdMbbXfi+jZhNQirj6MNYaLmKlNpWZBjCIiZ8WmGfT\r\nEoKgl+pvCkcqdx9xKGVnlTry3E5t/+lu1HUQ0XGJMUYWyyYvTBAEl+VAMgCQ\r\nij4Yv2K1CGt5ENeA3Y+0inc//aWlSlJ+ti5z1i3UAuk+m58YesYKROpg9XzO\r\nuLEE+lQiBIkOQ8Ys5Cd4VhdKiD4gOdbEvW8yrDnbRKF0JFDhFDovlVYPKJ5l\r\njPwkHTYbBihYn6vMRjZQ2Vr8xChw1AFjOa77hHDr9ga5cgSQDIG8ItrZfCjO\r\nHKPEJHUxsgky78IJMADHpolsb8CZOA2RCwKmAItRKxMnMNcqkwaCNOBMkDIx\r\nv/9jvfz7fNfatRz83NY2sEBS6648NGQfaTHimcjmVqBk0rvUwGxFtjykexKm\r\ncH4IxWkjUF5RpZpAPUuiw4a5tmSVFWTuwVMhQNlu55DvODfwMYmbxtku+Ccl\r\n4ikmGwv6RBFOMjr34yZR+z53vADbv4QC2zutaPK8i1ap8NYnA0ylLuMpe67U\r\n9Vq1AUrEksnobwJxa6WiKjoKc6QmHlnN4pFE8KxNHDppdRfipMS8Pkb9fnAZ\r\nF/JvrOlZr8RbvRTxAmQZboV4vOur/Ud7q9iu/12OVL2Szhh6ZujhcT9VCN8A\r\nehW64m6fOOJ2FtQiiwC33IhYFyY4iNJUpAQ=\r\n=/rqp\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"b4ac5ff59e90b4770de9f689d9b09381fe2cacd1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.f807e793f.0","@material/theme":"15.0.0-canary.f807e793f.0","@material/feature-targeting":"15.0.0-canary.f807e793f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.f807e793f.0_1653085296962_0.3745238916447786","host":"s3://npm-registry-packages"}},"15.0.0-canary.9f53d4a8a.0":{"name":"@material/shape","version":"15.0.0-canary.9f53d4a8a.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.9f53d4a8a.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4fcd09c4c3f87eba6da67a199cc5b8d6104ad06d","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.9f53d4a8a.0.tgz","fileCount":14,"integrity":"sha512-Q50DhRn9poP9T9/nTJqcxRmeemtAxblzln5pnWg0ylt0wuQHFBAArlnSM6aq59fJom0uDR0p9tztGKzkNySo5w==","signatures":[{"sig":"MEUCIHNWbiUc45WLBoqYReU+Pm7UD6+Y8tXJneElFqLkR1ljAiEA4myT9kWgGBxH3AGGQ6S+4nkrvUDsGAowooFXZRgEqOg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJii6DYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoebRAAmdboTUKxBSnrdSlWfzIUSpX1EzSy4U3h7RNFK1kxN49RlTHK\r\n6neI+l6jlIGTDgdG7WxYJfhPIcsGdT2eFGDj9dxh8cimIQnwU5wvE7e8N0tK\r\n0fpIH+u8tvQrBYeSAOoz+qoY/ghNuKcQDJWaSLLr1pltNUMMhRxnh4LVEEft\r\nxYezS1tfn187TRUBLtd++2yyxl62GG6j+bFUIu8hLWtZuo3NwyLyOM7eKQxf\r\nlWNN2r0kkejyxQm/OI/3IWMjkIhKBnWZDUpZU8KNgjzqKuz2nDWUOpOXSgPA\r\nFzwC1ECjZnv4UPv0nIckGYsmGmaT1GvsppDnBxRmiT27brc1XkFShkPkG+i4\r\nmtLXsMpLOaMsYxXRz1PSZdI9N+SNnpSPEtEPvOmDRHx3vSX4c+4FkPAxZmTW\r\ntdCjLBZcUtizsUGHq94l//XjkiidQjZaqJX5mlHM3c51+/LMIraeakaYj2Fp\r\nlhFLJ+9mBsZFVYygUgh+7fU3nAF+av17Pk0M2eeZElXTqyo0F3DNryEq5vv+\r\nq1zwmZ/xy9bNISS9yP75Trbp5fI0JywaUvpxAj4BNEQSxlZSqcK2+aM8kZ8u\r\ne1EBr+eYE8sGiDUFP9Cy7Ci+vSRKSpcYV3/jnIk1MEZL4W9xQBnFTjLVjFvf\r\n9YocyUBD/JBP/r6WAgpqjcNTuYXY/2bvIKM=\r\n=4wph\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"5db1bd7747bde68bc956d054f2e939e62c78df6e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.9f53d4a8a.0","@material/theme":"15.0.0-canary.9f53d4a8a.0","@material/feature-targeting":"15.0.0-canary.9f53d4a8a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.9f53d4a8a.0_1653317848776_0.3603807464696087","host":"s3://npm-registry-packages"}},"15.0.0-canary.77cf00e37.0":{"name":"@material/shape","version":"15.0.0-canary.77cf00e37.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.77cf00e37.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c73c5bfb19f9a6de0ea8f25125ae23e1d66a35a7","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.77cf00e37.0.tgz","fileCount":14,"integrity":"sha512-hOl8GnQc20+sd5jBS+dlYOazoVUnH90Q37wHO92I7mlKM7oG7jhOGDTPkNMw8ccazHW6Y52TZ4dpkzRI3C8mIg==","signatures":[{"sig":"MEUCIGlRIWP3fSwQUFjCVcEFZLxy0Qj0ZKRVU4Ofiyjc66hLAiEAyUFLsGVuvi3c6gmdDd7k4pHzRo0N/05Wp8BekrZ7lJo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJillLZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoqwg/9GO73vy9vmrX0OmkoDgSVvgpELi2uYgXh7UsiXu8O80ZTL+8M\r\n0AAUSFcaUTpo/G7XkyH+RmhqGagKSnE+PNeCQRxYJWCuh00UMKUOWH6Wj9/8\r\n3Wi9IY59OF2YapYhyk7y00L2GmveoN1csiXv0WER5sjtdR8Nf/C6WdHGCR3v\r\nCDkZx4DGoSQvns8NOFQuBsEkLEfwzF3qyrqqDaFRj980r2mBvAuLHD8GxIMi\r\nLcmjYmrGbbU70+tNwp/uU8xL+ukl1wyXNeUnmgGGMgmnVlag+QU0oi4jzxSq\r\n3ZiuX5Qmm6pUgZNtf1zFCvxvoeMNdONno+YNBf6pNXvFqVQH1KtOpfbDT2nB\r\nTSgiOW5Uo9OFs3Ux+QwFRLGxZGD4e8Icah8lskwmCdggsZmBJYP16nBYriSy\r\nLc5bxxTkTk1sE339B9/rrL2y4Cr1NMesoDUhjeKxlHJZt8T4FUjzGz92RUdH\r\nM91FEVkDFQ449xsAawmprCZXX9RzOuMf8pUUVbzyALbrObimhi2ktMacj6lo\r\nWUTMTKr0nSbgr7tpY9g55PW4wN4kxuc0WH9UcYA5LJNXSMyopjjeoLj2Aofu\r\nr4xsUku1dugLjhyKiGuw/gku49V7pQ7ju7Qsg+SMaZrsui/qWD+JLbevcdiy\r\ng6sYpH0LrOqzN6fKPwAFkYa+03pDCkp7h1I=\r\n=MyxN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"1a68e64a5e78b8bdc529142c18c028aaf1b15b9d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.77cf00e37.0","@material/theme":"15.0.0-canary.77cf00e37.0","@material/feature-targeting":"15.0.0-canary.77cf00e37.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.77cf00e37.0_1654018776765_0.681529960616827","host":"s3://npm-registry-packages"}},"15.0.0-canary.3c7b844c2.0":{"name":"@material/shape","version":"15.0.0-canary.3c7b844c2.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.3c7b844c2.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a67c0bc350e8caa736c4db6f56766eee86f0de28","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.3c7b844c2.0.tgz","fileCount":14,"integrity":"sha512-jGgNIa7aMBIkfP1dos6+W37Q4B9WJRr259DeGwA+TI2bX3AuZkgTkxueZoTwNfvkFf7nffnGaYUUvi6tY60CPQ==","signatures":[{"sig":"MEUCIQCySJ4C66hzRCFJ/m/wPI7DwenDkJwFgvTOFYP++wIVBgIgA0wMKeAgauZavZLvEJ7DvuJE0wClFNtIoIuhb0yrfD0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJin886ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqj6hAAh21IvNnDOn3crrVRCWB2rtJWP/2No0U+ClLTYJZXS+tPpXfs\r\noW7bg7LJtVnvFuoqu33iIzGl5O5DQT2g8xQOaMA64yLkWFven1oTyUi31T8l\r\nLA4JQA6XC0oi4UBkrk7M9Q/Zs32UN0/QZ1kGnzsQrF/FCEnGRs6tB+xr1Phn\r\n1xrj8q0eO9NNyXKjX+lamG2ZahMBDwm+4STFMQSaeJ3g7wpGivsKXUU94gzq\r\nLE1xiXIC8xPccHLkS/psBgo7S9xwVwPYwf57juCC7i/x+q4SXXgP5oACZGIG\r\nTv56qL798J+RhTgmwmbzXCKJKkgPYa4gTUz57UyqToHG6Fk9s2fHsljQccQG\r\nAc62GbfCAHhWEIVwqRx+DjaZelJHezf/uOmcyzCl7B904KwixYD9eI++vCJy\r\n3kzIV0unFbc2JPPYvi6JajUglqT+Rn8rLK99XyhzCCYVnKkMLVw441LE1Dnv\r\nXcGYjQ2PAAxmAqxAKwQhfzWMd0d4xbdG9hod3DwdYb8sweN2Ye+BMaK4Ve6o\r\nyxjgz5yVCOM/fUj+WbGkxO6EOg9hVeS+Kmil1uQ17tMX5lkGm7SFrfPNLaEO\r\nnx5M0o8u55RBprlJHXi3gABipwjgBEZY3yYT3RZGJxdq+0y7PBe5xsjMxYNp\r\nEUJXxmZbozCgn11ATasfgtzZv0eO+YmxmWA=\r\n=inD4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"e9422b2e6573001fae4c8aeb7cc75741000e0034","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.3c7b844c2.0","@material/theme":"15.0.0-canary.3c7b844c2.0","@material/feature-targeting":"15.0.0-canary.3c7b844c2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.3c7b844c2.0_1654640442667_0.6503447031694485","host":"s3://npm-registry-packages"}},"15.0.0-canary.df47894db.0":{"name":"@material/shape","version":"15.0.0-canary.df47894db.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.df47894db.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"052f567f8bb1ce63564a985bb218bc780fb6c9a8","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.df47894db.0.tgz","fileCount":14,"integrity":"sha512-205/ODBhJJSN5Pdf67XpgmAxK3FxAI7DSa5kPW+YCd4G6elI6bPJ1UcabPPHoNMrGn41mvNnWVcG97mDg19PZA==","signatures":[{"sig":"MEUCIQCu3pchYhs/T2SQ+qfXmN1DFw45kvZntq8tYpLCeoTIoAIgdYe/p7ccO8GrZ9mr1l5Z1fsmMaVApYoxT0Ln6HejmYk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJip28LACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrTFw/8Dkku29je6AXUVpiS6QDnE4Ep4062hA5mlg3eD6znU4N5+fGk\r\nhEOXoQkxJxOyJv3ktGoGzAJhgshYf+2KYxdfmphWGiqbC4xrG1dXZF8fqwnt\r\nwYS5brRqtCwXh8A/C6aLQwR+VeANL4MfS1Ntv22N7NRnhl1MKCAo+Af3QmGV\r\nBrwSqHSpfpb6N4995KMjOvldSaVeSnD1HO8XtPMjjqbfpnYouh+oQ0dYRNNX\r\nw8z1RzPv15a87AOCmFypswkR+EfVc9JASuJHUYv4fAHRjNdVY2pn3HvnIXCo\r\nfNvc48v05YgZhvLKsU7DqLhYr2DGs7HYGlStmHSllubWblR976nRVIwCPawJ\r\nXp/TSeDl72EnPtFPgyNgvT2YmcLb1WM4z7LN6pPrEvnNflFwrC0bLsGeY5oe\r\nMYMm1ORGXhWz8yvV/cE8537hHY9R4rAyl1usyXgkAjDrvinpJjnddpA07tGk\r\nnAVfgIdZaZY8FL5V9n27Eogwcv+p4FJAB9B1Jot4Nc/F2E/eINcMCxXuHelP\r\nFCPUl6xd0MuHfKEsQxpppcsdL2WENz7trbmeXMbxXUvLQ5b0Mfxt2fuJFv4n\r\nmkQEqZG4pDmnTPzCa6EBY1caDdI06OpozWCGRRGPtwGaf+LZuvoFVZHyRWj6\r\nhtw4QXo6C+V6DugUs8xoNBwpqET6g8kxctY=\r\n=887/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"42be62e51a7c150444c5b32b2d2acee03d09e6f3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.df47894db.0","@material/theme":"15.0.0-canary.df47894db.0","@material/feature-targeting":"15.0.0-canary.df47894db.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.df47894db.0_1655140107069_0.3986974376453065","host":"s3://npm-registry-packages"}},"15.0.0-canary.b18a873dc.0":{"name":"@material/shape","version":"15.0.0-canary.b18a873dc.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.b18a873dc.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"22b126d3b14f9b73bfd9c2d7166b616404c81e90","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.b18a873dc.0.tgz","fileCount":14,"integrity":"sha512-lGFkCyP6rkxNeABD3lPXvVAu05C8Mf0KuNLCBliE+i2iDx57UGVovUlM2mMMr9krd7I0e2o0PCf/tmoRuH53hg==","signatures":[{"sig":"MEQCIEIJdPc90njhMeM7z5LJYo3EIQ+omSvZAKHhz5o0Q+FEAiASH367nFEVm8SXDv5HX0pxvgYpIqDKZVd14Rm7Bt1t7g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiqCrVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrFiA//bxDw3OhtBXb599eIcE5XCsvRwDoBXZk30zIY863elMWEMXlJ\r\ny9T9I+gwuRVVZ2evYN3IrGU0sqJULd8GDSVlYj8xkggnXzINuyEyUP3s7H36\r\n6YmVJKPpzobKcGG2EjZRlbV6Ig2RCOi9vKfJaWkLboSBSTHFdy2vWrYBS9I9\r\n/sn5g9jwaW+Xu7wN0jASNNoVCWBehVLS51wcyF1MCJiMOzXcjk2R/7wF/dFC\r\n+ThU3VJbfVD1am+oFChWLtkiR1AIgpMlobMcNOSI7ZKNyKofIlafBfe87TTY\r\ns+AeBpUGngsKY58CHvN3fb7uAsom3TOgH6h0HIsv9YORF6nUolxXP/3F4DPt\r\nSbA6+Hjto3zM+dI+4KmYcoZprgVKKmvnuwoDAMegKXQB2TVA1roDYCDIv3IC\r\nW2jWvwx8Iaume2myJpFedIodYiJ76SOMPF8ZCBMo7D8GIuBvhtwvGSzxewB1\r\n84xSB/1MAggoCrV1DyHnXlBrfS7fmByBe0PrOHGGeW0lmgk7nNrLQHhlNb5Q\r\ni4tmsKapP94DGAP17vSVqvuVYJ855ieANvadOtxb7K6yeOFNxhWsozyr6uyJ\r\nGROf6ylWya6qV7+Ju2YVKclX8LDAzQkZKA9xvQnoUoLZK+c0EjiBkN/vHO8z\r\nY+qk86f+IXcrBMD/NaRdYbGwQDbetnCczmI=\r\n=c/xL\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"b35dadfc99a3788643d8762f8afda3f2d6e76d5d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.b18a873dc.0","@material/theme":"15.0.0-canary.b18a873dc.0","@material/feature-targeting":"15.0.0-canary.b18a873dc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.b18a873dc.0_1655188180807_0.25541919847779115","host":"s3://npm-registry-packages"}},"15.0.0-canary.ba9c29637.0":{"name":"@material/shape","version":"15.0.0-canary.ba9c29637.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.ba9c29637.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5146979694d9326c9156228dedf671184c6ef8c8","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.ba9c29637.0.tgz","fileCount":14,"integrity":"sha512-UHWdBiDWuvyFrruzQipQ4VZbfISbsnvaH1SAlWKurMq0dCLr4fw3rP4HLu2kkhFOYBnjfBx8mzJ9DqwKtZaGsQ==","signatures":[{"sig":"MEQCIDEGudqLuFNtS1ie0cj4g5BTuwO3K7QzegdRFqgp6mHmAiAZG5shriPxhhqIBYXdb4GXCscaLU4WWByQZF1icJGyrA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiqNoPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoYkQ/+L/FbuX/uIdeudLVhG0z2r2V4wEDUovbPTeurFSuLy4NO77lx\r\nKnIB0dkmdsgujOHP29fXBRXbI8AGNnNY5LjowMax+VQ6Ku4vtBPUlpACMKof\r\nsaLZ9D9S88BsQBj0DWqbReZ3iqRuzh1VnWmaUp3cfPZsh9evWl/IgIXekHQt\r\n9iWN7EphM8Rt8Dx7pr9q7gDJ9qyv/gISklmbwX09/3tfXUGppD1MLVLaD/e5\r\nSd2n9Y2mStybmuD7SkBbuvlxkkG2F2XuMB/j4mU9XfVY3tmLp5Rp32r39RuH\r\nFxguej4srZiGlpca2oHudtJYiq1BTDGVfpN2gfPOyPVKf7rs3cG/8FgtUt/Y\r\nj7tNEPottrdMgvwakXtgyrZlZ2Tjx0DK/1PES6kI7SOGXcjVa+Cq5DgPVOw2\r\nPcYXPMpbrexogx11lWA3jGL0CcHO9cBw/Such4+Lxoj6GkvvhlZyZORZTg+W\r\nUgit4xvhiOxNEUosM9aqDV/0B6hEkdBg6IO6dJXiodw2tLGyoaQZc+KUB7O2\r\ncoeePzBQOttV8GiSIfxsf4jUAg3wE3KVQOVPCJ2YfbFMSEK6v0DUqskkkHI3\r\n1Azc45/tksocAlENcDfVKncaWGAlU12CTQKJ2N47jC0yOcbVFnrGCo5ZrjJ1\r\njTuuzM0fx15a7ln1Znl18X+c6pkhZchvcY4=\r\n=vfBr\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"2bf89a291dc4aecd82cf7a6432d198374cfea69f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.ba9c29637.0","@material/theme":"15.0.0-canary.ba9c29637.0","@material/feature-targeting":"15.0.0-canary.ba9c29637.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.ba9c29637.0_1655233039326_0.5190918335854449","host":"s3://npm-registry-packages"}},"15.0.0-canary.9bfd12f01.0":{"name":"@material/shape","version":"15.0.0-canary.9bfd12f01.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.9bfd12f01.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"44ea374396c8805a5987fcb857dd4d2d1ce8277e","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.9bfd12f01.0.tgz","fileCount":14,"integrity":"sha512-i9n2XzGa1QDqDTHjlxHba2GQl2WcNcmLmmXGriSEnDnneOdp5Fme97THYDwagctKqb01LYbeWDfSH8qF2C9png==","signatures":[{"sig":"MEUCIQDGOKNH5Heoh55Wp72fOiyPobPP+YwX7NOE9GDgL1oEbQIgTxik9iuaguzqjsW9a7B7H9md8QLnaVnGXA+fZht/qCU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJis2vzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpVrBAAkVq5cJydPwVKlS5XjMUayGhN76Dudj0OXP1ozBwn1Ehn+tD2\r\n5zQFkGqCqpphJysaswuX/rwheMYabLDxZd4T1wN7cjcFQGKL/RGPwRKIpRqw\r\ndrOdQYidr5atVtj6D0jo54B+OcItK8XisyflZkdE0MDpNK+f6tIi0si5dqpS\r\nGbdqYjiNQlN5NwtipDL4QRDBQBdP92F8EB7TpEApm9BbI5wM21m+KAd7hqtl\r\nNBVhWiFy8ce1KPQyBrPwIZuZsGAG54iAJf0W7KmpyfkbXlTlF1I+e2lAoJQf\r\nH+u4p+cyoysbzX7w2Lo0RdRZFZBTYqRIyQMVz+j7UVQUIpZxj1HPMehTzHA1\r\n1oGXyLTdC8OSmX3Ih4jbqvHATZRjeMIayUmds4hkfQSrTtTgojlBrZDqBJGA\r\nztnEyUNyOzMqoDwd4/TLdaPB/2EWvtFY/uCCpocceR7RGX2Xg/qKa4Jv4+3j\r\nVFQB/EAyFBziUher3s8u9Yi2jzQibIZfsH61D4SZG/Oc2DiSIaXMxzBTwMhY\r\n04/VGzQz/Hf8+/+f4DCfQyLvARTdK1q7TDZ+gC5kNkmvANFx4dVJAj0pN0bZ\r\nDY0AqvlgDd1MenSkMk+T2mtvK2jen+sILeQwyfQx68P82kPtEtQrFAcMBwYh\r\nUeQIXcndnRBSLqMWWthyk9JxvwL/PiAS49Q=\r\n=Vo+O\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"ba7b0d01530df70f39142820ab69babfc9cf5b8e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.9bfd12f01.0","@material/theme":"15.0.0-canary.9bfd12f01.0","@material/feature-targeting":"15.0.0-canary.9bfd12f01.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.9bfd12f01.0_1655925747694_0.31277488459923486","host":"s3://npm-registry-packages"}},"15.0.0-canary.764de225d.0":{"name":"@material/shape","version":"15.0.0-canary.764de225d.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.764de225d.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a0fa8b2e6a00728add09112015ad6d296b1b11ce","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.764de225d.0.tgz","fileCount":14,"integrity":"sha512-KBv1fERS7PMZbFcKBxou4k4a3QOaoFsNjSNCOntE2ySJDlqA6OaSWPOFttF9El93xzMEhNVlJ1+Cy5tc7qXYqA==","signatures":[{"sig":"MEYCIQCD964nxCBjgVNGwfMXBkbdq6XK9LSmXfD/Xf+7V+1vfgIhAM5gN1qHEVv4rsjhGokcsXHWR/BRbd2/YGt5XXTlmPyP","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJivH1TACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoXFA//apf49x+Nv/ojOWeGinedQliZqqP7kRbOuAIqfDnbX/MayUd9\r\nWjp7Ge+/ZxErSyKB4bmIKcLA/MEPJWzwVJNNE50AuYT3zR5F9CnqcIXgTQIP\r\nMhjaWpysScCQjvzVpoTPZfFx4KBcSZ2HPXR84knzfDEeU3pVtyHyjVAM83KK\r\nkQ0v9ttT4o9m77MfeZlsAZ28yZ6p/X+5BT5kaWUA7Akr0HFS46T7cFSm1FsB\r\ny7Y7WNNQI9VXaOrEvJHrCc5Re7WW4cwdMoGGEOZZfP9f6SnXgVJvfX9xvW3S\r\nIvnEe65zmpQq+dWrgaCQbDVKRNy02Qvb3hDwV8PAaJeADlxFPUywPrAMzhc5\r\n3qyYs60kggnQVHBJsX6ocFMb4d8ukykIxX4iug6CrYAHD9qS/WTQB0KP2n+N\r\nr1Xu2y4fMa0TMflDgz7IGT80MK+N/afEvk60NXaDwRU0VaMP1DbRBXHweI0B\r\nv2Ad6qi21CVOJMEMYEe+HigpmzFYxpCHw2SUducHLN/uiw+LhM+9bUm1Zcgn\r\nsvNYq7xAveiiU27J9myk0ffZFXXmu6d7OQEi5EgElPzz/sZwRaQQZRGpB2GY\r\nJiOqGlwMJSr3MbfY9gF/mSGb3vPQyBdY9XAHpk3+KWA0tf1vVWq8xBN4ZHt6\r\nf1QcUxDp9+COVxWYF75OVXDr/0wnMPqYUcY=\r\n=yMqH\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"25c0f0a7c9d8dcedfb35f64d0851fc4fb86b8534","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.764de225d.0","@material/theme":"15.0.0-canary.764de225d.0","@material/feature-targeting":"15.0.0-canary.764de225d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.764de225d.0_1656520019027_0.4422635301939346","host":"s3://npm-registry-packages"}},"15.0.0-canary.31e517cea.0":{"name":"@material/shape","version":"15.0.0-canary.31e517cea.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.31e517cea.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9e6c4c70616fb780d4266fcd1111242b098095ae","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.31e517cea.0.tgz","fileCount":14,"integrity":"sha512-TJlZDs8Jz7wRgF6KTcyvtDnIXmpze2KLqmEvt56ztv/Aqq4xcWm8/YDh56e0/BE2OjOzSqJ1pn1F06Cm5cdP1g==","signatures":[{"sig":"MEUCIHvSWWXohaXLas1Y0IUDS+Z+b3ihmL6yxnd2LUhhtKW5AiEA/OOyry3xpLtTBOCivcORkN4oLQWT+d6OTNSkEupDXNk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJivzzDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqqMBAAkTxGRKL2jDVwNqHcMz+BWbHpLzS7pRX7rdRnR6ptdloOWBkC\r\nSQBXBBm3nE+6yrBAOFDEVBw6ZmAG0GF04DdNC8ixyzR0MdHsvgssHxlmiLot\r\nsYT4JeT74IxuccbF0UtFXLX+I5lBlnaFOj5F6/XRWt2CvoltJYM1334zDAZR\r\nUwELCI/7OG+gqsX1zR+200jTBV1JJiv7LQGRFxje98e658esGTSuAh0AqqqJ\r\n3/+HDg3kMvVYcuHvjOwUbFyIsuN+bJ9r46k4lv+6meZwwKLBIomQECZsYoTK\r\nwOxoek7oFBwPWlAcBQ25DD/tL2uKKqzHjCrrUGApyKMYI8Qge8yCxoP1HhRZ\r\nheSt0gu0M9ETb+xF3+viuteIEkyiOgSyzvMkMraD4hWNYnmeLZoX4F6On2Hj\r\n/htYfuiQk89yTHE7ZIDaKz51nCkby3c2K/YzeqjJ1Gu3JmNkQBH8q5jxKc09\r\nM5Kb6+x4jf/cw+GiZVjlOC3ls493lGyDKdxZPrDWvZo2bYsYzos9U/coIZa4\r\nzs99+V5UpL90U6AzUlFbB/lIH4pA7AyT6h4jsVyjc4XGgQlmqjk1Ra4rScWE\r\n61vabHpPO+pgB1/h/S2pCaci3cQhLGg6UELgqaziinKX7OrcfsMtvMuhnC7v\r\n1K0rQMirAk8Nf6g9Mp2R+8lQi7WXu/owX8k=\r\n=2iOI\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"8af6d916fdf79ba9e33a883ad56f539f3decd5a4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.31e517cea.0","@material/theme":"15.0.0-canary.31e517cea.0","@material/feature-targeting":"15.0.0-canary.31e517cea.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.31e517cea.0_1656700099787_0.3259821288893654","host":"s3://npm-registry-packages"}},"15.0.0-canary.9ea4e8e9c.0":{"name":"@material/shape","version":"15.0.0-canary.9ea4e8e9c.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.9ea4e8e9c.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f945106999e431b01da44355342f648760257a3f","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.9ea4e8e9c.0.tgz","fileCount":14,"integrity":"sha512-hMNfKnVI7pl5rpHI4eLEItMqFNmPcB3tpLNKphr5FxoL/MV0AXG9pfO2DktHdupevxjlmu+iEPSS1Tygf5uo5g==","signatures":[{"sig":"MEQCIFvhTPyDBTn8wcfCZBcQyFeOdnW4R0XtJg5fhBbOlsN0AiAwH7mQs40mKFr30kCLwOzr8T39DM5c2Rc/gvtaJNW/8A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiv3s/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmojow//WtmIVyR3AB/HmxLbtp7endKKerd4d03qTqp2OXUXjOXQCRxU\r\nVFPW6aUL576VKsdEcrIZgbLkvAL2On8mdsr++cH/FQ9tfneKoNeIKdC+Z5no\r\nev+Y7VvBAN7QjO22bViGMavlr3I/JtTQ8l0SO025TPas+ajUS+4+mLTIHe6u\r\nioTRENxnb2QkZd4HwYopJQ8cOR/4GQOWBr9wi5eLDP3pcY2B/ESgfAuW+i1u\r\n8S2ZJPwi4pVL4X3jQkL+nnrsVnn8zn33s+o29GNB5oJjYMentfabs7tjAoJp\r\n8sX3YsHzx2ajV4beqKZWEZF0/mFWxUHh6RLang46xudORQqwgdDQyUg0E680\r\nTp/PvdcNjHhQJJj/G+lcCfWsh52QwRZJJMFdzpQTpzy7xgNW56MCa1aadZds\r\nl/g6pZjcGeoTHkVRHZkvcLgHzXck8MP7QeEW0WuxuUH5LLidjx+owEo2fj+2\r\nTCixoeSQBI9TfUolCvxPHSSu2tuROOrQrJbObDZcQaJPzsm5KD8RFZ409e58\r\n79iWjsEds0BJRawsI+PYgjpdUH0zIIRzmLdkV9a9eVRG0sltHCdNdENO0tn8\r\nHnaF88CZipv60WwZJnwXrgZWvZFIERKwpYFZ5zW0kmy62giVeKtMzDkkTMe1\r\nwVUsTRdwtoaz+gUgoum7HGZXyp6F5Zr+wcc=\r\n=F/SI\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"7a2b791f6f1e376a53ceef81767514ec18174558","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.9ea4e8e9c.0","@material/theme":"15.0.0-canary.9ea4e8e9c.0","@material/feature-targeting":"15.0.0-canary.9ea4e8e9c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.9ea4e8e9c.0_1656716094862_0.8041646371005644","host":"s3://npm-registry-packages"}},"15.0.0-canary.cd5bafabb.0":{"name":"@material/shape","version":"15.0.0-canary.cd5bafabb.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.cd5bafabb.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2cb1471f04f2acba68234391185f3a7f00e52504","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.cd5bafabb.0.tgz","fileCount":14,"integrity":"sha512-yV49AH0+v653y1rXO5HtLEd71fmHqHxxFpQS9WvDtzoaaNAAnsqxNsIJeg9IMPh1uQkVw8Te2/J/GBBPljvKkw==","signatures":[{"sig":"MEQCICYUkPgFmMvA+PES8sr//UokrCZ9hJiKbBJh9C9JRdOVAiALh9BTpbgihDJ02AYWeJFoen7M4wURofB9VrBCoK41ig==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixcxLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq1WA/+NEm0j1oXrQeVkGkcWC8Gi1fM56eTMfQMEjDbRHR2lRzkTAhX\r\nUecbntN4Xe1crDvXPQOBXDAbuLQpu6vTh1l0gn3DECu5iWxvkZr9q6yIUAdp\r\nW22QkZvenoZtv/6OdDQUe60ZydSt5MqupAUxsTGVLeRz/KIRBGyjdjeCAu7o\r\nn+5MOuTrxHGD11jUGFiFvS4N4YKAW45+NbrTuO0ZcoKrr8dqxPruZZAt+TvQ\r\nl6e0aci8utWrO7DF5BQf06sn8Gg8KK/b4IrKvD/AYztinZYNYydS0Ypdzs3B\r\nYrMOHRuDQA12Ox+f+i+xDKSSnyM5PP4qSe/3RtJeOwh7tlDTB5p9Lzd8csYO\r\nrx5mRJsuqT+UT/Nz8uf+x6Dx6oEkKj3Jhytk4ReT2GTPBuXPytt3Bw8/v1sH\r\ncCTgj6437B0chyAG31qCAaq2aNS0nd04RH5cl7hHETyw48MODyXa9asIbzIA\r\nK48E5HoblnpagO38+M4wWGu8BWlvp0lvybxzcVEplmFsDlWxuH+WB+Yf4IFv\r\nL/SLQBUaXxLQ5ff6xRdenuXwGhpLNAdZHlR2I6z+3Uu0hDoQxA4RdM4tT8LX\r\n7YGuIwzvnJDqztqk4S3r8ALS3ukZzuosH1X4spUL+2dXk/cyVOL5w8lmppJE\r\nVqYDZX6su01m2ZFuR6wSGl8NIInXVXnjJcg=\r\n=6R8d\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"fceb62aaa361c04ae0a30158d529c7e6896b6f9a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.cd5bafabb.0","@material/theme":"15.0.0-canary.cd5bafabb.0","@material/feature-targeting":"15.0.0-canary.cd5bafabb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.cd5bafabb.0_1657130059218_0.5880009449766492","host":"s3://npm-registry-packages"}},"15.0.0-canary.a02fe49d3.0":{"name":"@material/shape","version":"15.0.0-canary.a02fe49d3.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.a02fe49d3.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1b15c19d4113eeac220d21ad1820e7ea6800e204","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.a02fe49d3.0.tgz","fileCount":14,"integrity":"sha512-wsa9mUD3l4IXSObipcasERcYSwI4bnnsYwdhaAR4HfFgdG0KCHeUlHQtdKgr6CmrR4VSiDXhwQTBBYjr3AiumA==","signatures":[{"sig":"MEYCIQDM86CbX/WD5IaGWgw+gmzqgi/rkV60tBcGgUhXSeOq4wIhAJ5xUfh/DtIX3us7Vo22FmxwQg4efTudtRoivPWLsy3d","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixdmUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo30Q//QHKXgjvEgY8PVWfIJ/ruGjN8encElB3qP6KDMbNrCBoobzqI\r\nuISMep2UYnBlbtWtMtzqg6kS5A1TRV50e16tA/94JdivUaotMEYqfRTDKYt2\r\nozRQVGkShQlpXwRRcb4JlGRBeEVuCBofrM5KZYA6C9LDQoNnLCDYoH1L5Klt\r\nb+Fsawpdc9MRRcZG6Clj7ScehItQXH3SCf/9DEAo7JOZkstm2ggkYFjALYG9\r\nR4zBffavlejKDbl2fyiNbcM81/RUcqJNMEN998c2oWU52oVoqUupxv/zIdS0\r\nk/5AakjvFnd7DizqTTYMrE30vsVpNhYUOy6CqndIA+JABJf52gECiAc/766U\r\nBdn1BJBMvhoAq763KRIlsRZIUTwKy3UGyh8pdFv9+9ELKoEmauHK4i3hV8yV\r\nAwHEV7a0mIwYYvapJlxSPJLGOkUzev2DAFdL9ocQ98t4PLCOoCui0SMEglBa\r\nOoqt8eUW4lsgkrAjgdNjdrcRgUo0ZTkylk4swOwiRh9qZf/D/cISfWY9m2Db\r\n8jgY2s6n0CCnK7Mx/GHvN9tSvH984wcq0OdXcKKFw3sgszUSeDwm/xHBaDRa\r\nobBvKpFc+v77usuKc1s90sPEqd11e3cyA2zyf+/fuYE+Z0w//Za/3KK3dXCv\r\nWGF0vcBMFLYSaWkeV/wRyEzB76Rz6x/MLxE=\r\n=8t3j\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"8304e794f430681d03b9d2d3193e635a072f2d8a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.a02fe49d3.0","@material/theme":"15.0.0-canary.a02fe49d3.0","@material/feature-targeting":"15.0.0-canary.a02fe49d3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.a02fe49d3.0_1657133460199_0.1735194094710395","host":"s3://npm-registry-packages"}},"15.0.0-canary.826a3d8be.0":{"name":"@material/shape","version":"15.0.0-canary.826a3d8be.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.826a3d8be.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6e4bd490aa5c46eed2572e8a498a7f274dcb5997","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.826a3d8be.0.tgz","fileCount":14,"integrity":"sha512-SjGPt/VSUbycHcwLH7cpi1SBcczko6lBziVItiJyT4FKFS+rbFqRRE7vkeKVCherZSw6DUH7V8xkIP/drBJVhA==","signatures":[{"sig":"MEUCIQC/h+CHGoRqtbK1gfmAe3lGDoZJjYkgf0aA1OOzeuvcwAIgL0g5Hx54yxjG7woQT1Lg4hipV+0tCv7IHw7LQKQmSaY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixeLyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpK4Q//bwHCC8Xiy60SSmtg4UjDSgoOgvCNSzuhbVwLRjBbHeyj4vo3\r\ndYxzxMUxYa38samwLptKFsYefj3MWckeD2iNC5/lc78bF9oqhV2bQdfJasJf\r\nM2/l8moIqJbxhlmSIEJQbFceDt7rqc7RdEnOjRNcNjif+2urMZmsOxzIz1J8\r\n7m4M14kfkGufZXfEN0buYzo2zAk0LQy8gM89sBaN5FAD37oL2OMFSHK4wbkN\r\n5Q00dRtUTldTOzsv8Iw86fgK7E4pNktwig0Os/qyB35XMD1ziw2smBUc322R\r\nVrjFZB39LVFegYesHvW/XkNJ4EIaTVMN2p7Q45ojEIPcuL2/jnfLvCTqkWaV\r\n10uD0nuqTo2bjpd3r2i4GtyTiKM9fGjdz8wlxWoYacBX7kyNKYnNHVGh58sh\r\nwOSfzs1xSilDz9jBNec+WSpd6PTdU3VxdhGaf0aHlGYbZ62InvuxdQzoo1/W\r\ng326V7v56rFJMOI8qwq0E0f+lXH2Qts2+WE30af83cJ3KMDfAEBnHs7tzLd9\r\nNBp08MwigPqkhH5jYtcijSDkK3w7FgxyKT1ERObybfUSBfZ7gYmREjFI+kQ1\r\nPG+oPNzNtU6Re1hWfcVJTVNQwXYi5GOxsBxSf4FD/MkpNYHDaCBTulGtWKEW\r\n/ZEJCvu9fooKGoQ+sVOz5pWnhc+OkaxQcWc=\r\n=Jj0+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"f54c723431e97d10fc1886f271ed251cb10209ce","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.826a3d8be.0","@material/theme":"15.0.0-canary.826a3d8be.0","@material/feature-targeting":"15.0.0-canary.826a3d8be.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.826a3d8be.0_1657135858547_0.5172752581245161","host":"s3://npm-registry-packages"}},"15.0.0-canary.ef276aa93.0":{"name":"@material/shape","version":"15.0.0-canary.ef276aa93.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.ef276aa93.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1b547a2ec2def06c28b25016f0e4e66232c7315a","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.ef276aa93.0.tgz","fileCount":14,"integrity":"sha512-H9heZ5xz93bl6z1IOdjjS4Zy5xU7ooZwBFTGI/14ru4yXissVeocuO4RYscb7Ftwmu4/TSNQf/08MQLMu3Ic+Q==","signatures":[{"sig":"MEYCIQC4dHMgFtMwkrJ4Qq8F+V1PdISMgVLZmdPy0zL/erlzjwIhAINse+4S2jSQXEg/dgNMl9NbrHbZZ9vnzYJu6XO1+OJF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixxGqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoVDQ//f+DIlEWlcVKHJFLKUD7dWD7KUcNumSb3JCKqtsP6BC+NIZJh\r\nqA5c5ljFEXJ1R4x8+LX3A7W93GN3wHspZK9dFOzcLu1POFgiQF7RwAqrf0FQ\r\nIsgNSw6PPm7Xf6e67fvfB/OovgBtVbMfC8o88BwF4Wvg4qdBQomesey6Te9V\r\nPS7LTuBdnbqLK1tC5sZ4hYpV0h1w4V2AwEe094JUR8XrgVDi+1KUIlpm/vaR\r\nDSC0zIv4yBYpDGt3t6+579U3uo7WymaURWDyiv2VHRZlOqDXXNHtQ5a1Fviq\r\nkh3O7F0/PHbEtbCEsIeHg6/5I2aCP3OZW5Q8fbcd8oSLyP4saWayJVKI1sSR\r\n97amYogxfn3/VKL4oWpdoZOE8zaFQKmIZC4crQEbadKiDUlTi5sTOBUvD9I4\r\naV3jbUgKUJDvBOOBEc1Q1HKjTB7SXekMbeIHIV92ivgHXwJWNV6bm8jqbobQ\r\n0D5RnrbuA6dCcGNLx5CpTalIVGedY1Iqc4HoWmw0rHIzhhSZ/Na1k2d+o6Gg\r\nY3ZEyiqyerX0WYb0gBx9JzU0B9mRQFljx9btETiD2CCdiDetcRxrntZj599F\r\nFKGdjKzV1+iPBdFgW+SFKq1wLacOJellPh3YP/HHawekAyCIb0fDimTNaa/m\r\nR5cSqVNXajfMCPFw2zEbFYNOkgI/HybjrEo=\r\n=8iRA\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"502fb9536e29ea5887a9fac4aaf0c9dc2c732e61","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.ef276aa93.0","@material/theme":"15.0.0-canary.ef276aa93.0","@material/feature-targeting":"15.0.0-canary.ef276aa93.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.ef276aa93.0_1657213354257_0.866961993740283","host":"s3://npm-registry-packages"}},"15.0.0-canary.59cf61d6b.0":{"name":"@material/shape","version":"15.0.0-canary.59cf61d6b.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.59cf61d6b.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d198a30bf0fd7f6ec7f269197450214343e8329f","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.59cf61d6b.0.tgz","fileCount":14,"integrity":"sha512-kA4kJ7jyvjnYrLr3SJ8CjE7Ly9LBCSUrh5mqKHSe1H/uR5cBd+iYqQYtYlLQEC2iSxJB4tKWp8EjGKTL720ZhA==","signatures":[{"sig":"MEUCIE8J9sQmw/MIRqrth9kdeRKNDZHLhl9JVZ3uZaayjncxAiEAyMDCVPm6i3ac9UQ52pf3OeLDyP10q0YE4fZubWxTDG0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixxhoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmropw/+Ptrqio94otno95sqK4+KyO6ZjedyBjI/YGgJ48ukODRcSss/\r\nQ6oiGDH9z26ZX+nM9Rd6nUmhXg/Ne1BA1w8/pRnqWttQk5dnnA0DmVO6fTQg\r\nz5v2F781Vyir5iMOBj3Q/Hf+RGcBUXWV9HtgtfpfK0wfGQWNx3WDYzJHhPoz\r\nKJxKt64Vl1zWhVa50PzosVOuckhjcpssOZHWDA+WPaUS+rLTtwPsSqPrV1g2\r\nrd/oWzzvEileG4gMVUVUlm+oKd1+uBc2E8nDun/1afezbQEkpcmlWQsI+BYc\r\nqItFIXuJQkGlHHPVK0ATyrc/GQXWiYoki6UnjAB2X+pofuxXMlcbBJzaIje6\r\nL1x0e5nmDfS/KJ3Tu2ox6TooNvZGiTZao4ci8pioTtYjFqQhRtJKNPSzBpyz\r\nR746E4uzcDxgsP5a1nOAtsjhpBlifVs5jaWnrCoAjf94kVvGXPF7NermeiOo\r\nhQ4waEoMSEWMTfvrnALHzXLTMx42XJY8ElfP0DL5LszMaGPICgTJ4DTSx1QV\r\nvfb/ROac4g7lUg3MWpnvcKkVXAdW8TtPWGsXqFJADu4RQHqwzlTZKadU84py\r\nzTk6Jlkv908S7QiodTjduvjC01t2gwZWgvX4KEGTpZ+MckAAQq5ObIM+/NME\r\nXN8xfH+UcygO2d6TgeLjH97I5hkH3Ifn0Eo=\r\n=vbsN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"2f27bf33b194929683b4faa9f388325b07b408b4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.59cf61d6b.0","@material/theme":"15.0.0-canary.59cf61d6b.0","@material/feature-targeting":"15.0.0-canary.59cf61d6b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.59cf61d6b.0_1657215080649_0.9149742457890806","host":"s3://npm-registry-packages"}},"15.0.0-canary.8647092f7.0":{"name":"@material/shape","version":"15.0.0-canary.8647092f7.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.8647092f7.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6762331f6b073df30859e65f3b0f706ded9cc3b9","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.8647092f7.0.tgz","fileCount":14,"integrity":"sha512-4f1yR87c7kMHtGH4zLiOj5oScSaTLwGMqwatkDqZL8/Qwfw5G5wTHN55fctfQPkC1S5Ko7stFI0G0XYG1eRrhA==","signatures":[{"sig":"MEQCIBR0RL2Lc4udF9LmiZQQpbjKiInoh1RFteVE+Hr39fg+AiBs54xW/7ybQB3AHgwnBAzxwug58lteBKqGCw/LrZ9pOw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJix0RLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpx3w/+MEsqj0e2gd2cFqMs0FEAdIyR/pWHruNdwkFRW+meO0WbWJi3\r\n8ESQXEXgrIbbgM/M7iNyD4k7oRUKwep4zUkd4bHgBbEEY4Qbt6l2ClRPdWok\r\nZRB6+TsS3EcjBfuZb52SxHP+nv+MDf2+ulhYFJIwrzs3waK17ar6JQLOMX00\r\nrJynNNtuJbVf8+oPvJt5etdsY47HHe3UmjYk649sYfXJCEFGsPiA0LqCXX+Z\r\nJxQi4zbEV52Rf0nDHWMsRDznuHGGmsJsjEw8LSuBneMIT4EvtYtnBJlFFdbK\r\nc9WsYCY3/2p81DYfOYB7G+rOuzhALO1SkuRTIFsru8+8DI1lDAj729jFMGSb\r\nVbU7hnX9TvN1/E3xuJ/znAeOSbow2fhuieKag/RLM6cdUhqfqQrrcCuRhjhC\r\nP8sSKKCrk0NE8W35VV7ESbd69BFpXsvQlUpHD/oVNgGmu9FjpZMAKofJJpBW\r\nJ/Aq4gFzyw4P88Rs4N9HRwSeEIMND7+d1pfzh0MGrPcnsvEAmOuLd4irOWy/\r\nb2E+nJhoFzuCjNcpaJE33jUoghvLAH7LmCYWA1ICLkVC6Pv3IuT3HC7Buksy\r\naUxOKEfaKKjIWK2ifSkngKsX3eublkMNlFo7axCiW2GgxSFZF7EzQ9FnTp9h\r\nBjvrCWYkOd8WrZsKx95wuwiTO4fiB3ZhCAE=\r\n=9Pic\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"1edf72197ddaf5b6318f71205888f8ae695e9b29","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.8647092f7.0","@material/theme":"15.0.0-canary.8647092f7.0","@material/feature-targeting":"15.0.0-canary.8647092f7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.8647092f7.0_1657226314938_0.24716267537534553","host":"s3://npm-registry-packages"}},"15.0.0-canary.02ecd4d85.0":{"name":"@material/shape","version":"15.0.0-canary.02ecd4d85.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.02ecd4d85.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"af222e5ce925750cafdeb1936f529b013b0b7a72","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.02ecd4d85.0.tgz","fileCount":14,"integrity":"sha512-9NRKeCeFkgo8JAoqIY73w0vHcF8capQDOWm/kgX0cplH/gHQY0WPDKprlmX3/9sUOBmWiGodTxIUlAm5lo1Efg==","signatures":[{"sig":"MEQCICRUfbaPch+GTtn4Sec2WIRhyRVjzqagf4lp3Ruf0MKwAiBAdpx6kb5S/u6MBoU4tAXWEpdJCsBwPCsG2FDYqd3kpw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJizFIuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpuFRAAj0a+ZvGD83E6GbRDZGHMl0rHgAosqrn1y6bPlpIpeXa4Fb1I\r\nmvBIRpO7woHRxhywXSIN++A8yFYKiHkvwHcvSgqWikl731n5GQIRV+A4/SYq\r\nSKd9SSVJsYCBwihnSs5vtOTxJaUVOFHeZj93nZ36nQXje0w5/ocAON1bdjIV\r\n9S/nqvDswHsYkQhs3oQfiN3rAczjlg6411nZJ2BpfwtsAk6UyEq2nHe+o15F\r\nPQbxctrP4ysZ5sR/RPcSmmz0ibOkKTAs78GD1SjWe7okOXDBdtB9bWtZN4hU\r\nO8MCXcxZVxElOYnGMac9p89LmQq0WftuUkLiiAoBEJYqHpPF7liAIGczf3Lg\r\nC76n1XjUyvBXSv52XUqL6kNKJOo7hsbc3FxOOj/eV00BNwW/9PTfz4k/jpdT\r\npP8CNA1kZf2x3aVg3VD3CcZ9l5UKMzWbI3Wg6LTeyKsSVEYpHod2ILczLwUM\r\nlyv06SzGi/jCIL3Ogi/QksAdf7IdX3mqwfMe5VxSomSkJdwkSEIg8kaolqQE\r\nRWCACdPh9810VuTXBcvTikuZnlFJXbIk6Z/fxQhyIaBYEa/L/WJUrcgNIgpJ\r\nz/0E1nbmgLEu+YMcSE/CbhivoaRCEsL5uypI1ZBzAhxZDUObuoJVhOxgrkmq\r\nbnbIbh+heTBwW9MV7Zs/Ty6kn0amEvJJe/A=\r\n=fdmq\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"e9bd9b1837b6df66731c0fc9da61877874518d2c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.02ecd4d85.0","@material/theme":"15.0.0-canary.02ecd4d85.0","@material/feature-targeting":"15.0.0-canary.02ecd4d85.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.02ecd4d85.0_1657557550416_0.2524906787878658","host":"s3://npm-registry-packages"}},"15.0.0-canary.63d3a146e.0":{"name":"@material/shape","version":"15.0.0-canary.63d3a146e.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.63d3a146e.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5a7bddc9ef54ab1ef459afd4946470bb5faeb7ea","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.63d3a146e.0.tgz","fileCount":14,"integrity":"sha512-7uUTHwm4QgSdrd/HkTd9InbAFkSEkGo+/aoc3xhA8DImJmHU/Ko6boS9iIoRbCQIzrUdkYDrpjlXxukbHZ8G8A==","signatures":[{"sig":"MEYCIQDnUuixfyLonC6veE4P5vevGdR06Z5ojd9iRGlcYGBmzgIhAJFHniy8notjq29gx8xuDQYFyMMbXqo0QjL0u3yKZStc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJizVzaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrTJw//TYGUNqM3216mWPdO5a6SnvDes5SCscB8g0gHGFBk6qEV4Miw\r\nmv9W4HpHzjM2ILVuHgtKLeJuw1M7t40Tpig8UWDgfij8kBHLTEskUOOu03ok\r\n25+vZZ/VSWuiJPi2Z0KNpjnpsBfiafWsOGpRBzDImGQS0I+C/UjMS/cV372h\r\nyKtHWT38wMtkp6cr54o66qyLLElhypHeeMvjJ3ocK+peukRLRWo23dppQUF8\r\nSl8beO6GKiY5B6ZgXDx93/3X3ezFooytRX82gD+PoV1vdMSrFtFowiSA3bnz\r\nJdR4dcgZlnVqVkIGs8v+Ty2qmvFEPRgI9ZeKlDepsbKEaSiFDa2ID7OGSfAx\r\nL/2htHK+vRCPYDtXsO824BSLlpM9DKu8//uWUdaR3qMoAFOn9wbG/yiBFfId\r\nPAB8n90i4/MlqaXY6hlHrbrPwq+p7fRA7uDBKenQ3vlics/P6xfdhJZioRrc\r\neMfYlsV0MIvc4FiKUvzBFNU+9ZlifJyWWd8XkBOBJVwyyMMYawNIPzmbo5aJ\r\n7uQ3vXx6vR8iA5k27qvVYdrtkbgT6C8C2ByhnDVEL9DsukKFCl8h/TLogCrj\r\nDtUN4F4zB3g6YYpwgNiHcgn4grJWKGneFpMN4BpUW50zLRVdpEOmUiRKytKi\r\nhhC+aM6fNWCtLQ1zZnOeV8Qm+mEtB4GZuWg=\r\n=VK41\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"593f32d351d8703bd0422f65b3651e55f97fd31d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.63d3a146e.0","@material/theme":"15.0.0-canary.63d3a146e.0","@material/feature-targeting":"15.0.0-canary.63d3a146e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.63d3a146e.0_1657625818609_0.5277930327440086","host":"s3://npm-registry-packages"}},"15.0.0-canary.88db01990.0":{"name":"@material/shape","version":"15.0.0-canary.88db01990.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.88db01990.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dccf48946d9d90ef4711fe624094d2d4a907fdf3","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.88db01990.0.tgz","fileCount":14,"integrity":"sha512-FYXm2Ujbvqz7cD6q3WJuESQfyCcxfO5kBN7c9JX2XENmWlK/q3j5YtAvX2lh9DLdAyMRgL9onqeVQ8kLCce6bQ==","signatures":[{"sig":"MEUCIQD66XAuZ7ZCQ3sT1eElL1B8trurdelSD3MyEq4Aey529gIgO6UN2G8A3SDuFjxL0eUSyacLRfeEuzsEZcOcTz78LVE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJizV2OACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqi5w//cHo7a4bnITe1cLAV+xf7hGC6lX7VA6+itUxvF71WINhFH7J9\r\nt1EW48syhUMtAyGccfy/oWndY9dRIq+Mg3bm20xyBrKUYLjjk/ARqf2Pq+oe\r\nKm1+e6Y8z3QnpX2Cm5Oo3+1k28GY1LRjn9A3bc9JH+nbmaPyj1ilSZFEy8tE\r\nr+EcUmY4ERwFXXwV7Mphif6qLdONzbAiH7E6dJ3ysMWwauabH6lEXZy+DtZd\r\nyHxVUzWwpuADdoGrh327mqAs0kmVa6PjM/+DU8hoCjzeqoxhUQk1ToGxuwxX\r\nWBZZPIFVGVUuWubdHs1k6LU7P24kODhdu4VTKDfbVHoHfI3FmKRUsg936RZg\r\n0w65BAhbW/WocSgEgB1SA93RC9vzRZgFGStX9sUwJo89n0Y1/M2Rra6y4r9G\r\nSgTMfb7pOF1XLKPIf7GfX5LkGcgBYtfaCLNeafJ787dDVh6JxidZNAAoSmtO\r\nNhlnNn/27QWyMNwrgPlnW7NeeDqMDDrK+LMdDSYs3kkRb22B6adGeSgaSgyO\r\nUBhz7nBTktON2ts+U0kncsW+/nHEVODN11ZsmA8F59hWuhXxpSNvaz2MJiwC\r\nLGz7xhrQlm8ewaX4PIP6Ak225cxOT5zfKv1vs5qZnpFyZS5jRXRpOLb83uSd\r\nBCsPpWTTcAGYe1/lysyi9bxp7nsfJyQ7azs=\r\n=dKxo\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"a2570f15e2572775da6e1894e5310c107a703ea4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.88db01990.0","@material/theme":"15.0.0-canary.88db01990.0","@material/feature-targeting":"15.0.0-canary.88db01990.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.88db01990.0_1657625998160_0.8677215369883735","host":"s3://npm-registry-packages"}},"15.0.0-canary.6432d8fd7.0":{"name":"@material/shape","version":"15.0.0-canary.6432d8fd7.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.6432d8fd7.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1477d06a8f61efa2ca41a606756c4555ed200313","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.6432d8fd7.0.tgz","fileCount":14,"integrity":"sha512-VKQYgl/4e1fFb/d4Vjdx0E3i+00MC+iXixPtZ3hh1Bc4+vrgrc/ORf+hJQgUHAPxijyQLrRHqRqq6z2tO+JclA==","signatures":[{"sig":"MEUCIDYO+SmmTsh7H545krOuB0mfaYrgHA97NGmTUnYkR+rUAiEA852fGacS5Gzt5ssK/Kts5NKXmR0wHjJjwtUwdWxozIk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiz8W0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqsLRAAjvrVeEtYd9aXlma7Mxqivv31oMOXvGME2AtShXjfIrZD2BOE\r\ncN2tb1T6pKRR+xaDUu/GvMjLAmrrb6gllCTk0r1gONJOSgCaywjNFKRbp3CE\r\nTgAb5nWqAe+HQcUipBihsHWzp418OU55dndd3Fwh+LDTtt65b+QcMVZHOYbb\r\nbdTsDc2hkhP1tTtJMNOKPej7vawPGifDCyghLrPCIH3CuIuEduHfjFb80z3u\r\ndbl8AQdpSofH3D06g9UWsZqtQfNYumxJNliGiesz3M7rC4jJYdc3i5sQ8gw1\r\noowwzehkhVcLOASs67DKNbZ1nlTxxpHFdOjasNJ+aNL9b91/mMAgC8v5HKkU\r\ndWaUMMeh89S2YC5hfHO63pOvk9QVPlKOSVWuZPbQXMtVkyGFJReiYyeKSwYP\r\nehP8cWIXvW5Zi+t+RPOoATAqKvbND7uK1829RNcHVjQMThFQyy2PlEpZCR/d\r\nKUlp31fNbtPVj1fa9Oc+Dsb2A2hQ1K8yRgM4peHR8DPiejo+Qwz5OJ1hp2rr\r\nrMvy9fTXCAx9GHsXhpJLusyj1SZ32TBBAgFEe1Eb2DNpfXuNI5WmWXYvbiCU\r\nBQirk2k8Bp4iHGXRaH9lleC2L8c7u4fPxvfH77hXpvo8XolG+W5HSqoO4Cr7\r\nkYBNNlmHvwYMPOtrsuPOf8p0k4IyxvAtXRo=\r\n=Z/dz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"307aa53d6ea873bb978456b538f97f9922496798","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.6432d8fd7.0","@material/theme":"15.0.0-canary.6432d8fd7.0","@material/feature-targeting":"15.0.0-canary.6432d8fd7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.6432d8fd7.0_1657783732092_0.1810164093965112","host":"s3://npm-registry-packages"}},"15.0.0-canary.085f9b25c.0":{"name":"@material/shape","version":"15.0.0-canary.085f9b25c.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.085f9b25c.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"29bce384ed365fd89b43c821d389ac4d3d37cbcf","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.085f9b25c.0.tgz","fileCount":14,"integrity":"sha512-8ETVzmHYZAkO5sB11TYzcW+iZspALU3sNOVp4HVROjWB3AAyU59F2kgmo2rdewPAwmXGK7Vy3ipf7pNMCFV3Fg==","signatures":[{"sig":"MEUCIQDxhUbwrT8bo3a3895JWffyI4fqcSPDQ/6/h1fD79NY8AIgbJNNQ+vBD/GUNC8vlxjXe9nbEnyTfWyvvIYQTOFd+uA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi0EWuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqrSg/+JKl/RVJsQlxAPYDInn9SgWH2+jEuviCa/uk4lvRvSMX1Mqjq\r\nm/MC1z9joXdtctLsgVcQtUYtL94ELlhStb4y/Mt7KH0P9TbL5OMrX8h2iGV+\r\ntps2oS3HoGQChhHY8GTRJ08Iuf21hEJHLcb51AE/z0ygWyMnCcq3bOyvcfCz\r\naWKHN3D3ty2g+qR3RWJS/38PtPHsC7ygshoj4+JP99KfASvv6r+a4h9dcRCM\r\nL00v4MevncrZyf9pd+6mXQdIoKsa/YSL50B+kwC0ldK7zjg27oTd4uI1FI3r\r\nh8bBknsHjb/T6KLVZZMRpsrJTL3IUDRskUWxLObUF+PMGoMLpUwsQ34Dwf5o\r\ntrHDhngHYQkEzNqeXLJdLoAFe8V5s7v4bGQOTavX6MU4ZnXgCughefw5l9Tv\r\nG/YeEU5JOaEUbRIkY6LW3KQXB9E4IO+Aua8DUyV56a36rqf5WLognaR7v8Pt\r\nBDljkZgCuARtzzWdj5TMjSsWj92QWciog4ftrbroB3EZhoMwvQdTzDouCqsx\r\nLNdBgCVmrLO7403VQywDkQVDs9Avi0SdXfHkkVJP61IKrMPoVZid8fkXLqMM\r\nXNYf5K8ARvWUBanYJvzFCfx3sUeXY7YHohgmTi3qIEd1tIIn9ntF/HGI6Aq+\r\nLPm3x/N8TLZYZiyS1ouS2MefQnjovgOzWH4=\r\n=85Zc\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"766a8d5f5fc7e4e022835f16c6ecdab8d2ccf071","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.085f9b25c.0","@material/theme":"15.0.0-canary.085f9b25c.0","@material/feature-targeting":"15.0.0-canary.085f9b25c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.085f9b25c.0_1657816493937_0.8978322944330188","host":"s3://npm-registry-packages"}},"15.0.0-canary.39f9424b3.0":{"name":"@material/shape","version":"15.0.0-canary.39f9424b3.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.39f9424b3.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ffee2e9ba84f94d612fc4a681ec8cfa823e5e3b1","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.39f9424b3.0.tgz","fileCount":14,"integrity":"sha512-/16kHLegzqzgEinqG0SHo5tHAP8BwEvuRypVcWWExNERa/D9XNQ36YkV6wmyh9sf9junv7UwXA4/BifAx2U3lg==","signatures":[{"sig":"MEQCIAmP8VP+2dCsWeNSkK5ofArHSk4f9bCfPfkPWT0Zxj5RAiAGW1jF/ikNlAJxcq84zllQl19j2ICTCWfqQ/5DfiwLfg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi0EzHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqUcA//Wu9TJLSQtisjyIPit0d74I6B9jAscmiTixR0V0MR2RRbTu8D\r\n9jJ2ul1LFba6Dm6MlYpWcivbMLT8/ORvLNggyqcqt2A0qVC446KJmXbigEm0\r\n/ed2Ffn/XBj+y18ptCpqlz4TUcL2tkVl7hZ1FwU59o0rimbLFD8ggcTWkYYD\r\nzEXQYMktMcLezJ9FMq0r5KDD8RIkLDxRof3PSepQbZkaqmxkl50lpNTaotut\r\n+QrpqrPFHdR4aXcs4FWDRVV2UCknrjl+3L2Sjei0aEgrgTWBxKfFOrF0wbBj\r\ndbqWPZTsaFr6plqwSyf6jJ7HtrFNysAvvKTvRwsyi89s/Vp1cLgPFViovizS\r\nOxCFjP+wNhRNsyGicC8iOAe2dGcztX+DleuNnE2fI05qo+4Wzb5iw9ALDzZm\r\nCiV4dMUL37o7Ds8PmOJFvd9gZb1sLOucYbxI7LEXIM+iqhbPmmAg1Md8o6S/\r\nC7YWVbKTC7bDNbPa0IuOtyD1vUDJ+f301nX6iWMhAz/pker/rgfenW5HyiWb\r\n5Qy7NZW59byeN1cqkSlF1/3+bdtIMtGOLCMTOhNPfh6jFlR5lgzeIQOxCN4j\r\npqdeIxYhwdbtv7smq2R+kICpkiMQu/2UxcRWrDKc++QqlBHeyMpyC21mtuVv\r\nOV4aw30Z0jvkUXKifaYiu5bv8carwlUGwCY=\r\n=JIMK\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"62e726843fd90c6139d8ade27db8da6ded6e1d77","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.39f9424b3.0","@material/theme":"15.0.0-canary.39f9424b3.0","@material/feature-targeting":"15.0.0-canary.39f9424b3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.39f9424b3.0_1657818311588_0.23800814276162807","host":"s3://npm-registry-packages"}},"15.0.0-canary.ae9fce587.0":{"name":"@material/shape","version":"15.0.0-canary.ae9fce587.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.ae9fce587.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e0469715b8b0bbc40fec7f84618c51f6887fc539","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.ae9fce587.0.tgz","fileCount":14,"integrity":"sha512-zBTBvb8ClEgl6shIBolrQbDKvAe2vvmqNuEOWuqP2PMBzV4A00+sgdGGMxexOJN3YgGHCPWg+vKX9t69t3c2+g==","signatures":[{"sig":"MEUCIQCiA0y44VVXXjKq1jbO3X62JatcpbFG+HeH2yXSC92ERgIgXteDch+WBUM3FcbHYob9ZsDqSTstg/HU0EIuWnrz9pc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi0FuHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrzqw//e6kM3KknT+AqI5Acsk9mQI40awGTbH62XoXXIFKiIIwjpYKF\r\noJs/5xvBM8UA6s1tdD6dkiQoc8f81oK5kBRruEXllbRR0YmkD1Ng4Ypw4EqF\r\n4IRPQ2eJ/INmnfjkCGs7BK82leCzzQF8JBmur3uCP1p1e6wzQK8fZf3b79ey\r\nB2rRq1njZuKJLHcC0UadoJa28uIeBjwaURoFX+16W8aORGBgLTtTju84r5Oe\r\nOhFqWUja+6V2zwyVHlEp9hN8j7pcTC1cWvf68F1QvLtJapG0lNW6dsgxA3go\r\n0ZbyE31N9iNDX3NVpOjfLgAi0qWSYPU1QFjQBxTuwHRWluYhzqocwGii6Nag\r\nHDaHEGvzswE5B247aiyM+XOqAouPmnyfpNjNK//pxv871AOZ+985cuFO26xG\r\nQp6ZNfTc0nsHUupluklI88MFKZqwFle2hoHJnxCVIbhpAiKxQVxC3UUEu+mQ\r\nuQW0mmt2bi48Nh1tcNpdoOyUGss3wSivVdWCYFFdqTxWVEoXROY5BtP3MehO\r\nRK54tp1ji1DyIil8qB03EpQtbd9CW3rOgWl0PvG4D5h1+ppLuQfhXB0lO3YM\r\neU/iD4E31hxkGzyybakLN6+mbrfRiLp+UDylnv+BN+z1rkXZDs27XGHB0WYW\r\ntHwYdoSW29TPhgL4zsjnar3Te0kfG26MZHc=\r\n=HTg+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"2d55d2ded8f3ebf66d72baffd67452a8de349b3b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.ae9fce587.0","@material/theme":"15.0.0-canary.ae9fce587.0","@material/feature-targeting":"15.0.0-canary.ae9fce587.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.ae9fce587.0_1657822087233_0.5903896602963756","host":"s3://npm-registry-packages"}},"15.0.0-canary.1ebddc343.0":{"name":"@material/shape","version":"15.0.0-canary.1ebddc343.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.1ebddc343.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6437898ab1c8235164ea4150aea0a9c30214ce39","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.1ebddc343.0.tgz","fileCount":14,"integrity":"sha512-m2kewvLNNg003uIs4fG5qy9fqo8Ffjb4x/ybMdYjZONkyf69ioiBWgVN8hikqugoUSTIigVd+rjo9cd6ak972A==","signatures":[{"sig":"MEYCIQDVfgr0H1y1/h+HvDmDT2bi64zQ3NitZwOfs8wJ1l+zngIhAP233mThWi9v/AJUajWaylNmuuBs7DDIDfd5GNuLiuWb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi0SoOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpdzw//VfTvdigIPDtvtD3Lrxoi+VbC5dbfseHhrYO1sNbB8yqdlVrk\r\n0cAISNfIODTyGuXgxwTm/H81DDEZG7jLTcaGKGi/3pLJtv26f1oXG1xwT2Fy\r\nZB6c44xGAWbEUPfdlqHXdzazJkscbaveys7Rp9PuvygXs0A/lhZKe9Tf/xSL\r\nopok2lhP5nIVdiui0ucMG4O3Kl8my7NnAQ1CE2JOrcB51knKPMQ+hhzLrsvP\r\nMOq0D5SFk7O3E3kE8YowKu7yAAwnoeiGfno57pIWG8eOztqvuEByIePPUVYC\r\nWLAmlvelo58CtdhuICZ2M/wuAjfVIrL9ozoawGZd5qqRVl3bBgNPEGis22Pv\r\ncruGHz8/mw3BgDtOmIdlRup24MlNzSoIvVdxJSMXi/kAACFfuX3lCDB52/RY\r\n4yl3BPoQ3J7L21ME6QFX2bexH8Dzt3I4Yz5wdQlNSK7m0oyyJGD50mTwwvzZ\r\ns+6VgQ6oZTgPeIimf3sgrpS1cSWAw3hTdc/8ffckE/aMwvjacHXNZ8GLvEa3\r\nHhtdm8YAtzG+MFk4TGM5k+AlmWFsrja7oFcqxiJCRndF7kG9ZkPrCikmuQ/H\r\njUzWiwzzs+0PBEgubs96qYzV+WHkA5Q/j5jpcm9GAvXyJIICEKGiK2nZmt2w\r\nZeepGpHdjqUYkPsqgX9gbKuFPxEO7nk8+Rw=\r\n=FHuE\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"2ec31cdb5e8e1a849368a3f352b213919bec43df","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.1ebddc343.0","@material/theme":"15.0.0-canary.1ebddc343.0","@material/feature-targeting":"15.0.0-canary.1ebddc343.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.1ebddc343.0_1657874957880_0.7975004802272554","host":"s3://npm-registry-packages"}},"15.0.0-canary.c5018840c.0":{"name":"@material/shape","version":"15.0.0-canary.c5018840c.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.c5018840c.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"19fb4ce18266b63109d32a97806e7a40b0204b78","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.c5018840c.0.tgz","fileCount":14,"integrity":"sha512-CkPLpE8UYHABCi9kEUgKLyavcQsWLK2+vHnI0Djw7GvcyqFMoPo/jqjBtx96yRDq97oQd043vTXmrYMhin0Kkg==","signatures":[{"sig":"MEUCIQDECmrMtIKMXk0Q0ODq5zmmt6D+mfxB4wpAga67ic0QQgIgDa/sIXXiS6dJzDkSQMkF+SJFrL9Ep3rwXXZg4KlzBCk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi1SssACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqO5xAAk6iVXAmpoqFC7ui7xiuU+UPCb1xDgTINg8KxtlH4yvlerQi4\r\ncm9D/9nzHXKbMZLh39l6u/ECoXw3gMocz8OYO+wzRIv2RdQVWaSxUWiT6tiv\r\nz7YcEcBQ1e+gp4OhQ8skK829xWUlcLDZ2bPkpK5uGFjYKtdUokH/P+JF293D\r\nFV0W41+oOi5hgrm1ZS9qiWvL7iO7DWpYL2JLJ0CeECyytAVzU2fYCn8KmOUC\r\ngA6sBqfCHXepoMjV8OA6IV7SiC4ArNrLq1T1Hm9QIAkvkZT9d2HHTmQNRfPf\r\nc1t23rwglhoSdhsOmFdxdHJYrZwoqSWGvkZO/Kmpf4449LmDjInP0uOWylTA\r\nSkq4AgVEzFQMJLJBPWMGiqnngNnS7Z8GluyAhP617x6Sn11MSlbz4iBYgKSr\r\nrbT15gOxAPPN+ejDt7KvZrEApiTcKIsbBrWDCgGwxJuhyVMWHbJUCMvi0Dnh\r\nFFGLXpO6rMT8L5fk2BvOFzWkbe8DsLS1DubIGkUcXX0e5vDrNnyEsiSjmwXE\r\nKoJQy3lDgJgzJkNLwfZggduYfHZl/rZqXh/awQSNRkTlFn7akwTRmuyiNzGE\r\n9+a1VY1la+aABe0UMzmkPe1HajXriEj0i3tndQ/qCDrfrx2J0FA2ORbiZ4q0\r\nwOZp3YdkkqtrsuGdB5N9OgC6/8kX6FfWh/w=\r\n=4DRB\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"c86de383c50b7d72b8c5cf908c5fdf3e6efa94c4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.c5018840c.0","@material/theme":"15.0.0-canary.c5018840c.0","@material/feature-targeting":"15.0.0-canary.c5018840c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.c5018840c.0_1658137388272_0.334089486855331","host":"s3://npm-registry-packages"}},"15.0.0-canary.551b40d18.0":{"name":"@material/shape","version":"15.0.0-canary.551b40d18.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.551b40d18.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eef9d58596e9bc0449551bfbd33355fbd1340c2f","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.551b40d18.0.tgz","fileCount":14,"integrity":"sha512-it6Avy97ep3XLRdHWIYyDPKHhiScJQPb6kOyHT+wgfrdjPK4ZVF4MXezNU//xbE0f8yuz4qHSUoa/2mywtyOGw==","signatures":[{"sig":"MEUCIBUjE9MSQtP8ERWn8gXOe4LAcJOrc7uiuwXlEFxsI1pEAiEAidjbK/MDOSAfWHd442bdhdgJATWyCzVrb8EsSOPLjPg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi1S9aACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqyNRAAh9qMoMgirIptNwYGEZTkOjKRhZ0uuzbVwBkmWzlaAZSi7eAo\r\nmOpp0Aw+T3v/ZXZyd/MSIj46mkMo0tW0XCoWBxQe/IFO1n3IIL/LOHgMCJxz\r\nBKzyDD+oiCWdN7an6NutALIPH7Uiu7U7IW2GqOG7+HAzLDO8jcs+7E3yxDxM\r\npsn9VO40Msj/AHi30pjzM6VwcqaXO/Vv4ks81wJbH8CHborGBGoGQwV+f6p8\r\nPzOFsjUK9jmGzenVnpI+s2IGsZ3hvpWrf4AGuAnJOQgUKtYBLPdqSA8cVXdt\r\naPlj85RR2PiyfTOWmt7s0nfUTU04v3jgScjCHpaUKGK2iyNRb38vwwBgf9mv\r\nAQltFVj1EN3b+4BDAraujtyw+CwnYz+7WvPRdtZGtMUlkBf7BxUTs6ahxJaT\r\n5SmsqgxCiIW3xWSw+ezKXYyJhumkBUeZAAnPArVkKCAmsPagJ/fDMoX2qLSm\r\ngSYFNmK3hplLdpZZn+3xrmXp+or/CsP1OQkMCrEnWiADQ4NrKItrcetXI7ic\r\ne/AKrL3uOFdFGCC2zzyUU7lAz6xaI1pIfzVXGmz1NmPvpmusp2pvU1j7FdpD\r\ncU24gBhFna/IORz6nda5IL64IksfeRofjaAqcOKu9Q8p1AOHeTBgowBtakeE\r\nYW5n14y1BiOpoOjOmgwgX124jMVgkWD1uk8=\r\n=ppWo\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"3e9aa3499438031c9229cf2a18a1a3672620853c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.551b40d18.0","@material/theme":"15.0.0-canary.551b40d18.0","@material/feature-targeting":"15.0.0-canary.551b40d18.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.551b40d18.0_1658138458017_0.36920253515364587","host":"s3://npm-registry-packages"}},"15.0.0-canary.cf9f12371.0":{"name":"@material/shape","version":"15.0.0-canary.cf9f12371.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.cf9f12371.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1250b655d8d2546bc35eef548c43bf220c2006be","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.cf9f12371.0.tgz","fileCount":14,"integrity":"sha512-JP2b1t/BlwIv5KoOc5/rj/uOTTXh/kXLK8UsK9VyB4CfGWpvbt0JKyYd8JEMLeOTGYKoA0G/QBmS909vC3LxlA==","signatures":[{"sig":"MEYCIQDSzdWwyD10OsXEbq3z4f/NLFlRyBvHKTvW624sdLCqkgIhAMwnQGJscCWNXfXqaz2nTClzVS29tmm3gjMzuHqb7In+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi1TBNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo/yw//Tt6GMs8zail4MWHFFAPBKuruwtLaizWR2Czle01xvlRzeAaW\r\nW3M/EMyGvTxbjDB33xxWNViS+MHDEfYJdu3al20aaNxKm55q7J5DqI3GREIs\r\nMPSGQZX5mk+qAnsdICAAVA8Y4gqUFWKCI0duI9tiV8Xwl/KETH6utDMUnkIj\r\ndwnaAZx20/VcXmUCcmj8jb5CQNnb/uWILNxiwrg5iOV5ee0Gy7OrXVvzYbyV\r\n2NXZZAtO3C0DFMrdb1DRi+VbOoTeD4k4WCIQwUqxIN0FVlFFMlRGPB9+o5Ns\r\nqCAO5Lze/6Srw+VFTiC04e/VCEdfKpKwbyVv07Q5+39kqDr6TYIAkGLZilYb\r\nCH6oxQ4KxAxfNp+DRVR2QwjNs0pzoJfwN9dU0N88eUiyukaHexNaEro26Tp1\r\n0niNXp3KxfVVK87M8QR4kai9YyD09Y8hahxx7SNobY8/Mt+fRN4QrWyP+UwZ\r\nVrwr+ZigHEvFQTVP0VkeEhOe29RrsSi0ixOnCtdapkTYYkZHRFKefYKtiEaM\r\n91HaIAYK5WfQ73Pn9+nYsRm8h6zdI+DwcN/tb0/gUiSgfGbtn0JbEx7f7OW7\r\nMd7+PzIXT+RlioWF3wEyQOiQAee5YHDUl2z+FS+FkdvWb2SY+mJl+IU7xl6F\r\njTueVemzsF3vL9/mEm7Mmlh6nWnYbOMMVtE=\r\n=h92W\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"1817e344a80081e042f37248beeeb96228402878","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.cf9f12371.0","@material/theme":"15.0.0-canary.cf9f12371.0","@material/feature-targeting":"15.0.0-canary.cf9f12371.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.cf9f12371.0_1658138701062_0.24866168504101505","host":"s3://npm-registry-packages"}},"15.0.0-canary.2797ff8b6.0":{"name":"@material/shape","version":"15.0.0-canary.2797ff8b6.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.2797ff8b6.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"04fbab328ab907bc97c5b776664547f7ecaca404","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.2797ff8b6.0.tgz","fileCount":14,"integrity":"sha512-9+rm7QKbAWtq7sJ978o7bVSBh7obt8CVperdHrPgm9o2YEZ6JhIb+V7GVn7fIG+hy0wWyDfNrwYWe69RB4uAEQ==","signatures":[{"sig":"MEYCIQDa2SWvtcaG8wZ0hWnlEvkcpd8M2RiVx0F9e5qBMvd4IAIhAPQ6Oc7bDrCqOWvl2PhKOEHK/t/ckb//GM9uVyg5Nmlg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi1fmnACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr3AQ//XidiKWRFnnXYMzmVuZaMKy5Plt9yhXqYNv16VJ9VBL5xBifX\r\nNworWtsHTM4x1M6LQnkXrYKHzfEZyGk59GX1YKb50PJAFVe6sCqfVA+gNi2s\r\nJdhfcWy6bfb7xWPg5mWm3WC3Ku7NF5jPp9H56APZmjxrMNyXAuKhUsUOniXm\r\nesyWS2J6N/mezkrGLTYTQBy4pE4aNG2H0C749hwAHMQlXbJp6/DDfFDMOiYM\r\n0fFVhEqSp50nXQRiYJ3GQium7065CyWAr8qmTPrSqbGfM3PVm0Zms+2STb9c\r\nnCQiiQw/+ToRI7lBOZ+owXMtpC2pqi5mKrdqNpMk/w8eA0mw97whFycyOOIJ\r\n1jzz6AxyYYGTmen73+D8C5x7rBLd3QYek8hBQ0fBfYSG9jhSYH+OcWD0fU4x\r\nTUoRStK3bS+6JNgPpmI8v2mr9nVhhB9fP6MbEBfc8OQjR3+G648rzckWCufO\r\n2K1lZ96v3+PoWJuB1zZ6RZ26uyLvLOVMCHi2qhn4ZkkGPEBhfqgudfThLNgH\r\nXcvvPRbGK5JblUH8QJrr+VGt2yEYIDQ2o2bMrtnxRdRm3tTISqGF0B+Z2CER\r\nyvdtsQhRciaGHIhI3W1x4lMq/zKQMf46mSX5ugilb3Vmhfsw7/sDulX8uurG\r\nv4FcSc5M8lDu/U7p7vNuuZWltEvaZl2z2oU=\r\n=ZzDk\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"2c89951e5e0cfca0b1dc61a4f30259b33cee139b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.2797ff8b6.0","@material/theme":"15.0.0-canary.2797ff8b6.0","@material/feature-targeting":"15.0.0-canary.2797ff8b6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.2797ff8b6.0_1658190246867_0.48937395525424265","host":"s3://npm-registry-packages"}},"15.0.0-canary.110fafa17.0":{"name":"@material/shape","version":"15.0.0-canary.110fafa17.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.110fafa17.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"515f2c8e059e9c46ea166b99a876e30ea3b6b59e","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.110fafa17.0.tgz","fileCount":14,"integrity":"sha512-cIqeQzCED6JqWqrzVypbrNcqlWjnxT/Y1XSzIEK9Uh9ERZhHXGfRbxZ9Z+K6tfYgEZADzZy+THDDtRGU0J262Q==","signatures":[{"sig":"MEUCIQC86OzWIoIydBABG0xG4WVERLtLoJ6GZ+9/26QqDz5HZAIgbXHoguIh9IezENytXIO6+OxU3I2B3OqSVEGvUrrEn7Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi17LeACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmquJg//XhX93XYfVeHUaGxL6+MCXrlmeLiK2wbO/mrb6ZKw6lXHIiBa\r\nXVmn9ScfDyB4TpOP/jxq4xCrC5TFNlpoze4J9vQaWQXV+z6DaBIuRR5n9mZ5\r\nwdegqq3WPSIWEizJ+QPcfprdABjBUr1RKGy0TvR1G/wq6cJ8C8E8wdy3ZChS\r\nyE7SG3OLFtKJFyrFOWB6NTIx/0nRTLSTqVwoz+orBoT0K9UEJFEWkfu7lvOM\r\nqWUNelRkqM7mFDhhm7AxTb50MPnvdRxhXGpp1dPSAV82ue7uFyV4fCBIsOVf\r\n07Y5zG2GpgNNJCtEt8NmfjArEG5QwcLYlS2cv8fOogghugcZkUjHqPVd9srF\r\n631QOofSGy6BKab/vviPSiPp/0vOERRHVXc5Dk9SWKatBmUFguFpkqxoXRDG\r\nzRFyQB1W/NpmY3oGopResAZ5qjF627HuxObcWqZEwUSvwYTyBxspGELUb22r\r\nN6I016GwUlqMXBB21Z0C29DwdhM0OqyNS9JlNY9s3ZAnyiAzblswW8Gl3xtN\r\nsX2YLm/KELoCrcvVSD6OID1J8CAtzZsyei2aPAh7VVubQHTTmmYeI38Peh7U\r\n3bGBnYvP534xC133XmwAYf7B0Jm6KIICnFTVSQ/uYR0WaDzgmX71WWhMJmz1\r\nJHyin7qVRmw6XxoIQdx1yNNiKrLYHqNoIsw=\r\n=3oTq\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"ccf0ed3e8eaadf1526fd10979e8c00e79b228f5f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.110fafa17.0","@material/theme":"15.0.0-canary.110fafa17.0","@material/feature-targeting":"15.0.0-canary.110fafa17.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.110fafa17.0_1658303198602_0.7605125138141082","host":"s3://npm-registry-packages"}},"15.0.0-canary.386ef1d2f.0":{"name":"@material/shape","version":"15.0.0-canary.386ef1d2f.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.386ef1d2f.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"528adedb05d80cae7711e2f0d02b47c5b5e0e442","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.386ef1d2f.0.tgz","fileCount":14,"integrity":"sha512-/uRgW3eL3m2oHUT+6kxGrGU1Kty6L3H2kpalVc7n09OIlQ7iJAkooDSLiKiP6zUV/oT9pMwsYfXhPBpmHowRkA==","signatures":[{"sig":"MEYCIQDQlN43mFp8h96DiBj+nqk6S+MecLVmKkcFUvsDxY9eAQIhAKcz425IdJzMJbZk1RrjjPdZVXtSu6CZ44t5OI/DMfQt","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2EdBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoIMw//ZjItAtEOGNR8CDMDC+D9AJv0lLOrKOcxjZEUomVJKBZqhwIj\r\ny2zOaZ6vpjypFoSrDg6rlFfyO0QypWPHdo2kKaOaSxsXyhOJ3P2fmPqx+Jg9\r\ngvnB/dirnsVHEjM1jy/TDnK/13Swky9pMSjaorAosHO8NDa+Q/ytbWj54ihJ\r\n8lyYHIZ+UPYcdkVzZOCD6EUY6Nim2N4H+I+/+/ycVBmuP4AfckgH9CKEpczn\r\n7LJuDfqMrucpvvDs6OOuF6vssAg1qw7EQi1djINbaNp3OK15PA/ay1DI0C1m\r\nF23d0jHHvdFBSv+idF9/wkzHqdkjIRzF/yxnEcrq9cEQAkDHWxHgHtLyWKVn\r\nH0d73ooARiI1jv6xH+EeHXCWafzFpmMBBTGtnTaHpiZ8uWCWry2mIhlSgi7V\r\nmsnuhN0/7vPThAp5/uDNeyAtjKGYVAEUbqEOBNPxiCk33g5SynDHt5MmtzFD\r\naqyXfPhgxQMgcn2ZaZAEo7MujazcD9kvf200+QAKWgqDhkCw/NYC+Bh3gKgq\r\nbM3GOZsXA7Kb0PQItXstGlnIZJRKAygKr01rCrtJkkIgaX+1UQSplftkvJve\r\nxRX+daiI4UZFVWm/tGSzwAJS3Xz2MBeV5gKHLODz3jQV+fwmPIGWOei+sQpV\r\nU8UsXrsVelNT9X5d9DB7SoVUjMnnI+UJsEc=\r\n=ROMQ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"f81dc27b99348c90268023c46429639f145ca534","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.386ef1d2f.0","@material/theme":"15.0.0-canary.386ef1d2f.0","@material/feature-targeting":"15.0.0-canary.386ef1d2f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.386ef1d2f.0_1658341185171_0.5231931398233136","host":"s3://npm-registry-packages"}},"15.0.0-canary.c3924efef.0":{"name":"@material/shape","version":"15.0.0-canary.c3924efef.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.c3924efef.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"57418c8cb8288ba702b7cea1e5f168caaafd4910","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.c3924efef.0.tgz","fileCount":14,"integrity":"sha512-7jOXG6nAkSc2tI8ZLPhysGub7GLug0VbhlYlToR4UkvyzE5rm3Ynvz8Csof6BGApdQ3Q6nKkBxFkr9SCMBRwJQ==","signatures":[{"sig":"MEQCIHGKen18RsdkLmjg6c85aFvw4qhDqDhfYQ3uvtNA3RvEAiAXvaqmIXI+QuEJjgI0Iz8CF4mfNjcaK9h2nr0wqlFAQw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2EmFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp93Q//XJs1zA7Ryv7C+sdp8CC2m14G7wkAjxhH26KslCq+8ujLNJWj\r\nlMXt/ab0dXuXz68W2oy0gSuGCaq6m61QBvaJSdQ6EyVKKWrMANEcc5nS7W+D\r\nbCXgPMkhw90Vhh9TeTFC/J0eyVtDtgG+a9jSQreboddh3WkMnI/lGvObcZLf\r\niaQIjkC9Hx56P3FL/qt1DtKwVhDakylamshKFugoEoUaNNQEXqNOcEeDUaKU\r\njmE0jSUsD3HQmWZ181FGr/KYokxWDpDLA/UllNB/Yjbw8+V6q5k1sOxeUDiy\r\nuEZHpUIiBzHCaSqqwh2DiErOM8N773w8OIUtwGczy99HCywtxVQ3/LGNIlGZ\r\nzGABxzE3OWsEwH4tKahLgMhJffPwomTtS6w6BNZW2aA4gglDoCjKqCcyr9DH\r\nGWoSGLFMXZEeZhE6T+mbj5jFd+ts0dpTmeeveDsBZWgB3EAQ9t8pxpTRzjAs\r\nsfKqZ5l2VFGcc6QtSHc+eWEY4ZHi8+U4m8cHzt1kXxHBegL082Y4LYOAglDg\r\naYp/C99KV0qJZMU6uMugStsPelvH+QmaKb5fxJil2zbG6CXhUWoaXp483Avs\r\n3+MSBiOMChJKnRrfcDuI5//swMLWm+kcRuIoF9wUMVmPdljt7zAs1r6WV3ml\r\nYovoX50LyE2gXOTj3tgJbcdAGYI4Qcg07fw=\r\n=DAI7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"f665d9454e06d217296aa1a2064c9c67d3fe2759","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.c3924efef.0","@material/theme":"15.0.0-canary.c3924efef.0","@material/feature-targeting":"15.0.0-canary.c3924efef.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.c3924efef.0_1658341764895_0.2299034624507117","host":"s3://npm-registry-packages"}},"15.0.0-canary.cf5c5907c.0":{"name":"@material/shape","version":"15.0.0-canary.cf5c5907c.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.cf5c5907c.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"310c8d876a1798700b106f2a2bd467b4aeac757c","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.cf5c5907c.0.tgz","fileCount":14,"integrity":"sha512-3DTj4IX57YH+ccTXnI/vDf/Ma1IT9fgVP0RrlF0Eyjdy7GqKPxXplheyi58JD0i0EUT3hO6rf8M8+geBG5n+gg==","signatures":[{"sig":"MEUCICBfk8i+CeIh66s7YVkNru+WlrkpjPvho+SotZihaSgbAiEA7VrI4f1VLrgWn8oYaDpW7ANGUj/DJpWiCfxR2lOgAn4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2HHtACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr19w/+MzowMWKn46RmwRHybUrarsQsr7CvBKIT74iXLFBzIXN7kwd6\r\nI90aT1MeG7MjoY8TaW4YTCZGgPiiF7TVDpz7pRn3WsQCRHNjFkqgnq2HvlLJ\r\nn7E4MZVkNmSk1KoFlmP1gR/jDTsa5RG0SHCbeavDmHLbX55xMGYHl8xeS/Dd\r\nVf1/vJPxzcLbF6UFjkEz2XxLyW6ufVFXqkkoz0R/2UtXYDO38j2xQOJbJS7t\r\nxaBsF7r4wqYDyEtc4BJW4sq3p0Zk6sWxNc86q4dTI6WBjkMu7ib2mN/HfNvI\r\n2etFa/CfFzKJNCCfKtscaOBLzpFmD7QUf8SHEb6TMtVEyxhFC5yqt6XSIc/g\r\nlFuBJXjXXpLdGJO2BuU/gP3ZhHy/3F73m8pUyqkmmDzA9iNs+70OuctiO+Fb\r\nCzaVlusJSc2N4Fa8lhGjtWD2P9oupyBlLy6ryMmfYl205zcmbJA2oqI/JGU6\r\n72Cl9F3I1jCCecVMKKYz8WJmfDHXupJzj/QdrdWx4IFguGOmFxd2j+ISjq25\r\n3ibzynHAazhn6+DvCwYRi7Gy9ZKKQBK3jdPLvCYbjz2RR/iZs6s5Uv/Xie/K\r\nu+trtMIdHxMQ2HvQdF041YdmAdGYaxw1T5tgZ/DJRNdlFsd8plSJbCSH1jGz\r\nOKEwiHesnzpAyuZEDSpi4tY/+MVb1PB9amI=\r\n=UN/Q\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"ff18947542e40ce8532c2ad78551ff4e74f9d647","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.cf5c5907c.0","@material/theme":"15.0.0-canary.cf5c5907c.0","@material/feature-targeting":"15.0.0-canary.cf5c5907c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.cf5c5907c.0_1658352108955_0.9997467840481338","host":"s3://npm-registry-packages"}},"15.0.0-canary.0617e2319.0":{"name":"@material/shape","version":"15.0.0-canary.0617e2319.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.0617e2319.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d91d50c11878375312794736481761532dd24b5b","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.0617e2319.0.tgz","fileCount":14,"integrity":"sha512-bkwEElOyuXov84jpK1MWkhe/iyYm7uW0WIWrM33q7NM2XTGGbj/aP8ICXgY7dTGBypcp9V0Tubr5wnT/2B1JNg==","signatures":[{"sig":"MEUCIQDBKFjkDpV/eITx3jKA1xLZA7BIq6jD5Sc52YC/3qN52AIgK2LUZyM9laqURvJyhIQTHdLtes/RqG75Fm4fHt6LLa4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2HY0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrgEg/+JsXZKsjfVQLOdN4l6ltVYYdR2cAmzTF8MDe7S1ZBYJo3Msxx\r\nOdo6qlWlyDAcnvoquP6zw7avMOgLCgUnlkvHv1VMSOUsnyJLHsz956IJ9Zmc\r\nDN8omDG87KvJFjKUu/7EqmgfmBcbP74BQHo9FcpNSl1mSya6/BJQzi/A73MP\r\nxC1dqiK4cNvWhX4WUPhCHdHyCvX9lhEIALfGSXMBbhXvmxaV91a1Kx6cERVk\r\nE5VJSFfreeDgyWoMZPtrzVuTYON21mhx5KwrwknKDOWUhVeNqsOncwcK1dha\r\nncbaNWyA8Rn35GqUpBQQE2KGDl0plhK9suvxG662ATt2p6josn/DkZaRqTWc\r\nKdfqaIc+nq1hsi/CsqyUY5DW0kpRGtD7gzP/cIv09/LCvGSdw77AGsCRy+Rv\r\n0XnF6oZlVyqFMmVyuwe5ek78uqNnIObZpE2Jtgn2S69VAqbO+G2Apjoce5KV\r\nL1nw3B5mGR7emtQ1nyLzZVCgrL+u5E9O7b0ojY9LD9Cg93oaCuh8n9x7u5kw\r\n6T5E46daSuhVuxi4olK8x7lpi0QVwxsWUOQNcw0zVQySp7IGgdzRTD5CYYjs\r\nBaO/4ulrBce6i0Yxr/JLQm4YjutuMyRBDv9MYRDAdGtIiiP4l2lkwQJk1+pU\r\n3o+zw6frIcT2yNfJDh5wrNp4LeRUeQu4UW0=\r\n=o93i\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"a4d6efed0d00cc69adede24744dc368da0b2c897","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.0617e2319.0","@material/theme":"15.0.0-canary.0617e2319.0","@material/feature-targeting":"15.0.0-canary.0617e2319.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.0617e2319.0_1658353203536_0.5321174606418655","host":"s3://npm-registry-packages"}},"15.0.0-canary.a743b7967.0":{"name":"@material/shape","version":"15.0.0-canary.a743b7967.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.a743b7967.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1eb52109753c7c82b75180cc796df60b01b76807","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.a743b7967.0.tgz","fileCount":14,"integrity":"sha512-BZPhFiFGxTwxsd6YcbaKcOes3lYQykhNxbfNMMLLxC+fPUUXJLatvhdKidKHxhveAzrGLIm9pFqXzx+8t4RZAw==","signatures":[{"sig":"MEYCIQDHdp+bvgZDKeanmKscdI2zniOl7wqz91rabrIAGeBg8QIhANFv2pGG9wxoN7IBoB7VAckYcjdI+L6qcP5oKNxQTV6H","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2HozACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo7cw/+PClCSHijSRD0thVfZwjIi8aqobeVYFK8cGSwdOW2HpsVHcqW\r\npdVrpwEQCT4/TzUfWCac0Iv6RJQyyMyiTER1taMUvwZLSndwbvqFy2A5N4r8\r\nn6do5V3rxdJs14b1vrfVlbEwTfcOT0mda32ZAsHDnUnmheJQcrn0bgCJqQae\r\nASZTu3jPR319zCYEk4OSSyI6WoGESlj4ythsWPGY/PSgvWdzGGkYBWL61Dtb\r\nrGQxp4bm49+GpwrSQOAK5Y9ZnG62Ad7d17Fg3XTgRonQAjs1Up2BtaXTqGfx\r\nrx6lddU/flbAcjNVVSQL5eardC23Na1NroBUHLaII7G6DZC3Zb0WT/eSTEfC\r\njDDEu/uE1ZgWn7Fi9us9NobqQA3QZac++h2X2kouDPx9xNih5IOEuLNmfHVD\r\nJAtQ4P3V8tj2Qn5WhBPsPIRruXo/Y6GdzSV/alDb/JZxJcDiuma+BBJ5MeS9\r\nGfyUId2EKf5iW1pEoozv6mKJIVr/HfQBdygvrejM5ZtskV+GShKlKxjJu7QW\r\neia/tIEFOiFo6yYYJjg9PHmi0/T/yM+0SQ6HFGaie4RNNzaWVfCwJvywtclL\r\nJv10iGHTOvPkJkF2cq3cXuBS4FeqIaZy/7uR2G3PUMovWAuxpMN5iaaTqvTN\r\nZkW99isRrj2oWldACbkQ15ElVtuHLsNmWp0=\r\n=rJ9j\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"6fe7cdad71b01dac35a3d815662020bebbe50e23","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.a743b7967.0","@material/theme":"15.0.0-canary.a743b7967.0","@material/feature-targeting":"15.0.0-canary.a743b7967.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.a743b7967.0_1658354227564_0.8166101845382312","host":"s3://npm-registry-packages"}},"15.0.0-canary.69fd619d0.0":{"name":"@material/shape","version":"15.0.0-canary.69fd619d0.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.69fd619d0.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8b3eec6029331addef3786cdc1159879993b9f07","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.69fd619d0.0.tgz","fileCount":14,"integrity":"sha512-1q9VK6Ga5zEM/aUyW0zjxTQ+kSwscjofUqBN/gF83Nv2EbTFrxP30O3PIwhgWTbUvX0ZfjoICsV2N17nTLqh0g==","signatures":[{"sig":"MEUCIHPknNx2lINV+6tDnkuKLfy3/L/HbkMa8V9owL1aOHypAiEAl3ilh4zPLr4XeqZ0K1nY7oUSdRkZOFNHpGXGFAimoQs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2H0KACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpPwA//egEBrcGyemCpwkZdDameeeWcsjyQYRnfEj8LaVN+HjpPuTkS\r\nWBYieJ+HWMNgAmCAB+U/B3Zmxf8z8MD2W85gegGJWSPg7msXAfZh+b0Hpf2y\r\n5yxEKY37gKFAVrLen23LeyBHzi28GuauPZUXRfDZ4mS7K8fqBGA9wlvV4Q49\r\nrqKjci/BDgmCjeRw6Q42Bl+dCBs8WEZT1HjAGGoFGttUAvgmWMR6ILsMcT8c\r\nqQUOQsS/kFd6d17ybKltaT9HEju3zZ40ju/S8fsvbA5GMBFOIayLAmYswZ2v\r\nkoDxa+BCPgSyoPznXhwzrBpsKWuH6ixJqu0Drj6YairhrR/c6FEV0fJ+k/Dd\r\nTye33Q6XrBKlD4zR7RTPdxS4JIDhv87/liXLWe1v1WZBRPMTdLUb6RaNXZZ+\r\nShK2zlhI56fvXWIE1jjBtMDomPIa/rtOWRQYBEAMEPyukQ1U70Bo0WGTNT0o\r\n+WCGoZtxFwny3YJcnWol1+t0tHobfUFpdir8CDx3UOgXneg/ivai3ecRLoSH\r\nyPLRZ/oP6XVvKbui8Hh7BXSX96yBGDSNfGvcijaPyTaHK87ZiL+9/BUf3Dt0\r\npde3h6AL9bp2VxY6cokQKNGjV7gzKFS+sXmucCVCJYuOIy8zoF+1OP9Db0Cq\r\nzlZNEcBnrV5dIvjtzXx2CIGrnVgsYAGGNz0=\r\n=1wOA\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"8982644a21769a71fcdbd9d8a35d87f00bf73b3c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.69fd619d0.0","@material/theme":"15.0.0-canary.69fd619d0.0","@material/feature-targeting":"15.0.0-canary.69fd619d0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.69fd619d0.0_1658354954121_0.5116147164309812","host":"s3://npm-registry-packages"}},"15.0.0-canary.2a6ddc1cf.0":{"name":"@material/shape","version":"15.0.0-canary.2a6ddc1cf.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.2a6ddc1cf.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"95fa7f00bb49fbc965cf5c961e03913229b655ab","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.2a6ddc1cf.0.tgz","fileCount":14,"integrity":"sha512-456tLkCDUWTNEoMtdXULM9Hk3hzFtvHodC7wUJr571LGaN9Jv9zI+ctvFqW3PLjSF1FQNRGN+c7FJZ3t7dt+Bw==","signatures":[{"sig":"MEUCIEcoHAEqv5CAzOk5zOze8oWtgx8Gemynvfnr0DXuIrwkAiEAlnhqv2op7Dc114SCh667CFKbrQHumgtINSWIVJKKvO0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi5AURACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoNtA/7B/nNtJWqG+pGuAl53btvyZQaUcC/pHmngTSQWCmjBgUWavYE\r\nZy+6KYLVlwssPLjRcg4EaijzO4JLPoeFa8hOpqdC6CMEZAClUDoLGI4jVokL\r\nSYOZWzKlMcGnkv7iYZroggma1j6q0MXB09vuJZ/jFp4OirdJ2yfoRObeTRrA\r\nXl12HA9jzWqxi+oszbXELSKlUCrKYeYc5ZQyfiwtNiFrgaGecvSHixTDoYiH\r\nAu5GdYp4fvF4E1VBckZnthVUqYd7B9E6KgkSKW+XSdUz19IGAE81O6xCh532\r\n6Nvzc44FQ+YiB7G/8JT5FxAzUJrYgqAlwXbPYoBs7zaNrMgbi3RsYpUHk/2L\r\nzCeL4AQG3mHlhTgKEY+tHRtlC28+cEjgjHzoOV4zFMWr1rRvUVKTetXYPdoh\r\ngAAiTpaHmgVJMOHOaqMJF1CVnGqELd9+vZjtU+4cC3rwQTeejcd3TA43CEu/\r\nrNX+v5os3S/EjIBv3ZIDUGrN/FzjatN4BTIAxjcGEE3afMURdn+51Ujt0wUc\r\nfAbUcueOIq40TCUgub2rRRcODy30Qwg2ydSf6eWxljXlPC+FHvz3aYTtmUND\r\nPEBcZpuyqqzI8ahy7WpTJlHb3GXOM85F+bQCEZ9OzYQ9eAqTSSxpfgtvFM30\r\nqN3pWTfUkl02ee8BW/tYRYsRi5j/WHGIPbg=\r\n=dCaB\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"0e951ea9d38f3d449f24bd1d8ecb0fa70c0da462","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.2a6ddc1cf.0","@material/theme":"15.0.0-canary.2a6ddc1cf.0","@material/feature-targeting":"15.0.0-canary.2a6ddc1cf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.2a6ddc1cf.0_1659110673047_0.5136629615048354","host":"s3://npm-registry-packages"}},"15.0.0-canary.86efd56f6.0":{"name":"@material/shape","version":"15.0.0-canary.86efd56f6.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.86efd56f6.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8e63f398c86e0f6f0406240fe5bd91aac7d58d4f","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.86efd56f6.0.tgz","fileCount":14,"integrity":"sha512-eTPjCzbx3P2GpFibRxlZoM3RLnxmVciV8gwLjMP1t+OSdlfgkLYe5LbXOgrJqoSM8yPfUxfMIuB5oOxGZ5xt9g==","signatures":[{"sig":"MEYCIQCBR99xo4JHWgVeYD+XmSQMAo6Sn/JSdIPxK3UD4Rd6BQIhAO3dVDcPKtjVe9bCT9XI+8Sx90zCGPmrIkOzH12SFuO4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6TiNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqsnw/9FMTZwiZm16SwNR4P1VzWvEH1z2AFA1D562oZBICvkubncWL+\r\n8ln8nET3PKL4XazgjxavFuvpfSJBCJpG1tOk57slrV1/LlISe73F4H8PcfZH\r\nq6Obsy7UCXHOVvhLu1ZW59HkryN4kMb0/JFZwnwXThqFvSdrIOmiOLeI1RnY\r\nZrrdE1bgkzs0nvi7udbCty+0sDe4WNeHt1ruDu2tEwiTwG3BtAcajeCZwnM1\r\nUXrzYc+BeK6NrNjNhfcBi9h6FNoovFPB88YFu7c8haq8HcK2De1cZHV4vX6H\r\nPlMEIkFf1fu46TffKcgccf/ahZVXGKzLHpstrDXDQNXdy+zVU2+HTaGDFr4c\r\nZJ+6iXYXiXTP3hAh6ICfjYoXXo7+QGYS5NBRNiiYtykWLjk1+Gaj/pKPHjn1\r\nZKl8sIoyP4jfdcz8qBb8neLYadJxgE8RTinMnRjyH9jBmTuYUMAmK5/akUE6\r\n+EMZ5e+ZOaaMg56XlqxLrfMxq2f3ekfZz7GpQkXoAbqZDNmi+VreG82aA/D0\r\nqBez/JBGAU2d1WFdQK4ontCxNQRYc0cH39JBRMZLk0H51Vpoaeu1f7giuFpS\r\n1infJ7Fp6nNJmTBCrURG/M7tzSbnQNWNEHcu4TNaaOQWImli1xZs/Pe9cTWp\r\nNFExlEEb0Dtri/UFqRRxo4naAz/LUlbqv28=\r\n=K51p\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"a4781ca009f9a9b59c7dfff5df2d23bb14b9de2f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.86efd56f6.0","@material/theme":"15.0.0-canary.86efd56f6.0","@material/feature-targeting":"15.0.0-canary.86efd56f6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.86efd56f6.0_1659451533478_0.17510637098049875","host":"s3://npm-registry-packages"}},"15.0.0-canary.ccfc24d19.0":{"name":"@material/shape","version":"15.0.0-canary.ccfc24d19.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.ccfc24d19.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"028c113946bae099723b42354d806d16c7f7fdff","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.ccfc24d19.0.tgz","fileCount":14,"integrity":"sha512-utwnHVOl6EP88Rb6VofJKKLKobmA0nNKCYQ/I7YavYcvXic5XeIh/i/Y5Tb4c7xB+aHtvoBrxm9CIz27ZPKO7w==","signatures":[{"sig":"MEUCIGlQazR1ETitawgMBsHQJc6mj8ucTTDLkEky7Z6BMV2uAiEAkkZMF3cAym2VGOUxSCB406AaIYGIMCQdiqHyzEHio5U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6rrKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrSzhAAmDR/CMuo4A6lRP2VvyNsM6GLazeMdLhhAcb3XwCyCp9Th9H5\r\n7bKGUSmdx7rZCxxdLILd92Zs+qzehvjQ7qlHvi1DIkkl2nXGIoBD9ie5GOPE\r\nvphl0E4ioSKM/S/21P9jsofUlFmyiW3bfLL28vUw91iatO4EoAwIEF0Zt5zm\r\nfeq8S9RjuiRQFsU1sLopo6AC5X5hftTrgzC0n3Vnv/Ise2kIJEiW7IU5EF3u\r\nVIh6WG/l2gJybof7OXqzpS3NkVa8o4UFmam26+1fBM5uwWYxsO6resSNFsaP\r\n51xkPy3zZlGHm1G2+2oJpxEpOd1RM5XbZuGWHVnW3A0wE5Uft2Al7F8a4b5y\r\n/Na7qSOMRxAYgJYEJ8rx98z/TvrpDSZnZ1tE5inBoNB+SJaiLNbxB+8iPSBq\r\n06VkLwJuuAOa/4AfEDyNdisTb26LdHy5V79k6yjVriPdKoX/PyXiT4kp/j9X\r\n/LSz3Hk1ljXdLPesKlf3wFQsQN/Y2hojHiVpGlnySSNh207QNCaUDU+W+lVH\r\nBeg0H/5MjxkWTQAADhX0BuwLW+T+M9CmPe4sHTE9OIXh75yJKT3TaFiwvHZU\r\nbdD/Vh0ZhRR++eiGrgF8k0nrgsjaIm3bVBVq5gMHJVQ6kIwgJUPLQeBQVI7e\r\nF/yv/2sPKq4GBhdSkPxCL2I7miIU5k+VdOQ=\r\n=WoJ7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"f790058ff0b4b30289ee965102aae1ca19654ddb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.ccfc24d19.0","@material/theme":"15.0.0-canary.ccfc24d19.0","@material/feature-targeting":"15.0.0-canary.ccfc24d19.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.ccfc24d19.0_1659550410228_0.9017500665503204","host":"s3://npm-registry-packages"}},"15.0.0-canary.e4570146f.0":{"name":"@material/shape","version":"15.0.0-canary.e4570146f.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.e4570146f.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4aa9d9267b7ae45fa364a11a239a93e72db17baa","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.e4570146f.0.tgz","fileCount":14,"integrity":"sha512-OMWq5Pyo08L/NVZB5zWNa9iNRWP8/Bpev+CP1pwEhFkS9uWZKV/DimnV31pmTyMD1sWmQHEp3zrx/VZnnLq+Wg==","signatures":[{"sig":"MEUCIQDlaC12SbxSt+7+oN8CXI9kF23oxJ0skDJJGBRQrXhPUgIgMnm0OHlhGBAiZd08SWN7K/E8BSEWDyd8cqXH6KNkibI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6sElACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp1AxAAm1j+r+iW9+SHUBvWy3sV0QXuXEqlDz1TIBUzkztZ6AwuL7tj\r\nR9G7HEWK+MSDvusfswj8i105T9eI0NmG5qSQdvt9bS92RHmocBxeFXIAwpp6\r\nlXHj30fp1VpOH+TBiAOzHATqBNTESXGxo/g74y148sO2Ez/1DK+mf4ki60Q7\r\n0WFQnuXw4dIjMuucI+Hr9SJX2SY9zcqu07sRLgR7/5b7QgLhp9sMvWGZ1TJc\r\nYCbqXq2BajdcQEVmzWXhoi/ElxdDWeTLEYuVilAlRvFx7XVQhWFgN3Q51RCy\r\nItbFOsMRyIoOek+TZ9LwJORoc5xMDwwP6TkZZ77sHk4LJfj5pUy7ue5reMxl\r\ngR+4/iq37zQUFfNBiJ+CI4k0Fvme5zVX2/dO5cyxXd6YA6uObNbLFL0CtcnW\r\nqPegW6I2T8jZA7LCmW4zyTPSnGLf0uh1nP2RhtrJcMiFNcltwpc2UgQAUypo\r\nLnuQvpfG0KfD6LH6CwgrX94RnAtTn3MJJ84mTDYZv509twZq3tJthoRoH2Uk\r\nzJJ8OsoAjeCK3kIAlT2IcW7Pd7sCyPfHu81Ijsgr62fKYltcWwmm5x/9uNmu\r\nkRt8F1OFKuZbu6ztm1uaSKUoeXTwHD/tmcPw0+i4dvxhFyaWo68FJylrdIuO\r\nIdhkdLKrpu4onkJpWfgCRwoL/A3q2RHbUdA=\r\n=prXm\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"e80d690ce0a868398025065053615e866dc51ada","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.e4570146f.0","@material/theme":"15.0.0-canary.e4570146f.0","@material/feature-targeting":"15.0.0-canary.e4570146f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.e4570146f.0_1659552037519_0.9493863441287316","host":"s3://npm-registry-packages"}},"15.0.0-canary.6683a36cb.0":{"name":"@material/shape","version":"15.0.0-canary.6683a36cb.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.6683a36cb.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"81c2d433dfa447dce492e6a26b432dab2e9eee45","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.6683a36cb.0.tgz","fileCount":14,"integrity":"sha512-8rcZhm9kSmOkKNj4aVLPLCQQURTcqVvE4tDeaQHvDGArrq9h4tAWGaqwUHRULNeBugSzQka8KjP27o4wzoHijw==","signatures":[{"sig":"MEQCICicGVUoOk86dxZHCpXm7t4JVNLM3LpoatV6UNNnv46FAiA0hQKZjJBq+vlqwdJ0tuT1DidM0zpCHh9vmlpGNVI9rA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6sqHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpqIw//SMR9CF7U0L0MZV+Fqaf8OZpiMZGc5Cn1uDIIVg5HxSMJB3Cr\r\nnC3CEkdDUG6DscZCxw9OLBdVRoAGqpthSZhiLHK9KsTW5KzqybgjN3vJ04BV\r\nCBjMDmXBjVTJdijsqKMTZROwS/RqmX4qqwzwV5R2xstYkkB6zP+Bg9WIDNSl\r\nrDWSUGZn6rnN+KuBX91IUQvFhP1uv1rPZH2BikKiQByru0CsncyrObNQ6mgX\r\nyp/JOjIqukvHtDljS8qWtQeppcvGto2GPSbCzmDec8oyYVE3Ee1JlKPI+Kcj\r\nPIf4bSa8Ng3/hlshCf1TdWifbARo/vFHCDFXBF7X+unc5h/nwJvHIYpG0lgP\r\neOHZWWBavLU+GhsEPPF3cz6tx+3KxYvyxMv+hXHflw8JMdCLZ6Zx7BXaAcbs\r\nQd1CQQ3J6Q6xDY4EpJO4PpvUn6nI8/A4KPllXHwT5RU8odix2fc2CFbi9krO\r\n/y4/wh+Z9zloF07iUaritKz8ampXNCw9CRTyHxg+p7XJ757r9O2OhsZkU2Qp\r\nOkyQrRz+lUTEjIxChQ8rlmTC6JIVqgWRVZU0yi9vp028XHpJ6tS+9/QU/wJD\r\nA9v9Z04Il55VQhh73JP3YhIPPba15HPNXkq/EDr6ltVpWJaqvO/NVPviWFgr\r\npi9EyeyPRvl0YOE3EGxYnctzScpjcUy7Kqw=\r\n=EjHv\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"8feb0b9a8c5151a18a06d282cce87d861ea12e5d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.6683a36cb.0","@material/theme":"15.0.0-canary.6683a36cb.0","@material/feature-targeting":"15.0.0-canary.6683a36cb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.6683a36cb.0_1659554439064_0.6865017169345222","host":"s3://npm-registry-packages"}},"15.0.0-canary.10196647d.0":{"name":"@material/shape","version":"15.0.0-canary.10196647d.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.10196647d.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"74632b6fc5342bef39d5c796d7495c863703f7bb","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.10196647d.0.tgz","fileCount":14,"integrity":"sha512-iOSiGWw4dkUkSFIzCYjC7E95eRInsy+Zc3Tp6WF7qiP//Y0zXpJHYoctbOqU/d/oAUWPJDgnH/MGrUYL+roJBQ==","signatures":[{"sig":"MEYCIQCdwn/RFo9kfeGMf1u8BsxbVPcXI2pDX1SypKXYyixoNgIhAMaIFzeGyjpavmlSyl/oskT12LlpRJV3+c2va4XBobVa","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6u5mACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpjWA/+MwXDK6IyRcJBhPpIaEeAYrIJPa+JDw0wjqzY1c31AgJdxm8J\r\nHB9hdQWUbGlsbgZJSD5/MJ4xR5R0ieWyJeGXNGo4NVIB5c5t4b26qFHGB02Z\r\nQ3/LR9bEkIvLe/XoQVutI68ZgbGeYyBcJn5eA8yD9N9UBhmrzHIsQfLwv6Jr\r\nIPnCsJdA5k1to01PwpeXMfkbMlvzl7Sj5D4OGlAz27NJlb7qxZ15xrDNX8Af\r\nXhjM+O5riiy04bnGOQlcrv1Azo6GPAdUIAlrQpZ8HPd9ah8OT/Dt2Ur7Lqal\r\n7gl04H6vHpavDRzJKgnGLxZkPsF2O9+iA+/WDorpYSUR5bnXIgoQVVX27ff2\r\nWhUEthdGjE66hg+eZwK9Jj8sJu3OiMvIHqjmQbCMtYUZzML2nczrM1bQrrL3\r\n15sTCj8IDY5AV17ePD4G0BaLYekNVikWcsdUvxBUIH4ImLXBiAxNwZKcO1/K\r\nFQwmrRtfwHIwbJuCpM8wRJki+hQr5wnVMHzZstwUUWmRoySWpuqW2jEPGliw\r\nCcIK+Ly+cb3BTVozgAubWQ1+xP2zJYBrzjyOGE13jdgsOR6OQlRBdJGg09Cj\r\nRk0TuSQ0eWsLNzMvq/r+m3Dk2NrD6tL0njMDvE+HPgXlXlMKjYZNFeuEcgaI\r\nYfMYQ6XkuZtqUH8r4v1YbA7fvtBWXl2DVWc=\r\n=BVNR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"7a708dfc09b3443c565ce80a676b159abcec1339","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.10196647d.0","@material/theme":"15.0.0-canary.10196647d.0","@material/feature-targeting":"15.0.0-canary.10196647d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.10196647d.0_1659563622054_0.17510690390016115","host":"s3://npm-registry-packages"}},"15.0.0-canary.b20d3d73c.0":{"name":"@material/shape","version":"15.0.0-canary.b20d3d73c.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.b20d3d73c.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"799e370f2d34d82a85ad7ecba3e2777b7da8c869","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.b20d3d73c.0.tgz","fileCount":14,"integrity":"sha512-/O1r/un9+5sY/8Zr7qL0mxMmmbT2SlAYvsbVf05LV9G8seHcI4EslmYMPj0iqoaD+u7t82V5V+SrzFODr6dCoQ==","signatures":[{"sig":"MEQCIB7TcxeegS2hJujLnOyj7n6Xbznmgy1pa4PiHVIsAVlyAiBtOJBDYH2mQsut9tum9vLE/Iiaj945ut2vYrqxGCI/dw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi7EtrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpDvw/9EgnqG0yzPMv+oPZ7sWPtn8LOSgCa+EYf9MCIYj6bySrOZT7V\r\nfJiCv8Zc3PvF08/0+zbxk0GLcxt/69B7IeTBG1X/oxzmqcezzUngjggDMCra\r\n0HwqwVHJ2TA+6YaBJ8vPcRLVwA0Bj4324RgHsXCjRpynCnZWGT2DQdbrbBjZ\r\nibKT9K+qzlUIXhkOTV9S30TDn9NIuc4amqcyYzaD2SLK6rshyyNPnfPoidhh\r\njRbI49zA0Gr/xQr6UuAEcDeJMB3euz9i6tiQ+E7PnsW3+XonbJRJ9KjmubAb\r\n2lY5vEq2T8n7kBKJTdQnwAsbJOsw54oqSTdPY+QpgzYhH7tB7gCzZDGi9kDk\r\ntSpQWtxkQoN117+mOAYzSCTiU65L6/Jl7Qv7BJKA8fVRWyb9tfq8d7cKXqUZ\r\nkRBZDLjNYScS+5E301oQuVa165SVtLUY1FDicQi+t+CwAPVvDAwj18nlC2OY\r\nnu7dV9xZoG7a8ZjkacknfrFASL1H0bHBF5AIW5OhTgYLW56PSeJrnkud5E+U\r\nyFWeL16uhDsCpiVvZMd5oZcmYA8WbBCp02fadrBh+3GULVP9FoCoO0TfgoOZ\r\ntqzQvnLGbYXGcHUZ1d0HsXNqpRe+nb0A38XNuPCO6QKqfIMkrgSFfnbSKV40\r\nHHrsJoDRN34yWYeWV3SWW3f8zgIETuBRjQo=\r\n=mOfH\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"c869b5a3ceaada6bf2ec164c65f1e4fd88a0e7ba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.b20d3d73c.0","@material/theme":"15.0.0-canary.b20d3d73c.0","@material/feature-targeting":"15.0.0-canary.b20d3d73c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.b20d3d73c.0_1659652971357_0.1341734466074067","host":"s3://npm-registry-packages"}},"15.0.0-canary.47c0c6b1e.0":{"name":"@material/shape","version":"15.0.0-canary.47c0c6b1e.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.47c0c6b1e.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"043da03507249d1a727f348de16cf9f047e724b9","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.47c0c6b1e.0.tgz","fileCount":14,"integrity":"sha512-FtFk5AJW8Io/rbzwpgBu29LZ23ZE5z6fv3VsEtM+qOJTR8vS/SjZnhNwPvFQVzEDC246CULCNiKcQFD/ww0bCA==","signatures":[{"sig":"MEQCIE3yagWY8YeVmqbPSkym3tPmRrlBlVgEffDM6i8Vqcp2AiAgRypm0mQqXf9gvlbclTto/Uuex80Teua6H21sz5KVnQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi8ns2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrlBRAAh559KmH3HKTgDGVHWamVh4dMDLSs+FiozeQDCgXT5Uzz7upI\r\ndJ/XASBJXgJDfgdGjHFLrFnZbMcUoz6O7z0TFykqz1jnnRgsVgdxEXZqoCXF\r\nUOMrgKWRRaJ9G2Fws8eI2NPfzsTJBLAkksubULkg/Re70xJnuj8qmuhk6riD\r\nKwoSbT4cGyvlI+vEptQjWzgws+2gYuiQ+sTLLjcQZ2HLOHGIKah740l7dDI8\r\na4YmWz5yLTFfVw/ySqhxtFe3oJikpFJUmjJjXguf+aipjwuCht0oJD/EC3vS\r\n3Dw8LLHF9v3FpmsaN7Gp1v/FaWK3TyGQm7EDDaAFZWT9Bp8hjwJDD/SqQ9bk\r\nG/z8+nlpxCiJK3miZxclge+ZD2XMYnRIIBuJF1FNJeY/TlLgcXNt+AHhYOny\r\n7sdC2Z26RlQR+h8J1pWmXUnigyEHnlerNw9gkEl3cpTo6tNtz4IvaFwpTkbW\r\nj/b5guOZhHwIPTK6wp284Iq68LWf+QrojHfLmvicAcDg+k3shR2XQpMpx4FH\r\nVUuLF7EovTkwNcfdRvi09EPrihXhfTaI3/HmE1jyn4GhFw37v6ZITR4nQp3q\r\nuP3X879r1cXiK5e156sQzZN7zoBZq54aqu5DgYIXIiQxPedMriwkUUraEO3x\r\n0ZZ9zvLmkLNqlsQc4ahnGAEDj7lzPqLcHPc=\r\n=joWH\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"692955bb2bb9c99ddd9321606e40fe4a56de120e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.47c0c6b1e.0","@material/theme":"15.0.0-canary.47c0c6b1e.0","@material/feature-targeting":"15.0.0-canary.47c0c6b1e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.47c0c6b1e.0_1660058422217_0.054159637548194306","host":"s3://npm-registry-packages"}},"15.0.0-canary.0e3dc8e38.0":{"name":"@material/shape","version":"15.0.0-canary.0e3dc8e38.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.0e3dc8e38.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4703dd0608c474b6f004138cdcbd65ce9b72073e","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.0e3dc8e38.0.tgz","fileCount":14,"integrity":"sha512-dn0eeuxFRVsTDEFKcV4qEjXsMXjACFsfi0R+GhcGDtElRu5j03sWfZbu1GW5lztEalAVEXtj0yWXUoEhe397Eg==","signatures":[{"sig":"MEUCIEB4WTZW+VFr59XC7WwudRglWFXHbbeCCSbKKxr6cuD7AiEA5UZgLWD30fMa2LioQXcosOaoLrVBOAeeV4h9zJI5t50=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi9U5hACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoBtg/+Oup0/AsjcCRIKD36f32mADyLh9FqKkwSgM79YtOwGcAgfZnr\r\nY5LBTXOc6ru6/wHIx/Qb0e5qiEVocpw6NBVQ+rPetMmNiBYsT/PGEmsnes2E\r\nDZYIPKafJzwj5MHwB8v+GBNIrZwom3VjKP1A5w5BXcS1Gt9igh4Bnqy2Rtg5\r\nuy1uuc0g1IxB24TFSpkNFkGJeFtRAOnbmgEyib560z+d1ugqHR/3fNvjGyo5\r\nYZ2uFIkzyYKBxA0nAuQARDZnn+Vz4pirl6u49lmv1ypwMQcCNad0SfmMpQBX\r\n/j0tGcT5F53ZmcqVXPPgGMOn9hPlzSFpjpFV8axTPXTkRjhMvhT4AnMyzyY4\r\nvaLrguNUT+JDmrOnosTgliO4lAs45nrHC+i7t4SPZZq34l66i+xYz6V4qu6Q\r\nuhaKObP7L9cwSKktg+sjY32JNCbQ7gkXA8nQg4Ao1LPZ5BL3QsvaQLJLIu8B\r\nIQZYUSzeDVk4ucEPdxfzFZPMaFLIftYkdOd6OBPNDc90mkHsXyq7PrIHMChU\r\nGFZ/glMn8jYNejwI4T1G51te72CDa4Akq/1iDnTbR03Iv+UThmzlS/iFcFYK\r\nTSUg6O3ag+Zos7/taoVeg17elVxzOBKcuzeRpQXp3IoHnTX7OhsoiZ4mQ4zu\r\nDy2+wIYcDD0MEuzkqayEPoF1fdf79UFqDy0=\r\n=QaeB\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"51983e03d07e3c1f50454770dc24ff8d6d6f97a1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.0e3dc8e38.0","@material/theme":"15.0.0-canary.0e3dc8e38.0","@material/feature-targeting":"15.0.0-canary.0e3dc8e38.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.0e3dc8e38.0_1660243553712_0.38073954069680904","host":"s3://npm-registry-packages"}},"15.0.0-canary.d5a11f1c8.0":{"name":"@material/shape","version":"15.0.0-canary.d5a11f1c8.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.d5a11f1c8.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3f28cac484374a046f447f6bef5dca5a2fb6721a","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.d5a11f1c8.0.tgz","fileCount":14,"integrity":"sha512-vC10CQHnqoBkVT5bWthwXJnH92XXM7qFEzTqXSuszj/ZHYXzijKobuxSnee0jtWOY+qcQe7Mx/RpvJIsYyLZYw==","signatures":[{"sig":"MEQCIFQlwXEGTzyj2TU+9ssxBPq2+uo1CoAd2tws2HyuYbM3AiBlypUKtm5S0vdIAmws3Pqy4aurHBhD9c61aDyvCjX/Zg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjDpa6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqZpw/7B3uVthIe5K1zgxEDgajyuGrhQLcES1lpXfagAX49O0PUVb4/\r\nPjMUtF5PwsXgpJZoSpKC992KeiI9qZryCZPLPTbvMfBF9jvuU/FW6InrseAJ\r\nxHyM3dMyICV4eselF1U3tOoWqr5WW3sDfKI0Z9QSbL7P8f6y5njlbEPjTVhU\r\ncTBkYsiP9U+gXXnXpLn1A+7r7k1iJ0h1/jxAsYRglKhh2nogFDGOdQSw4pUW\r\nlgtiOGe4FhfUQ2A7VZyBYf38AbnGAJy549tk5eXCswoynSB9EqYNPjfba5g7\r\nVkSVlkvxPaQLaDfnazx++2pUYPaz8KaYal5GCvs2KjVtVj7h+WzsEUiv6n7u\r\nIlfeeQGRY4fCzJAlO//XVJyU1gdzaKFxxZ9w3vebHz92apz50wfWbSweGcNz\r\n2Q5Ei6PV8EE7q/jzgyu14lGGPqZGGbxMmB0GWtTLoCrOBAGoDos58ak++vsh\r\neLsMmZniAKEZ/biB6x+d9NRXdnoUsYKefNsZcWSOBI1qTfGDlKnpIi27XhhV\r\n8zmgeeLxZi35ckT/msAlReV2gVgVMfhBDj2J9JemyxeiWyQM/Z7yuvb5xaJh\r\n6h7uuQQ+9mNIoOFFiD9idPqNB/H1DFp0NYWFOuDqBqLu6JUGLbfhJscDdcVa\r\nARP1ctiGboIHQJKJeLWqxHF0y2vYT4AR85Q=\r\n=XIwD\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"7ac71b54192751de3a5469d20cb2e1c30e544d30","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.d5a11f1c8.0","@material/theme":"15.0.0-canary.d5a11f1c8.0","@material/feature-targeting":"15.0.0-canary.d5a11f1c8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.d5a11f1c8.0_1661900474634_0.8004396157411202","host":"s3://npm-registry-packages"}},"15.0.0-canary.bac992a95.0":{"name":"@material/shape","version":"15.0.0-canary.bac992a95.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.bac992a95.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"08ccc86f7039b41172d8bb79f45f3029d762ec84","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.bac992a95.0.tgz","fileCount":14,"integrity":"sha512-cDEXOXULMlNYU9+JE8JIKuzUwL4nUwl84V8LqZrEdkV9VXTs/voPNUXx4tbwk0uKSysnXiILwUkKPAB4cNoaAw==","signatures":[{"sig":"MEQCIFtSgqp5mCsRejQlaTJValOcq0PPXOre91eHJZRmL6DhAiB5qSGFv1Frgbc4CiaSSrwAXYKJzrw+K1s/EM5s2QzK3Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjEFm/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrQTxAAiNvOkfPJ5Dy/27etGd6XkQ3ecjh9Qvn0btroq8SJqv8JXLse\r\nHCa9KNiddL1SGlTYMkWc1ELzhmg4/WaMRs/X45ptrWM7HPlgEoSj/ArYJ4W+\r\nxoCHyK5urWooxtnNVI1Q75VUJMvOJEINX6L4nvm8IOlbjGQcnAAkMxaLwhVb\r\nhFlu8a0OzqIn5gLCqw8GgzVKhNtkW2w+V0bdY7dYjIc+hLoWkBMlGfdp7r95\r\ngiitsWOhQQ7EMEp/aWwKrsu/2e6G65C8lSihTqiN3/CereaHuWgjLtfubbJy\r\nL01MJT3kXvRbm4Usmd7ebGMKXkycT+jnY+Da8VeQqxL8BOgEi7JTq6dGUfbl\r\nqv0eKbXLWz+qkyfEOJQ3CFZ5XbzzBUJedR4g/d6TXIrxdnvHSvhQAPPSQAS+\r\niw6wDl9MqLxVWHrjGLW9rgk6rPFH4UE8V/5w4L7KWjEYoI0yKrx6KYLdIWbu\r\nN71NMBh9IqYCCm5VYG/z96L7M6uN5A9WrBSNDt/y7nErh+wct2og8qNEDQJn\r\n8hRO86bxhsO3YyLIFuu9y7tfuJBDTJbcmMc42JG4BFnxvYjs8pqaXIdBHr5O\r\nL0UZFFCAPknKoxHi99q3G5qmKm8Z+nT1LCtTKpsvt7cBZRgiTG0lmQiENv3Y\r\nKHnO9X+HzR5YRoz3ZrwqROZlY/EPmsIhHOI=\r\n=UoEB\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"b8dc8f019b6b9a7241d55c21925faac495f9230b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.bac992a95.0","@material/theme":"15.0.0-canary.bac992a95.0","@material/feature-targeting":"15.0.0-canary.bac992a95.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.bac992a95.0_1662015935132_0.13250166122307716","host":"s3://npm-registry-packages"}},"15.0.0-canary.d25f3404c.0":{"name":"@material/shape","version":"15.0.0-canary.d25f3404c.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.d25f3404c.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"defffa2e830939053e23eb077e2d9e4c57b409bf","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.d25f3404c.0.tgz","fileCount":14,"integrity":"sha512-vvxD44EzlcMpXtdF4EBKFRY556ZTCpA/GOJETBYF+SSJNUpeI9y4l45p4yUlnwRc6rM4oOTmjVCAkdy9PK2okw==","signatures":[{"sig":"MEUCIGfyXiGK3GoGa9kLols13HVy8IiAzllxyLGqoAp8LSOdAiEAmMNEoZomYz7o+gg91YZAXqWaoRL5O0WF03VmiYvG/no=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjEH74ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqwOhAAh4iYjb1IsIPULdx6c6bhQbmVyQ/EoextfHT29UylIA6BqU/z\r\nEDqtlavXaGdUNtVXbhZ6PWt/35yCHOaeWMsivar/P7mJob2CPk0URtpLrCme\r\nBzQE5K/lcxcWbk4+ZEJ0TQQmm8NUX4QtgWrn2F2ueQiSn1qokuNwo4s6mVAl\r\nlSYqpQWHkJNnkNPzoU9T+QJ45Fz1FFdp+KH/gTiLGnpsreMG2cHAva/yXUoj\r\nvJapnZtyb9aPQRXLY3YWYxMhOUdTY7u4OGwozIjmQJtTecgWY+qpy+5K+I9E\r\nikqA7X4/WkZmIyjcmJ08dbdnA/OKfhU5cdMfliuNi4eqVJCflrNTma7/fNHG\r\nFW+JB5Xza5SikkAX+pmJTHxJ3zs6a61JLOl8X/OlmbiDOEW8aZXUaj2j5jJM\r\n/BPHHowOpV/jQvMXCwh5VnNCZg7Jv92o8qVJQpdwyt085qWTYwYLKkTt+J0/\r\nJSBp2/pGDZ2AvcXTw//ew21UUaYpvnvtoWuO0AxRimlMAFYQhvDHHUrCG2AA\r\nzr2KNH8zXuLtd6PwUK9S6mHMKlZcTNM62ElbGnLZ8qPOTrbXk7/QsiBu9g3e\r\nIyRECql5/8oapi3A28YpAyYX/vIZiBWo0sGdrobJvEmZq4w35V+7MFUkl/HD\r\n0qopRqPWTGaGzsQns2uv5kFzd0kEKAsJZhM=\r\n=ygpN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"cea256990068cc2248c9bed32c4a47fe622a3286","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.d25f3404c.0","@material/theme":"15.0.0-canary.d25f3404c.0","@material/feature-targeting":"15.0.0-canary.d25f3404c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.d25f3404c.0_1662025464139_0.23452138771490483","host":"s3://npm-registry-packages"}},"15.0.0-canary.920d8a79e.0":{"name":"@material/shape","version":"15.0.0-canary.920d8a79e.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.920d8a79e.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"991d60e5db7de2a1b3ddb86a0788637207fa0cdb","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.920d8a79e.0.tgz","fileCount":14,"integrity":"sha512-VT3k4pLdHgTx3lnfEkFZwzLgSDE9et4ag1nRxB8o6gIZJq6Emz3uerMnT/jrrMN9dIYt3kKKzy5VZt8MqMdC/g==","signatures":[{"sig":"MEYCIQCG4TgeCjyJKYNGmfMO52E5UvBxkp1aa16BJuBIT+2OnwIhAKewgVfuXczJKRTdFAWiwgWv/iDWUKyuLjuSoHqhXy7z","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjERQmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpVmg/+M+Tyy8AZwphPE5poqCL5KLAk6fT+7YROmYWvuzU1rqCtE6Sg\r\nMOkiFQm4uFmaemKODMWT/5gZddEsL6bIR0pDqFns5ARpRlvw5ndxaZPYKad0\r\n7E0O2oesiaIoF4XZaYxTGaZsvro3zWyWPk1ImtGI3REGxEykA4QllDwdWoIh\r\ncXqnfaOuvzBE1LXOpZiUqX5hCdRlepX0URwVKNBVn+AkvKcXuB+2022l9F+2\r\nHCaATx6SbWruuyhqpBFYGsDfTF/POhTg/QeZAkvUeuq+o+VAVDAeN/ELjLe3\r\naTb6EMT2MO2aaktjcFszaOC5H52GeKPjjJHtDGLVkTd/WNCo2evKWZQ0x5Oi\r\n0e3oSCKLHS8iMCD992JsEoyPfYY1E0Ynm9yRfycpvhb6kBDVxxSReB4WJWfn\r\ngs6yi8QDNw4wzG6TJnybeGQM+wGHyPESUMrp/aTfxb0NFawtliL/3QkQhgku\r\nPO13uX6hL+fNEb4oXpx3uzP3S7YqnnuUqrOkhfmEOLhFflIU2loG05RymNyY\r\nUPgfb7Z18WN4h5sK+yXgldWg5DzCiU+Q4CsMsqb76MgUQ6ztLIBlyYEI5Drx\r\njJ87GxX0f5pEG4jl6TybXVxOdQRfliJWrrBQcLjbBwKeE20dlzX/A+ij13+I\r\nlsCo28/NLs2Z+AXQd8S+1jFewvmJ6TT39WA=\r\n=8mlI\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"781a4c78770587fd97c25633bf9f137081c35bc1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.920d8a79e.0","@material/theme":"15.0.0-canary.920d8a79e.0","@material/feature-targeting":"15.0.0-canary.920d8a79e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.920d8a79e.0_1662063654218_0.8289323307365961","host":"s3://npm-registry-packages"}},"15.0.0-canary.c363f267b.0":{"name":"@material/shape","version":"15.0.0-canary.c363f267b.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.c363f267b.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f65105703acf90bf09cd35e6e84f6534656ad0a9","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.c363f267b.0.tgz","fileCount":14,"integrity":"sha512-go718xJgt+wgQ6vczM9q/fNfDWe8DZ8rAFIipQzYBFR3xo5+52HxQDo+EiVRn8V3EPDJqt8g35oI3difEQ28FQ==","signatures":[{"sig":"MEYCIQCIBH1K0NEWl1ggsBXj41vyeD6Iiq0YRBK1YyA2LQ/saAIhAMsb8093WhjN827FcZ7KO13duxql1+VXkNX0fN+nExRd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjESGVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqwSQ//RRXG9WNpjZwd4UjAAgFX4tPM091+UIVfAQXMbCLJT29uGa29\r\nmuK5h3aN1GBqGRZRXGg17kvIz2D/XuBlfOyLwJ7XKfEKxEMcv6XWuQcqyzaF\r\n6/dSUgHCwzRXUyQ+N/DrcWYu6PxJGURF6GatBh0F6zSVCoBQ84fjeqvH6GuX\r\n0wMqiEWFcw/K/m7Kc/bSX4pT+AJapgOBwCcOKiCI8QpWYvkTqQoAbfi0sXTB\r\nTZJkKVAGp+ht5lw1MZ16tkakxdntT/aVJirRr16YS641wMLTKf0Iifvos0Gi\r\nqiPjI5jgKVqKJyhxXiDuRVuOEaz7wxP5GRI7LHLvdiZ4P+BySGX6wfmrqIXw\r\n8rA8AvDYEDNRVAomB02MuPU2LdBsB0keWasJIDAviiENHmWPHRcZeFzuoZlf\r\n2xI0IUajw/cHaRe0N2quaECgdn2N5XLvpD/88Q2bTKQbd1NcahA4oer+g6fT\r\npUNbWtHiADeGP3qYKibKYG9UGO8x9yErwTk6XQiYE24iUwWEI3UmR0F7YZUB\r\nQGScO6rJfM+czxYdImnFXUwhLBomWjYZFlujqN3ry3e/QX356tJ1xD85mOBG\r\n3nZmTMpvDEzcASkAW7tQbjB1j3Td/1Exc1TSy+Q/XARxNUbDX5FtH64QaxUs\r\nGLVi25Y5Tb4OXRGETxHpQOdfAI/uLREpMW4=\r\n=jFt6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"6e2ef624f85a84b5510b55933f017db57797f611","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.c363f267b.0","@material/theme":"15.0.0-canary.c363f267b.0","@material/feature-targeting":"15.0.0-canary.c363f267b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.c363f267b.0_1662067093413_0.5181843830629151","host":"s3://npm-registry-packages"}},"15.0.0-canary.a4eb4937a.0":{"name":"@material/shape","version":"15.0.0-canary.a4eb4937a.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.a4eb4937a.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dce0df163ad0bf479968536e87f12811e20c8828","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.a4eb4937a.0.tgz","fileCount":14,"integrity":"sha512-L4G1lJnI/mM0fubKffSVkRf5zo43uIgjgvpOGKzU+OI9/qIPQC5QmZDKGvTTMgN6qBMrJnYddUQDt4rw3FztAw==","signatures":[{"sig":"MEQCIEIMQNqeAUbgf4Dn0/qA/opxwW9W7v3fCgUpM3EJelJcAiBiYkea2p9jbRtumL9sOM2OX1g0BuJh9u4ZPKW4gQ2M9w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjF49AACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmot2g/+JB8kU7HIiZbr43q7jo+wYUMMvcikS+Mb5dbKQZwtbj2zi84G\r\nwBuxZq6kfC4E44ok/OXKqzk5vLOuStT/tYljAuquxauyuTqAEZ2beWCn/rEe\r\n1sj1lGJORvgpQ3dwxv2xWMwO0T5XJlgvzLufj3HK54rAl1T+vdqu93HIGN79\r\nItJ+5Uj5Fji4WrySOPXvEiD5E5HWoru84XoD5/2DAN+e/u/LCXiRgKA4N84n\r\nj7kLM9Mm8VLokNtF2kB2GAd7oA+KyXG3ymfWOKyaBJhQQuOmc8X7jYIDVM13\r\nW0uLUVLfTebouk07D3uFMbuXiL22fpUbOiQ4jAsksIO/A8SJ+CMT0fIOZIvg\r\n+gbWaQ8wr8JRI6ZsRILTTAzHqrcBk8fOkZiuQFJ/JDwPysdPQlWMIkioaSPi\r\nK/WklUTbJB2CJQKJkCVCDVWWtaoasvuUwSwEJqNyAEUfex4rmpAh3uk+ZG6t\r\nSbZ07BbY84yjUuA0bkz6IbjHJmqi8FIe0sjQ3yZ4ApTXGGRk+HqEaBa6seld\r\ne8WOvk3M+l3zhr5dmmdU08SLV5G5Uiex1uE8hwcDMn65lybB3LMeDbO1UogW\r\n8iCf2lh0DC3CY6wyNesMeLGH2kEPX8LXlxsXVE9QQxPwJtv3j4dMB/sqQRI0\r\nLcVQwuylEt2qB0Ij9cbt+JOVpTgN+91Ivow=\r\n=jOew\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"cc03915314119934676831cd7a244f70e12dd2c6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.a4eb4937a.0","@material/theme":"15.0.0-canary.a4eb4937a.0","@material/feature-targeting":"15.0.0-canary.a4eb4937a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.a4eb4937a.0_1662488384020_0.977868004528859","host":"s3://npm-registry-packages"}},"15.0.0-canary.4299717da.0":{"name":"@material/shape","version":"15.0.0-canary.4299717da.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.4299717da.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d805c35e340a53c29a1f2dbf7438226127e1ede9","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.4299717da.0.tgz","fileCount":14,"integrity":"sha512-slTjdMxMf2PU4jOicOLBW88KYx4UqYvz0ehmn9xFnR93ePAFrSgGsCwewtwbMKjHhjftgMG486LiWeg+OQ/wlQ==","signatures":[{"sig":"MEQCIDSrun+AlcJxVAibC74W8kqjdsiPGahwn/TSEK1UcksHAiBpSNumvKT6VujZWdanavaNy7Iq1Dyqf3u1xmJZLMYWAw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjGMOpACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr6Yw/+IGL2ijcUAmA/+3BelIIGN41DSrCEgLhkpbCfdd67ctOK0Ma6\r\nZ1wQURDu5eX6tRgv6QvPbrQafPp4LOc2FVmwa0JxNsey6WsfG9+6CFW9QbEp\r\nv+haAZCXgqQPSuCKa8q/+WuCIYSXi1mwcWzpeqmLYDP0IlrBiXC0xHA8w+xb\r\nq7wrCH+W962dVcR5o++htynwWMSCmsyi18/2h0U6Tpq5DZKrlA7Y5JWUXjzj\r\nF3qAM/O8CVm2jyqsJ8ZRmCchCraa0kZ94+paex4Y8bTVn30+ObHbRrJI1Q9w\r\n8NPjjgOX6R6uObFLpXAxh8VwLwnamqEKvsjHgTBN3WpHLcs1hHexOR1FUhYE\r\nLhdhkLa0+2JAJGWTWR/dfc5xwpMQM9Mpx/O1EZfOIrhepsyBlVdHcziBzKP2\r\nuhJ90ZjIgze9zmZBnfZpXfKHbM3lxqYI6+Nhi9VMg1M8qAX9V8pgUHm1HMWj\r\n1gWP/4/zt4ytMM7e1t/oOe20tVNmy67LA1oCX7BHFnpr3FfAaEE47//ZTqYX\r\nmqEVQz4nbpjMk1PGOcY+VzDw9Ray3YMPgdAtHKiz6IGV6deL6EbnUGRgMQRN\r\nM8MdWMV1lcJZ3Xj3+fakyEhlwX5SZfJjOiGm7qTfC04jQBHW0PGdU7xEgcLd\r\nx6FducQk2iSGexZVtXZu33ju4zAnq0QPsrw=\r\n=TfaH\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"22082634ffad1ea812192e5ac62786a8ef47aa81","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.4299717da.0","@material/theme":"15.0.0-canary.4299717da.0","@material/feature-targeting":"15.0.0-canary.4299717da.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.4299717da.0_1662567337032_0.106903123301614","host":"s3://npm-registry-packages"}},"15.0.0-canary.fa7d8d44b.0":{"name":"@material/shape","version":"15.0.0-canary.fa7d8d44b.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.fa7d8d44b.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ac257be9d39278541f247c22a2959b72a11fb271","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.fa7d8d44b.0.tgz","fileCount":14,"integrity":"sha512-lxEL65SPYWDujPZLCphXJb96HacAc7mGR8v4f37Yyyt3SspV5vuNNGwwBKhvbxsE/L5h3mGamqg80MMQJpYa1g==","signatures":[{"sig":"MEUCIEAfa+3IYUaZSLviOBjhN97y1MUT/cP3Z8rDlpftHtyeAiEA+R0MDUhlNYU0Nb6mSRlbhMqcq/XaXHDL0kEEkjqBsA4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjGO6UACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrNEA/+IPxbTX+JqrvL1Ek3FMogISSRDEwQHz641FiFTOI+iMzYL/RF\r\nzhh5fHLZibaGlhs6xBd+IvVzh5NhxrQLdADkRiQvYOz0O3yEWU+NoB3/nOAG\r\nHg4o/PPXDvp/TgIL7lDHxvcbA5mcp+Lih4XgrC1fussYNdOdANPQ3afAJC/s\r\nAecJR+GteomnPGd+52uY3GZ27lpoAUHEt7NFoJ4MWyuRNKZBJYcNJaeSdxTH\r\nC8iSphTTd0aG8aSgej0xIR+hLOMlxeEpWqe9P+lbq+5o2lEIuABhFdmfRTpt\r\nb4WTbF7DYJWDxYrTyzp9F9HT/NDqo1lH5Y88a47MYuCRllVpvi9dDCZug/cm\r\nzyzh3WhIkglr9eM3+Sy4nnMEHG3UKNH4HHX140lC7ITAd7FKWY/pdgl9hr1k\r\nZZU01FQoL3QvI65fXVtYUFWQhv0MfNmT0xW0SYrde8/gmTImzFTgg2ABBWxl\r\n9V1+R7jXxUtPkOO2HDuKSBr0fOE4e9yl/wAOF/DrfVuyv8jE9vxp7GiaYa/t\r\nQfWY8Ojp911NZZk9DJwsvsy1brC/ju/RDoCWQiq7XE0p5tlj8nDC9IATUUWP\r\nRTU8TFfx5IIGizSL6P71AqV/hCmIHscHM/vc4bjnxGIiUluArLLW5M48w+Z0\r\nnZjbPkS1VS3167AGjCM0Atujmf3hCK9SBko=\r\n=HYmn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"6fc828292e73ec2f8aa4332891628e90f4586658","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.fa7d8d44b.0","@material/theme":"15.0.0-canary.fa7d8d44b.0","@material/feature-targeting":"15.0.0-canary.fa7d8d44b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.fa7d8d44b.0_1662578324057_0.6744994656016747","host":"s3://npm-registry-packages"}},"15.0.0-canary.a40e3c768.0":{"name":"@material/shape","version":"15.0.0-canary.a40e3c768.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.a40e3c768.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e4371da5789ab0d5a4fdd0d0991b852764582f99","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.a40e3c768.0.tgz","fileCount":14,"integrity":"sha512-gS/Q6h8o2WReiFywNWVm5X2rLDHk1vo/me/TcF7HbPBD7nxH9dgu8NPHsTLFL3pF3IMw0tF1EDNKQ0becTMf2w==","signatures":[{"sig":"MEQCIFKJ9bDPIOVneHqLCtBP54oRyeWPXZSkI7NZ7ITPMn9IAiAS6Hzfk7WuntGfsIGyMZOLcV/WV/ueL1TFzXvB38dVsQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjG5wqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo5rhAAnDHgevywsxtDVOPFH5t5thcKv7w9CDK5EC6B59JyIYX+ImrL\r\nJTl40KivxT/jAOpNBQHdVn6gbwIIhO3bnybCA9v1MzimkU6VggUyXRcN6BUq\r\nB/kWYYCpubNvR0r3babTnZvQb7LTaNXTXN5dRLrUr2Gu4fuVH4R1yMCIZVoB\r\na3muvvb3dhMKJlHz5Q7SF89Nal6NUZZVjcPvXKwp1ti4iR1FqWBMPgPBhkOZ\r\nuKPXjcrztr5pzOEJhQx8jC2fbMiVv8vQ9X9vXw13++WocfqZLb3wero5EDqs\r\nSauDD/qkJwZYqOLGHGapcDBym9j5g54wq+3UdhgSZAMOQ01Y2GIp/DlxXw9Y\r\nQnvDOctWtRkshjsksvoh1mm6Rf6JkwezoVDVO/WbVjGujyV6Y9DMm8fLb6Qp\r\nDcXXPDLcOGZLXzFUt0cFyI0fkL3e/icPlUr2JhTKw53XH/DS0iqTBogfpXq9\r\nyCDPiYexNKrJK1tT2a934S6wUaPcig75jMTaQ69USsIN+Dla8uqy2ZrHOPn/\r\nnZJ9ZxqKtR/vncvvAO3z7wHVOpzCWe18F0xj3mlwzP9wlDWRSmIwB1G6gBIR\r\noyvEG0OR275FQcE9kaed5TTRYaU57QYaN5IYQD42GhV5osKYiQZltgMjs3TI\r\nu8UWHCX39alBZoECPVv3mzthHSemNQE+KUM=\r\n=TgfE\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"33ff1e71e12298ba7158884edffecc83f0055913","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.a40e3c768.0","@material/theme":"15.0.0-canary.a40e3c768.0","@material/feature-targeting":"15.0.0-canary.a40e3c768.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.a40e3c768.0_1662753834013_0.5472286579332031","host":"s3://npm-registry-packages"}},"15.0.0-canary.18cdc9a00.0":{"name":"@material/shape","version":"15.0.0-canary.18cdc9a00.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.18cdc9a00.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a5c9b6dcd7569f4cad51c516a0544fed34be9389","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.18cdc9a00.0.tgz","fileCount":14,"integrity":"sha512-3HNJ1zKEXZEYefIQ5GbAJUuilrzJMb6S9gm6SOeh1qKCLQ2F7SLPMu9r+/RHyAnFgbIbLckMPkw3UjsjoMzZ/w==","signatures":[{"sig":"MEUCIQC2CT05luilOVhCr053Hn9ijJOwNnOZc7oOdijio6WxcgIgY9XGFSoPfMK9ZrMpDnSVBs7ulp1xXr4JSFj0abtgU7A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjH558ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrbQw//SIQO6j3KViJp1FM0OtbTkCF+E7IHkQTv2GIgiRaxth9/ZmWV\r\nupVuuKZeRe2StJh9FwvvBLK0DyRpk+yD9ppRyiQPZwyR8GmRLzu0ujJ3TlZW\r\n8PkKu+HN/VRjPD060De7I83A01WTpRZ4cK7j+mLsZ4GC4SMWC0Sx1iQI+9WR\r\nExfefBp5D2mxzrgDwRMbxd0oHJBDdk9A5OjCUbU7wXgxAo2PsDM/rsMPnPC/\r\n9PyRXh/zk0afwwkwqU7ttW9RjvSpMlfSkG3CcfusRFpcPZTvGLAPZygZcI0z\r\nKkTfU/pIp+keKODhgyyQZkP0q6qHMppSNzCsrJsTedMPainBU3CsjInwoPY6\r\nlCglyFmeEZFww7ECbpVQBc8b9rsa19bgK2YMlHCwFcMJuY6zvt0qkiSo0usy\r\nPI3BsCW4Q5KxsqLfxjKhx8BObag2vW+BBC0SO123RwIvFOmbY92f7djBq6RY\r\ncvAj/IGdZbNYMGVpKCHqmGOOpyzOB9RR3TdJe4SKn1k1PB13D0E899HnqpL/\r\n/795TjK9zuMzu0Jed3VEU9SG1bneGTwa5p2b3A3MApl1nnG8/psimQvQLLaJ\r\neypazW4sPc5nfvHERNVLNPeglkHuuQ5QPwRi27lgZI9rNLMaQEKfYkQEfiC2\r\niDJuCUcEiqQ78lfmNj5mMHwkIcg24dfbwmY=\r\n=Eu1V\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"85b7dc2034fbd68e480826d635d6d061ba62d3ac","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.18cdc9a00.0","@material/theme":"15.0.0-canary.18cdc9a00.0","@material/feature-targeting":"15.0.0-canary.18cdc9a00.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.18cdc9a00.0_1663016572077_0.8010647267504434","host":"s3://npm-registry-packages"}},"15.0.0-canary.7ab3cd3c8.0":{"name":"@material/shape","version":"15.0.0-canary.7ab3cd3c8.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.7ab3cd3c8.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"173e84f6ce350dc4d657d19a4ee8b3c008f7c3c1","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.7ab3cd3c8.0.tgz","fileCount":14,"integrity":"sha512-nRnLP34EfZyMc9ASfIaatWBlO/7qO4GLoxZdGA1E6R7DUs2/IghL7InjWf9T2g9JcGQalUVDNqQvMKNZYP9niA==","signatures":[{"sig":"MEUCICaibV/iQ4RVhzqnMkPEog6XqVl1xqkYsKaqaWsvJKm+AiEAm4gy+ocYZLI6otwjaZekjdXU/EuznXhxIQKFFCPNUrc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjIQaMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpDbg//dJTOXkEsKVNa1F8do1Rg2wLRnGJ5E7YWvSm7YSDMH/RPvxVy\r\nNsDjW3fmnbsExCmBQ87WoQLp7016ENuB/ovQIU/57xuVmHiB7SjbunTVHemr\r\nViu/DzTtZgu9IG1uet/eIWtyBdyCnA2kijqCBKxxhftIsx222TGnYY4D2EJv\r\n6bthRehlTLr+DDdyWzFWWSNOZwFUQjJqi2ze/SG7X3/yS0L5cMRV9sqeTnr5\r\naelI2YS/O0wnqRiyHJeMgEKeRT0P/udtPdWRfGTDRskJLU5V/xNhkH/CH47z\r\ni44Du2/EP44WfVnPDVJNt9cyvCl0aZPL/3WTthNySoVi2PFsG/ogdZVXb8RI\r\nX7LGW5Iz961fKU9qchNJ6GZnms88U7hU59jY5D4qdViBf04VASZbkL0CDrA8\r\nm2R0kKbKyPfXcQBhLSogJDZ5cZfB1QD7IcjKgFFa/ZPchoOiN9YOuoCoaTNl\r\nqi71sW6iucpoZGI17SM7sU9TbblxNd6LD6B5tCStlRfePY2aSeI02mIXofrv\r\nUH4r8abCJ36l1xqQHT7tirmrMUplnBvopBTm6tzNVlI2b7gZ5MsDdxA9bBhb\r\navMMwY5lIlYkwAMex5X+ZtQj5RRWh7j/UFHSJYPMDoRwF9JVU/OwoePfowKt\r\ntBNE8A9kck2JLaepKQLhVv1dkNYXUwEWJ8A=\r\n=8Hrz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"5e840f2c9b221706de7ff81194e71da2b68b82f5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.7ab3cd3c8.0","@material/theme":"15.0.0-canary.7ab3cd3c8.0","@material/feature-targeting":"15.0.0-canary.7ab3cd3c8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.7ab3cd3c8.0_1663108747935_0.6037154824150623","host":"s3://npm-registry-packages"}},"15.0.0-canary.2860d244d.0":{"name":"@material/shape","version":"15.0.0-canary.2860d244d.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.2860d244d.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"605e36ff3de7b676e7f281bc7f249f5610262b65","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.2860d244d.0.tgz","fileCount":14,"integrity":"sha512-J3gnCY8ESA6yUaL28vsGTuiuJDjRUwkftylrXz4XwhUwgXEolC70A4rY5zHY1gV1KTZN53zMJFjKUj38oGXnjg==","signatures":[{"sig":"MEQCIBtPt8sXDA5kvNTETnuF1KPFQQTcRXqT2Pc3bBk34qoFAiBMnzrHub/Rzl9zv5t1GfmsOylRx1ziHHYdW/NfflY0eQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjJP64ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqMDxAAhzlWuEPEyBjc3H6RnyA5yUPgqaj6mhS5UnmawFm/6Pjqu3dG\r\nmcxklFybGDwfeRdsYvA2RN+JnTdVxiZZRnJ0eAUwSaN1XDGI1rxQ7Y+fTIrv\r\nbTpoVXqSSMxuQsWkM7xu93uvZawY0PAcl2hJCgNJsesQwUreSCAm0PM7cJsr\r\nzcDIaMe+uDelRFH7ebsE29vWyl6uz29/P3bFJuH1zZwnt3KG2km2OHnVzk2e\r\ncGIsiXg2CxyeGnbC7v0kA9ZjzT5+GavhkCd+GauTlV+OuTTUmBtCS0Tu+YVC\r\n68MQ3/0UmmnDN2MAj8pvXIaZx3UCYqu+OLFUvrdm4u5mjo+alFu/sG+c8sFz\r\n+LdsYCcZcHVpj9A3p9nRV8mSohTc3E0RA1KuOIHD57ag3CHNcuvEgY3Uw8Ka\r\n47FQkZbGhFz6x1NIRjxunOEZL8EP30aaDrnAaeya0Kx77YxVEaJshtTMgteB\r\nQBT/di3/eFw0mFjMGEK26je6SJdLcVckvLRMh/v2FTFLvDEyFjh5vF1sbTrB\r\nBpmmWnvGRXf/xi243Nj8QO9NuMsheqEh+fNAJkmb4FidG68piY3qLD/zn1tT\r\n6zuzBQRctFHklXJZ8lvb9NEwHwHh5zR3ksoVHo8RM9f8BMqzotosrGdQQbeU\r\nlZd0LWNOiy0SYzOOCS5n/ekW6Mz12MLYTU4=\r\n=yHAR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"992b4ddc7340e4e4231d1001d68229e8911eeba5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.2860d244d.0","@material/theme":"15.0.0-canary.2860d244d.0","@material/feature-targeting":"15.0.0-canary.2860d244d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.2860d244d.0_1663368887810_0.9655002043878635","host":"s3://npm-registry-packages"}},"15.0.0-canary.e8726533c.0":{"name":"@material/shape","version":"15.0.0-canary.e8726533c.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.e8726533c.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"41cf016af71748d408371dd2abb33ddd772e5244","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.e8726533c.0.tgz","fileCount":14,"integrity":"sha512-07eklfmd05vPsUL0uax9/PTaLrdWihSODLYXVbVjXfXWuIWLAFC5ZClUqKlzcv9utavE1Iy0z9Dv81r7TmiMnw==","signatures":[{"sig":"MEUCICSMgGa8gmJJLJlWZLyXdmet0jdtQbDfoXKYp0yjLXiZAiEA9ciVmWmxoHxvEyg+Avf1se1p1Ax9iWsf3OM0thbsAv8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjKh/jACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoEURAAgKzMmFTHsuBqAGpc/5PvcCpYe9q0K0JzSnrfexc7tU+aV4NS\r\nbUwg1qtIr+Hu9nasuM3TMi6D0sQEdBHRWVMAe7VCTmbRtw7kq1feSv51srZ7\r\ng/GJQObGpw2rWMxgOkELn1jxBLddPm8ZxTCIktph8xw5zwyCXYbYr6JjeHgJ\r\nhLSQpEJ1dBnO8v6E9q59tvKEDiHpVJ4sXUXbEKWNiCuGfC12VOo6nbx7wn5N\r\ntKMlxfaF+nkGXB1Wt8jGW/zz00OcewI+GRvoJI7GyqBpLh/LsPZOsjr/8zeG\r\nlX0eZ9/LFUZoDZkIvzLdUTuhYkWkD4xQ7A+jZIZQ2TjJzyh+1Ks2uN1Mn5fi\r\n6j0dnglotxRpVm1nqRxi7EEWKvkXjkMdcubXufkyAyEe+dnx69PplQGcgqmW\r\nhCdwWrpXK88aMLhV52519DLlTNMhLnlKZbKjOETWEF+8HYuG2SF4abbIvMQn\r\nGofuYw7NeggkcYjsSukcot68LJ9LAvbqcNVprDY+ZbSEvzkQ+AIa27MhSURt\r\nV1p5sSsW800Yil7HWCQhrlsdKnldR6tVc9QWBNqwKvtPFnOyAM3tfTGWkGY6\r\nJSgXqkSgkwE8JC723/Zcm5ZwjLLXPzDVJbrEzbMSGGlUcwPBO7Fb7QBv0yqA\r\nd38NunCu2mplT85O9Zg4WlSDR1YDLd2IsDA=\r\n=pZJg\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"b85a9f4d1ad6e30de8175562c0093248848c2598","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.e8726533c.0","@material/theme":"15.0.0-canary.e8726533c.0","@material/feature-targeting":"15.0.0-canary.e8726533c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.e8726533c.0_1663705059006_0.7189807671990638","host":"s3://npm-registry-packages"}},"15.0.0-canary.00d8de0aa.0":{"name":"@material/shape","version":"15.0.0-canary.00d8de0aa.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.00d8de0aa.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"63d0b08a2238cbcaec2eba62f417e4029b46876e","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.00d8de0aa.0.tgz","fileCount":14,"integrity":"sha512-gAjz1K1yjIgj1GrLUXBR+TuFza+7FXtHWBqkT/CHIhZO+AGUji9th+UpD47kIVckbMyTfGWX7jvEz+GPkATBDQ==","signatures":[{"sig":"MEYCIQCAgnTG6P6cYVh2lWkLWz5PZ/U0vH0thPluGkY3mCs89gIhAOF+a8plxu+M9aguKa4dTuzQ5tZTUxntl5rtg2ArdZAg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjKyulACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpHkQ/+K8/Jc9HWQw1JmCrbS+S7ujiuAS+iXjiiNHAEX/t9w0Lxab/m\r\nJBlSR7sjgHZioLWetHnXctJlycqKG3EudPup4QM8pO2/CDn9i0uelRQmpAoq\r\nHOF3Bckm6J5jFAfkN23cODCfSYM4OAlPRkDv2o/rLhwNfrM2MDk5q6YSWpwb\r\nVcCIIzXRiMCmPFAcWUN566SbNvLUilLLAHvABbs6SgOEynQjGz4G3CgwXX/Q\r\nAp2ShaKo/j5ehcl5zApCrLDKD+Qd0SjG1ihP/8eaIBf7KfMv6pi/OlNL+XLI\r\noAUxe3aq6o6sBnrCcHiINOn1CHfMhKZnNDJvGDvWF7mnUue4j7i3Y5WZ+ZAg\r\nPnH5NSMGGM2RkJBiXYR9n9pHI9VWQ8HTKMdY/hZy2Xq4+jlIw68PEHXA2h+z\r\nLS81hzKOsJFVVujS+vItY8BhVoQLhFNA4TXI/cMAFJpolYDJNo9Pr0AtRjTF\r\nJe7m4P3ypnCvfodSfGSt6sqmv5pFfQd4i3zqgqWueoA+BiHRcghFGAWirjW3\r\n0c5euAiIjH/yylxkqHYvo1pOk321foSh00K8JmjMWJOLTQxjXrNi0LXtWeae\r\nKgw0uY7UmFTedGj4D4B9FBbqRF8ilcb4oiCE7SwUdhD/iOhv/uWDYg37kX81\r\nA/28IFGUeezEpNNLuaM0fpkVzz8DHB2GeHI=\r\n=q0y5\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"0be0806991396e042fbbfb14ac3ad622770647cf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.00d8de0aa.0","@material/theme":"15.0.0-canary.00d8de0aa.0","@material/feature-targeting":"15.0.0-canary.00d8de0aa.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.00d8de0aa.0_1663773605221_0.26722891328584875","host":"s3://npm-registry-packages"}},"15.0.0-canary.271aedc30.0":{"name":"@material/shape","version":"15.0.0-canary.271aedc30.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.271aedc30.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0c27bbc5683c00a70798e6ae3ae51bac9580ea19","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.271aedc30.0.tgz","fileCount":14,"integrity":"sha512-QYSg5Mt2TD3oTzM4zTojCkkxziV3ozircyL6TkVTdTdHB+JMy+SN5r/sE0o1YrvcqlH0K/VFi9izBH1fKidJBA==","signatures":[{"sig":"MEYCIQDD/o+1VOQQVK+poVxjgWVx1rR7jYzObj19LwtJuhxgowIhAJdZqPh8SvcfWpo2+ISdObCk0rIIwP3eKVtjm7wgmh+7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjKy9YACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqQnA//UxOq++Ja81Dpsryum8sY0acc1IzI4QsKlbYpvjdSbgfAA7Ro\r\n6uIn40/c2Q3s7yhQsHEx+VAOftyNYA8eWvfW/tidnmJZMO0r6oZl1xDYVhQ1\r\nNWzinVgrbTm2TD0ilbpcum+Uu2lswyksW0fmjl6P4BlHplTHvQFttroKTYNw\r\nJ2vtrR4T3c1IFIwExYO0KxTgvk0oqccmTkO5lOGJZF+a/PFXnAjqGbtrywV+\r\nUUzzfxWEZPDzl4KLqqzgMBg3roFbl3GX7HL1HDOulGVazukgDKdTh3RMJGIo\r\ndTzKzyRD5NSsfZZes8DXdLkD89liv97mdhfb06ka2y86CbClSyfihfVIv+DV\r\ndrFNN8l9dNazKUcQZ24SZNVGXubjVM7L5FghvMpHSiXGOeqkDRNH27EE81Gm\r\nG0swyVGM5bqGI8aWF75w+HJqY7f1pAn85iMwPXFfwdw6C5UWtwMIxufx3jE/\r\n7ZmeelEy0rU2Mc7OW8+LOStsTG8U1Eyu3euvCiDQVc6frGKeli70+sfPYLfD\r\nfkPndMPAswEVsZl4jI6As2wZ1tnHwNL0jiDn0vvheycQ26r500syD8BwsIGh\r\nfs9GkAft2llLQNJ510WGpN6JFJoSHoUL30w32M1wBX+PzZG4JPlvzLoUW1+H\r\nJWbOZxEl49GTk/9YH2Ah/91V0ad3wcLrflI=\r\n=Qz1W\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"4972da221d6f097e904fd1a001de647e0e185749","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.271aedc30.0","@material/theme":"15.0.0-canary.271aedc30.0","@material/feature-targeting":"15.0.0-canary.271aedc30.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.271aedc30.0_1663774552475_0.2789288061692694","host":"s3://npm-registry-packages"}},"15.0.0-canary.9f17ff2cb.0":{"name":"@material/shape","version":"15.0.0-canary.9f17ff2cb.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.9f17ff2cb.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5ed657193f52ae0ea7fb2c39ecaff40fc11fba2a","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.9f17ff2cb.0.tgz","fileCount":14,"integrity":"sha512-hyqKvuByZMK/uHhuenp3N0dDEq8liSM1rJ0iQSQo0oUAXXTyLP5YawrrU4kgFo9utCiSMMG3uLixeEUHYxUsyA==","signatures":[{"sig":"MEYCIQCtrj5D97pPwVekHP6l08fSd6cdFEJ/GxHqypLNQZMmfgIhAJ8LLnY+G4INGaXoSSLnFZ4isrcIxbhgB+NSxGwWFaC4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjK1MKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrEEhAAnQ3VnSj8M3so4N6qYZ7ZvvD7vk5xHTlpj1aCEIBUGfZI7sx7\r\n3YFmeQibGeHUQMof4+UAc9m4EVGh52TRBl4IrHBoFl2DwEtEUpLvzp8vqiyE\r\nS5wgQgKV5e+Ubo4jSI2XHAmf+nO5iFpa62MkjXGi86avqQPaxSxjGI0ZexoB\r\nN5cnwuS7qBZv30pxDgVt4C2fwL27k6U/bpqxd4phEZLNib2CpYF1b0GGxzmX\r\nF9Pz64HZmjYLBQrdXQMk9UDf6fsD31JfGqakuhF0ri9pBXNhnMN/YbRAEkYH\r\nVyZkGteP0piRv5HA43it+nxtgwAHro3PUQlqbMzkbN/PB31ECcfHAkpgrjHd\r\nnpTFgGZO4vcOMGKGxsHKceb53XwgyD5SLMFmZeqWrqukA9LAdKkEMLPgfOYP\r\nemCT2K27iLe/p6QAy2VxWi0+FEPjXkgM8Knhh6LhCs4AbuRRef2v0+Iu96s+\r\nulOU1UzTT23a1FKC+yEUbADA+1vURM1YMrAd+mCt5a7HIilXFSnEyJYgDayX\r\nF9mGkgeFyyvVwsu9PkpUeEOx0hooRcwOaEFSLnmi49krlJVaWrLFTN0j0t1C\r\nMcb2Nc2EoHOZY2duup3iyX6R4y0toz8GoLg3TXcl1kEpNOnV3aR6x4HizU7s\r\nFeBU0vUCQzi2WY7qpavxpx6FRRi1ELfgjBs=\r\n=Rf7K\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"34e73eebdcebc0a0b475c8b2f9fa0dd4a4c3397e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.9f17ff2cb.0","@material/theme":"15.0.0-canary.9f17ff2cb.0","@material/feature-targeting":"15.0.0-canary.9f17ff2cb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.9f17ff2cb.0_1663783690521_0.2677964207614669","host":"s3://npm-registry-packages"}},"15.0.0-canary.d3344c16f.0":{"name":"@material/shape","version":"15.0.0-canary.d3344c16f.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.d3344c16f.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"afbb178e31a3d5fb2dfc23acebae0bb0d30b2617","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.d3344c16f.0.tgz","fileCount":14,"integrity":"sha512-pG858C+2JfPP0FsMru58GqAUpJgbzaB2niiv5GPCWNGEESIElb6PWRMMyPLQrcckJxda4uegtDV5GiP5F8tJSg==","signatures":[{"sig":"MEUCIQC1+XTRSQ4KH0J1GcWcFkVL5pk3PumRvW7bN+exQY9CXgIgJbSZvZ+WXRzmDf9Qa+MtgwjBjOq78jgcwj7xXBfttME=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjLCnFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq2NA/+KIxAIgo6+FR4RpbS07UHEzMRYMkPg3gFIXJfebv7CWsDY3iQ\r\n50V34U8S1ds1wyoBvJC+/cSc3NAld4sFdmjhme0kTCWRZfskZ96sUuKdAlZP\r\nZQOhgPbsl1G6vD6zrs5vT+opyWBsSF1D2IA3b2+/YJKgpvzyhH/2qjaPzPi+\r\nILtSYtVxGA9v5Qho1itCb3Hu1rZdsSC4zgeRHv6XovymFYEMe58StajHNOB9\r\ntocDjEa5qOaYGYXVtZXIwTcfg8fjNXEVonNk6b33TDhLYwEO/vxvDOx5tmZo\r\nJODstLmtSAuBQrnPtzUJzKtIPDlHgUmwqIEQ9HMaAccYYIT5rXwWFqLeDwxj\r\n2/dnfvTNRK1WXPNh8n1YFihSjYR6zZbbeb4WEuiFvj7h+krDEhXrup+M3ZcR\r\n5pYKpWl9+Oly3F/9XnIPctRoc/F2jC1EYM+fhXWl3RpwuYT1AJlBBVNmx0Ky\r\n9ViTE+2I78jcmNijZZs0RLTslutY7IRRAnwdCOM/w5aHrCvmqlAdGWp9EYpl\r\nUsb1qz1wo24FXxTlu75tep47krZH3S95NB9IODnQ+PUBRaVGECc4WQOwwpPY\r\nEwV/lHiDux7hbx1Yy7FmgvYrKBozq43Tcest4IpgwPCX6KkThtI7KdoAr87Q\r\nJeZsE1xPuWocDWX7r9Vq4fKUmPuig5uzsVM=\r\n=MfKQ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"e0a8dfcab6df46c9fcc9969a6dba1f4fe48e028c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.d3344c16f.0","@material/theme":"15.0.0-canary.d3344c16f.0","@material/feature-targeting":"15.0.0-canary.d3344c16f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.d3344c16f.0_1663838661222_0.12693445331400133","host":"s3://npm-registry-packages"}},"15.0.0-canary.94f20ccb8.0":{"name":"@material/shape","version":"15.0.0-canary.94f20ccb8.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.94f20ccb8.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"48afb818a6b64adfa2039953a7c810e085a34250","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.94f20ccb8.0.tgz","fileCount":14,"integrity":"sha512-4Fr58rI+spJs0ObuTeQmGziEK3q5DG5HdLBzke33M+COE3OqCZnrIDNJ6ewPyzjYOYu67HDcabOZaxoszvB87g==","signatures":[{"sig":"MEUCIQCL/OVrb/Jn/b9Vvs288SjRP8emRXkJK9fOeLco5tAQ0gIgOdw2wrTHWgCxCxoI+1U0KagVo8+2nQgl587y1LmigGw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjLMnsACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqTrA//cGXlNPC2z07ty4uDQulwE3ktFeKpqseztdvfJqmYS0q87PUg\r\nBVDSYVYXuKynwosZNiJxS6bTxVqHK4NCvr4cC5JKZp6SCzZ4bnlgq+B4C9Eh\r\nB/92X7Hslo43Ig/mFqq1EYKwty7RRU6K+bAWG2w/DTf2tKy5z1AJgCOJjbQ/\r\nYjmKXGceqH9YZ4OPC2NQ83QpAVV9VP5oCY9R21Gnd95MNp+8WPkVXwThcY+B\r\nPtY1tGFZkqe/VTTa+dWpZFs4fTGJ3CZZHjQokDHSwO6gf20IVTJ6+5L/Yggk\r\ngzYMXZm4kYjlcXJ3q6O+YJMcyf7dyrDeJGm/6GeV4e1sFYRqUkgBHOZEwlqh\r\nRH/1PBd47to+2I4q1BoRoU1QtV910jCvMu0MBNpXlavwP0fcH4AfXUHQ/zNk\r\nJAjUIflah0wXxe3H9ZcXcTJ/Q6cTUG22Gif2duJGciRb/0nMOnBZwjjI4wdc\r\njigblk+Tn/t7VJxG6ujwsWwjylGl+YebfYCjIlqy2MjEIVRBdQLXNCDrhK9V\r\nPzLxy4gzXYKTUEGrl5tVpipJyXxkruEp8tD5GDkOAnxjkroWHnAFSF425w9J\r\nmJN1pzmFK8RkEp6iWGqEXdec9x9j3QrouddgSqB8p8IrHfhOg7vBD6w6OXUh\r\ny1XzM6yg/3EflVBENiQURnxx09RoTfpbHrI=\r\n=FS3d\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"16225f613437ecef2ed2d760a08046953ecd51ff","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.94f20ccb8.0","@material/theme":"15.0.0-canary.94f20ccb8.0","@material/feature-targeting":"15.0.0-canary.94f20ccb8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.94f20ccb8.0_1663879660283_0.6661024064103058","host":"s3://npm-registry-packages"}},"15.0.0-canary.81e4cb7b2.0":{"name":"@material/shape","version":"15.0.0-canary.81e4cb7b2.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.81e4cb7b2.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ca9ecd6ceedfcac9bcb0c88eb6064628347ac206","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.81e4cb7b2.0.tgz","fileCount":14,"integrity":"sha512-PRd3EFZORmas1qVqidyjke7k/6fNA2uf1soexF5khdcqaJgKWGUAjs5QovrYOx7AzpBTTCuC4ydQpDtXGOxOhQ==","signatures":[{"sig":"MEYCIQCTUmxI21JsTw6xWxiA/w2nHcNGhRwp3v6p0Hd9PCw0OAIhAI5gm3/kGc807r1qxvmf2htFEziToz0Q1ujZISeHmIbf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjLcvTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoElQ/+PobWjpcPwPQnPelUMSGch668WELHDiUgjgWorG/+zNIJJffT\r\nh/60SihxV6qpXyGVvRbv5Qdc8af8q5tDfRtitAQDs9mwg+kM4IzxuBxFd9O9\r\nd+jea7kovYyI49Xkk3xOIrKyfFIxYnmlsjMMnOVEw6Xj6oqhdAi6qbAD820y\r\na3wV7eG2FAYYHNfA5XmSbR11ijNw7yQqTeHP1B12ifRltzGOrOrz2oZMgmaY\r\ng1q1tuAq/AO7OCf0libzQM5Zs8jQA23QH93jga3JTqIiQh2SEN23UMS9v7oN\r\nzyMwfueMnB3w9OaWQM9z5TDZGTycf6xrvijwrRRlTPR9cidXUqFSeU1aPubK\r\nwksQd4kjF1JtQVDJex1Hv/sjkmAmUfU8OIv8gRKGy4mUI2I4JFvO0PXG78nJ\r\ng44OH2FTbyfpXHN/LJZ6zt0FJCNXCCPWkUm56iIjPe/FMBnC+QqHeijzmSx9\r\nxiG+7y96LfH/tI7iuhPD6dF0SBupBprxbiOVD6R65V3DgG4HjbBwvhYSrrTT\r\nrTfLIZJSikP3XnBveo9qOuu47b3MXbTJhXi/h4bzG72D390KKLtDy+ysnMk5\r\nDnW7dz4iCeh3N9JipJThxg3Qm4hlhXsoPs/pxclSAxirT7T6j+WxQlv9mM5w\r\n0iL597otHOQFm80uiZy2nk9+nUJfT5EA6ag=\r\n=JhmS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"63fefc99b30106d8aae83dccf8e6e8073043a3fc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.81e4cb7b2.0","@material/theme":"15.0.0-canary.81e4cb7b2.0","@material/feature-targeting":"15.0.0-canary.81e4cb7b2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.81e4cb7b2.0_1663945683445_0.8860289767330682","host":"s3://npm-registry-packages"}},"15.0.0-canary.aa85f9413.0":{"name":"@material/shape","version":"15.0.0-canary.aa85f9413.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.aa85f9413.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f208c016c11d2e64104d431e58c7a7cf8e66bf79","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.aa85f9413.0.tgz","fileCount":14,"integrity":"sha512-1bnzcaQo5Y3WdNJb6d+0bOBFjmXu/B8FxZbeoX1qjSTEBkyIBkKN7lSUUGlOt9ueldn+5M59IHqxETZDVM7emw==","signatures":[{"sig":"MEQCIAP0m3ZDCFOHwPU9510q7YeevV5ploUOjwtwDHhw5+VzAiAwyuX+IpimFymJfz+ytdRG5rAC2+Qk9ePEjB3AlWDVRg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjMefDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp40hAAoqgh6+4QehOVu/s75amy++dK7odp1E3/0Ai+c7TSJD471zRc\r\nFP2mcnXNOuI5THPnPZk2uy78No8mGyTgZP8kRdOCASYpxUqp/UO7OHbRu3ZP\r\n1K9ZzyCMkhJsOqEbP3Nv3mnSvfCuIMa4/vwR3CUiwrco1hwZe+shx0AHgv0x\r\nsKv5YgxWdPqzKehZyIWVSNabzrX8cqMP1HW3DNaA2xZKpk6cAhT/ExZF45ZO\r\nsLM2BJuvlDZLojMkBirpncgrrsqq+OhHQFmKvlBM+8JOv1i/vTbvN518XI2y\r\nJ2xW9TbRv4nUxskoeL22WTlf6RtHjdsDwmWeTSTVy9bTCwtaiTlj2z7REA4r\r\nZ87lu69fltMOTRWLkWKB3Kt4F3RiLkLf8Qsipbxadst68AWHlsOx3VNMMr0N\r\n4KRrK9GRXPnQ17lced+cJENzGe6UqA1HsNrd1yacHbyoGCgqiK7lGDi74NZE\r\nOf3X7vOCHaLmTIJ/Xqkv3EywRGt85r46afK8xg4uBQVznzhYWHixuNJdfBAv\r\nXFpBkh6FUtwkxdlcBQ+5eh+MRk27FQXybtWmp3OS/MdTtehF3zeMqPBOXeu2\r\nDBzd12EfydbkRND1cjTz6cNUIKUQmlXF4A2LvC+UqpteQV0djDMa+HDQu5tJ\r\nKOPBxaB6103vntKUeXUHQCRs7AUivlK80qc=\r\n=ftbm\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"73f7402d0fd839f22c2c3bca08292a66389f5829","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.aa85f9413.0","@material/theme":"15.0.0-canary.aa85f9413.0","@material/feature-targeting":"15.0.0-canary.aa85f9413.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.aa85f9413.0_1664214979643_0.7407337109068772","host":"s3://npm-registry-packages"}},"15.0.0-canary.7134a7752.0":{"name":"@material/shape","version":"15.0.0-canary.7134a7752.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.7134a7752.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c3acea28e8d32e67b893baffcf6979a0563e25f2","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.7134a7752.0.tgz","fileCount":14,"integrity":"sha512-lB5PxeeyT5qfiVLLrxABNzkWlwqjaqvDKJQW/GD3//NATqYORdO4m0T1yx09X922j5asnPc9Dq3cZM9skN32ew==","signatures":[{"sig":"MEUCIDBD5JfLJHF+xp55AYMLBhUjRWiJ5fLvwzLvT1w23Y6qAiEAwmwNvzcIwxpjQGcsznD0pSGNOabTy8rTLaJatx8lC6g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjMiBLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp4nhAAklEiayJL0IDAlfWJblWnzVeU/SNCR4v8lo1rSkrAAgvwaaM1\r\ni2x+lPcK7XzFsodEhkZftDX5GU2QSXdK5pk18b2qHIiekCEfaBv2fvMDK+Dj\r\nOVIH9Zy8PiJsoEAtPk6OJG54yw5rtfrre9SjqQR/rCV/U45xpPZ3n42+EEVQ\r\nglfUhT7QT8yCmpkpQC8t8XInaa0JBFPr3QD9ZnZsZB8AeIF1QQhPD0iPzM4M\r\nbyU/wTqajCHM0s3iRuwKX2KbKNIykZnzV6RoDuWgUHABqxsdmE8ZwID30UBq\r\nwqdz4UCrDRLJbT8Ddo5hysnd94VTCUXa5FYGolVNYjj5bKkCjVpsBRq7/hyZ\r\npsZRuEtO8hKfeF/DFZVq8YyYU2E/xJ9//C0GpZd8QODHi8+UOUz/DOW8aZnY\r\nTbAhq4+x3w3+2lSbSefynjSNN75Fe7yDPaPxZHQweu2Ow285yErJRrCUcl6Q\r\n4NiJhRh0YQNmYoI0+Pu/3Oi96t28Baen6m9c8SNneDIjt4ODvtETiDbjmzT9\r\nYTY3gRqQnrAMyitylADcZ7BWDGFj3VHoa981rVLpABUgl+2HOh2dzPTRh95g\r\naaKKYD7dZOLtHj815e3DBEB6ve3DneASbd+AzgnkQIHmGu/gEeFELPknNkQM\r\n2z1Wmta+qNwI7IiEtU9WSLBFYxyjQNCHXas=\r\n=7h5/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"31aaa09805eea1ad3a30e7b91a8bf8ee8911e80e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.7134a7752.0","@material/theme":"15.0.0-canary.7134a7752.0","@material/feature-targeting":"15.0.0-canary.7134a7752.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.7134a7752.0_1664229451178_0.006581076486218862","host":"s3://npm-registry-packages"}},"15.0.0-canary.70b8ac16e.0":{"name":"@material/shape","version":"15.0.0-canary.70b8ac16e.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.70b8ac16e.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a15119326fb072d222fc1a578340b748184bf3ef","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.70b8ac16e.0.tgz","fileCount":14,"integrity":"sha512-j08kJUeDyNhK+Bq3uuZnclzayZCOxGURm7/lc3ImBIkxOIT/nGltHlrCrTxitkFvKOe9Ln2K+uG564xBFkCJZA==","signatures":[{"sig":"MEQCIEpEhcjbFZCq8hh9j4Zb3XOuqqmu1gFWLGbczaPFD7+WAiABVbBO4SsQh++K5W8hTZzCQCBJAtoFcEez0PUEBC9POQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjM3zfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqu9RAAgggRqFgPYXg7DKWuz3Sw4e4y3ca8k9AIcqjq3mT6ftyu/+7T\r\nyLqvCOWOH2udyEM4+cR2PKWqyRoN0olyr1XVu94Bcy+HWzsoFuF47nQZeQKA\r\n554cKS153M3/hO4OaZf0E56u9I3cV3cOxqKN4aGkrzQ7iTsY7BtrEPGhKund\r\nzWCwKqx2B14PQ8TVyZAC6/Lea6x+ZqWaOeSH+ZYp7s8uDEdSbzoOQ4Tz3RFT\r\nmMbVzlNg/5ZolBB8kPSo/7McDK19kEN28V9LvTgi0e4JN4/rH7MM2zOFmroA\r\nX2mCSuKkg2/+PbDqJOqhlgs3/2xQrVWUWIPamfoPQvVjm5wUtyWC5JX5zusA\r\nwFgRApdZp4rCK4Gx2FDj79wEKhfyQiYTaB6wHWy17A30x66zrDnaT01U6GsU\r\nhiCkH0OsH2xnvwdMZZU1dHW3ZmTT8/TQj/6jUigOBc5WS8kEIYAhkkFYoRAX\r\n2ZFZJ1urGODlfqGg/QV9UgJF9B0tYhn1JkGYH5x2cL86taZHp8dQbvPaKMd3\r\npjnlxS19PXH4+O3tm6pKU2gruyzFktJIBsmvw1rWf+Wy4xRtL7njY50knQ2w\r\nXTWit8tusVYQe9eRQ3DVtaehudB+IaHcY24Y0F/f+cFLPq34oYJt0AvdcW1e\r\nww0voq9GxCkviq/jHOsO174LhF+g8CEGuD4=\r\n=9J6D\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"9f9fb4c3a4123798d2b993ab287cc4bb7e8d7014","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.70b8ac16e.0","@material/theme":"15.0.0-canary.70b8ac16e.0","@material/feature-targeting":"15.0.0-canary.70b8ac16e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.70b8ac16e.0_1664318687514_0.08682101294873878","host":"s3://npm-registry-packages"}},"15.0.0-canary.c20d74405.0":{"name":"@material/shape","version":"15.0.0-canary.c20d74405.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.c20d74405.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a68649226d714d868decdbf001ed97a27f7a353e","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.c20d74405.0.tgz","fileCount":14,"integrity":"sha512-q6L9sudpe+TvRVkqJNvsY0AnY5PvNESI1dgKaVXggrXq65lmbSGIuDjkejE73Vvrb6evRe23lfDNCTUMapq8YQ==","signatures":[{"sig":"MEQCIFEQahXVkPKqDgZ6pCT2eWw7E0rHy5u4MCAVU5ljfD9+AiA/zU7svbtYk0EFyKgJckUMpDIMZjiSVC1++hY+PslM2g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjM4e9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqAKQ//SYARbJLeGxojtWOusths5Hav2IbOsLUvh0EYV26Nf7OUaYXb\r\ncJMp09B+1piV3Y4x5TA+wCrKu3sMKDIDxPe53TNydFhkvKVVUrY9yiULBTwM\r\nq8h46MnmhNS0a7DW1teE6XqrcNzFhuWzY7xvNQYMMeU7wQ0tkiLZmbd8uOUx\r\nyE2dYfvqTkV2G6LWxBi1OnqG9Gg8/G9mg3VSXGVutZEiLz2CywIFmB1ctBLv\r\nh6ACPj90+zsq3HI4IPoHXO5iBpXJoDcVMaR1EAeGNwhTum7N4xIPEwHvJttR\r\n41051aTDzYvkmvBXK39xJ8TSpNWL9soziTmouwc3Yibzb/fguGdjwvTr+pzQ\r\nrNKEEHB0PTvtUXujYFmz2/kirgNbyikN6e9lJdmrnFhy5I1u0dEcD81UIRBE\r\ngZOwDMhffkyt7hbUcl6O6nNayi0xpAho+d1ZfjfAAovaSmjNIasv/zO9y/po\r\nW7wWpxH8ZC9qU2VBEwHByWEOCfgXA6E5VPaCjo+ufKKpmJGZHxP+S3hQYzs0\r\n4ZHyBOKd4IGHZQaTyccHgsnm1LYDfIRsda1jsYoWrmPN7w9yX3/WM6LW1sjB\r\nCsFQ93zmL9Cf856cypYy5Vw5OTrGlMjiIMv2ggp5cukpVs/NwQ8hdRqsPv2s\r\nOA6ai1tVV4e6GuJM+9IW/34o94dXi8M4AtQ=\r\n=uXb9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"7e1c6f9d7e3c90438265d23d710997462d087d78","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.c20d74405.0","@material/theme":"15.0.0-canary.c20d74405.0","@material/feature-targeting":"15.0.0-canary.c20d74405.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.c20d74405.0_1664321469055_0.9561128394362353","host":"s3://npm-registry-packages"}},"15.0.0-canary.f033fc8d1.0":{"name":"@material/shape","version":"15.0.0-canary.f033fc8d1.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.f033fc8d1.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cfba77a346c8d96185f7a81d4727bd99b4490a65","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.f033fc8d1.0.tgz","fileCount":14,"integrity":"sha512-PXfh7VeXShBEvjD4h3HujGzc9JQPZLYJVgHTqtgOkEmzxlv8nu2dFCvMjVT0K1O3hhRp48gQQCnTldEsgrNsZw==","signatures":[{"sig":"MEUCIQDp+ElSkTAhEdoSEDPnJcYtLTrMRQPT4GXdSi8uXbjn8wIgRop9zyuBgVeWuPvVqGfWy91FrYxLjHs7Kg0Cq68LYUQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjM43ZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrpzg/+P5Uxa56nJQ2g9SLTluCl+CGf3LZ+VJvKwSfrHYjMOCZGbnxa\r\njssvR9cpR0eewOU0x+2f+EhXyubBBCjwkXkJhHMN5+ZCOqcEh4N0cKQKBjQn\r\nTdvOkv/f4nbAZSVKGK5L1N41a2jWHggOUwLqEfimXcQ9zUa2UbOKeqqV7QRK\r\n18l1Xju3yZ4ix6vklmR2IIypl9JQ5+0ApY4+CDT04jvsh3ARvPeYNxNRFVpr\r\nLBMBlGIEzZFB5Fdn19P/0L8AqNwR2ZV4PAUp76216vMOq8EEE59vGteoNKDM\r\nJqHUseDqV8mIcdtJNxdhuUKQ0xz61KUMUawtIPsPESC6LZqcAUo6E7mMkHJH\r\nyANZ7wc8u71L9VNLMrLGCXmqBz023EZrMGR16XbxbJLv5cPEmcLZORxTAvoC\r\nZlEF7Cx2yCva8N/rQe9UdY7pDSg4vb1Rv60jfIvP8bKgihzgFEL5hR8u+flH\r\nWdk336AxBTPcfZfAY2QNIOQfI53lPbbkQT2mAR11MWjM+w9oy6PdBu9GtXjO\r\n54yemF8S0DQ57ebtEi+0fXqsKVgZpCXIO8pO+emv8FLLC3SdlQjAA/SPIIQh\r\nl+regsylNobTryyXSnkr4YAQYURYp95QYRR1XYyJl1aJPf8wEocCjLRZoqn8\r\nl3crQEA0+NuDwLlVW1YJIZE/G0mgzSEeDFs=\r\n=Q0vh\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"a658683d647364520f9de8a2d51f15913b5ffb78","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.f033fc8d1.0","@material/theme":"15.0.0-canary.f033fc8d1.0","@material/feature-targeting":"15.0.0-canary.f033fc8d1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.f033fc8d1.0_1664323033503_0.5419662829597076","host":"s3://npm-registry-packages"}},"15.0.0-canary.8d7ae912a.0":{"name":"@material/shape","version":"15.0.0-canary.8d7ae912a.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.8d7ae912a.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5e94c5f9e45c39ae0844e9f940886de75622ba80","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.8d7ae912a.0.tgz","fileCount":14,"integrity":"sha512-wnEiNm3LUGLhx+C6gbqfuXjIKHtRiykhTUdpVIQ2tRneolueVZelxdDpp057eNJT2uLUWtXlf6ZBb6GBwE+DBQ==","signatures":[{"sig":"MEQCIBSWaVnT9fEt+gBRIOmwnUSOogwljFBFO2hZxR1TugBjAiAdBh6TyDlLIBEJSjHFPZASDC1VyL78+RhYlGtRNweozg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjM/4OACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr2Qg//WXpNfC8aVjlSR4V0fTjjiCq3c/YVd9d+ifvHhtxvZ0m2N5kM\r\nKURY32Xx+6eBfqKOo3QAK2efIAP/tYwA8t7CRZRElZGfIf1uy/vDGA0aza+O\r\nVyvlnvpi3DThZEX7gbw52IOlD1d7eRHccn8beDbeh+eIVMlLJUb+TPbGyNTW\r\nhNHobHah4q48szsULDTiRvXjgdCdJgak+Y7JlJlNaUQvB17iKb8T5LojWVfE\r\n+wJ+XO3qaYJYCComkLcQHDpj8I3OqeLU4LsdIpmtEJ0+u7iu90s0S8j9CkJb\r\n5150YpBmHZQKqL+/maopW2rjmgve8rHsud5mG94V+bPstyoKL5hlecawrEoE\r\nvwZ0yRgRdyi/M6FdfAmXzTDDiSYKqbSQAnYtfrpkmFeMeRV6Q52S9KJQEfUc\r\nBQoZTup1uvwQI22Lt9WAQY6K4O/cqebcnkBnrv8NJMF2sUfKM3ESLENf3mwN\r\nmZ+I0wEofsA7iAvY4+6tLMvMrGmEHohdubQZuXwuRphYuRxNZiSbTrS9QF+q\r\nDRKcr1YjwC0wUTbNO1MCG8Llv8OHtBq/eKVk0Tt/lr3rW2MO0yjIWnBuqSBr\r\nyImEVcorHXdCo8XMWf5cFfBX1oV31RUh69Hbe6pakgZXNbwhNYigfq9a8Y2J\r\nW+2k3iFFeNbVAuUVv4Kkgd2mLTyvLHPdc50=\r\n=/H7n\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"26b2ab57ab7cb3eeceab31102ed1b6cb133f4cc7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.8d7ae912a.0","@material/theme":"15.0.0-canary.8d7ae912a.0","@material/feature-targeting":"15.0.0-canary.8d7ae912a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.8d7ae912a.0_1664351758758_0.6557459202862426","host":"s3://npm-registry-packages"}},"15.0.0-canary.db414b864.0":{"name":"@material/shape","version":"15.0.0-canary.db414b864.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.db414b864.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5f7a81c401513db0e96890769f398e3fd6e20aae","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.db414b864.0.tgz","fileCount":14,"integrity":"sha512-aUsyiayLjswG1Rj4Dug37eW9zYpo7QA6liPpyL2IO5X1AOiM0vmrgIijLdJeaiYEDM0h5Dgm3eCPygr5fMKy7A==","signatures":[{"sig":"MEYCIQDQELKjT12tOdFslhZUlQljAFlp9iNxFWtYkMrhPv12RAIhAPzGXMljwKcyZMTYzndTpjKWXdfD5h25lX8yQ6fgsbcw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNF+zACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp+lA/8DQzRNGYa2+6MfNJmWonGfuKz+NJglohC1RfWs/TUEc7qKmNq\r\nklsknLeEQBccT9SBD71pdmGEaf9XLfP+AP8LvoU5nkI5re1RnCEIphniCIye\r\n5squTWOmcUddRf/V5xkCDNdw3jJiri0cqteWedOJlQQ5lKEtf0zNiEpGH9px\r\nBR0asTj345uRYpuoWLsp+7ZtYIxkG1RIVsTZqvDztkLaAWxaN2iVAQQGftr7\r\nJNtGCwPgBRR7vZzoC6Z1z46VPsMtlSBIz8dSH13RUWPTr+qwbJCtQYY9ntgM\r\nQvf/eR9wdMOODU6FM2Gd+vMX5ct2mCSNwMWQAewjQsh6yBPbJlo5E4l44iV3\r\nL8bH0OYc5vHTUXKXSf+/g9741iR326ITep7Y8kljxWKvh3rCzNpKPUhYU3wF\r\nj6fw1MvnVUAIFhERSNuiWInLMYyg7vRktWtaU21embOvt6NLlv8tw5Ai7wAX\r\n7vSboRY5g8w1FZtilGeXt5TNaULXU3/Zq8sDW/4+ybuaTxprHk28hJvs6I15\r\nKSIbVWxZ0CM57piGPqBPar9uYltwKOnWUjBveSH1Flc/KGpxOBH21j3wu/Li\r\n8ot1HgEa69K3H+d062/srxRVccK+sm5XX16vZhyZ4S+HVc4TjhEVnYctyTmf\r\nI62H8EZKB/g58UWQiY1kipS/6Z+EK5k3Wds=\r\n=3w9k\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"7601f089a2e7599728805effc4e9bdee40008aa0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.db414b864.0","@material/theme":"15.0.0-canary.db414b864.0","@material/feature-targeting":"15.0.0-canary.db414b864.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.db414b864.0_1664376755290_0.7763217054030664","host":"s3://npm-registry-packages"}},"15.0.0-canary.28cc6791f.0":{"name":"@material/shape","version":"15.0.0-canary.28cc6791f.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.28cc6791f.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9a3ef3700cf857f764d1cd1f427c600ffac1b025","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.28cc6791f.0.tgz","fileCount":14,"integrity":"sha512-T6KpQXozz0Ce8VOQJil6/x40hK6Wn7xTPpSvUQg4vkVxkKIPka4L+z0is+bF+AWke/bnBr0abS9sZGprvKIgyQ==","signatures":[{"sig":"MEYCIQD6fTeEr+0XwqKjmlD7T9V9lkaZO6UlG+cfzCD63OlupQIhAJUgNc3mPpkhzA6EqH0Rc+MvY7+ol35/ckzDbw35TeA5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNI02ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqmPQ//VdunTbB/pCfziza45D0xN4WlUDPg80Le5e/IOK7NpTit1DgG\r\nxLMi06mVFg+27X8RfbhxlOYvb3vUhQnq3cJYFyH3JY/Nye6ruJBo9HBOdzzQ\r\nsk5kzArfoiL98oVqF9UltUV+I3b/mTXafGT9pPbaixY8ZoXvufd/VGntcOlv\r\n2LilTMhuQatLKUWSvbEI1TmDt62gjC84L1hsAkpooDzz5zkWO0iikmmOZCpj\r\nuIm5zh3O3PyvBJ86Hlfaspj6Gxwc6eJxhWkvTAO8kzUCUMTGz7tNY1TbZyVh\r\nB0kLgvkKmLY8SEwT+9bpdlgyeE6eBOWE9RbVrQ7DnHWJbG0mAArMae6TU17X\r\nZQT8DXMedn3wpwyqh5fPDqW4rFDvrXu5zNPqdXY9jEEdL1fDrkV+qkehUtT+\r\n+ESyGxXl2T6deRUSfeTaYvRPNB29dAQfyB7R5gs0GKQQYx8HwVfzVRe8FKME\r\nquDY2PvcnYpnz7RMVwOBeQypze8wPdx5xck9X+NbXGhsmaPfpkUQeNybBLJn\r\nUxvPpjIwCAU+crLQxX30RIiuPj3YE4UuufR32InhevUHCaJad9+PGe1iZ2m/\r\nEUZguzXpX0aTBzCLLI7/xy/P099YGGOlo6nGMkhgiwIonS7LLrBWWSShJG/0\r\ni7LppjcWZzFv7oFQwqKpIZkKgmILNksrLZU=\r\n=1CpE\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"d2dfa219437727922f4cce877090f9afdd87edc3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.28cc6791f.0","@material/theme":"15.0.0-canary.28cc6791f.0","@material/feature-targeting":"15.0.0-canary.28cc6791f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.28cc6791f.0_1664388405847_0.07337073919608006","host":"s3://npm-registry-packages"}},"15.0.0-canary.a515a2d18.0":{"name":"@material/shape","version":"15.0.0-canary.a515a2d18.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.a515a2d18.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"07567f1c23513c562fecd6e9e57818123ce35c02","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.a515a2d18.0.tgz","fileCount":14,"integrity":"sha512-uar1mu7rkUr/ksiZOXAdfWzdcKgih8khveLoydLLUrWBulpTBntpDoEySh3gCTRunzs+B/ZWI7oHSM1GKt0KCA==","signatures":[{"sig":"MEUCIF2jTyRXI2CwpmF0d/ohH+6E/YL5eXODWYV09/j4bx3uAiEA5tbJrXqlliWUodyVqhg3zjitxXsRgQdfH2CJ01n/cvo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNJiqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr7MRAApHrIIFuF8phFu9J/PQYWOYv0bxM5rUY6us8agtc9oGPzdWCL\r\nu9fU3F1dbvpGKR/sSZT8O2OjmuqNLCX6vqrDIlQCYzD+iMKInDbxmKkm+9lG\r\n/pasztbDTib4J/gKPtWJ7yNQ9rQQUxbi/9la48tRzjDsMJocdsGVb4kBEzoO\r\nCKO1IWTLHuI4i3R90PXCkxkxybMjgtdbslKFER/gzJY6e3QMwFmoDqlpp8XV\r\nwB1Eb26TYjc3hpDOCQdWykGftL3rF8DMFa2RGfPrl9niZEgBtU7N+pI2f/YT\r\nTJ+DGUtbd3lEUvR7iU1FHGc/YppD7GPR9xrYmvWt2ii4RRzDrTT05jJNmj88\r\ndA6KzlIbFTYm4dXfOvrCbjaHERJ9PMFEV1OjjTV65JqIFWM/fXLrZNFMA2b2\r\n68ZtwC3Jop8zh4wxidhTN8S4jC6YtRguZjBOoCvH70TT6dbjNl2ZCyNSLTqU\r\nWaJYnWZ7zDocIn5m8BhlRfHvVRBAuP4f0stuidB6rsRkP8VCd2nspKRctxnT\r\nWf8/t7Fow48t2RKZ76dwWDpKELgCRgtNADgACUiI9tRnA88E+nisWbXeCtih\r\nss8M1/XH4uUE9RzoZr3QC3cAkCuvP7K7C8rFiBWhJ3tlMS0+LWsY1Lq4vjOI\r\nIRVy/Xy5cHJQTf0LX6BNtFXcJASm0JNdQHU=\r\n=UMPq\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"b634251c1f816bc66bc81c76758fd339ec40a76b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.a515a2d18.0","@material/theme":"15.0.0-canary.a515a2d18.0","@material/feature-targeting":"15.0.0-canary.a515a2d18.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.a515a2d18.0_1664391338133_0.09389117837279026","host":"s3://npm-registry-packages"}},"15.0.0-canary.ce9523167.0":{"name":"@material/shape","version":"15.0.0-canary.ce9523167.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.ce9523167.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a60fba29605c00149974b8565300317aee21d9de","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.ce9523167.0.tgz","fileCount":14,"integrity":"sha512-OJVG77QlifHDdMIDt0j+9rnxKPuS8KldHneypEioW1IpK6CAk88YCpBQph183B7tFl6y3C5QASjMaCnMQRjJYg==","signatures":[{"sig":"MEUCIC1f2GSVp6Rd5vuko2+XDZ84ERDkg1TYZFE/y321gQY7AiEAhtR/p4NoNbYF5OfzDyRYghI46XeMueZe4NAHjzVh1JI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNgCHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpl+w//d/f/I7e38XYeD7MCKTufEVUc6D226P5X3mE1v3EK7BKpCREU\r\nwE1YfQN/pobaiPWpLryOY/dduG3PcivDsypS+th6dJ7OFx355W42Ry4Q6tBH\r\ngmlOVpq4q9oa9S9S8PZksL8EkZIfi/O9zW156lkDTSw+pTvYc3uNrkgs7Qca\r\nRitG0N19N/0hpeVuG2ZJtaxTiJuPge/GKXJq6GWMsQV2hfJXMjkWwcoT3h2+\r\njbFmw+eXHgwid/7EaCg7yEssh0bFxTNRx2IZHwjbIUoL9dsjs92Nq0pXBddV\r\nsirHCZwy7otCPr28+wqezVVjt+qItGHF+oywaTCH3JchIpPfWemo6IlXB/Bj\r\nYQmp/tyE2uSS154u0R4eZ9oWJl9bMJaQon426tmyb0SEyOEsl8OzJRExVyTZ\r\nnYiFTljNoQP4BealVyzqY6KSeZKlWcNwRKqqcexkIO/sWaKYZ9MWLFUFOtnM\r\ny/PcgOuGei/JLytIWv7grGd+bl72h/HZNXBIuDkxAtbdjY7tbVaGRY5TugOh\r\nyAOVjfB9RNWSHspyGTg6jvrox+Xrd+acDvvTXw0AmHOtvU4Z1ZswLXg+a2eT\r\niT+YOCkpDGy68HfCfWLlTvenzq0ozrgCodR6c/O9DeP2m8InN8T6ZFI/Jv76\r\nk4ZI8bT3onYUWVXiP8BI97FWFNGryicvkss=\r\n=peFu\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"8aac5a80fa36dceacc7b3a6e2474218f9092a107","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.ce9523167.0","@material/theme":"15.0.0-canary.ce9523167.0","@material/feature-targeting":"15.0.0-canary.ce9523167.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.ce9523167.0_1664483463522_0.4867717435969321","host":"s3://npm-registry-packages"}},"15.0.0-canary.b2310f7dc.0":{"name":"@material/shape","version":"15.0.0-canary.b2310f7dc.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.b2310f7dc.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a95dafac9b0b7b0f97e0561c5137b0381303aad2","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.b2310f7dc.0.tgz","fileCount":14,"integrity":"sha512-rSjMCYo7OmKJ5AMku9trcybPTETK5qr/VbqVZqg9V3SmYpg9fKZR+PQ7z7xsw1RooXdZv5Tl9gHn2XV36e198A==","signatures":[{"sig":"MEUCIG0jybGq6XYOQYcE8ytmh5i/nsdElmGvJ23RVDJ9igccAiEA/1t+enZJ9rP79G2rHTQ03jPe0wTRpFvVeXA/t1S2aUk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNjS3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqZNhAAjhkZMA8PxeAyZ+bv2MfEdIEiP6Bdn/nBVPd3uollZez/Iu8V\r\nusNj7tPFcFE8hE5xyw3eolRMPDGbgzlfuOJzc6szWqbZsR4mEUZp909WkwUJ\r\n44BCuZ74SN+G9vjje7LxK54ezCpqp8tq4/7uBivix7FP0TB43lumO8YuAPKI\r\nyULSMCA1VrVR0zDyh2YTDLEo9VmTDr5hFb+FKxmstm4wFCriJ3uJjTw3boXg\r\nl3E2IwK4FWO4ez6awbODssiWsWqaWFlXmnmBNpxarbi9AjzSg2RN63H6HuF8\r\neyt4kWiJiuByOYoVmMMNJBXqK1r001mr0U1+SLf1V/PCweR8dlkUcAz/kItx\r\nY6elJtuWvmEvYftP1g8yT7i5GjNO2jXaAlcAqmcznktKVEweXxILdUyqQzOU\r\nlr2mi1rU2hcjDCO3qwpQRrjTn+OkT7daXR6V271UxJYJnnHHl8uUjU0BVjoO\r\nnF5mK6ET9gz3Aenmla82Yq7fcY+aPTTIUfH9Co0vk6H2TOAKbanHUVnLOui+\r\nuxF8ncM88AnC0mKqT4tz0Pq8BM9OciZXNG0PqrMQ7mNsGO++7+5CAAi9ag3X\r\nZPsSPoZQHTxbja3tG6nZtPNSryxTtYcNMvZm2lyQ1y4kR6piyn4EU5AWYltX\r\n7VoNANfxKUBEaCWhSvCBH/gRoAP66rZm+QQ=\r\n=5gig\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"1b1f8d124dcef049ff4f3730b930eadfe1e2a58f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.b2310f7dc.0","@material/theme":"15.0.0-canary.b2310f7dc.0","@material/feature-targeting":"15.0.0-canary.b2310f7dc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.b2310f7dc.0_1664496823625_0.4964397394130746","host":"s3://npm-registry-packages"}},"15.0.0-canary.a44241e54.0":{"name":"@material/shape","version":"15.0.0-canary.a44241e54.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.a44241e54.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dde280e8632fa485ced544e1f42bbb1415441078","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.a44241e54.0.tgz","fileCount":14,"integrity":"sha512-QXP9gf44BZYQC/uJF83QPncooOA9dFdi5n8AexoipwAWtiKLfxSz0yr+L406ZkmU30NCAWa39UCESD0kFfoUQQ==","signatures":[{"sig":"MEYCIQDBt+SL1tXU9TKcVBp8utZ2GuXNp5nz4bfAKhW4niNaAwIhAKfBDE0XmTT41kGVTmwoqbgRHKCcKX3YOSB6DSHgBGpn","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNqbsACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpQ6RAAlz/xmbUVBmMKmH7AVQ1MM8LkZZi7Iapv4y9pdBuyfUaUMWL0\r\nLlFQ2g8m8l5Q7eed5qRPHNKNwf0jOuu3Vs3OaphP6JzT4Kb+sdSkNcuF7bXo\r\nGYFl1ZtNxWFQD54VKLRJ8W99sgBm2CTQINakd289EWPGiUqsbVhoAvnbpMY6\r\nu9Xkz28dQquCXg13DNjxgewG5cIXGG4uPS4K87De4LxsBGuYQ7OBuQZ94ldt\r\nx5NzY9SeIC010K6C8QoCrQk5BntL0rJKLvpCSwSdlebvQkESk0XLCCG3w7VE\r\nsPS+UtIgdAGGAVbT004C7zmvOD50C5vzBoYk8mToHYhffhiBT5fGzUWlZgAe\r\nZs2yQUXIbnM00eP+CjifnPgXYsVQ1uvrj//6M2R2W+EXSrFPLvX+g+2ji2Oj\r\ndLq2s9kpojm+ssZc3DCjfMOW0IgRuhyo3cmgLC4qaA9440XJgrZxhs6uhnSo\r\nTt1f/Wy62dwKCEkgHM+e3+RP/FRKUFxi3Q6BLTB+yQ1tZ3qU4+VDIVVrpcgR\r\nFkyrnnV65AEfcDqx609YJ+qsGmtxnRKM2djz9kTpf5dSs59GT8TmpQN52wR3\r\nFEQ01EGqjor09+5TOnZIJUL273pG1xEZbL5K0mUntkEyBN+yOAsRTrf2obfj\r\nU5JFojHb/MLrFPMiGW6+Gt9PPukBCRNs1m0=\r\n=qVpI\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"2a5fa6460bb58b3b2866631eacb27411a12f8d21","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.a44241e54.0","@material/theme":"15.0.0-canary.a44241e54.0","@material/feature-targeting":"15.0.0-canary.a44241e54.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.a44241e54.0_1664526060049_0.10040265847808372","host":"s3://npm-registry-packages"}},"15.0.0-canary.0ce81e115.0":{"name":"@material/shape","version":"15.0.0-canary.0ce81e115.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.0ce81e115.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"91bfaa35cf5e36e522fe29a384bb96c2f4b1df76","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.0ce81e115.0.tgz","fileCount":14,"integrity":"sha512-T/RNLS4KqVUr62efFq9arq65ynPbfvy92SaCid756sV7b3BeJ3hUHPbMH5KDeQOnBSuS7TGM2jr+1/M8Ir81kA==","signatures":[{"sig":"MEUCIFp/iI9SJVpRjAGxM6Mq6eIc4cAoqicS7dCRPkLcNOzfAiEA69b5jCqopqdwGs8kDC+v1wsx2n2bD/PcZ1xviM4IWHI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNzLcACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqP1Q//WIx1CCclzu9JD69e7+9lMebb1+zd0JIC3M5qZYjb6T5umluZ\r\ncb2PmxvR7phSbB/MVvpgcxiby2nILk5bXld40SF36laebP/AqDP1+HuIFsp8\r\n6pJYZ4wimIVtaJO0pCLy28EUE0U7E/ik/W6006rjnRcOFgBNEbdV3OokaAXF\r\nlHJwgvApenHAJceQI36ih82V4sXs/kX/QrsvAFjVg5lq4A4b2pe3tZ1EgonF\r\nGlro3Y/W7TMvXvUmNuO4/9961AtviH+Imt3HO8hXPebrgw/aNzI6qFoK5dKP\r\nG0qUZC6QcmD8RKirgVlRTtDMh0byWo7FBJ5D2x8SvMScDLsF1QqcGkTwAp48\r\neRm1J+45AVOq8sDCNDZAHGpwmyd9PovK66hznYeHaglPn9UsWkGL+hzdgeE8\r\nG5lMa0JcZsFprlVbulYd1VS2PGjWnIYv1X1O1mvPpsMiNFQggSCdBOTBj+HU\r\ncs2YIiVPguwlshINhNIUGcj5S8RAo9MWD3gGH+a30/osVe9KEue4X3/GYKkY\r\nDNWskmKlq3k//Ps7BmsZDs+hnpowpExAXEnKvVu33HMguAKKMfePwsYbdkbh\r\nrdyWMO0MysKncGM5duPLbcPhfQNK4s7XL1wLgNjk6nG3BxIAV5RjgoIN/waP\r\nYd2TQM2pLQaG0smCqAhpYOwnZ7Tlo5oeofQ=\r\n=C9of\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"d690b44f4e157e829199ea749861c3b827d46dff","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.0ce81e115.0","@material/theme":"15.0.0-canary.0ce81e115.0","@material/feature-targeting":"15.0.0-canary.0ce81e115.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.0ce81e115.0_1664561883403_0.4436352891878874","host":"s3://npm-registry-packages"}},"15.0.0-canary.3cc30f6ad.0":{"name":"@material/shape","version":"15.0.0-canary.3cc30f6ad.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.3cc30f6ad.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"abcb76efe6262c3ac4e8590ae2c8e48c22d43a37","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.3cc30f6ad.0.tgz","fileCount":14,"integrity":"sha512-EnmWwb9OADbgKau++220BlpCBTXzFAj1hc7+NPO+K0o0yV0cL63jwMaF5fWNuKe0H3UYkinJVETy+xhbVTfxhw==","signatures":[{"sig":"MEYCIQCBdeZ+E6o4l1P0Oz0RZNXnWQViXgbvnVDLzjiHQgrzVwIhAMzDhLF9Th5FilslqMCFASkusmpnJS1YLTIZeTcZZ6tl","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPGsOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoTbA//dLDW3uxMtXxsTyVPuZ5FfIOux6THAC8sn14WuqX0CtQL99ph\r\n7ZVgpB0dqgVu3MKCoXW5T9ESvYco4OqBaR1WTGQsOHVU204iHr0ZmUx4KrP8\r\nafvV58UfkQ0XudtfA/sOPEbToXkurlz8ugxTcHnRvfl8PtTHm/dnHjyTNwhV\r\nSMFnjRVAXrHx7PBVjAYYoKQ4fLLFkoDa5GJbb+mzjr0l6TDUtcSYWirPfgM9\r\n4u/hqQBGv9PuxWXMgUvAPadZ9b6FPFRb10F/fcSNNV00u87ok9CoSSJq6vQJ\r\nv1Ep4ycYVOkZNDch/x30ljKUpxbR5HRps90MJS/OD8F2n6ETWYngO5QKG0Oz\r\nVSnOoDMo7uaLpL7aP8DLls42Deey6RhtupS/qQQqoKSO/rqSFvsno4417yDk\r\n+uExkR0oncUw/OZsu/QryD1zhlsiccEXk4/6FDSja/+9xd6wr8pYumpJ2krC\r\nn3t1rVID6/Dm2OK5qDbWP8n6xL37hfHOpjrnrY+nS5NC7G2ILxiffSmuwziT\r\n9BAqc+29GMt0tTIf9lgjHIcboAYOY/Dh1lpr4+C8Fu0wwJE6m0PzgCTWO8jy\r\nizWRy31eJLcJq0Ae8F07GKpjwO5mmihyx1wGyWwWYC+ITVOjoKSdDVbSy9j7\r\neqVWeuOJKqg3aqVCYRZl4+hnGlVyycUnv7A=\r\n=Ykr2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"78d02265193749df2eae507da620e7571c09da12","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.3cc30f6ad.0","@material/theme":"15.0.0-canary.3cc30f6ad.0","@material/feature-targeting":"15.0.0-canary.3cc30f6ad.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.3cc30f6ad.0_1664903950368_0.2375947259726343","host":"s3://npm-registry-packages"}},"15.0.0-canary.d9cf98e60.0":{"name":"@material/shape","version":"15.0.0-canary.d9cf98e60.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.d9cf98e60.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2a4f333dc685ad29ca9c036668f7c5418bb75ba6","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.d9cf98e60.0.tgz","fileCount":14,"integrity":"sha512-Q2gmm6kIlW9cwI0/rhvDvnuu8LLoPNGRNb7Y34/Por0LBi8Ivsgbl6rQoyxc84R1N4r6Ak/jOgQkq25HfxMRCQ==","signatures":[{"sig":"MEUCIQDzBOVlNInsCoFuX9W+7eyZ6p9SQVhNg1AuO51imh+T3gIgHEGWU9H2DqhpdMFVNsSUx7VSDyZj1LRv8cQLSpv5flY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPIOIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpr5A//eoB9gQpWgPtXLsiRQqYEugtCngB8G6TvPIevh1DYuUogeJ1C\r\n5xhRBzCrnP4qvLROqVp8ZllSY6JerGQr/BqydwWrR50xVmmFNXZj/PYak/+v\r\n95UNAdGU38Lo1BSB2vk3jmy716MMmC4OS8ZKxCurmiETaqv9cSjM3knPI5Rg\r\nkuz9wjSU2VdCHLmh9IfUAa04dnP0De4XYlgqD1IMsOkLfmJ2T9bMsIFJejVj\r\ndC2xlSG30dfgOBVq1b9cuJcvx2iK3MJzNd2ADdCO9JMcLIJokSmNW2MXVB6P\r\nRkPqiaqoJ3fhYaVYWm3MFtVKmnuM122vMWI8KfOykXIjJagnjT2bQp9LnahO\r\nH0sn2XWDzFj6E8Cggkl/3/fSPVnn3X3gzTVhLSOLzrilTy1CkIrqQYeBqowt\r\nDMTZM4YrxWmKwo/l6efRMHjtgReBv1xCf8jBAftJqnMwbC9WbTNLceaGcvKT\r\nYuFHeuup5QHrjahdJuqBA9UUHgKlLu9kHQ5hKa+TlCCZXxHo09O2Fxp5SWYF\r\nwe+jeqkU2AKCKVKL0B42yuknbe0QmqQiMOH/D7Ip84BNGaFNjtm6RL1I11BG\r\nTxRO6Fr1O1IwF3DUPvV7pAlBJ67yupXXICiiUtjlbt4QK5Ld90Y5e52Cct1o\r\n51Dxkaj/3mDAkDwCbkWDgtOakRJeaxMkDYY=\r\n=sH58\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"554e3182e6804b0bbc262ea0e730d556747b7382","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.d9cf98e60.0","@material/theme":"15.0.0-canary.d9cf98e60.0","@material/feature-targeting":"15.0.0-canary.d9cf98e60.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.d9cf98e60.0_1664910216687_0.9410666630872511","host":"s3://npm-registry-packages"}},"15.0.0-canary.d71935c8b.0":{"name":"@material/shape","version":"15.0.0-canary.d71935c8b.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.d71935c8b.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7a2fe8eae581bf18720ed53f7f3b6aef226ce58a","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.d71935c8b.0.tgz","fileCount":14,"integrity":"sha512-JofnnugFOxEPE8ggEG00ksk7CpKiQ/+f8G5EiqCVkamTBFjupb64zQ6cOpMxMoOyFZLGueyX7w2Qa0dT/r/21Q==","signatures":[{"sig":"MEQCIFTAwGle0fv1EOd7A+HZ2zzJeD2LdAz8XPbB2hB6sSbfAiAgdwgNSaEnK6/dc4E6uaWAPn+GboVBhx6gyYS5ouFOfg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPo50ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpE6g/+Ns+7yVAHUNty6NORDxgiQOzz4A653HI0zIelcqoGC6ZB+6o2\r\nEmuKvhKfo3P3LPNXViEgsD2S2C6L5V4m8hmiVyYzVilCKMqXFhOw1BuyV06L\r\nDye3Nrojj5lVZ9e7d+cWKKFMv/X34fb8x4+jDCbToWG6OpfLuUGzAgta1Gt7\r\nu1Pi4Qh8OhiLcZZ+dJ6iZRyQ7QvhYy1vhoWweVabDbf1tKgOiv/RIx3ZAqI2\r\nzYPaZd1iEoASg6V5Dh7EhmuO406Ml9P4VDC/xA+QCt/BvMma6si6q8Y2H2Yu\r\nM5efhpow0qI3ulggy5PEy8Js2oZ9ksQ+c8cr3uxYyvWRxI1on+XK1fQGLEYM\r\nlUTIcrtE8+DE/iY5TwVs+lmJwIzXE03Q5se8KfYXWrnhsJMZGMDPQyXTETob\r\n1MLbLC2YcJrsVvwlbZdnZKo6EE5OjbMMLxdLjsEsFq2Oc2Eci8oWEFf0S1e5\r\nl5We+DdHDIR/cQLYVZHS9XdCR/JoLE0r36Xhu0ZnbWCU/6imB+aQStLG1pnE\r\nlnp6NuuSiaF5FgAD99NL2l981Cgj/OK0lqJIEnlB0DvJlRBOUj3QkFKW3gBZ\r\ngwaa8eXVnQKWpwxw1H6T8AC+3npnFDDXj7UC+L9eOlTAQQ8CiVx9kCZFDv0o\r\neWH+L002eRkjsDzZQkZCXbvDG8E6hbagUk0=\r\n=uUKQ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"0e9f697d8ab3c0b93969f61d22a2b06760934fa3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.d71935c8b.0","@material/theme":"15.0.0-canary.d71935c8b.0","@material/feature-targeting":"15.0.0-canary.d71935c8b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.d71935c8b.0_1665044084319_0.15180408652027544","host":"s3://npm-registry-packages"}},"15.0.0-canary.49c56a25d.0":{"name":"@material/shape","version":"15.0.0-canary.49c56a25d.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.49c56a25d.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d0308f6531c7ca3a15ceac934513a8eaec9ff498","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.49c56a25d.0.tgz","fileCount":14,"integrity":"sha512-LbZmnJHR2i1HE36+iSn5ZQPECmKFGqk6HFiHdWjCez2Zims+FFhJUEVHDZNCQAeq8T2hyCbOmoBzat/8i5I7Uw==","signatures":[{"sig":"MEYCIQDprZdPodGISNwtSh+VSOmym539d15H/I9qXDiE//Oa4AIhAIgye1z/G/NgSh0PxVWQrqNIENvB2nMUgnscn435P9Ds","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPyOIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmquKBAAo6fWKYvH5BU2yx49YNZ0rdeeGimesxaFqqszFfYQCUEhPgX9\r\nREzRufVpERO3tioozeiUeo9XgJU365sBqwFewIInQFPdAgCUPftK2HzeIJr4\r\nNX0hfB7t9QMYOZ8gUKJkB6L/ZMWEq8ay+6icP8K7jqDz8VqObtKp5nIk/5lu\r\n3+xqH9k5iddaqIFNFx6aNdLfo5LBJf3F+9Hz59o5vwNhuUm63e7nc5jvHHaF\r\nxA5vBavqtFdsy3kNyPEuTUgeZ1HSh5CBJyrUKXmgkc8aeDCn2/NX9mLg81PY\r\nBJUvbeDzCZQ2nG/OHia5KAKPmCgCeo0lZroMITnb7Q7BjZUBu5CJxhY0gVGr\r\nyqz+Vo4GIy4Jkiu3WDBabWZa9v95t8QLuk/s4kGXx7fXhfjSXStmCzCF7MVn\r\nzt8+APkjwuZ21w6KIMcIX96C87qn2a9Mc+bIFwIJY7amSoONzvb0JZDdMaNI\r\nPG4GL1K9sKhaM4YmVnDxzpbyrVGaqslbXc2jObGl1yg2Afq/rpdDl8aFDRHn\r\n1c63uLgMdDiVOXXEy428c/K0pJIIkH/xbhj/A2VTrYzVeoQ3qwP+BTQNbzcM\r\n2/u5wtxXmaHNGHXsoD8zAHleNxNUKDCu0HMwvtlQ8+aYfJ5xKRICKxSmoM/e\r\n/SC7Cyh9vzu5Gh6zCrj8bcVGk/FNb5imeKc=\r\n=KlK8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"46425b4f1ee71ec9e841d7ffacdce7cdc35e7b69","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.49c56a25d.0","@material/theme":"15.0.0-canary.49c56a25d.0","@material/feature-targeting":"15.0.0-canary.49c56a25d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.49c56a25d.0_1665082248771_0.4587707912003891","host":"s3://npm-registry-packages"}},"15.0.0-canary.07acddef3.0":{"name":"@material/shape","version":"15.0.0-canary.07acddef3.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.07acddef3.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"79127514f15ea136cc36652976d714cb6f1b9a05","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.07acddef3.0.tgz","fileCount":14,"integrity":"sha512-Sv57RKkJUVqs7CnXKht/tTtTKbntJfETq9HEtvcFn0FI73AMKYHOaltORumIxXi539FGb2jXwNQ+gLm598/IGA==","signatures":[{"sig":"MEYCIQCAmduCrA5sxXb685PCrMSAngVsTogNl6TVWDFQexI25wIhAMc/DxhVAAdnanSfXPAeMt+jzWkoklwRPyR1a7B9KDcX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjQJwLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoTBg//fNdnl53h2jS/DyU3AgI159HCXB4BHSg3VgYEtGOdPyd8pNVf\r\ndtCtldzc/vYJhKtFP/OYEPZANgheXjatycjGjRHoDxRESWmdynxfKiOxdoLo\r\nSHL+iXkLAObbnrifqGms0VXGtnewmUHtZkB3/RHGH+8Agn60m2YmZEl7s1bl\r\nKgC6IT0mPIZxONOTtIiZiayz9lafSJgQcncRfHRW/Sl2ey8EgdYmKX+1jRf0\r\nLu7wc1pMrF10FbXGYTxpX+p6qHBGtuezQ7FMlMF889kbUr+zL2pvAwuwLuSJ\r\nJypKl3zqQvOaVIL986LQJHzOy1yXrP1d04WwO1IaPyzGxzP3XQNAkARh90f7\r\nXJ0Ph+rYVthqRp1zk6EnmH/w5hrN8VAijKekr+8mfxeQTmoOFF825RHkK+jx\r\nPZP7Euhw5Gfq5pma/3yuXdE7ysRqa/pnOL/WtQLZ86OnX7jH3JtC+Knt7hED\r\nDw/LjUgCoyXb4VBGocWiBekTqiJc7Hb7li6YLjIBe+UBlId6QoHRbIQMkKvX\r\n5518FqNvG/B8NewW7xnEkIhVq0+Y5JESLqjGveHOCfQP2/dTRGZ0oyhocP5e\r\nxY117YIU5ernsq9XnlqT4g8W6+9ceKChVedRJEWslNchPlHJDFAnMt+mW2h/\r\nOEr7EGxkVZcCdUiT5e6d8IiiI6Q+TcLg8Js=\r\n=ixwb\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"f61a6c26b4bd60354b690448809f9dfb7ea11564","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.07acddef3.0","@material/theme":"15.0.0-canary.07acddef3.0","@material/feature-targeting":"15.0.0-canary.07acddef3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.07acddef3.0_1665178635332_0.06495224787890375","host":"s3://npm-registry-packages"}},"15.0.0-canary.1c74eb2c0.0":{"name":"@material/shape","version":"15.0.0-canary.1c74eb2c0.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.1c74eb2c0.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fbaa9f8725aa4fe561a0bfff93c3bc853b679af2","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.1c74eb2c0.0.tgz","fileCount":14,"integrity":"sha512-cWTULJ19Om3flIejvOmShz4RTHtDVNGtOXK3xaGmIODL7A0rU5tR7UOrl5SR79CcmHC2OQV+J5vNFB+zhQK2bA==","signatures":[{"sig":"MEUCIQCI5kwIDlVGpQ6hB8UlctYFkP+7eurK+jbBfpIFd0W/SwIgLDP+vF/HCeeBNjEwP05mHgQD/2WybESZI6HVx7LeHYg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjQKA2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpznBAAgIEluo82o7ZuQt//Tpl8L+cPxkb7aICX0F0NNDQKU7hRitZt\r\nOFh4mZg6jji4//dbU2Q8yqsgR8o1A6qTtAr32mygmJYrcOOS07lywA78/Nkh\r\nErpFQYcE6FvK4hpfimtI0xbkUeBHM6zH3oIaCsvNyxztsJu6Kl9I9k2qR+tU\r\nyOTkbFvTZTRqj4p608IQDsE0MUx0qhFCqxLgyGyTB50DaQL4PvxY6TWEGZX0\r\n2rw8cwJBEaRjXGUIz03Y/z1zoLaFS28KRENbSBPiIuKZNk6GPj+K66m9c1jC\r\njCvhEoUZtrZgd2R0XPV6O819EZDzokGcjx/PI9gacg6ka0Z1E0uYGpHenB46\r\n2olYHDIbNc6h5C2FfgIMnyOhyPiRBxAlgqAWrerVCP32D7Rlz96fDBgSaRPn\r\nA57ULcViz0DizppSII9m1Ff/G1VMRTSwnpaQxnIIrwRgSuCi++om4me0iHEq\r\nN2U+qfdesd1OiImBlT18wjWo3svzvsEn1QWhk8arYpg8qX53j/fq9R32fKNE\r\nIH2SAGVJ7t87RfDGaB3gLvQ+nUpTojom5YergQX8IUIhSrO4/pnQ72SyUASg\r\nzDZWtw3E8X0cPc3tkkHErp2vvJCdoIuwLry4ovJzhv35JHLIibWxm9areSXt\r\nmZE+2hYustYEOUhluKiGqc/alHlreX8MhtY=\r\n=pxLc\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"fa2e48f4e71714ca4a637a500ddf18f562031ba2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.1c74eb2c0.0","@material/theme":"15.0.0-canary.1c74eb2c0.0","@material/feature-targeting":"15.0.0-canary.1c74eb2c0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.1c74eb2c0.0_1665179699542_0.6436850144996791","host":"s3://npm-registry-packages"}},"15.0.0-canary.dadfb713e.0":{"name":"@material/shape","version":"15.0.0-canary.dadfb713e.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.dadfb713e.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"36210c9d4fdf0fa76cbbcfb57fbd91ba45977ed1","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.dadfb713e.0.tgz","fileCount":14,"integrity":"sha512-Y9YeApS9xh92S86Va340Ku/wiNimyzVAHqWBtVBAzXqgLm1RvM4wOkvUCtwdc0+VAGBq8iM8acX7YI3LCqZNTg==","signatures":[{"sig":"MEUCIQDHC/gG5h0jx5voPLtpFovDk62dxlmsXgd4p2J/bpzN1QIgFmCOPw9FW4V4XTdYzAQR+LY2KO6DcXYYfnl5EjGC6uI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjQQUbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo3Xg/9HOZBiWW+fN4o+fTc+NCbvBHcRyFrevsF0JAy3cApnwKVpyAi\r\nc0vygX+Y3ujbAWEivfO6tx0Bts5q2/BYF8n298thT+aLhxIQbo7JLISVu9Wi\r\nNXSwfVRVym6f7+5/y6+TUVrwHhxTQ6q6aD8l7IDCGEkdj412V0YOhDyUhMzC\r\nLOKYcs8zfvpI4WqKlG8FhKMcVypNHhQRqVRYO/J5ATG8IuZRDRlVpVFzZyNG\r\nQf8u5FdWpOH0EGe32ZElW489puUtw0ztW+h/GdSFM4FdYcXH9V3Dxv3/ZHy0\r\njWOxDW4jiY7e4lZ+lufzvbVvX9LG3YCs5NO6368ZW3bnRgT51sjUkhLyQqnw\r\n+sUDKm1eHwDsO/pVPof8V32912wU5tqyjZI8NxTG45kZwq+KxW7aMuW/GDPj\r\n0GbOqLZ5q1hNMBc4l0SrtZ58EN7sR7To8nz7MEVuIP2BkB7i1TULG1gkOonm\r\n2SBeOPnCYpdmiWl1SHO7n1x/MlzSDUInREsUJQZOV/d7eoc7JzKGS6yYjNyM\r\ntjvtOYHD4DKBFILsJXzKeMqkmhghuYpyl8F9HRJlcd48PCsMBxGmKoiofR0E\r\niiMoMwR7qG2RjUKhnz6RN4lQ5ilI0M4+VdD6fPsVSzBHI8s/LbCfSO6Gp18n\r\n/lUhdyqzZrhbQHWyreqLE2N/PCuzL9cTZ9E=\r\n=tP1b\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"dc577772f45028a4c4dca1d7c8ca8dfcf636e763","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.dadfb713e.0","@material/theme":"15.0.0-canary.dadfb713e.0","@material/feature-targeting":"15.0.0-canary.dadfb713e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.dadfb713e.0_1665205530972_0.17872969985045817","host":"s3://npm-registry-packages"}},"15.0.0-canary.395f1ce61.0":{"name":"@material/shape","version":"15.0.0-canary.395f1ce61.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.395f1ce61.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9f7cc15231d6c0c53422348deca1c429b745b3e1","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.395f1ce61.0.tgz","fileCount":14,"integrity":"sha512-ROEv5+7irzGeTYiSFFVHz9B/GQkhpHGEuj/DwIaM8QFxZChEdPPzBTECQ3FBfEY+GZ7QaYqQnldr2ejYxsuraA==","signatures":[{"sig":"MEYCIQCYwThzQ2MDHK6Ur17VanNjORgXThMCxU17GxyhMRxDOAIhAP32GIyWlYB0E4axNg1KN6PvHeGzpEMj1xAdsZicCH2j","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjQQWTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpSYRAAmBVCrDvko1y6SotUCnwYMhndvuCYKCzOXCCB+Nts/cyMTsmt\r\n4WOfRsEn+2eWfmsXl1bxLPXVn1zfNr08F5e1a5/6EzsaAkW/beehwOkI+NCk\r\nPJR0YkGj7WdyM0LO2Hkt8AqIkeYe465e/jMpO0VbfzQSr5GOcS3R1Xm4+av6\r\nyRkREvIsq/8mo4/20Lcj+liYyJkyMi+0hSkwOTFhtLIycWo191l/cjrGrUZH\r\n6K+Io7NPCSCKa1Vnx4jWPuzkQADGvlTVKjDdybSQH2EFmWNrkJSAaeU/z+uA\r\nSFz1q4n7N6SRX7P1ZofecyxE72tZ97R7TuMK7y7L673L248DplgdDH9vU1qS\r\n4zUqgGizlEm4n288alM3nytW+DYsFUrU7ILx8+dtEpqra5mt2w2R9tqTLQyZ\r\n5KiCNL532UDNuyF7jKXJbi+5jXcAGBDElXo3N/JgbKf+wua18tl378bpfVCu\r\nNgdRp8cyZXrJtN8S78Bi8IxD5JHdzsHpHcHukmrVMm1Fhmjcj9FTa0TZeE7l\r\nDVSA34/HYpgtyCz7cM1uD/TfnEtpdPXT+m0dhxt82Cvq/8eUTO7ueHlYuI+l\r\nFt3D+Ovm7c6ZTk+w16aB74KBqsVgDkcGgFUNoGk/TZOa3Oq6ef2DxZPN+JwL\r\n3cKfhW7h42PjtTsfq8MfxobcQjijDjjo0YA=\r\n=0+3m\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"15a2d954f8c5260da0e9b6f65b6f49df69764a95","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.395f1ce61.0","@material/theme":"15.0.0-canary.395f1ce61.0","@material/feature-targeting":"15.0.0-canary.395f1ce61.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.395f1ce61.0_1665205650942_0.4110795482354943","host":"s3://npm-registry-packages"}},"15.0.0-canary.e741b5c82.0":{"name":"@material/shape","version":"15.0.0-canary.e741b5c82.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.e741b5c82.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"33323cc01bc107aa2928f6b8db7c9e1fdf173221","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.e741b5c82.0.tgz","fileCount":14,"integrity":"sha512-W0pH97dqw95OOpQ1EyleKZMorhWNLv0GGTqRJB5xg8b4lmNZO9fY7ioQ9QbWVBXvjbekKq3uSaTghHtaagMMew==","signatures":[{"sig":"MEQCIHR0n47OWl/50t3SV070lgYZFvZh6UvN+te+qz5alJ51AiBt0+Veo7/BzBpblWQi9/zY1D7DMi1vNPWlScvMLjtCqg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRFhoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp73g//QXr+3tHx4nfsYS56v+dGWu0ITVKKEcR0sFCHhWP/65NUZgkh\r\nGCQ8YMJHa9Ac6ANLfq8IJ4HYiEj8ax/h7JwRaRg6So9L9cQhrYuz7dWmQPW+\r\nViVp9R/5INooMW+7kiPd49ivWFzMweZBWdnnLrF2RQTnV7r/BQqyf0qV4bRO\r\ni1wd0Bbfj7NFAN9SMs7xIWE18GR4WhQpbhzNTkITqMWvxj0c/XoHLCE4xzl/\r\n+hBxDQAy48iPAyhsQ9SdN7S2fjGZlWxBynn8BhHNdwyGrA5i+Ncrd6ZRRUk+\r\nNKgE2WXxdZWoCWBihlWyyTzmy2H6Mfbgnp8Q3meQ9Hv9xMPWQjuqmysW8cu7\r\nLdZRrruQc3zsV049cW7OrvlojJnmvKDll2cn9NaUr6z8n25c+0HvR9J4IZZo\r\nK03HbMYfp/pIIrFoGu8sb2czUT+EaOsZro9ootCWMFrdbfG4/5bjlzrCUeTZ\r\nsaFx1tZ1bdtIp2qkH3IDkH2zMDvXEdgZmtimURRE3h7kdhk3hoZeSSwj6w+y\r\nc1y3VfoWl4fewN5VEL+crdqsK/AJs727p4WNg+zfg4E3lB5EffGR5zx9+qq7\r\nJ0kXCghCKGZflEh8beTE55QsYntKhz/al7Gf8tLDvuMfmUk9mL0O5q4jtBZN\r\n29ezBUTMBjFir6vYsFek1RU3IDKYr7BDBGo=\r\n=u4tK\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"489583dc41bf06c909feb0a87f9679b40fe6c03a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.e741b5c82.0","@material/theme":"15.0.0-canary.e741b5c82.0","@material/feature-targeting":"15.0.0-canary.e741b5c82.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.e741b5c82.0_1665423463999_0.753404691217016","host":"s3://npm-registry-packages"}},"15.0.0-canary.582f3cc1c.0":{"name":"@material/shape","version":"15.0.0-canary.582f3cc1c.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.582f3cc1c.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bdf3cae01b2a0230af433284b5e195792ee13acd","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.582f3cc1c.0.tgz","fileCount":14,"integrity":"sha512-OOwTI1A0s3SFmzqOe4hyvwJZuT9Ab2c21kml3Or49pF1s2zy0+nRQHnwjr2Hu44834OPbxf/1wnA+NEoHxlQhg==","signatures":[{"sig":"MEYCIQChP9nVOGA0rry9Kyawvs0JCRTXJCx4lq9GimT9MvDx9wIhAJl+TSuFrjP3QpmPtInwj6/t8xGsa92R8anQdVbghfI4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRPWoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqlkA//aK2jezogtQuapa7EpdBqYpqfwlkHbngFCYIb7N5P8ybaJ5ya\r\nzGXOOh273kt2KqY9hZ269++jTT28wzHLIWVA9BKwzQo1byv+EoWK+GIVeWNl\r\n/MzOxkhakuBG8vCU10vuFhDGexNXgdo0P4lt+LhRlrUk03WPw59TcEKlGITB\r\n0eET9V2xtqFF91lEnsAVNdafA5smHfSU+L2Z7x4duor/0XVfrqlqoXjpObJT\r\nLGCOAdyye9Aehv5IKWRs1bpid6CsNDQTpEH5Oq806FIB1hIk6Us15WQQ+OMT\r\ng0lqxGyooCO7lNpPd55pWCqRXxil3DUrRY0HtCO1vNM5RPBx33Tiy6+0J3cx\r\nLM3YlYZPSnAAHNZ+AYrmaiHbMewkuqSUX7zhn66jlDsd99f4TmImahd0oe28\r\nGySyBqMXpoSpUlR+EGy78CZVDquisLlsPcyxr0sYTpm614/R2aSlqnpOfKx2\r\nMY1rqdWKqYKDuDSsRPN8IUIuTqbF0K2IWxuHtQ+D1BYKN22GDoWOimyhM/eK\r\n644tcVLHmYfR7zDrWwJQrc7r7lo7jsJkyyDbiLelVgDY00a0p/29ZRpxmnB1\r\nrU937W6BN2hzZ/Ie7NN4vdhVytjWe1mAOOf26Z4hVmL4o8XI7dRE/HXlmjfa\r\n0k7XP002/CI6jPloZY0GgyEwYKvQahBAIf0=\r\n=Urej\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"9910dd1f5b3fa962bd02fe552774781896efa7ee","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.582f3cc1c.0","@material/theme":"15.0.0-canary.582f3cc1c.0","@material/feature-targeting":"15.0.0-canary.582f3cc1c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.582f3cc1c.0_1665463719801_0.9155021652857693","host":"s3://npm-registry-packages"}},"15.0.0-canary.b1a6e3e88.0":{"name":"@material/shape","version":"15.0.0-canary.b1a6e3e88.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.b1a6e3e88.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0147625b883482a3fba4cfbf2e2a9f59d99b81eb","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.b1a6e3e88.0.tgz","fileCount":14,"integrity":"sha512-cLLq2XhQQYRASlBaG38qJ3Nvra0uNbebEAx/bBonJ1i6qll6SGf40SOjMV2KFc4gLRSob7EM/MiOOgfqBFtJUw==","signatures":[{"sig":"MEUCIGTcZ3ar2aFFeYAWyDitlQBnf4epEQ5moIlI+HfoVTp8AiEAhZ5bTPcWM+vPW+RdirpAQOiWBV9T8Z6ge031+eX6qfI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRqy3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrWCA//aKYzGcrCp8gvSAU4qg95HfQccyV4ucUFFdsEL6COD86Gz1NA\r\n4o3M0B1HWuLCSe2ggDvg/07tWegn9ifgaRXZJ2eEFm0A2RcPXtd4ishibdkp\r\ni7vXZvyEtxkaqftLHfSNZsTdA0q12pRl+J9dqJXKis4lSMBZun4/16ZXANDG\r\nQiD7fzJBJeRfeW9+XOb44Vj2tMMPGHnTItgJ0ojDgZGcj8XQY0bvVZeZuwn2\r\n+P/0DASgwUNtKYNiKcKCPPlnuDsIJiaFuIa1t0WeFbnPfG1zi2OVzwcp9bTS\r\nGP+RXddxwthP5SKWU/P02pRXuxijirsKxRacU0pBP9I9jeVKuebNOSz/8wC7\r\ng1KoEKdIFgMYJYJEFBNumMOu37On99yZShc7oNXz4dbj5aTC6jGrSHCJqlce\r\n/4R8fDaHxT8Pr9rqMjQeyyEU6s7Fyb+1ToFh2z0qsRacw7r8dgN1Xfb5WD91\r\nZAPPxdXAAE8csthV0xKnjiHYroK/M5VLSZnWNCf+KThjlN66ZycEJ3AVWitD\r\ntJXy3H/KIuOSx3UNCn9sckK62EeK7CyYISgFmy8HtKzd/FN2ZX5uTUUSfivj\r\nPf5xDegFnGE1lYyJIFidIRJOOyUytr5zYOYvbc+gRroOzbhUW0wi82VjInZj\r\nhgQ0jGshaxPacb1VgKn1uS8axMxVlbJDRcw=\r\n=azdp\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"fd6420b1b81c64578026927a4acf4ea73b7358e6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.b1a6e3e88.0","@material/theme":"15.0.0-canary.b1a6e3e88.0","@material/feature-targeting":"15.0.0-canary.b1a6e3e88.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.b1a6e3e88.0_1665576119667_0.10845489724200874","host":"s3://npm-registry-packages"}},"15.0.0-canary.c9b1a31e4.0":{"name":"@material/shape","version":"15.0.0-canary.c9b1a31e4.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.c9b1a31e4.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"713bc9e32a13e380bed6bb9ac99feaf0fcd169e3","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.c9b1a31e4.0.tgz","fileCount":14,"integrity":"sha512-Jjtcm58JdWyAxkghRu8WuaMP+t7BfV4fC3u2RP6D6RlwEFaI6/uASCk0DpTMAda3hCJjlcNkeYFFDZoJZeRMTw==","signatures":[{"sig":"MEQCIE9copNXG2W8CpZIydSICRovaCLuwj2q54iNug5FPBKSAiAj0Pn07s49rh5jGciYg6ayQSli/rAxnBkDqkNnUc5hsw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRvIcACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpiqw//dSlKIO7sBp6/wnKTuiXHJdn3p/2NreoyQisxb06XBcqkkq1j\r\n+ZTg4VJcf5k8oJWRDmYaPkVYd9u+3qaR46Und824NK6O7cInuvj3A2Son5vf\r\n6T7D1Fze6dNk2LNSO7yOE37jEk4N/zoaur51sdXGzdbX1R4lqf7srAyYJYcc\r\nkqzfWLOtZPgmzAV8T7Yc/YDN5E4FU7ItZFZ7V2HQDkc0U9pgshNWoCnQXZhB\r\nd25gTm9gSkzubQt7IcNI9IBwzmqBp48pbOqX646amrTgLeI1xNEnSQXBpdfN\r\nIYN1+z0TxKGBLSRoX/sL98sd/yZhaGwXGzfqWS1Oxqn/faRRAdUGS2TwAoTe\r\nKsaZy/MTgevwDey/85MRMviSCN7jOw+FmjtSK+ikrqfaeHZBAUNS46qE5+28\r\no+AFmpqqDCfYoZuOnx7A1E+3UdpyqsGfS5IzwMdTyckdu6CicuX5cfCAdUj3\r\nTP8APPrdYq/Hzk4BPIrJrdXBnzbtHkbEnE7XWXGZ3HR8TzGOwwj0Opo+RZKB\r\nwYinKhbntKs9GNo2kPqM0yRegeqbo/jyN9jnc4xlq6RGKhN+wUSecyeae5K4\r\nXZbXGV4ZYlwD/CuIR64FiFqk91UiULrcGRiYsvK4TvDEfsPTmbN3jzRrjmh3\r\nXtdNTeIb6fHuvZGGwj83RYjEh0mNhnOmoEA=\r\n=xuek\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"f7a6b71c85fbf0d1a9db952402e002f8421baf4b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.c9b1a31e4.0","@material/theme":"15.0.0-canary.c9b1a31e4.0","@material/feature-targeting":"15.0.0-canary.c9b1a31e4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.c9b1a31e4.0_1665593884623_0.8297628263126258","host":"s3://npm-registry-packages"}},"15.0.0-canary.13e9b0d1f.0":{"name":"@material/shape","version":"15.0.0-canary.13e9b0d1f.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.13e9b0d1f.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ded2a2b21cee099876ad20f231393c58ddd9bcce","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.13e9b0d1f.0.tgz","fileCount":14,"integrity":"sha512-fYzHSPmrIIjRHpeDJ4a0DJzHuuQBLqTei2ChpY9OCze1LveW8xVsBIaA/j4DNBG1dfMc+HKpyntDNKdzEdDJQA==","signatures":[{"sig":"MEYCIQCuHU36Okirv6wx93PAAV4n9fBMy/BsxilQeyioBpSQawIhAPwS+43lC3P6XqOIVTaMfh6wGKS6uVwX8LhD6v/B80D9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRxOFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrxig/8C8+FipGQjoH+54U5xvOac1Zy60BH01rZA/G06giwK2k7AoZS\r\nMM6ADgeH5GbMC3PRQGT2zUGMqaz3yJxUCF4DIcxHXhwoNgveZenGSyF/g7Dp\r\nLD24dL1nYGGmTWDxWg1bc+yY+7O3IbGvK6ZE56SDxTJBHsdy4tN5fjDaN3IC\r\nQIIlp4iqbxI++hngBx+QjPuh5gFlofNbOOWeZVFPWFs6pAmZdUMWD4V6/zvq\r\nyKum4hVS/D38hmt61ziUSztQQhj0NIeTP32eD0EP9UAwgpROXoDC8z+k5RJ/\r\nPgggqyNig6IWf0C4qCA6k9MC98E2t5EopId9Fm/dC4GJgmyk+Mt8GQ21wirO\r\n89e15huRCQo693ODP0+e+jy7h3Yjo1LF6FHhV6QqOaRQGNcUHxdasUDBJoPm\r\n44cLjdNfNdYz7Z3zRuAkwn9Vsxw2nL8OPOlu3mqIiLMDxFyx0uymfcEj4ZNK\r\nGpdX65QXDxuV4XWeXoYG/f97PAvOI2DvnbQAnCq+5fQ0iJ6fBDT+nGYHsFG4\r\n9t3bAu6i6xFK+9LVTYhUJj4oWFjZrgr8WbIObO5YJuHuF4DPhpbppyTnw1O7\r\nDf2WPbJ8fd//RexCT1rDARSzdVJykMtowFzNnr2j+o0SG+xehQg+gWKJzGtM\r\nO8s3IwlidjOc0KrLc8ffgtRRxtZqgTlJXDg=\r\n=Pke5\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"4d9f6e4f27b68587a15ebef6f003f73cdad60bff","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.13e9b0d1f.0","@material/theme":"15.0.0-canary.13e9b0d1f.0","@material/feature-targeting":"15.0.0-canary.13e9b0d1f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.13e9b0d1f.0_1665602436700_0.003557788680980334","host":"s3://npm-registry-packages"}},"15.0.0-canary.1dc797e7f.0":{"name":"@material/shape","version":"15.0.0-canary.1dc797e7f.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.1dc797e7f.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fc99ecb05879ec12f1729cb6b0d1bebeb760cb46","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.1dc797e7f.0.tgz","fileCount":14,"integrity":"sha512-dsxAa/OTdejHw6F+GB0/cQ7J1XjRdoJHGROUiuD0MoV1aws1VeEAMUj7MnxI85IkdAFfNx5hSggmbuAcKLpFZA==","signatures":[{"sig":"MEYCIQCf26+Pl3HsblliFOjN0qz2OfAc2G1MeBMvHe0d0Db/eQIhAMOUYZv1FvgEEKHmQbWKgv4Okw+7xf0thhrz8Ou4pFps","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjSS6yACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqvTQ//dUTzi8qV6T6Ui5fH4xMceyPHvsXMK/EnoHi+oUGpFndIUA9i\r\nRXE9K5CM9nAiyJyy8NXantpLQiJGyG9nrk62G54MZrPbfGCbTMmc5nZLIC2k\r\neIqT6FSO+bh+bt6c4lKOlPM4NbJ1u+gg3qyumk6ISlVM17p97A84dSFujUMI\r\nxCCu2vnYtcQds1SnCQDMXV8muDty0iTwER8Q72pu35QCnzqpmL4sbtLpNEiP\r\nq1jNGCTxxzg1BQu1QvOWrROc7IuapaoXKsWnz/gkpa2feE/HzfxpxVEkXFdY\r\nVVznhLYWvB7nZE+Kld2jLIlpeRvxIj3KJvBTl8YDeSXiyNmpDuYAuw2wAGGE\r\nb1/HFJS2+pC1LrYCZnjkmqogQiInEmSrAiOseeGIwSCbq5btMLNnXmUEU0CF\r\nlL3kDs3J5Arpngiuu98apwAedNEpVXl3ynXDgN+eE9k1+sQjpIGwYdNiM6dd\r\nNS2Hb6aKX5Sv+RTR/ruZbD55rMySO0yfXYw8+YhIQewiOZL8/Yrip1edtcER\r\nBokX53Ig8jXXihQZw/U6SUanUflpFtUnxK9iQZE6LJbodUEBtsJpYrl43+9N\r\nBBtGWJOuqExGxJMSm7r8+JtfMg1jTTMhrrNy64VqYnXDrvGkTT1sjnrHOF9o\r\ncGQ60JtkWP39jXOHP8tOPm9ZHyGospCIY0Q=\r\n=UQ8b\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"22eb0904d0b7a84996854bc57cc417286deb08b1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.1dc797e7f.0","@material/theme":"15.0.0-canary.1dc797e7f.0","@material/feature-targeting":"15.0.0-canary.1dc797e7f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.1dc797e7f.0_1665740466383_0.719856163934723","host":"s3://npm-registry-packages"}},"15.0.0-canary.ed4009397.0":{"name":"@material/shape","version":"15.0.0-canary.ed4009397.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.ed4009397.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"07fe8a6f19b4972f2c25b73e7f93e3ab3c2ad148","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.ed4009397.0.tgz","fileCount":14,"integrity":"sha512-w1z5ioTlKGBk1QnMCIec0D1O8SMhE7ofAjQISkF6rKIoVYY7AgfpVOYIugDRKY+vp4Cpue5shwneSdnw5uOz9g==","signatures":[{"sig":"MEUCIQDn2pOcs2IqS55c793W+P55ypg+Hx3JlRCslm8cCpcyigIgAtisPDXCiF9SP+n+no1Ei6UC05KPliKCnyY5yUnAUOA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjSZNuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrAXQ//UHH3S0oYIj/qrdp/vyMl/lKreRVZtecJ4G2q9aseeEmLU160\r\nbozoywDUH8U9ZCkMw8eKrnSTbgiilO1Sblb4iOtHlEQm0eweXFUuaEUdI9yU\r\nNYT/HyNV4JTp3zWEHzV11QZFxZ3SwN3QmGbDZYmh5Tsn8B7U3cNogllWrCUs\r\nHkUOV3Gio44hou+kfAFB53w2NRPe3dVyL6odRXs0KQxPjc0tLQG5pMsxbuo4\r\noPAXh6vpBhP0259Dm0jXA9wgu1gcLK9DUGrj1cCiX83t0KVSf5aMjDCunJvK\r\nWqP1tqnPx9Ha1OOYsBuAZ6ffByPxUD/13ldEbExbp4kMEa1NmCbOFV2EZ5BX\r\namNPozWtcaOkt3ozPHANc1VddCHbFqtzkBVs14G4x1qmX/iepV3qa3LJ9631\r\n2qKLhdS1eH9C7tG0JOdzbkA7czcqzlIlNvEjUrZIf/n/f3blRKKaL81NUCi3\r\n3s1n5XOqZLVDVCxBtFY2BfmJ5H+YooeWHUC/KkihnU38+viJ04PyVBKDzHg0\r\nkBBi25jamfE3ZKHUNnxxnxrIO0ywyNKLwrTqoFM44uksr/CRhM0LjYbAP+eS\r\n2Y8i3Z8aTssCY8ns3fnKJs7irWqY+QaTqpuHu8bybvgG4To/MQO/ZyZyualy\r\n6t4Xlp9KTxlJaQkmXUd9WG2PvWJK//ShCqA=\r\n=CLU8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"a749634198bd160446873ac2c5cf3d4345b1620f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.ed4009397.0","@material/theme":"15.0.0-canary.ed4009397.0","@material/feature-targeting":"15.0.0-canary.ed4009397.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.ed4009397.0_1665766254582_0.7222523915843946","host":"s3://npm-registry-packages"}},"15.0.0-canary.95ef196bc.0":{"name":"@material/shape","version":"15.0.0-canary.95ef196bc.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.95ef196bc.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c4d1ef46a7e6f4560d7de8340e9ff1b0f36dd863","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.95ef196bc.0.tgz","fileCount":14,"integrity":"sha512-kH+PPKfUBbcG4xM8/zUOBL4TFTMOur6XvAhaq48dNJWad9IEKZjL7UilClnjpkplW7vpOP3fIOvkX2eZdHpRzA==","signatures":[{"sig":"MEYCIQDaT0TrfMRzMj5wcMI0zWVjgyrM/Cp1Xc7Y0+Poiqtw2AIhAN27GxBDQ4ec5NqfvtkqmP+YXJ3srALZ0y12PWvh4gXH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjSe0dACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpUxg//TJtMqLFDfOgXKLFmc+s2lMZrUns4/12VOIOdzqoTS3/XzpzE\r\nGECU2ZjhjPfl0ZfCJwsL5nbRysN+y0l/u8aviSHUTyH0/5TvErfGjm3ti7ez\r\nafInanvc1SVhSu32kDpstc97YazuTOBbefr5eyu95WVI0Vt2pLzJGq94PSeL\r\n8qfoBUF3m5apx9DsCn1lDBNnBWViv2E8tXO1uWV4bwlfbcpyfv217kNATCIi\r\n3GP2+bYWED9xvqfi7UBQutEWxLxwVUjb3dAgXmFJMGu68KLOMrgmGojGcqZh\r\njUPO75lJ499/diJpPOkW4Mw4+3SjzVWe/8bVE1n4GI073ZW1JCSGogjjq9PJ\r\np48NDmuRj2xCrXic4xog/JlvcIGlFEkGR0Zl/Jvw922BzNu79E/u9wAEtZYh\r\nwpCqk/SPg/Us7ScA9J81ggFCIRGYa9MPW3dO5OXyGvFQuC6WoAj4LSgEjZmg\r\nWdympr1cPFI1a4lD1vinbXP0wW3+tU1se4vdt1V7u8zb4+TSAyRwIATDbLKO\r\nQLpy38kKsH97dy5lXN56Achthls1hWPTmWnwc++gNAGdk3xbliQiCDLwon6d\r\nGNTSkQIT1bEMdNQEcCGBZqaoc4vt84MrLnCOE4ouqsrVDZFYA44DcU6VkCvV\r\nBQ48pC48xgqlbhWm4nG5qA7QOloX8Wbd8bw=\r\n=JDwa\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"c133997c8c45e50d9ebfe12fabab75ec90d244e7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.95ef196bc.0","@material/theme":"15.0.0-canary.95ef196bc.0","@material/feature-targeting":"15.0.0-canary.95ef196bc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.95ef196bc.0_1665789213348_0.9858774722203667","host":"s3://npm-registry-packages"}},"15.0.0-canary.13eea1b2d.0":{"name":"@material/shape","version":"15.0.0-canary.13eea1b2d.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.13eea1b2d.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e25e663d64b279ade195ede33702f17392110d07","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.13eea1b2d.0.tgz","fileCount":14,"integrity":"sha512-fl7+UWyNl4zcMqVfcWgjHoQcDDB+AStj6i8e/A1hVcCWT2x/KfmMpeoI1vKJsOLQpHPHUByJZRKp6lScud/NcQ==","signatures":[{"sig":"MEUCIQCgX9F8t8GwEjZM+7VbKYYSEoQ2sXvgc4aOLEwBHPS9qQIgLEMnJPQ6botj0kSKaRWvvwqIJqUKpYY22V5PjDAQxCU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTNEwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpfPQ/9GS18ztsIiHZwfCZH7UxV5HgfUOkAaonPbLNzLCCkCE5Z0Gkk\r\n/r8DHgGYxkI58FX2Lt5Yp6qgFmNQrEHoIKvP6xYDxhH9lTi5tvROwEWXHBkb\r\nQcdPzAKkKcUcI/YldDifn5JBQY5pKTO+W8+DUCHuFWRnhoSoQFXBpTEoHn7n\r\nFljp2u+rrjAN+mccFfiUSg6qjR7vtZhWWQSvtEMWthLKtjuUv2ZtSaEjsU9k\r\nIElfELKA944PCleakzu4ajid6JLRIkLob7TIQSnpjmT+xHPHoeie8VW56wi0\r\nrlz+7ncKMVIElQ9Ixt13eC14GPsGo3LYqQNWs4/baJo5yok17uS5fV1zHP6V\r\nrZPaPF/4Jl75i66eavi7s+NsSpGDSYI9C7zBOvXgs2T+9r9vTF3VDFypbR6Y\r\nwjrG5LZtRWqWvTgO6dWcaAIloRvH/M079XmLrRPIa+vq3WKdJfcfFzf9teQk\r\nyTPULoxtyJAL8iWRNPPoGkJg8qHUWGS5nPStFAOw9/Ftm4m2igQmfLHcBvCU\r\nppeXmt/Mx3Cts8ZSveU0tmjEdufxgGPotVs8/amhoUy8nlR/985Wwdu3C/Dd\r\npK5XWHhVDTpDKbvXP+/+zQ8QaDgTeaKQ1y2I5ZEJPTxXWPy9btCE514OhHHU\r\nJjWPa+v5g3gwJsjxJUjNlIc13tKYTWQ4gSQ=\r\n=1MNu\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"e9a13860e495e7f113966b4c71b9c7931a32807c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.13eea1b2d.0","@material/theme":"15.0.0-canary.13eea1b2d.0","@material/feature-targeting":"15.0.0-canary.13eea1b2d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.13eea1b2d.0_1665978671888_0.9652328221519044","host":"s3://npm-registry-packages"}},"15.0.0-canary.ef9b2babb.0":{"name":"@material/shape","version":"15.0.0-canary.ef9b2babb.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.ef9b2babb.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b8a50b2071b8eedcd1dd7bfa40e8630e10900079","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.ef9b2babb.0.tgz","fileCount":14,"integrity":"sha512-AiOhckZ52pUfSnFj+0EU5QV877vgL2zlRjPnEN9DNioNlHdzPSilJUR2iNaFqC7GMCGqg8mYykvV0HU95lmTzw==","signatures":[{"sig":"MEUCIQD0cOVIz5d6pwneHEgQsEeS6FXUo8IiaDJ2sb9iVpYFxAIgL3jlyOxW1ffKFMBRFH/NeCdz+P2vOVcP1SQn4Dy4LlQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTR2uACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrA5g/5AA8b1gX1lg9+zhhH47fT4ZpDXtD6PsTbiPMFizK3BNbak1bU\r\nkhohDs7a21M7a2pIk636xcY77Pp7hYInQl3CkL3sW+7H21qY2H4TsjR2WkqD\r\nzSVYwhWrzboiwF4ZBM6WpHqq3arpneDeNZO0oj5VyV/GJNc1xTwo18htHpW5\r\nvL4iUmW9314w5EX5GBOrHwu0CDX4p57/rbY/XuqIuL/IXDKFp3sWeEDWiQsc\r\n6scTxeDM5pGYdfvhIF8TSK/iWrM+ZUnXbhzF0lmH30+aU++lscgNHD8pj3ms\r\nYfR4QqdhmESZR1o2IMTKBfU/2Q/ZlGUKgHGFuwqRsfVJUzC+B0OwbUQ2Ao5l\r\nh66aGkTFTGKau/yf5+4NRjhm1ed2DtrQt7heF+h6JfL/hXrwOCuE4JcKo5RT\r\n8doyo6qKPQCMQNBqJPgrlSmRMNsmJimUf1AjW/LXNw5480Cxm+geMNd1IbAY\r\n14qqBg0wWsaQdpOo7TznUzc0JSs8XtK+YxjMlhTXqkNV1bpJg92/UAbjlxJ0\r\njMw46qkO/N4RkH6ptyw2/bUCZBtZw4Hi/DR7jWvuundCm4zgtCN+cR/wMv5R\r\nZrw9RYHqLAzSVMsbydImnQCEpuRnYxfywHfTzMVZZqCwAIBtdSFrEZXFRkID\r\nxNpOKfFzID7QltMp1DZlrWKbwDaI71bOmb0=\r\n=BRVe\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"2e04dcc89ca80bfb50d7ee1e4172ff9713c149ba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.ef9b2babb.0","@material/theme":"15.0.0-canary.ef9b2babb.0","@material/feature-targeting":"15.0.0-canary.ef9b2babb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.ef9b2babb.0_1665998253982_0.803818124809575","host":"s3://npm-registry-packages"}},"15.0.0-canary.cec7fb987.0":{"name":"@material/shape","version":"15.0.0-canary.cec7fb987.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.cec7fb987.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fba87bd7aa5fa2fc65a16f80fd43ce65a788ca7c","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.cec7fb987.0.tgz","fileCount":14,"integrity":"sha512-b3oN6pr6GcCiNEIcA0oPoPJ/r3bNNwnR5/DKZrncQzUCJmp4dCV7aWfAXVD14NljivyJMI+4nGLzDvkn1WMbig==","signatures":[{"sig":"MEUCIQD6xb60kQy8ZI5+iPvhdLaf06mEiU0RRdeRDzI4BKSvoAIgdrLT+5qxgmoYh6OvDv37g3HEo7sVk/mWKBY1utIzV2w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTTS8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpwAA//S1ikSlYoUpQ37ssJb0O9QfJtqUsNtYi5Dt40Y8MVtvntyY0Q\r\nru1bFOVPEq1/Ra5SqRO3omzjoflVjaoFnVG6M+EWNyZbB1EEOELwbO1mXhx7\r\nZ6vyJpHnO31dwlDKdEUkFA+jC9ejl3xpm4w7XPzHflkeWcnM1Ygl+mONqY9G\r\nDPKhpWPBYOXnA+IZG/bLnrJaArpuug5hCG5eTn/M7BxEfx6D2ei+eYvZ0C+1\r\ne7ryuKSHjOzROZN9Gb0cLGC5J6iLzN2XaBNOaAHXqLUVC0zLNMcxZcf2Qnz/\r\ncGqVVyYTQK5/BcWpekJcCWBjJwmqn+YgMcIHtnr//xWiqcWy/QHe7/vEICjb\r\njjWTbJ0bEpuDN0cKnfnRmHOY+45TCeEsgTcPbQMkUb//O/vTFrk29CJs3xQg\r\nBmW7LRjRT1hhmJaQQMp0T6lt3HzuEscWw9qmpG59C3RiI47yTArXcN5osYTt\r\ntcQB6JMu43I5ZTtS7Zj75NFe1KtFdBIGg3i6NxXq5WxRrTiOgBxj7KBa9151\r\nKGdufddPfOnI/KifMdzXNtcaBEavnSiHV3n4hB4Wg54ByawwkVe1aWqvEQ54\r\nNzpOm2+3QwRqAHxJLgR+uZ5T4YRvWbdPSNagpXTbcBffVNCuqVaKnBvUJPN6\r\nRsdVcT3fEUHjl7uc+LWq9/Yi2XVGQnB3NSM=\r\n=Cl80\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"5af4beeec511ff0266173424b4b179e209402a5d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.cec7fb987.0","@material/theme":"15.0.0-canary.cec7fb987.0","@material/feature-targeting":"15.0.0-canary.cec7fb987.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.cec7fb987.0_1666004156000_0.3014459315670679","host":"s3://npm-registry-packages"}},"15.0.0-canary.4fff58b08.0":{"name":"@material/shape","version":"15.0.0-canary.4fff58b08.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.4fff58b08.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"deffcc70e4a3fabf01826cc1131da1a98e2d0b1e","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.4fff58b08.0.tgz","fileCount":14,"integrity":"sha512-Lab4JOb3uvnxqIDhsoZla4h4/VZx05NQQ5TGlOzFPfpOwMMVqXR61GX1UZ7INfGiHWk9jAFPCyYhyU0fnuJRiQ==","signatures":[{"sig":"MEQCIDQzG24KD05zrvIguqBwkOYb0MaYV773PEkXfGoTeBkSAiBTDE4MPjzO90Hkc1rH9lN3IrhtPPBnA6XKIxwVLOj+5w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTXMbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqJow//SXPZF7kS58fNb2ZrV2AW7h2u49pKwSovo2f/N/iJTv59FAa7\r\nK0cai88RYV0F5mWtfzKCQoxZyL7DkQ/hc1smVPsX2H7H+90i7jO1L/aTX8LL\r\nwSfxtjl/qSRUdgvv2emxPvP9LubeaaMblWTLauJTsrYLg9cx4KmpMQDEc3Fr\r\nsAAPu3glY6zmCuE5JTka4iFNxcTXKLAYGj9FltiuWvHhOukoYT4yOxWk5Qrf\r\nJkl1t87Xai41GeZZ5Ln3LAQbVqtB4A+2auWfuqZ7jODV2Vs3Csbyp8oJ7lQy\r\nChZXehdKu86vGxQCZxiPK3ds6KfSiUFG7D8sqO7HuGhsjGZzzRlP/tafJz65\r\n7koc2ZclAsbuCUUzKtycMXu3fJhpX84PsS4H9Mi2HyA165OmB9btibDJ6mCX\r\nxF4dFtvxZdfHDCkvXBoz8wXSL8uXZggpXVFR+JfpDWLuwAFrUlX1MDCPeWfD\r\n81AJpQt4OfS/ieX3i7x9LGhLA4UxYKlINRej8uvi0m+zlG60853eONpPTjuu\r\n/57d1e6jzQN4CuFlaifIp+UsTVyDtZsiDLtYyfac+6/+LtsIdY30rSw23ggZ\r\nEdQjdIlCkAZ4aaSnKUSlIjWPjUNUq+Gf+BC3FJaLY90Ab2lZ8ypSy8bV/yrH\r\nngweWZ5eatLDZHTL8nBew9H5dVD6rarLqpU=\r\n=uUf4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"b44726c7f5a5db16ef660807b5247cd71a447c80","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.4fff58b08.0","@material/theme":"15.0.0-canary.4fff58b08.0","@material/feature-targeting":"15.0.0-canary.4fff58b08.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.4fff58b08.0_1666020122997_0.4394139155923691","host":"s3://npm-registry-packages"}},"15.0.0-canary.587d8f871.0":{"name":"@material/shape","version":"15.0.0-canary.587d8f871.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.587d8f871.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0456d849a2187569d5b25da82659f6a27bffaaed","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.587d8f871.0.tgz","fileCount":14,"integrity":"sha512-0+73f12Gn0Ts3pxibAZzqFOCVRX7ZHm82QkQFyHJkGyamoAGs0JdaokN9liA9lJtP0V9puWdql2+RSsy6XCxgA==","signatures":[{"sig":"MEUCIQCQNSM2F+UsXiZ8rFHYiprb5btobNApX0n0tIJIhmsGxAIgTrf+3nTUOYUJJYzGj6YD6cCZ3+dR4clg4ugDu3Gw6wg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTXs8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp8SA/7BLMUqNLaA47geUgggnunbIXp0ZTuL8QJrad87q0hHNZfiGNn\r\nmjD2xRToExH2/MlfMZh2TrJidAoUTPMneWCGQ004Edm590S+S+Xy0/RrFEOw\r\nqc7BfYDYCpKhFLppsKvR1UQzwadZRDwRPqfKchEH1QZx9NEnE87Eg62tjffx\r\nn7h0VY2rxiiEjXzy7BKOhjC08EnZIWcYOrMEM3lKaiqiycmZlTOtFCNlf32U\r\n8nnumEtooZ8N6rV+3VQhavVoLFa55cP0v6wSn94b2B4LpUR9iB9alo4yVjCS\r\nApLl97kaNt4lukp+DI9umPKS/ovRUEyENXUEpNwQo5bxOa44aHXi+NDHekG2\r\nI8jnaZGgoW0yfK3ALsqEAY+QB65PPWvGJ1aTNQdSxY23ZN9H/Eoe6h8KnktQ\r\nh4CJ4fcvu5VOObqd2Ohp8V0DvA1px2JCmbd7EHom2RJxegA9lfTLuTjnE0X1\r\nlisNaQKkH5r6UaKvi+gbXVdIlpCb731AVV6InqnStkc72/EcBgcN+g+tuqhQ\r\nW/Aw+CQiA1bFprf+oDER91kmC6isTTzI1FJv1nF6ScLKssUca8n6GqHMeRfk\r\nWEVPvbKSwTTE7KIAzNJIzsvXvmB0pqIxnFs+gAIcdf8zOx6U5GJtbgxFn4Ly\r\nngfLreAcfb7Xbe8iOnj4Tny4qIK5QDg71mg=\r\n=44hn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"2ec38be871dc355461961e4ac44d48ec44c42a1a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.587d8f871.0","@material/theme":"15.0.0-canary.587d8f871.0","@material/feature-targeting":"15.0.0-canary.587d8f871.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.587d8f871.0_1666022204766_0.09779041565354896","host":"s3://npm-registry-packages"}},"15.0.0-canary.edf4b98d0.0":{"name":"@material/shape","version":"15.0.0-canary.edf4b98d0.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.edf4b98d0.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5845f2becc34afe567ae199890ac00981fdd950d","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.edf4b98d0.0.tgz","fileCount":14,"integrity":"sha512-Ifp1yf5VWWw84GqTczMB0e0zjmapPIjjhsBxQ/Nuld4NCC8E/rHEtvYzlfRiv7glULxH6zgPL0ahFz9brSm5lA==","signatures":[{"sig":"MEYCIQDy4qelrC3PiVGIbwaQS03Zu211LASotSdDKJY7q6zP3gIhAP7Z6pY4JQFlPhuzq4WqnhKLUP3bRZhrBNKXvCRJGU5T","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTYVkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr+chAAlxnM/GFmB7h/grerK7S36PdLLu49IK9sy1Zjc2LXSBerqUqI\r\nyeccr9kNscwQ2mUttanO50icYh4YT1lNUnKwbLD1C6i/udKaWi3e3NW4trSM\r\n/X1VLKg0zYBPw93fdUwzn/cHJRBk/VCi3yy9k1k56WXf5Y26RUH6/DiI1uQW\r\numb56inDq0/wqJBpR7EBVaDCvup/cfbAAFzPx895QMhK0fZNi4xWmTRqhRCp\r\ntfVijiAeOMpTE9FcEwSNjVPPT41bhabziY6b70tWjx1kRhcFvh5iFdTy/gMr\r\n8Yv9636YWrDkZDF/I4bNJrnuUPsjZKnDLwEae6TEUMOVBo1jd8WyV8Zw+xyw\r\n8fRTH+McNF3miDCrQMxpLRBEJ7JtE8YYka9Wk0pe/Zhal9X9y+N5M1w09wnS\r\nPYFfUxzf0bTpln6aQ8tEgRvo5Azg2fpmS7pSV2RCSUTwLIlCleGcfvFYQ8u9\r\nOQOs339/Eo6dXLegGzB+WvI56nKq6vC39AaFB/lgURPcGHwOMqaswhh/KsI5\r\nwf5MYpnoVcFWHV6EJc5cuykd8Xer71Ws/hGCyPxVE7MOSIK+M5wVUpQ63/wQ\r\nwEFSoD5CEibRMDOtia2thkMhdUOam5qpT5XdtXnciRkUdgW/M5IqFp6weAKH\r\nFuplv86mAtQfaOaTXX3K1Fjyvm1cf5fMuW8=\r\n=OUcP\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"ad4766965d2bd24e69b2e2e6940c960907c93c1f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.edf4b98d0.0","@material/theme":"15.0.0-canary.edf4b98d0.0","@material/feature-targeting":"15.0.0-canary.edf4b98d0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.edf4b98d0.0_1666024804610_0.8563536469684674","host":"s3://npm-registry-packages"}},"15.0.0-canary.024ac5f16.0":{"name":"@material/shape","version":"15.0.0-canary.024ac5f16.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.024ac5f16.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8e560847ba80234d9f603cc34527af3d0803616a","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.024ac5f16.0.tgz","fileCount":14,"integrity":"sha512-nkjsYixeIN4nxqYGyLgH0YOEQzAjpZ8peXHnxOGC/UivdNAAkZ5buINGv+QcsvF/lb/rlVSiDW/TQdRYD9v3AQ==","signatures":[{"sig":"MEUCICu1zzgfE+XJUMR8f/cA8OI7wpE2TTjdoQlOLSOA1MVkAiEA2lcrRNI774fpJ9ibEidMYZeLQJTKcNGe+tJSNFO5aVM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTdo0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqCgg/8C91md8+JPfPZVlyLNXLMh1y6ZAv5Kcv29XMLdIP/JeaixEqD\r\nkXY9Q7nOBEeyYCag3OsYU1T1G5RLZsL+Nyp4U5oKR/9/4gejTkTkAj6+kpzj\r\nj2wnWta0snn0EWoLPZSfdtVMKA6+BSOdRgPnMcY3fWp8u6/gmsqsnuFIFVeD\r\nx/BvQo4DEWS6rmfMK869MBmDrSSFfVXIeTBx760OYSKTvkpJeh5VIKWEJcsL\r\nwV14T6dToH3tvDWNyBIB6m0yEMjJ/E9ZMPuirybAWpAWVqrvpHNT5/QsX3Qt\r\ncQ+SROiceE83uenQra7IQD2q+Homf799B3zL1pOT3XSZos2esRsH2xughFHx\r\nJQppiEdzsHIATz/dUDzsjjkCR11K3UMLsB8RA3KRzzxdv6Ijzt2uV7bFNzpn\r\n1ozatJPO7iJSUYKLyRBFtB/5zZBpdoaS1lyxMNjALdl0iGMB6mtpSRE6bo2p\r\nGrCIMi5vCEc42ALeTfUjDe3OV4L0flPSEh8o0XDac03Wk0VlLfkc++5cEhqh\r\nYbdfBvohGIi5qTTlAno/80OsKRXj+33eshXkesNQUnLo4Vg2Q0NglYDSgmEf\r\nqm+tgXMMybpfXjNyQqGJ1fuAXZrtEMaUET8jD+ouqHu0Vx/mUIY6//DwIAyY\r\n6fcfuwjLpPxYWSh6Ay0q4MWO10Kcl8+edb8=\r\n=vadu\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"9ad8e77cff1167055c10b93b4082fd5b4e1d8643","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.024ac5f16.0","@material/theme":"15.0.0-canary.024ac5f16.0","@material/feature-targeting":"15.0.0-canary.024ac5f16.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.024ac5f16.0_1666046516791_0.07022514577286798","host":"s3://npm-registry-packages"}},"15.0.0-canary.c8bdf6144.0":{"name":"@material/shape","version":"15.0.0-canary.c8bdf6144.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.c8bdf6144.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"181a865ab19931566a2ce38902f263ad00068c28","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.c8bdf6144.0.tgz","fileCount":14,"integrity":"sha512-MvVgsmGk+I5XmCG7p+/FHelbhg7ETTkSU6fppDLhXAxz063nxIp+6ifosrbopRLu1RC8BSnc6SV8xorEYhFCOw==","signatures":[{"sig":"MEUCIE3DU5V4dOZz/uDUDwoT6arGCCzYOcf+WFvShABU3GXYAiEA0erxT/FQ1TFCXdX9lw4wynRfTqjnnJvaFkWIMJaboWs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTu8FACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqnSQ/+OP41hr7QNmViJBP7VgHANUUg4T8qdhErJvtdlqBc9gIdoemO\r\n4CZKOEKzd8wZ5g+rHjESWR++ymXz+YNEswErfsCmhrU77lhKcM4fuJ22ozhr\r\nejAEJthRZvGJFCS7o5fVHb1sT4Q/irJowspb+x5X6FvgpLt50l+8c8JkB//x\r\niT2t0SSsLa1sIDZTckP7+SAO7WLa81Uf55afh7ZmvfV/jOKIgUArd1Y4nW9S\r\n3hIlprDMSYNGLUg9onlTxxzqhlvSy31obBHSfiyUG4X8paNpgEWOh2QOFWYE\r\nPn8Lewdti5HonBgiaUpF7Pb2jCE/B40HZD21y6hmpRv8tM/q5YCH2g7P8km8\r\nKano+b4jlMULdmK1iCeQZogCtQ/ZtiGagnDFRQ1rEe8/Tms2Z8gtInkSrG2f\r\n1oFdqYOvwN/LXxw5wKRkvtxXp5omzMo/dVnvTPNl79FrTmCCbegNVytj5GMv\r\n7BWjv8WS/zTpzYPId9uSz7vebaS1CegEDbwfigGbdeulbGmSyAXOilB/pDdL\r\nNN3wYjPnfk2xXYayW7O3VvPvMsvb/y0GWOmP3zQW5bF2fXZHqr3qLLG/yD/K\r\nJ3qnXGXm6YlB2Eeo+R+JNOTlkdn3LOCQGlSYUkDI2rJC1nZkY/IXLna3bQQt\r\ntbIl2heSHpfOGjIFML+WnIrHyYMhK2aU7K0=\r\n=IyqY\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"92f4fcf51598cb8f9b9e03a35332a980296c24e2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.c8bdf6144.0","@material/theme":"15.0.0-canary.c8bdf6144.0","@material/feature-targeting":"15.0.0-canary.c8bdf6144.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.c8bdf6144.0_1666117381317_0.7675904384393653","host":"s3://npm-registry-packages"}},"15.0.0-canary.bacda4885.0":{"name":"@material/shape","version":"15.0.0-canary.bacda4885.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.bacda4885.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"91632baf95c681071a20a3a693b2ec084b24cd5b","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.bacda4885.0.tgz","fileCount":14,"integrity":"sha512-a9jZFdfFV6GqqNgkDgCo+7XBg5qmHSlQzLM6DmjGbo16AEuEPpf0H7I3/ZSaxcZvxmOwlTTyaAw/8jGDSXZSyg==","signatures":[{"sig":"MEQCIB5iH9ntSU/h5WaHzJ9x3DMiktXNIv4C9i6wSjioqRADAiB2TSTKJSGJRhSXk2fIf7P+At9al+6fITmvD3BmuFff8g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTvOKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmplmA/+MV0s0Ed8M2QOnWozCBdqHsWtcRNXlNrdblvLMDvqmQosUOVS\r\nhp6nsmaOPrfRQ8J92IF8ZoSPYaUcukmxagGAnBQfanBSsO8Y8MWX9GOxasui\r\nEg8I7EEj4b7BwmracbYRZ21fEpgZCRArHKNulb/wAAz00jStixNXRz6IYaOr\r\nSFnZqiZ/gjBXpr96jsZMgETcJFo57px4fl97lDwoC32jEr3BM9dj3rSyxtUW\r\nvIN+U3bJ5lS81xmCPcC55+HLclJFSIBwpHbPEne+UaWXBzuKiBjsbqfW7pub\r\nI0J56lLkcTUcqGmgNYWJ73TX/8/EOALRdNYWFpHK8eA1csO6jJ8uDeqb8HIU\r\nPHoZNriXROEbQj3AsgSewPXqvnK+mYfS+shgfxi1dYDchaz6nPUcKcJIrXZI\r\nBooqZrPmtSigNdem9R50dc0k+hxfOV2Q+VOdhMiipXYXrbHKc7vOgS9R9TNe\r\nC6qAumKGkXQ8jf55Ei9QykSiKzlm0cwKz9SVYbC1zcdU7P/oM+tH9CCfzsDb\r\nrOxXRu6I/vzpa0CoPXXdx4u69fVJBThq62TADxD0ooifmOxdQCetKRAGphDT\r\nphIkYC3ci6XZ+z/EWErODr2OFy4HhdRTQu7wzBR2rl0HvDWqZszkHljJcdHI\r\nJCZYgrwXLUWXme0j6KavdTtfzxDd+5Wl5Ws=\r\n=CGba\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"9e0a7dc5fb5e2d1554093d85949ffa6c2aaa33ad","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.bacda4885.0","@material/theme":"15.0.0-canary.bacda4885.0","@material/feature-targeting":"15.0.0-canary.bacda4885.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.bacda4885.0_1666118538258_0.7004002359624897","host":"s3://npm-registry-packages"}},"15.0.0-canary.92b2556cf.0":{"name":"@material/shape","version":"15.0.0-canary.92b2556cf.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.92b2556cf.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ec4e91f361e84629be0fefc38d1554a76139f7d3","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.92b2556cf.0.tgz","fileCount":14,"integrity":"sha512-CWHIGhAFDG1fXSrg4EhRVh0YdmX+9TjrtGrC3MRWYgrSaYBCZjIwged5pWiOth98aQlrjzDaJ4NqAGSTMfeXUw==","signatures":[{"sig":"MEUCIQDwPhu21tvEoMNvmYmQMrwL8c+NNZe8GvMPJ/2+oFI+pAIgRwnXTXBv/ELdaic4jSzUS9FFvLX+xGIQ5SJhIQFP+T8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjT08dACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqwzQ//WIL+IgzhdLn+YkOIStLES24rmCNG8mGx4bGaNhbxm8NlCFFi\r\nlOdheEl5ytLcLAYfBlC4cdlVz30cNK+qITEo7Tnqp6tPgsytZCQrGZYF99jl\r\ndeyUapsZCP8SczlpJGorKUqYU6UvgnDVRpa8oxsKapPjY/7RlYK0+0zAHVqG\r\nBxPstr9LgRPWfYD9xvXIO9TLRTZyQzPrW30oum4FimikJwErSSAa3gzXJeg2\r\nneV66eEx068B3GpSvcS/XCF3YKFXnrUhBCWwZnFex9vHK9nfv5N/4hcLZoZc\r\nJjgDg5qjDOE8yZWZppX0OukOWC2fNlm5SsSPTbabJDLFe0ceP1vh2WXYLQAc\r\n60HdrYre5WR10uJo1AiKav9O2QQN5N/6NIb5GEedLet7UAQl1S2OWbHlwrRU\r\ntk94C70e8O5aX9unITcfDSbjxdQWzsOihfPzP3HNEPGwBe1aHA7TwjRpN767\r\nzyiXffJe33sTNg5x6iq4EaHQyEnl9EpZS9oyigqUITAf20vu+pohHRJpTIMW\r\n/sPmdhrtQoMcjwZi4pR6tbJ1+KuR7PKn+HA5nWm5i6vIBD/oCpL1VrLxwTa/\r\nhj7TjhZgCPIKR2S0ZV1m0mSZSblyprHPBytbpbHFbTyBo9NyqCQGanoEDQWp\r\naVb7Fobeijh3Pe6NrpM7UT9yfJ01UV9ecJ4=\r\n=iMwJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"7ac326ada7a9c6e84bacf5e01a6d22e675dcda8e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.92b2556cf.0","@material/theme":"15.0.0-canary.92b2556cf.0","@material/feature-targeting":"15.0.0-canary.92b2556cf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.92b2556cf.0_1666141981700_0.5079655066769995","host":"s3://npm-registry-packages"}},"15.0.0-canary.cc804509a.0":{"name":"@material/shape","version":"15.0.0-canary.cc804509a.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.cc804509a.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8ea78b7e8a36f1954997ced82e9a24bdb1554bc5","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.cc804509a.0.tgz","fileCount":14,"integrity":"sha512-kfidzBt2ds/RTaNe6VKBBe3shaO3xXfoJ7T6N66yDsToKJ8aXm3m8rJfTpptZiwnk9x1EK9KAf52ZXLTssGsiw==","signatures":[{"sig":"MEQCIBfWk1rBKCLVXjf5WFtSnh1z4mo8jqcZ0HATQLwqZ3/ZAiBr+QLQ+rlsxrgMlW8k2RSy4jqcV4U1NTTEicPi4mkypA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjT1ABACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrbzg/+N0lur9OyGonAG0uznavWr+ZyP3M6O14JUYVOkgkgja6MTRo7\r\nDuD15pOttugWIqwWVg9SlKhbkvo55MIn8kzFXyeR0ZPfooYDngzxb3UD2CRK\r\ndbYNIcAQB42SFwwyoEqf5vlTsdUra/FbTQtOBq9YycDDCgXJHLaN/TM2aO+9\r\nYVdr9k3UohE+aOAsWNjgKxgN30CJeqGFQnsXGYbYviXSN72P8A7m77UypC4A\r\ndOxOlskHYxjFTfmCqJ9j+t2yjtwA/8tGr1XM0ED1w/MqvZNewWR5mDeLmmTo\r\nI4vsG37yw9BLw00xcQ86KJf2vQaDSEvvuvf65HXXhEAJRamnyTO+9bC7qDJL\r\nmyc+0KRvJrPwXteQtIcmDIReF1taRuURIkgZWHiEUZ/hs4WOhVE3O0vZEjL8\r\n4V3131vZmoM7jVu80lWTjiGF1hoSkK4GT589DO1JOsvOGY2II24Ct6Qq41RW\r\nNepBZ87lQhF3dey7XhJZ37x0B3AgY3UiZaF5iGZoRYsZXT2zd1feERjA7hw4\r\nVCPM5tz8s3UkZwe/PNssc1Nx28fWtqD6WYsNz0doHEOvqmOGsfeSAbEwSQZ5\r\nPj4k1HlY8qcYgrDDltxT4TLofhLZtdU1AWMJ12ObVfu3oY+rl8Utm/lv1+Gr\r\n2HFEvdV/h9iPJo7fsrY1Vy9DvClyVIJeCQw=\r\n=x6AP\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"e8cb944f6f2263dc4b4fec5d7ade2bdb5172b4eb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.cc804509a.0","@material/theme":"15.0.0-canary.cc804509a.0","@material/feature-targeting":"15.0.0-canary.cc804509a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.cc804509a.0_1666142209246_0.8230622294029226","host":"s3://npm-registry-packages"}},"15.0.0-canary.982bedae9.0":{"name":"@material/shape","version":"15.0.0-canary.982bedae9.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.982bedae9.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ca53c0386cbeb7e85bfe80c793d93657f7bb4e80","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.982bedae9.0.tgz","fileCount":14,"integrity":"sha512-xVYtXu0xi+IK0/T6OssjkM2d1kVJJEnLigF8FT9A6+cKmXfHwMSszLaG8aQUcdF+rjVA4r4x1e0PCc4eBempbg==","signatures":[{"sig":"MEUCIEXkeaxu72i9cLW1V62cEwQVvjmMmruj5BDnlWeeR2LKAiEA7xB+OxBaC6s7xT0J9+Ls/W3a/7gt7OtjcGDDLWtni5Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjT1SoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo4Og//WTTqaLSEN0cRvut+2SWUx+lVqVef2KMuJmHkhnZJF7sW5P/m\r\nkZTBXKr9Kdc167XZMPuYl+pl1mnC1K0/r7aTSE8o2lHNLcoK0/SCA5oJtAC2\r\njhTf1zTTibnKi57xTkkEZmF3EWrR3fKF8oFZ5MBbM4LAQUoWNbYfUfHMqju0\r\n8kZoN6fiTTqcHIhZ+WItEYEaXcuKtXgfL1rcgNTVfgoBt9q/2LonY5YCSdKP\r\no9Y5vuD8eQsNQGLg5DeerxPvoWKQe3PegmSqpg8SHaxhJECjGtBWgDEt0noc\r\nTbnhr/XkwvForM2/9uZZ7NmVPH49QNgobX6h71Jl1VJjEQK+6SoinjRMr6vp\r\ntM1ORGA9apbNseAGh5S0w5nvPbSUocou0a4KFjZHYpbTqLH9vqX8d8KXj99M\r\n3kMlR2uEf74uN8oav7/0+8Mu0OssXMkKNkRzpmoN4ZC2vYhqku+yjywZB8qH\r\n4xxLWhtR2lPrQnsFTNAxADrbmyRnv9cPQgem0HFJJTQk2gmibUdf2vkoMxWy\r\ns8ebMt6I4PkEszJQyhgYSFw5Zva48TWxywvFO+jfCkWlj/XKR08FrV09UzLq\r\ngTaHruld4Fa59Qa85ucdZBxUXe3F8QfPWpyPp7UcF1Jad1HAkUjTdcvonugf\r\nfRz3ixujeo43+LF9C8buR755jfSlPF8aAZ8=\r\n=0y/y\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"247fc73217ef7d2438e876f1477d141e6970c9e1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.982bedae9.0","@material/theme":"15.0.0-canary.982bedae9.0","@material/feature-targeting":"15.0.0-canary.982bedae9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.982bedae9.0_1666143399929_0.7873911010506172","host":"s3://npm-registry-packages"}},"15.0.0-canary.ee40081f4.0":{"name":"@material/shape","version":"15.0.0-canary.ee40081f4.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.ee40081f4.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4ac0781a6b8524cbb8a19ac94c3543d83f5c13b4","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.ee40081f4.0.tgz","fileCount":14,"integrity":"sha512-+MOSBq8czds+mWhER/jWjlfBPsGPak5RVuU6DsA2lKkHorUMm3/OsiLyf5KS90Z2RyL14e1tovYUgY496HV53A==","signatures":[{"sig":"MEQCIE0+CL95FrjLDJbn5OkYf+ImqtIhRj6Z5SyWP+rZQoETAiAB79Dmn9wWpFCt/35YRYt7ji4p7NbemKCM3uBo6l3oPQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjUFntACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrrdw//ZhHBQebtJuI8y7gzrzPX99gnvNtnX1jOYEVgmk61NZ34D0xA\r\nUkRD8qyn3szUYPpMMVZptlY8CMyLhye68t+1JOPUvwcrpsFmsibi1mhL+WY+\r\nA4jZ9hNjSdcfWBq0wU/5C3bB+89AnBSgOKIj7zVJBT6x/P85GD8/QXdpT6ij\r\neh+XdcwrZKtWV6bKle1+E0ukCVJZkP5vUL8LgDClbQ/n181z7YQXV5CHOmKV\r\nKrXBzLMb6XBgpRegyH+Lfp0Z35E7bEcNYLJvcj8fd2skGySOI8xhxuJkDkBW\r\n3FGCtUh42ep/9mpL0rvVEOHYnBn8WGVG62xeOtXHi9M0G4S8mYE3Lcgz8OBW\r\n3pVCRITk3OM70LsNP9mmsvxkJ6dKcSSkrczeitEmCOiaZid7g/a/lc78dfQf\r\nJINd6jdyKfmonqGoPU4BVoLoDWRzkkmwsZkaYaXCJSezSS9X4ZZ8OLVXOpge\r\nJNg4pb6TZepe5o5JugUQdIni5GxoJtJeZ9LpyzwnA0Ot/tBUKYFUb2iTUmvm\r\nMxksuwjS9yeGqIVVN1NoYqBnyZZb1n4ryMU6lZZoBR6b8ZmeHAHtadirJSx6\r\nSbFPCVSQ7StA2z4MjKGStZtCT658F13dehRyx64IHHSKYFK8RvUwa6Bjq0Ab\r\naYooaLSgTbrPrDCn4Fa/26WXvnNkSzdgOQE=\r\n=Y2Rf\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"04ad48e358b6eef4ec9ee359b0ab906b30425504","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.ee40081f4.0","@material/theme":"15.0.0-canary.ee40081f4.0","@material/feature-targeting":"15.0.0-canary.ee40081f4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.ee40081f4.0_1666210285386_0.5765046042597988","host":"s3://npm-registry-packages"}},"15.0.0-canary.98f1b54e2.0":{"name":"@material/shape","version":"15.0.0-canary.98f1b54e2.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.98f1b54e2.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"17112a56c8549d7a3b80a02e55b2425daa95a835","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.98f1b54e2.0.tgz","fileCount":14,"integrity":"sha512-PTaJE3Ab/OX6j1+bVZGcBrGQ7HHq8eqO43PjFyi+rItcJQqpu/8Y9KxRDp2VuwCRYkMdD5UsXxxGWKuB2Dirvg==","signatures":[{"sig":"MEUCIHc6FZyLwuXPBre0Ue7HOXexb418xip2/NsgR+PxAV1gAiEAzA0y7csJ5FRynA0Y61OHa8cymTvMZQDSl/UvEfS0Dlc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjUdIVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrvkw/9GmvUF9akmfet6k1nhml7UBh2nt8KNMa1fNyAskteeYnFT2wF\r\n9eWsePg5KD8KMnZsi47dra6j8n1jaPICaRICXzU1LLMtCoLTCtv4ZcitWQzX\r\n93utgZqvNecXz1qU0Lv0X7v+jkxq30ahMCa5Pm54T7EpbEoS5wZTbUz+JiPi\r\nfFKlGlu/TJXawcu0xt5Fa+tyDrtWA9nBFQs/2/A9gePnqI/6VVcXpwK8etGP\r\nQ2egCfKLn4aveUyISlAyGC4fMCaJDOFWXCZC6I1lFaZCMxYFQUPTbFi3zQDJ\r\nhshUiCtFiSSD5iDUON37Ffb4lYgBzaISMa7U/4x09WVZG5Ge6iwqr3PJoPsh\r\noVzeXZ7p7e6zk/RoJn1RiavDiixPUnEebw7QUpxha823lE53Dei5XLhmROzL\r\nf7yChO2CjfhjCQYEy+cB4LVaxeRrzRc/0/wf4GzuRL5gw+iZ+QKPBU6XuRWN\r\np57FS7fP2+7hkmgrT9UGR2yoNb0ljTgevYiDOi4lx+BTe6QRGTXex8OU44xh\r\nJZ99QYILGYCFOdRduVeBj2Ybe9J6vzBfq96je8jt9qQyphT9zLlXCYbqXmpB\r\nbhHq4YmP4gpcsZr5PS5thhPQkzrq0T0lUF3b9Zsm37641kKHHyGfpsjcnr4v\r\nQVm2m3Hd9dNi6gAnZB3eOeLLkViIU34YSo4=\r\n=Ph3A\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"aaf0a191532b3357cda509746499ff62e3aaa47a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.98f1b54e2.0","@material/theme":"15.0.0-canary.98f1b54e2.0","@material/feature-targeting":"15.0.0-canary.98f1b54e2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.98f1b54e2.0_1666306581081_0.8382972566844804","host":"s3://npm-registry-packages"}},"15.0.0-canary.e74b7ba7e.0":{"name":"@material/shape","version":"15.0.0-canary.e74b7ba7e.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.e74b7ba7e.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9ab6d14b4bd55280c24dbbf4aeba85fb5603ebd6","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.e74b7ba7e.0.tgz","fileCount":14,"integrity":"sha512-vs28wvkGDA9hTXshDODAuDxbybtapzpidXwGiQY3fti6JTRiG5JCWMO0pJNDdBayV28CHD1qkq5EGwM4gd+9Rw==","signatures":[{"sig":"MEYCIQCRQjq4D0zpMff7+In/tvGVNs2/D7V3VVH5Z6yqVSE8HAIhAJ82plFvCs01QUngQytEeRvFFYq2pVdRBVl8oyAx8u/u","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjUtFVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqOMBAAjuyMXbzGOnsGeMD7TJwQJ2RbGf1Nzbn1uJcst+4WhM4ee5ic\r\nO/MUwsHCLNg/5sQW7ri9Qg8BbQ22fG4J9zvo89dNW7J0YGi9c4nuHB6Uxzhj\r\nXsdXm5s377UGbIdjIg0Pun7u6tND0Tzj79OntLFFwH1fvMNnhFd+biQGJn51\r\n+LSW8XeEOfaC1EaAu4UDVFFd3DKvjkThC4A7hevuRDjwV3YGkYBxQyDpyQbS\r\nrGp1KvtPAOiTuw1zjC9ecTR0mRIdoJks1Uir3O8AKfO2pGZ3EpKgk3OOlb12\r\nCwW0rk7DojuLyc6GV3/7A8F46sMl/BUrLcJs6r63FuVtZMrn8Uj2KeGYAopa\r\nSSeJLbP4LnFi/ERJC+nKa1o1IJLvoPUqvPBmMP+zjxT8qfLUA2rJ0vdHmE39\r\n4Qtv4YXSHewZmkDd9vDkNAZp2crx4c65uEgESmCKQRHiRvIAtXcwpbAxXwWs\r\noJiRxvALfBJlpdaA2hK3KLf525+bdgH8bcHXA7OI11+62PMBwJDX9SMGAvB4\r\nQ1MxojmVZX+1aISXnKj5brX94yw2FcJjn8iFle5s+Gb5Xea/+koREIbSi8Wj\r\nu7u7y+09zepW/vU29mutSB/2TgzyxMz9D1emV5/kJ13tZlBJCpyO57NvL3E6\r\n6Ja1e3qdBZUkiQl8B1KIjBKqUkwB7CqWP84=\r\n=XPgq\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"e30e36776ed9bc98d53938cfb5e48bf5d2cc67c4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.e74b7ba7e.0","@material/theme":"15.0.0-canary.e74b7ba7e.0","@material/feature-targeting":"15.0.0-canary.e74b7ba7e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.e74b7ba7e.0_1666371925730_0.4688660212454274","host":"s3://npm-registry-packages"}},"15.0.0-canary.ab55c07d2.0":{"name":"@material/shape","version":"15.0.0-canary.ab55c07d2.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.ab55c07d2.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"45b470a4c846c06a0ac2e9256b92e4ec8fd3aba5","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.ab55c07d2.0.tgz","fileCount":14,"integrity":"sha512-Rttf8TSAYA6hvRhEvgARRfOk2zymvydfoJkVyzHCxQcTdrR9tS9TvT4bZEhb46Xmo1fRNIlKpXdEBsLkXPbNBg==","signatures":[{"sig":"MEYCIQC6dMk+CixQKjD474SE0HxgkBhzahY4Xg5FHDPX0SzrQwIhAKwslP+/J/4oLxjPLXbKfllQZu9e//AcpvcROcd9d9V5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjVDQJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpq8A//UzrOvXHoO6pqbiCfKaAkb1Z/KV0J3i9NG7+rpgLugXjCDqU8\r\nTiS6FYIB/Zqis/Nhrecoo7gtlNm0U/QExytBNAbQyjsBOimQf6QsIgPTpL7f\r\npAgtSVjTGcjdVfQDC0fYhmmwKNhoNDRbQOAWQ6mFnqTYSpfVXIIjMQMAETjw\r\nMteMDIcflvlu7MHGszxwPybJtl5wKseXh/6fr43ZK+zVHSshXVnLefjYbFEB\r\n+DeL3ZUqIHdpCKkgeDWbmbpxTRvnj5KgJPlSRpgwVpgaDfNVa3bYK7veeBwK\r\nJkWNSPSGxS7jjZAR+4YFUa7IF4dU1Xeky4Bu/TLptlGfKbZujg9hc0aW1k0b\r\nZIVn7SBU7rMUs/f1P0xC/cS1429wzV36OhN5Tn8eijUlqTzBONwtG/n2wIDK\r\nDZukhOo7CgvDEOgraV6uCGciD5q52gQ3MTQ10opXhKRMqZe+ZQ6kF0ZonlXK\r\nJDQRjEleMYkryfnYyrgox5EXK0V4El77wTCF/T+TfTkrLY5xQ816CC3Wd1FD\r\nQjoc1bM4t4HjBmRl8RmxSSGRlivbDPhd3N66L/9b2GcEuVDtsJ0mXrVcAIJR\r\nPwNwUWxPDYZWt41zqivh8RmzwkwYLTxynjUjC4Pz4po14ZvX2L2+gQGKizoQ\r\nBE5SWcZpr3oqsgiYdmX0BtCcA8KiiyF2b1M=\r\n=VjcW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"7fb32c724b7903a8060cb457aca1f150a15590dd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.ab55c07d2.0","@material/theme":"15.0.0-canary.ab55c07d2.0","@material/feature-targeting":"15.0.0-canary.ab55c07d2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.ab55c07d2.0_1666462729595_0.226051107172625","host":"s3://npm-registry-packages"}},"15.0.0-canary.fc539db34.0":{"name":"@material/shape","version":"15.0.0-canary.fc539db34.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.fc539db34.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a2b71591d137cacc99d386d23c99edebd2b53db7","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.fc539db34.0.tgz","fileCount":14,"integrity":"sha512-D9MRBcgKpoqm9dvvQFAyGXrRR0RtD0x34UaUetnxYhg/pDb2RcYr91HCpX4wOLNZzVoGI40jThe0ZOw5TPFgeA==","signatures":[{"sig":"MEQCIDf6wJdslvOh71XqrnR6aB0tb5ZebyDi70Mv/qjiV1LzAiBKh5/nxN5nQFhFWu1SGQjJGlkcjQzAo+Hw7UvlO3NZ/Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjVuBmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmphKg//WLPPs3MQWN4lrQRmx544Kc9S5bsLrT4OiIj7UpFbOJgutIk2\r\nG+msmYYfmEh65+iSvdWk0E06L4pTV+IWJPjBkA7e5U+HtMixV6GgKHzEqDQr\r\nYaAygoOSwDOjhDQ5RWWG8qlLnmCaiJi0FuiCKCVHK793W77qrzQI9bo1YloS\r\nKQWlZBolhECwl3B1IgnUSQyhmfOGmN+utWU8WvHfLsk9M41Zp7/UgIKKiD/N\r\nNwLGNmjMAp+PJ06jy2jBegqUIxRVM/a6HvyS/mm+T9+DxE9JWJvb0pJsZqEs\r\nxEdR298JfPSiVqcwO1dWHqAwYtEojMnP2xm0t/dNDf/PozeXMw1e95l8P3nD\r\nxHoAssrDTQzsVT8ngsWV43V/hh8pe3DGla022E4cNCdiExWp+jpBpzOCFjH7\r\nOIBMXQviR7ro/p6l8mWiVUEzkhI9JkRFhdFtzn+Ly1gfujhSeQieH1J9afLy\r\nZ7FfQnUuVwZaQS4DgfvXb+K9f2v2HRWmhq3VYfrYQlYP3x4EIWCF56PykKm3\r\nK+FiGGhPHbCrgXSdyDWsNFL/fmYhVqm5D75HNsDXxELnld5y+Vbbnu1VIYLN\r\n5vmS93SPd3Mjulz3iBp1sExO40U4PpI0QGT+wAbmOf6fkGMMPc7r513c4Yub\r\n1aZ0/WC63QEl4sFVb/NDtcCm3q9/NfJI0Bs=\r\n=K2R2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"18c679c73aa42d66117f8f1a88ab7cbde6f2a201","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.fc539db34.0","@material/theme":"15.0.0-canary.fc539db34.0","@material/feature-targeting":"15.0.0-canary.fc539db34.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.fc539db34.0_1666637926799_0.17761798927986772","host":"s3://npm-registry-packages"}},"15.0.0-canary.e340b04c5.0":{"name":"@material/shape","version":"15.0.0-canary.e340b04c5.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.e340b04c5.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"34985374ccc301e100437e879486c958524b9fcc","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.e340b04c5.0.tgz","fileCount":14,"integrity":"sha512-ftk+U5J758RRtM55IFm6DjwHk6q2G2Twx7gtD+LmwXjNqD2tw4OI7/k7LctkM5wYZibxM3+jPeuv48mhgfZQTg==","signatures":[{"sig":"MEUCIQDkFaG+BzOFM6BQGwRcng9vEUWY2lRZIeuo37W2ncksUAIgb12Q3nBOUsZyD3Uu6BX/CFx1IASuOaFaPnoFCV8njYU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjWHTnACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqamA//W9hksWr2zc3m6bjEs1aexFILUOyVvxKb/yu+Glb0D2bBVGzU\r\nYhSp+9Io7J9MR9HMqBND5+AMxtMXnTS9n37dBta1t8QqO4bUZfT+we+nnxng\r\nUIKLwEZ0OWGPKXzr5uh26ORinltQlOAF+T9gnoFrFB+cSvsLKHGNqO7OEqaH\r\nrgFEVmLODhf2Gjqcfb9KA4GS1v3Eto4FnKzxgg62wMIMWSxVCLBAhkwRYz+a\r\n6RNm9Cj/8AMG32qZCmfRL7nkLS5Kze4icr1F01skhIC99LinkgOoP9yZ8Dce\r\nF09AHvZXAa+vM6nT1eGEwX3W5edbW+GShHeqZtn02HeldAJsdZvVO+QcedRY\r\nWKfyFXeEO8iCSCEDUpwIg5caAtWN7Rd/hS5QdCjyBXvPo5VFjfMzABO7iDPD\r\nGPw1j632Uk9oDwR8Rd/Q6w2GaTj3BehrF5NqaOcO/oId0qwP/w0mRfwVWh4F\r\n8ZS2C8BFqEMk24xB4is1JCe9UXmwpCIKzdMO0ZPAssOLq96zDkdxgcpUxyy/\r\nBMOZAFXFgJCOI3BGPfK5JCuNp8joAc2ZHlplMebkBPo0muRawUUwDEbqP0nU\r\nZxKCGvSMI3R4u4UKRcJy4O1Em6jnX6xAyOPjAIfkut4dc5huYUuOd1iDgHPN\r\nOEX+hfOwu/BIW+VFZug9dMoJRuFv1DKOdr8=\r\n=ltHm\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"f3e39db57f42dc19c08bf6e97cd6918a3ce32dcc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.e340b04c5.0","@material/theme":"15.0.0-canary.e340b04c5.0","@material/feature-targeting":"15.0.0-canary.e340b04c5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.e340b04c5.0_1666741479793_0.06853414199938923","host":"s3://npm-registry-packages"}},"15.0.0-canary.2c1a8f8fd.0":{"name":"@material/shape","version":"15.0.0-canary.2c1a8f8fd.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.2c1a8f8fd.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3561fb2b0492985cac197839e9a45cea5e5e6e96","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.2c1a8f8fd.0.tgz","fileCount":14,"integrity":"sha512-AURbdrDX1r8FOdEPygxZI18IkzpSJmGsPgsEi2xc0Ax7vW0hz4DDhVvQkinV+3wOGbykFfEh59TuwZFDLdR+Xw==","signatures":[{"sig":"MEQCIEbF4ozYjqYq/v0a71baJjitusP6GR2ZKbxHfCUl2I2FAiBwE9pphn7gdZc0UeQjAxNpaWoYZhITI3SdR7IMXZCTjg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjWW6XACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq51A//XFmjgVj6lWHhIZBLO3hXFq8gJBhVIx/f495wfgDjnLrxjeAH\r\nRXpzPpyJo6OoPAh4rmvU7XQljn1n3XMpyN11KaY0XawJJ6PZ5R6m5FSi0cAj\r\nxw0K+hcwu28fbHhz2FvbK9vwgyn6h/UTIlgzsldpkeOX5wuJdkCX6mfAa1Rh\r\nmcgXcgVfvRebu3f3ylblCRNNGMM6rlWL2ZSoaVQzQwUjNXVeFNQNJWE811zd\r\ngHUzKC6i8kqmV1yyW0zs8PLPSvZolWLNlYmGiBln4ev4oBlqVTDTgijCZlcK\r\nHvzNafOvNKdEmjBftglhQaT00IXerlp0XF37uMdUaEX2D3mMz3Wk2x+q1v5H\r\nCwaKrTusb92sQn/lln8/JwlnZmcIRP1uaKiTebu0IMGahWk1VqsutwWvqzT2\r\nvZQomqjrk2c0+ACKIkMiJkSnyHWXDPT9zi3eQuZiXwvlobAtNQv5ApkS0cAC\r\ncR5JRuqrW7apIvqq+pAVeV8wG/94cNaRIHsw3LXIIG3zm0y5glwQT6vNvW4X\r\n/5UgGVAvy/g65oWaXbP5zVtd5RYL5no953CqZEqoGDaCTf0QxIXxvzvjutoV\r\nY2MdMcoVbet0PIYP1jIkN20nMXB2/7wYTIYNsfk5AStYM9oeUszO7Lb/OeUZ\r\n+gGwXJkunl7SrTsQxlU4UCQI7dfubdtKBW4=\r\n=aG8g\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"dbee023b5e37423b8695520d95f2d00d884bfd5a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.2c1a8f8fd.0","@material/theme":"15.0.0-canary.2c1a8f8fd.0","@material/feature-targeting":"15.0.0-canary.2c1a8f8fd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.2c1a8f8fd.0_1666805399188_0.7648884043165616","host":"s3://npm-registry-packages"}},"15.0.0-canary.ecfee946f.0":{"name":"@material/shape","version":"15.0.0-canary.ecfee946f.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.ecfee946f.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"52b32e00ca53ae5f0ab979515de3b30197ba38ef","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.ecfee946f.0.tgz","fileCount":14,"integrity":"sha512-eRMm29A85dFkGzcq/eIZSX2vss/YoWCh8o8ACKF0Dd2yVoSfbclWirrSL1cYAkMLnCzcJ+tLDGBLnJ+RISXU0Q==","signatures":[{"sig":"MEUCIFPwS41XD8eJZHIUeRbKc3xY++mUcf4An8B5h9MMDiOWAiEA3O4v90IYOJGYVL4DE5l5Edq1uhGS0OyFuc1a9WyCow8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjWZU4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpQdA//adWwypP0oBff0qaq05diE5HTbxHFOLvwC07HZYKAYj2D+v89\r\nUF6RoXnagLctdk6nd+OTqdXNjmpQEg+k6Mbze1fhkUIgjH5bak+CXJKNdp12\r\niq885S1V5LfbO+33rVDpfYE6WuWt3bgkIfLYv2IHx/IZ19wfgvTW1OXAFroL\r\naPzCsD1hHeJuQrIRmm6c6gt8D/K8BH1fwGN5ycqpDXwswqcZPmtdUmP6dZ4U\r\nnskQsba7LEAfQNIpIhgz2I8sIax7F1rLby5uplMhUmAzxDsEGNzY7sp2zSon\r\nuDLbRBT1E0P60U5JW7HL3cS1DmJM6rx5J3Wke1ztIGzJUgPOamVecePwj9Xp\r\n8Mi4dkUTu1bG1CQXEQQxNAcPRGJJ/Qq8RsunpUZ/x2MqIDf/p4qrsxt6n0hU\r\nK8eoLkeUY0DczmqOrBrrK4whPXLAynMUxWS4v/wdAIS1TT/wAh5GB0SkTSid\r\nfdOMdimiNTVKdjXxA5p0yZT3fRfUrjtkFr40Az7thPgTBmtBUS9ghtigi0DM\r\nM95HlLqx7Qe8ydBJTO6BaF+UmpND9QRTJ8btoV/+2rhO1MiPEFhVp606XYS+\r\nqQMxR6WmcSp1/d9J7p/H8DP1/HYFj4P4Xk+OZUdZh2tkBow47eHj/r0Zx0O6\r\nYiV4jqIiTc3ovVQ5D8VrYAMgTdVoaoPEpkU=\r\n=vJbw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"dbe05d725a401275de1e88f9d5bd6cd2079a0047","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.ecfee946f.0","@material/theme":"15.0.0-canary.ecfee946f.0","@material/feature-targeting":"15.0.0-canary.ecfee946f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.ecfee946f.0_1666815288564_0.4920814874635284","host":"s3://npm-registry-packages"}},"15.0.0-canary.73ca9dbb0.0":{"name":"@material/shape","version":"15.0.0-canary.73ca9dbb0.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.73ca9dbb0.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"14ed75f69491c04d3d0e02e3015908cffe832737","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.73ca9dbb0.0.tgz","fileCount":14,"integrity":"sha512-iDV7JIsd7EN1UmPdXWOx1dkmlAtOfJ0JkicdA3ARYzWNUj7k2qu2SmUoOKwe5hzwfCgCyrd9TPEk3K3rEI6Xng==","signatures":[{"sig":"MEUCIF4FTpmIVHwZlMNtHO3peyKpevD7PNB1q/UGQ1WY1BlMAiEAr2ac5zm0WEZiHgLqfEWjpfRC/QIBoYakTUKeMBvkpiI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYAaQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoP1g//d8RppL2gp3e6flDv1dDhjqXOK8O2rLWO73aa3Kg4Uyo7gnFJ\r\nfsBvUT7+GcQtjZnVV8JYdBxu0vapFwfvF4TO/b+c1hzLry/0IMOp7BxQ4cOB\r\neoUylXRCkGzXf7RWrHahjzDF31zva29xnkYQsg5QiQ3W3mi/TlEAXBk4hdhF\r\nAmKE0R0S9RkX/tSWoX5yj4bN8XqtWQDKYjWTwSGVfDYmNhRn85RSZQUU3+rw\r\nerpHF4MLwoye5BvJAJTzpE77sapIwNujBO6Y2oQD1X4ov5WkT05JQLCj+pzY\r\nQ43Xa/EN7YgeiDWeTzPOjoAG2wRjciENosorbkv3lVLY6VRQfsECoryISoqn\r\n/MK/E/Sqi6xZHZ09J+D0xCSrlxxIVxD+L27iG6w96yCW3l/SZPQBkJc9an38\r\nhx4CmUMrcn+jrXEr9ayvcnd3BLiFzq3LxX72U9Cbws60RpQJ9bccbQvfNs5j\r\nsHfeM2ieTXDGWFKMCa8n45Ik2+l9cUJxG5PXui+hRSP8o+nMYA0lGGnC8Tiz\r\nl8UEEIjrT4NXeGws/fvbRasJVTTJse2d7p16c9p6VZWVxayaZyY1eSXwe5Ni\r\nADOII73E1O+XEKObCR9qZ7Fz9R0gY2NLpuFsX63/EvMcKTCulemZKrDjzr6T\r\nZoxPOw/TsjwRvRMphWSdmL9MCya6YpGw2sQ=\r\n=UiRj\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"3b1ecde6148e6e8d98c4b0c8a4dd2ba56e95586a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.73ca9dbb0.0","@material/theme":"15.0.0-canary.73ca9dbb0.0","@material/feature-targeting":"15.0.0-canary.73ca9dbb0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.73ca9dbb0.0_1667237520676_0.2337824733221321","host":"s3://npm-registry-packages"}},"15.0.0-canary.357f2e5f1.0":{"name":"@material/shape","version":"15.0.0-canary.357f2e5f1.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.357f2e5f1.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"51bc6740a005066db04a5ac82f3c5fb260fadaa7","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.357f2e5f1.0.tgz","fileCount":14,"integrity":"sha512-mmswIXZhRghjm4OmTUffXnIIw+hLCaBfqoZg2UdrsIkWGtjfMCE5svWenqZL+KvF4K4t4q9ezmi6ZspJrX4PIg==","signatures":[{"sig":"MEYCIQDn+YThlCjJv0JE98sxKPLgy5DasLts6s9spaLpvy5FqwIhAIntABDn1aMsDawCHOxidHq78a9Tz8S7yzt6q/UPTPDY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYBiWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqhFw//VnG9UOY5WKnXHGM9dDk6xYr8hZ53Nw/m+Sq3RiQmEYsNrBj9\r\nVQaRB4WVXWudkzk9Ef5+LFqbdab+2o/56mKgWj5rm/DnfO/WjkBHBIAnSXaF\r\ng5zSRvNyBbMr1NmjzAJfDlhFFkJpBALtzImXa8lMReGFz8nsqtKIVwtZsldf\r\nHxinGmGz4e4EaH+4rOZhK5dukmKzJnQd1FCHIlNpKgOX/RROVQ9q1eiUN2HM\r\nsQHq4csEeOYlFTRlmpuQmS97m4b9z4OVUdkT8WQ3p6eh8vkaFJ7eDw/FMvKL\r\nVMca/DCSdAC38X9CzKGn2bcu5VbK43AbMif5/tXbos50g6Xm3o+rz6KT+hYy\r\ncvN1zW2FRc7vbrN9taWvb3cwM1Wh0MIH7oJNosPq6RpiLr0X5mzTCp0Oacwi\r\nO7eUtw3Gb7ly9pSVSGs/1Rw4u5Pvh+NDxOsgfdnahoaPETR96Mj2O9Qq4BNo\r\nTaD75/1vtmcAhU3sq/JvAzylq9EnLau6gDhOsmSHnHGBfBHgft486wnfCkqD\r\nOyzO0sGcsZFpWF9v4iGP6FsAVwRVEC16e7ebbNDP/sI+4j+z8zl9s5v9jGp+\r\n47q3znb/0KQ7+MIHYcoy5xwSRK9Wwv9gr7eAp2F8F/1pY6NUrWKYHGfNBnCb\r\nOtBcHC0ZEUlN7+fsYyF6asgT7/Shtpbt3Z8=\r\n=uT99\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"7f8af87642d395b497ff80efe06544dd459b947f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.357f2e5f1.0","@material/theme":"15.0.0-canary.357f2e5f1.0","@material/feature-targeting":"15.0.0-canary.357f2e5f1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.357f2e5f1.0_1667242133959_0.7528958071068432","host":"s3://npm-registry-packages"}},"15.0.0-canary.eb103d4b5.0":{"name":"@material/shape","version":"15.0.0-canary.eb103d4b5.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.eb103d4b5.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f7cddf64a5b130635bec9cebe50d12e8e4f9a456","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.eb103d4b5.0.tgz","fileCount":14,"integrity":"sha512-oSTT6wwcyEtwHBufusztKOCQGaUlT7GI3oYEp2QEzIKYnTgZz+fsvyabC5a0idENx3Bh7UnU0xyppS1HIPCHIA==","signatures":[{"sig":"MEUCIFI49bsXzmzW221SHZyXiMqLnmaHVHUkhhqGyKOPA7vfAiEAmmLX0QDQ0mZgsJT7yZM2zJmUx+52Lm2Nn/ie8cXxfHc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYChPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoy8A//auzd6Er3c8EDm1QX87EWkjZWUSI+UjER5UOwiy1JLEM+vt2/\r\n38MP6qRdV6bc+ooxwu8wZRhZ7zwomWwf4zBnjf8CyJ3/bCIv0Jx6Rlwcva1y\r\nBX0unWsvO0RsFzU0knSITERCFneuIAqf+eSaAn0wFAVgHXo7GjEbJ1xULGN/\r\nKjA0DORAA4NHSj1CKP7N0fuMLoiVqopIISGk5erMaXe4EUkHU57amTSHaKs3\r\nmMS/q1N7bQXLsOScGzdrIf14SD3eVDAP/e2GUaIWZoUMVOqIXJjbvkfmZByB\r\nwYAK5AmqrgziZyXzvj/LT2ETi3A37skxSEoFSdfulmrqh56XFCHBft2rWvvk\r\nh+rjM4VW8OQyTVnty39EEC8tP7ycZ/EaHKANgUwrNZ03Bhq2WvrcaWWj9PmI\r\nr0+bLmyLW3LM2Qc/x9bTCXq6+Y39QdVOk+cDbYPnvXVfNgDnDW0gHvxKbaiX\r\nhL/Tl4w3ALgDfQfzKsvIdc8yj98l4LeaFi3NPdnzEUtq5ViMySJRtzGtDzSJ\r\n9lAEIOLJHocJ7p5H7Z7OuYZ7H+g3KI/cskFXVZP5WnyNcg0KlX2RD9a1YcUC\r\nk3WXW8rfsZLT9+EAL1dSUW+YgOQ7qVuK37aLXWw9uMBUowIqNr28XLXzh7Wf\r\nsPpXljdEOySCV9c4jxMmQm6uAE2tLW731D4=\r\n=JrJv\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"6fd82c2abdb8567ca00c6847142375ca8ac18b90","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.eb103d4b5.0","@material/theme":"15.0.0-canary.eb103d4b5.0","@material/feature-targeting":"15.0.0-canary.eb103d4b5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.eb103d4b5.0_1667246159396_0.9607203671062774","host":"s3://npm-registry-packages"}},"15.0.0-canary.af5f01223.0":{"name":"@material/shape","version":"15.0.0-canary.af5f01223.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.af5f01223.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f8e7ed3fce575770215b467b3b96ef6551eca078","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.af5f01223.0.tgz","fileCount":14,"integrity":"sha512-km3yqJ2mdEz1avC56R4MxNnREcrVEejsaNVOjBiRETz+HPupJ04uk7lfnu0ls+CqZYn6VjHoXnBVmDSV1Jnn1w==","signatures":[{"sig":"MEYCIQD+bLbI1gq322O54Eqnjz0h1UMIongQ34DXT8iiYfiLVgIhAK05IOEKmWhaDmEo3cp1d8rSDZvbpmPXssd8WLk7ZQ8y","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYWcuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqGnw//Zushh4ooVA4ltwLvoWrDSPzvzoUOjV/a7ns3S0GJqCj+hbPf\r\no1xRYx4zUJMM4yqomYGNgWOQiHp1uaAE3E+o/Voq0Uo+acHUES3ikPVj1H3E\r\nlq27fE/5zjvQwjq68rVDuWf1MOKd8dt7c7fgRk/x7irfzeWbwEhvHc5BXEYp\r\nfn+bMPWdy9KPlEovYe8QkGZDjMu1Q7QhqIwfJNuhAQkeXrgUeJgeD/beANVB\r\n8hCkO/1IO2VU1EJw0qcRIEUH5qRn+Z1wsI0vOOhBxl6/POcsTw3BgEkfvaq5\r\nQqWDQQnb35dIbj1rBH4L1wiN7HHH8hJJIAmO0QWbS2YKCkM3Q6Y1U9HN17HM\r\nH18PrS9AZmQxbfjFOUVcED0IBigmoNnSOUft85A4JtkHfCD2+oTBwLimZqBk\r\nHRh8Vn3uC2QXqzF4Tcnc+6TI6YTCISK0ArfS8iuy+Ty4H/rljtcZDQ1jUkze\r\nyyon3JeDKCpJRnYAsVG67JIo1+EiXwq7HdOr3/D4CXh8PGDwcnL0Jxx2lCnD\r\nDXQ85iFRV2SOQjgIxN7VPJ7b1sgGAjHp+BSXA8EHK/JDmmgGHINNikTdHQJl\r\nJnJJQJw7wfW8CwL0CKt9Ce6zctp2PF8Z7iX2UgIuc66I1Fvcs0tnLMYYFTDu\r\nmxzzm5jIXwN40AMsHICUHnmBkJbi0dr8n8I=\r\n=XezT\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"cc7d8ea77d18e30bad947332164ac02701e1ed9d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.af5f01223.0","@material/theme":"15.0.0-canary.af5f01223.0","@material/feature-targeting":"15.0.0-canary.af5f01223.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.af5f01223.0_1667327789874_0.5505531582400718","host":"s3://npm-registry-packages"}},"15.0.0-canary.58733ef41.0":{"name":"@material/shape","version":"15.0.0-canary.58733ef41.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.58733ef41.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3c3e60de1d65964c17fc8a5068f4dfd20d52a2a4","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.58733ef41.0.tgz","fileCount":14,"integrity":"sha512-UdB4waitUvru9jJ+WHdTjkF/y5UW65qQK4hCOU5cEbyajL61J0SlIpBJDsFDn/nf1XedwzR9J5BdX1fjK/H9xQ==","signatures":[{"sig":"MEYCIQDvQ41UGN0n2sPo3L5mPM1067SuJ1ONQDqVHetY902tBgIhAPQua+SEFpBFeS+LajsovlThSWjpaukArVx3XHy4KmOB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYrKLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqvag/+OiwB1Vvd2s72WEfASPmQFsXfdm8iWUGR+up0LnCmBJr63d2b\r\nWgMO45Yy1Hvefie8nyvk/6JyEHg1jg3m1ObTXIgZHrfDz3dG3NSMwgBXJosp\r\noAifmpwuNKEww/2gaiYuPN2+RjFidH6ZSXzJBaZVEgDTYsH+OeqhJ14KTUUe\r\nKjRNMAy7LJkwI6uFVsGpdBocW19Q/hluRhkKVRyLuE8J0kX3e1MK9CfLsRYH\r\nvhbjdRxUKvFLzz/gclrNyw/LiTPQKCs2WZk1X0v+Ks34h7R2ImWub3lQbmcB\r\nf83HAAUWwUjfPEqkB8xP8vm72sy3LbyAtFE7adOs829w998GDej3cCXlwWaF\r\nnkp1WIKW1+uvhbYB50FX6AJAWP/GZULxspUyYg6sZDerhdV0+Wq/VXnN9qVh\r\nk/xeKQlPweoqgLNOJKBKZDZsWpFAL1C/jRB6DXRjXZk2GgIebs8wR+zkXbo3\r\n4zu+eBhO2DVJyP2wKK6F49xOeEUfazRCRQps5xySHb9PjY4mn9kBik99Obgs\r\nXOla5osiny2bHySj/KOD7EJ46iDdjdDBcNYuJLYqxeuv/SnyABOj19q/YhMV\r\nmSytMctLbN+7Kbq8zPkPD4Vio+GSlJA2hE4rgJxsWF1ggVt9+3KbVrzBL1ZS\r\n5ijX0vfapmgyWSIOTFxxLzY6ItRHyxaX5NU=\r\n=F6pO\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"7754bbdf66b8fd61976d3dbbe04b991d9dbc0caa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.58733ef41.0","@material/theme":"15.0.0-canary.58733ef41.0","@material/feature-targeting":"15.0.0-canary.58733ef41.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.58733ef41.0_1667412619145_0.7214344891301074","host":"s3://npm-registry-packages"}},"15.0.0-canary.909b48215.0":{"name":"@material/shape","version":"15.0.0-canary.909b48215.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.909b48215.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"606f9d845a41745f67f9240c335da5295bfd9b24","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.909b48215.0.tgz","fileCount":14,"integrity":"sha512-mMJWZHYEz7n2aWwphvnvBa2Bk7LVdsBy8XHSLkpzZGcPQliGCeYCyEa+CLngodDXXiV08K015hORUxgDV0YHXw==","signatures":[{"sig":"MEUCIQDplWSMjKNFfPvVvdnH1jfRqnAA5WzRCQRBR6FBWrRruwIgckHgSV9U7Aa6ei2rNLOgjRFgxGtYcWF5oZy2bYlMFbw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYz58ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrlYBAAj6DDZ2k4YFSHfFFdz7uXkf+5KKe/+0YH87fnbQbZr2Gn9LFI\r\n1fTrL7pFKCCJ2MqW6h6PoS6nmA3exIbfM7BI426A3N0D0MBoSwqD0oxjYhL5\r\nlQACsS0mpclVp4kCca/DUvWeJFEjmMTbtpEAc1yVghnAO2DN7aBXtzySgF9r\r\n67xIllcoI4nL8zieXDd3WPxP+TMUTfvIN51YbfI2x0e+e5ewqiFARIcsR+YP\r\nxHnxjSn+MNxkl/5NW+8kwcFjGzsFr6jyupHS1B7if9vol82kaXaseoBuZsRH\r\nE40xFnL8z6nIB8xajHRgakTgbOnBH81bBOmlY7agGTJKy6MG2ZZr0Ab7IhVN\r\nwhhYTcFBJdCVio9UeV7p968UUrH4UuHv3TEjPZvVXGE4WRc121FN+/6RJ3na\r\npCWLbobiFryPlW2ekFUHXppP3Rb1qii9YfBY/oOaPL+njQQK0xqDMdLYUaau\r\n63kM44qzr0cenGseXYrWRdr4t1RRpiucHjWI8LQGjq8fz3bITKCgIXoBk6wK\r\nPzTg5v631rzUl9yMTVarBUMeQA3o076BeMCI1N5DJlJ4d5mt2u7uxUO9qpll\r\nZ4wTP4VniX/AOOpnjIUjBqhmA+uzSHqINWWZsLmlxLKHVF5mtf1Kt4/2+cPo\r\nwurG0cw+WFp9rUQGwzf+PaZj9kv/Lmst9vI=\r\n=SD6B\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"68d372ae12d017bf28fa2ad3c86cad4f70609116","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.909b48215.0","@material/theme":"15.0.0-canary.909b48215.0","@material/feature-targeting":"15.0.0-canary.909b48215.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.909b48215.0_1667448444381_0.315866372438357","host":"s3://npm-registry-packages"}},"15.0.0-canary.7f17127d5.0":{"name":"@material/shape","version":"15.0.0-canary.7f17127d5.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.7f17127d5.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"990e6e90ebd4a34e1bead57ae98c16f052b61b14","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.7f17127d5.0.tgz","fileCount":14,"integrity":"sha512-QRX9cAEotZbcP9UC+O3QSX30r1mkItlHcdt2NleWbF8INKLrkTKis0sHietoRNwzT8dZ2uzxIV2F94+Gh3vipg==","signatures":[{"sig":"MEUCIQC8/VGh8G/IOo7+RS2FzY97QsZvUj0vaNgWoR4w/DCCwgIgeLR23ST0cPqfx2LiqbIEdKc/bPmCx9xsfe0ZAJ6yczI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZAYFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo+7A/9HaMy17VtCvg3RANmZkfkd69GeX8plUlgDQCZBM4h2bAwP6lS\r\ncSVBHvk3Zm7Qux1bAJiD/WlhxqtaQWLCq51XjW4IxtBuD//5umPubL2RvAAc\r\nS2rqrJcXRYMCAW71c52aib8Ktxe3iHO0FTaaJQi60hcSm0yxddavitc5mw9O\r\nX5nA+CQR1qHcw91TPX7kYtQtxiyT4AvBs4q/rNkBtE/7ztOJvQ4B0l0XMlaD\r\nI1uWeSdt3uTG2Vs1KqW8usVYYsE2mAHsDX3sbgP5oh4G9fQYbhJg7c/hDg5E\r\nPXrpPweVZFmOythHemVQ78Hs9BCeBdbVwblqYfDk7MW+tvEnBOfVACuqv5wK\r\ntRdP1+Ynd9oTzdZmtYfKiiYhzxImux5YoChfcK/ZuARhP6L+jA+wTEJWFxUP\r\nE6ElRRb2zzHwBvYcg8Ytwbx/TTlei62rOSth2SJv6jIljCrjnQFNgD5PA/yA\r\nZuZxqbBrqdn/cBm8KLw+k9aP0dA4kD4utsMWQX64U5Dq/P+G6mw+fn5/1NOp\r\nk7tnRA98EAbShJgwRCDLmQESdM4uPGOiym1h4uMis9gZIYEfEop4CqqKB3hL\r\nakUPOMVlWFwQK6JEhxIaH0yTPaCn82StbosSol6YXm63v/2JEEgOZA2k4Qhc\r\nTCiM9WWDdNW05o75QGcvsFZLGQxFSmFVMdo=\r\n=Np1O\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"26e22af93057c0fa00e7fa9eb104abdc96131eec","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.7f17127d5.0","@material/theme":"15.0.0-canary.7f17127d5.0","@material/feature-targeting":"15.0.0-canary.7f17127d5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.7f17127d5.0_1667499525357_0.27904512262872117","host":"s3://npm-registry-packages"}},"15.0.0-canary.da95e2a05.0":{"name":"@material/shape","version":"15.0.0-canary.da95e2a05.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.da95e2a05.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ed543f359a687c251bc58094bf7b05ddc9aafb37","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.da95e2a05.0.tgz","fileCount":14,"integrity":"sha512-QTI5xVfiblq5Pcka0Xv1HO/bE3pAmwRBA4pEUW0J18vk0OMTdJmBSFSHBiRspe8fc5xQ7WdsbCRdGdD1Mce2Zw==","signatures":[{"sig":"MEYCIQCvLYaoNovCcU0kk+yN2IT9QD4XIj/b50iEGdwcAbSEdgIhALIwcyGXQxgt+iIY9G/Id+xViGys1uYvX2ksk5SdPQ0m","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZUTAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo+3A//TPUZj6qbjjfyLgmyJyOH/ytXvqEnn7KvyHFQU7x9bFuWQEO3\r\n7IoGLYrYCmJpWJPVacxsKLgbjTw7JHsegbIXRCvBzIt4rJwQUU82ci1iZUDq\r\nrGl4r5e702Ms6V0EEolWKN8QjgHfgpGxhj2l9LJYRw+12jrrhL9o6ji7ztkh\r\nmiQ5IfBgIidNkAMyJxbJ1SApRXaUfUMUArWboj6rfguG2KUHcmAyFs1sEhNs\r\nuf6QujwYg7Ql0ZiGsBSMNk+L4pKAo0U6vQAHlkhA47mJ5bbaQ2RF8XIaS2Sd\r\nf4zlhvL4ZVGy9lwhIMDzhUebrhBrOvSS8awf6Z9gnjTuHAVHc6g80UeeQGNF\r\n7lF9z+fR3dN8veKUnEpQg9wUFKEQk2KIxH9SJoMaPP7qKOfO7QQEEqm8RjIR\r\nIoCaL73eda0IC1b/qbnqroSFhaV68dl3EhQgFYkkG9dToFmoyiNM3bSx0YIO\r\n/gygfCcsGwBJdMQjYPJUE1LISKLkvjL6jXIoxirj64PoVkHztavT1HPkNvPF\r\nJfHf3dtcxXeUQGPY+5I/yDGuAQOiNPwMtNZjzN8HaSvQYU1FgOXsbZ4wNI/y\r\n81MIh/eCYhaZKbtaXWHd3G9h0AxNYPV3rL58R+RzLy7LTW+elOx8E+9wOuSC\r\nyhB+aMkL12RAmndH/2VBbpr9Y8+eseb9wDE=\r\n=Tli9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"eb47dc6e824d05fe1a33c55066101c99ce1fe241","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.da95e2a05.0","@material/theme":"15.0.0-canary.da95e2a05.0","@material/feature-targeting":"15.0.0-canary.da95e2a05.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.da95e2a05.0_1667581120449_0.5212207690357908","host":"s3://npm-registry-packages"}},"15.0.0-canary.4832e2750.0":{"name":"@material/shape","version":"15.0.0-canary.4832e2750.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.4832e2750.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ccc4880f8039a0cfa59a7fbdf92b9a490cdc289d","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.4832e2750.0.tgz","fileCount":14,"integrity":"sha512-6grci4iD0N6fWdGTrlRcAtDk+cAuhuD7Rgg6OG9yOmDTzqfDkI9/fuR/FP7Y0IH3smQnLvglRStRYpJ0ssbTew==","signatures":[{"sig":"MEUCIQDTY6sredqygTxl1roV8Jhs53VsA3YvgF1WZgO8zE2mxgIgU9FJ/AKz+zQEcZl5vNZKTlpi7P4HF6LLAo2+lla9d/0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZXyGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrVuQ/8DX1RsYDUJrzHwndhP40qdmP6B0kJN7ID0ujWNHFZxrQrppwn\r\n6SZ09Blo7+1Kwp4kUNV6Zds6vnmkIlMPPVLjA3szWqcrW7RjbkwbMbJ9fDBI\r\nrwkyVFM3FoIo132Xcs7I2llTRg4SsyAi05x4JemGyUEEPefzrZwCGwZxoHwh\r\nPFHqeqkFm5AcGxSCxNBDlGIkBaALHLT1XaLGwa6p1ju6ULeMzjjxMayp//02\r\nQNh9r+No6G0G+JQhs4eXVA5tleU6IEKMcWfM4euDmaGHh7pi+hlMCnMzPol1\r\nM7Fbc41tLCc8klcAjSiiWv/u07kjRF2bgjf2mX7GkCKeLzigWrePviLt+HXi\r\nVGUbADKsbJvrJ8nGpNxAQhnfcMGRXObhYN485sKZGEW5IRqsHBqN3cgg4WKF\r\nPcKAwpYDI6xtwfvOcrqypFIhUr88A29N5HG6Z6yj5rfISsUPPYwqO3ywV1nM\r\nKgt2Xum54tF7MuhLTJrvtfrIPKoiGF2wz7QknsXoZCdsQvL3l1hZap2tm/8I\r\nnNemQX2bDvOk28cDqPpcs2fnwt0264bnAsMHhXu3/RiX0dAGMJ4R+8RK6ELi\r\nvYX//1J6qjcXyepWP63yMaB0+xK9tKomX1R654J6axb7yN/5zquReEJH+7EY\r\nNnO6oZ/RIwCLV1lrD2mLmJpn+b5TtR1/3JQ=\r\n=rP9R\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"258def578bdd5ff3b52dbbfbe6f06e14b2b74045","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.4832e2750.0","@material/theme":"15.0.0-canary.4832e2750.0","@material/feature-targeting":"15.0.0-canary.4832e2750.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.4832e2750.0_1667595398458_0.04110955143491801","host":"s3://npm-registry-packages"}},"15.0.0-canary.215506426.0":{"name":"@material/shape","version":"15.0.0-canary.215506426.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.215506426.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d2d41d54280de0d8499ef3029904ea3ff11b7e3e","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.215506426.0.tgz","fileCount":14,"integrity":"sha512-wutwmFbA/rAskSmjvCSFcG5eIeh/W4LRKhx+omWZ1WrVF/fyMe/YFxsnDARafvP7QOBm0OJkD1zrb+Vgg2mN2w==","signatures":[{"sig":"MEUCIQDNcSGabSVks2gNYSMojDtdmgo6/wLFT4pJoZeGrbkmNgIgOyl1/2qyw4Mel0QY6iA4ATZlq8wAonCsf9LPu8iWEtA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZbbgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp2tg//VBIEfC1v1kdy8tf0uvQ7BmveIncxUmO1cXkG63pG06viBwT5\r\nE540oV5NXCj6kaLRiQBfvNNj5BxOD9s48g3eV02MNpJDivfWzgF+rDYLS4gH\r\nCHEkAlq7IIeXt7xt+7SVuT+WGTpl3w9Lhbymq0FzPSz0+FgyFKLFn4gkFoxL\r\nm07bVtkXiUQ6aX0kCHeglPYPYF9D04r509aQpRMY/CB4ASYx6Rteh4ArJmVe\r\naguMAONLua4DXwk7c9Q4plnhp+28Q9zrs4XBwB4VYsOsw5k4XTc5CXvq4NDc\r\n7/K/0Op3oh7dSOdaF8qUJKWTo5NHi9/8HaJlvHPnWHJhRVuKYwvOMvfotHgR\r\nLESqUsHF5MtQq1PX/4MUW2+hzKIomNiIcSZRzoqREaThoWyCDG153AXvVR4f\r\nrCjjRwXir6QAYo5DgVIsS0Z2YpAsig1A7IskFE6IvpRePU/+485h3lnCWm8r\r\neQwvGrbcmph+k35GnhxGVpksNAIlQVURJZwzPuh92yG9NVRRG/yB4jvaJbxr\r\nl4c3/NlRRu8fLILPX853ONx0fHfbE2bm0iCeB736S8XrgFKRd6CyHLTxWme7\r\nuzATHoHi2cDdDRggbs59/IfNBhskrhS+MMkWOaKNkpm0LmgWjtzZdO6RDfd8\r\np91TSOlH/rZYBxlfgeMGfu92pq5yTTGnbfk=\r\n=ZEQD\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"c7da5104ce280eebfc1b0cab2279b8acb906babd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.215506426.0","@material/theme":"15.0.0-canary.215506426.0","@material/feature-targeting":"15.0.0-canary.215506426.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.215506426.0_1667610335937_0.3743219779384759","host":"s3://npm-registry-packages"}},"15.0.0-canary.4cf917476.0":{"name":"@material/shape","version":"15.0.0-canary.4cf917476.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.4cf917476.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aa61d5a9fb343a5fc8585934e024f508ad478f60","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.4cf917476.0.tgz","fileCount":14,"integrity":"sha512-3/9Fw0Bs7/korIN9Dop5BUGj4YOURm7ZlyMRxMhYahqTGPyN+EjYq+0qqpoVKOAba0wDLcHFAHJEPXy9Ny13hw==","signatures":[{"sig":"MEUCICoA+OltrAcA5XzjQPqj6nYIqgjTqFukWfcKBGXCgBAxAiEAt233sWXyrn4Bx6tYrBqEBp3CIg+0vHkd7jxTvmk782A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZqV+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqh+g//ZQe3xcXDPPGE3tQ9VHqB+q4/7tXRPbTbhcznqt0b5B+Bul8S\r\nniJ29GSOVFh6tgcFPQxUgo0Ejxyhn3TyK59GJ/pIyySIvFJUA6zGRwed17yZ\r\nWiWnyqn8yoDI0wwGQ1ssojhnoiXxGOx048jqzHHrmmGd4xKw8DSZ3HOkRUd4\r\n7Dk1qVQl8iDY/O3KBwPh2VQjJJ/J6RcIcu1aRiFGgPIfm+4rSR8LFQ1VNF0o\r\nUo9vksqI0zmgKDUeWBb2HxT4BlVyMpj+hBTudilNjAdhX1JTphbS7a3QHAID\r\nPoSxlbOLvjYj+AQoB81RwOtF/UcRH6LUtZ2ThfyMPHTvwsS9OdttNFblzLQk\r\nGEiUjZzj+si4LZNpX7PKJB+6yWM7WKM2xhxNRZC527rqkT1QhAy2O0Fw6gHs\r\n5qn35awRE26AZXfmef9tyyqkgWlX98uLbCG5zX8D12khCbiZ28roy5EOmx4W\r\nTabH0uxEY11Tk43oCde0gdj8f+U6WMF+kVWfEKGHJFwmFImP9zdwtSXThaPw\r\na09eUw1Yd4Gp8ZMrbC+7yVglMQtYuuuUSfkd4tZdsdTmb/zIfoR2QVWjhJJf\r\n40wlQ3l+mGQYFxwnZvWeha346qyFNp7zP8AaRVMWg9ZDU/ViySMfOziVPIbE\r\nqocWPVeB2Dc//FfXwlmB3AdPkUZ84JKg5Ds=\r\n=lvMS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"c7ef38a54cc085b34eea4d38f143f3b65dc649e2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.4cf917476.0","@material/theme":"15.0.0-canary.4cf917476.0","@material/feature-targeting":"15.0.0-canary.4cf917476.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.4cf917476.0_1667671422068_0.7867058679624161","host":"s3://npm-registry-packages"}},"15.0.0-canary.eef14bd32.0":{"name":"@material/shape","version":"15.0.0-canary.eef14bd32.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.eef14bd32.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5051f6412b74b2337cb6d6aa122d248da1670ebb","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.eef14bd32.0.tgz","fileCount":14,"integrity":"sha512-sI/WdNQ7bp+EzavrGg2FBdO+K00KsPYbfSjANi0ljclTwEKDUJbdfNMc90o70HN/oX2R3b9SLa5TKLfWb/9DKQ==","signatures":[{"sig":"MEUCIQCtiho+lFcqXuGtTxsW5YEH/2N/zSYXZpIuh5rMKc0zIgIgF4yUDvIkICtHF8EIR8aZ3NAro5A+05S98RrGbGO2usk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZ+28ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqifg//T0XxcU12fdOoVJxDX+1mF8GTy/UYDl2Y9aJAcUCiHwTKQZ/A\r\nengZTMv3/kFME2iNcNU3cvyEue+pyUIyTH8xQZTrtbAJJ9U48cSuoFyChfMm\r\n/lUpBo+dGK7xnXtgcXsY97gWa9PK3HjCABkdHhL1hib67YENyQULaVk5haTp\r\nyn16lSAISpQTAUpiSCEdaJFiNdcQKqq7TewnARaMvcABmtpLadFfFOWMUpRx\r\n54uDr4p9PH+p7Oy4HSihIVaxtkYbxHDBpo67eI0eh+Z8Ruhni622T9+cmTEz\r\nmm2r1JupKab6C02kQQN0RIDnwVDpplP3xEZP+jSlXsY+7H83+VcoqCmTWa3Y\r\n7+SMIQi3fAL30o/WKFspEsXQMcesJPkOGA3CulHXVBEnX8YSo8wRQ26FaBCJ\r\n6e4zfBFvnyLp3QFEyCPVfNwG85/S9TgS+G/8WK9SkstRBDGRX9nDYZx8o//N\r\nt8ij5mn9fswYJQZNNx2NToxPC4RfRKWw05SiJ6+sAMoUF6G/MrGwdxzgfLOF\r\nGdzijzP5d2q6uopIZ+cBzwYStFRa8Zhi6vsfEfeiPwZKNqR3MhkKcpH8AmcZ\r\nFjAyBldKRNljgCd7MHOVJ92AjqeT8v4jjfr6oFhOLFBbvlQwBrmDJqI9/Pim\r\nv/CzCJVe0+qiJ90WqF07N1ceVo+M/ElWffM=\r\n=hi7D\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"40acb6cbe1201f5ef758bfb96da3145ae3c4c1a5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.eef14bd32.0","@material/theme":"15.0.0-canary.eef14bd32.0","@material/feature-targeting":"15.0.0-canary.eef14bd32.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.eef14bd32.0_1667755451915_0.6793104358333406","host":"s3://npm-registry-packages"}},"15.0.0-canary.6faa29fe9.0":{"name":"@material/shape","version":"15.0.0-canary.6faa29fe9.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.6faa29fe9.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4b81270da0a9ebfce10bf60b715841ec073a9182","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.6faa29fe9.0.tgz","fileCount":14,"integrity":"sha512-ccD+azTwUZVI2apFZm+UVTKEBv44c7pNVGBVgR20hrL0SjpG0UKrEifjdnGb9+9NH+A5FsuP3nZzyk+o9oekXw==","signatures":[{"sig":"MEYCIQD2xAolSAiFdQ6Ovnax0dTl55i/vahDjLPRJkFjtWfC9wIhAM0FMQv7tG8tbsqi6xbMJ9bZUh7s06zZzp08os/oaas1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjaHe/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqGIQ/6Anpikk4Dvq7dwwOc/WFi7bKr7pJMqrlt5gDr6ysggwNHFd2O\r\nnWH54VW29ZiOM3iuiIkPi2j9KJ1NwgvlVR2FgEOR2fiTYLloGmpRRlglpR1u\r\nhkAaiPvyB6nYtAwOgSGvziy2yAAUOukZ43y3bBlZQdVMH2wLoyBNCk3lTaih\r\nS+53cqAE9FowUWuE2KweToVPDrcFYrDY1GzeqrPAZyNSc00fHs82iIOUSBY4\r\nNdwuie+04/m5VkzFSVew6HQF6VL07aU1AQigbbTFUNr7l25X55QFyet/fDCo\r\nQb7QKWg2PVqnlTUr8sw2MY4BNl0DyCOjmgocOWZG9mSNyIHpRBviIlAgaLMW\r\nU4PTFfwdRjn7CYGrlhVrvuB6BHRtN8L3JcSd4H+keNjWp7hvKwYwjdwhW0Ry\r\nTFL0jgzCfAXmUpOZk7LQ33d91A8hTGhgX1IdFxGXifmUbCp+dwv5l5sYpmc7\r\ncdJgND7zC1nVj3JlF/AuCh744PzUBcOP1L7pZq5P70AB+2qQeBVHs0Sqhu4M\r\nNvPVgEkh/YJ3q/6oJDJd5Ho2+N5Fkr8gCMdQ5MW5lBKVbAKovUjQ5MAnEJHE\r\nHZFPO9wWdEfNbrHWuHxrPr/DIiTUQdd3PFkOzKUlbdeZWLo4+p34nTRlxJEp\r\ny+iaSa0cLKnWfW8LW4EVhS0DBH6FWui1cM0=\r\n=dkPf\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"1403858386443f73c0593105b5654b6ad8596a9a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.6faa29fe9.0","@material/theme":"15.0.0-canary.6faa29fe9.0","@material/feature-targeting":"15.0.0-canary.6faa29fe9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.6faa29fe9.0_1667790783245_0.6907607156811493","host":"s3://npm-registry-packages"}},"15.0.0-canary.9af09b967.0":{"name":"@material/shape","version":"15.0.0-canary.9af09b967.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.9af09b967.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bfbd2c80301f843ac4801495186a23adcf0092b1","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.9af09b967.0.tgz","fileCount":14,"integrity":"sha512-Q355SF27CDOTUkXSgURSQPhpGC/Y/dJld4ysBxN/kPgrUYfJVqV3GU/un1X1jyqiRIkCY/36CdoOEI4XbsFRbg==","signatures":[{"sig":"MEYCIQDHa18N27JyrMStyoi9H28UXRoofepnnylRyouLf1XgzQIhAKsV7LVhk7quaBKXWIOFm2P7237iavdGtQnHoP4qjM9b","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjaU4EACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmod8xAAkdaaIkTiJCa18R727PrfrXVdSSH013bo9fFQyACxt+q56P/x\r\nmWzNDtBOmUrkyByMgAFzYKOOhZKYPK3Y1pWbPvmLNPBK4+s9nYIrgAnWRNSR\r\n3CkdmJBfFTlxUzTytj7m9a6o5u7mWDAZplHfQJZjwoxcANp0fkob2aj/l10i\r\nWat8qs4SyOHxJexL5t3hL9ouGbfj4w4i3q9rXL3eXvT6GTht7Qg6R7hUxjtm\r\nMlJIZTzt+rvsHkWFJ9ZZ/r2TiCyC4TvMO1ERb5DjL/58I3XwYQ395v4viKZl\r\nRj3c/k2H14J4WIhunCMM+fwECy5TndmdgwSG/BzOSQ/5J3oLHBanCcM8NW7Z\r\nbfI/VWzZZfECyS9NVBdEEyzPjx9KpomBoyG9wB5WeLjaCo2CLRnRn81CGx6C\r\ndFvTlBpVsVYIorcLaDHtKbb/W9OevzlWed8oQIUu/RzLt4EUVV3rgXp0PAUN\r\n3NYe/7Harx4CCSCgJi2E7Yn/yRouxoZSsaTv8dxJwlBMojke8hny64lEgRnl\r\naHQbptZT6P3Z+oXKnl0hGVMaIyOnI9Q18C4NE19wQ0HHsE9U2kZluWBCOa3V\r\nLeptbhpC2vtAzlxeSqOTFJpE0BBUKMe6iCJ2YjmMXtkLxQdB8q+LSqinwCNE\r\ni9ohJrEXPJg6n4jLhFcT2KhUP6OK6K2lA/4=\r\n=MUVg\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"745e702463a22f4c5de6e94b3527530a9bdcc9d9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.9af09b967.0","@material/theme":"15.0.0-canary.9af09b967.0","@material/feature-targeting":"15.0.0-canary.9af09b967.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.9af09b967.0_1667845636144_0.07338631792871819","host":"s3://npm-registry-packages"}},"15.0.0-canary.0f54fbb93.0":{"name":"@material/shape","version":"15.0.0-canary.0f54fbb93.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.0f54fbb93.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9f688f2eef6ff2f38ccafa5362fc2c11fbf758b2","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.0f54fbb93.0.tgz","fileCount":14,"integrity":"sha512-Erixb8oR0R3Je/GAHrkZEt+O1XUPKUvDWssGaf6d7KthB7a97rpLbfwOqp00BI/EQ4Jg/hPz/ag2V6X1sVPv2g==","signatures":[{"sig":"MEUCIQDqo+eDxoUdzHgdndNUjzAUNltj2OLTDC+JjBjcAYTF4gIgaCibhb896tX7YU+Xe7varfw/v9nI95cxB3a1hfykcK0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjatB8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrfbQ/9FMwU+/zO4c7VatOE3jEl+ZXyUZH1PFmDtQ7W+RCgerb7MngA\r\nAWKk03Ie4C+WNMBmn30/MAO4s9HO5uHUBCsGALXeFeoUc2BkV97tfFl9pwjl\r\nqyIZV2ZpjSBkq2e5BPmA2CE6Ys7oNi2TykraycMWQocQmwBPHeVR30hZ1Pyb\r\nA7ZIcp/otVOKYVYZnoyIJr5qZi1fbxy1eRqoDl29mWr6BlVMsURtxcs107wR\r\nzLX6kuH23l3ebIDfu4wtHtiybKHW6H9Oz0SAmrtd/Q6BQuXEMtbt14I7mmW2\r\n78vyqAXPhKdRFZWWF5wal7U3ypNS3M+mhmy2SmaR1TkZHFJM4VbqJrl6/zqh\r\nB3NYm8H8ero4huNoBYoO78YAberpXTrWhUPcJYjykYp7UA8SrsnNclGsovKJ\r\n4f4D97qbc1lSUzVFnkF+jY6/75EuaiagdJZUozSFQoN9SCfEKFL2N3TygE64\r\n5EGrcriYHxLsMDgPMfwfD1E/zAjOZvgZLOHURdMwgJPumD1xMsowYkrVVvuM\r\nzFzO9+mwi+j734H2WWiLYUA/NHGM3NwzoIXrQr7q5Gg5MHE39AIuR7r+VYeB\r\nz0jQOwq7IAg+Wm5kKfIajgFQV4GSaW0/cDBO774WRF+wmGKoLkkzf/OR678W\r\n1MojACR3Hhqqqy5uJKv9sSKYQRgYaINiS4M=\r\n=do4d\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"5d2d1814fad8065dd869bd95c156c04ad45926f7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.0f54fbb93.0","@material/theme":"15.0.0-canary.0f54fbb93.0","@material/feature-targeting":"15.0.0-canary.0f54fbb93.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.0f54fbb93.0_1667944572816_0.20862898458909007","host":"s3://npm-registry-packages"}},"15.0.0-canary.a8d47f9fe.0":{"name":"@material/shape","version":"15.0.0-canary.a8d47f9fe.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.a8d47f9fe.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c5aed4eccf67e67c6ba2eea2362af67078de2c6b","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.a8d47f9fe.0.tgz","fileCount":14,"integrity":"sha512-wqPYArcAYNzZARxo1G5zO2M9ZFdDiY9n1nCahDXq1ACx2mv7fieUe80zao38NSCAe6pX9CE9/Y1+uKluYV0Lrg==","signatures":[{"sig":"MEUCIQCK0MfRobfWTgLVZY2dAZBLxaDOoOizaGuZn85ful6SygIgdNne7wnm8Z3U6texrHKbUVEaBlTefzk+1JazXmCS1fI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjaynLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrwew//Zf0mXBZMDxxeiRw4/2p4HbJVlWlH2HQ4YXOSctTbhUDebEe/\r\n+givQgfWBui8Zt6KSxDzn1KQE6Ixu0bw5NOzm+9jZSzYbmxfrOueoZjBFbvc\r\nNM/hANo9dV6QBnW2d2wPiNlylGwG9mo+ym+UmSKIJIDprPM5RDDTicePhXzI\r\ni1hvWQ5rnq4bsewmfbh7g3uvrjGFk6umCZhqn6Hjaf8jb4FskrkWfIiKSLhW\r\nRoVFAYbopdz9iAiBzIcM1xX8JuXOdrOPN7uCkeBH011zUwgDdz+NH/6xmsOA\r\nEiPjrj7lB6H0J9cTbnACG2OHOHa69YsVzpKa5Nx22/ApinkGQEZB9VKkLTJU\r\nL8wEce+FIK37026Oed+S1oOHBSucu6yuX7kR8s8RfkrGHryTixws7DnpvWf4\r\npR1WmqYf8G9j4fW2xQ5G9qUL06NPMNu4WVTsyu2ALBFZHG8UFHyw1VME2T61\r\nDG862IOW8O68BH685RrniFeyMK1L1r4I0f9Pg0jJDXMBkloYe+WrnYrcctNw\r\nAY7k5/Xd9wNcHRTvttoivOZSTzyP2jq5U3UGwfMwt7B52lEJG2QEl/CzIDn6\r\n9aox3n1BPhWbnhBDbJgXjzzqMTJqqp4FtwSBB920SDxMjKYBrOca6FdFwRxS\r\nCCqiMJKb5CXudRYV4rOG3fctQvXiulzmjLs=\r\n=7up4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"37662af94525622cb00ae2dd17f31f6a93b4eed8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.a8d47f9fe.0","@material/theme":"15.0.0-canary.a8d47f9fe.0","@material/feature-targeting":"15.0.0-canary.a8d47f9fe.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.a8d47f9fe.0_1667967435755_0.23019968772892674","host":"s3://npm-registry-packages"}},"15.0.0-canary.66a1e75e6.0":{"name":"@material/shape","version":"15.0.0-canary.66a1e75e6.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.66a1e75e6.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4317c0820e43bdbc3fe7753f2032346205f94b74","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.66a1e75e6.0.tgz","fileCount":14,"integrity":"sha512-9ghBtqJJSwqA8QGZJl79jj9VXBAoGm0FcKJ5iexGN3+Ey7iWFXczrXcRQ6273+1oJPXiryv1Xywuq5R2V9NIGQ==","signatures":[{"sig":"MEUCIQCClhS+shDxx/mC3hSVMmQKzocWC2DnpRIfh9gctVhlBgIgUKLUz4KhENpL2uwCHMRKwYX+RSXoHT6fiihqnnG8V7Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJja3ROACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrXHw/+JQHpK6hM9mL+xmRH5NG03+MMokk4+ymp7QIhiryhH69q9Nr2\r\njYkOlBUHwnhO4wdFpAxk+plvUNs0PphagrHdVOkknDMY+NbtPA9XE7bir6hP\r\n9TJc88UFqH/7c9qzRL26+FN5WCRgXcQ93BDE5+/orCVomoTZa0/xJZ9m0XzK\r\nceGAoTmhjCdGesZWV68oeUE36LH4phppU/mnM9tTkNmQZZfaPE6F95dvr0cq\r\nO0NSvPMtmhR0mbaD7k0QPyeugiSJBkCmZkMK1xWIS1f1VgsbE8pGrCb4X1ws\r\n5RPedE5oUV52meHsngnz9WOOTNKZdPASfGqWefRinNMHkeu3xNjb7c/1RVv9\r\n99gZq7k3fR/AVapB9gnpeIEA1x884+CpVg3/55TEsGDQwXl+WdavhDgwfEU8\r\n8VG0CQIebdeDjcfVyfRVlfNszs255XIgW/x84FE8Y68kBdd3gMpOogYHsOPj\r\nq3vhGXGk3CtVN9H6GRVxhWmNigoi816bydahbnhDXZvoBLVcoA0wncnDdLl/\r\n2O4XMIiO9F7PDZTySWVA+TzRMlEj9/kD2tnV51xUvvtAR4NNdD1f10jGIFl6\r\n53DrlFO3QmfZypf2Ljkyi+Y5NfqD4Zk0J+CQ62Pc7aqCQyxJHkcoAGVAQuC8\r\nfrco8OzmWDTcrAzqt7Pr5kFDvMP7KKrDiyY=\r\n=bHif\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"8ed0cca778858904bcff29669c6dca407f25ef98","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.66a1e75e6.0","@material/theme":"15.0.0-canary.66a1e75e6.0","@material/feature-targeting":"15.0.0-canary.66a1e75e6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.66a1e75e6.0_1667986510268_0.4979952804217136","host":"s3://npm-registry-packages"}},"15.0.0-canary.5e5c2afc0.0":{"name":"@material/shape","version":"15.0.0-canary.5e5c2afc0.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.5e5c2afc0.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"54d2c87730e5649d5c39e4fdc5795c20b471593a","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.5e5c2afc0.0.tgz","fileCount":14,"integrity":"sha512-Vt0KpfjakHgVswHYTMX3M7o2u62SjE+LS4Hej7dsyhISuw1UzxpuBb/VQAdZhg2hNtLudIBvNOlWV3SaVNTuuQ==","signatures":[{"sig":"MEQCIEvtaqErO8zhZ3DlBXhw0XvOmAT1aUU4fpPbYTBUuLXDAiAwfsIhqKKpVr4ZfoQpeZ/DDUw3GPA1k+lt+YXuqANXzA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJja5STACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmodOxAAmvTFmdtdUYkp6pByS3JVsekZ0HdRbXbFjulrFOXbV0z1NddC\r\nAknIUS6SulF3jHQgNcQfNr3bjX8bSipk0jXibwfp9RHrePlg9MJhbFfpeHQ5\r\nqEy2r4Kq2DhVnNZf6cSSUsRxWrE0tsPbwLP2ErOR9Bi8Dpv7IuH2l8pjQ3sv\r\nQ0LmfIyF96DfX0ssnp0lfrSJtSX/KrypAM1kS5tIVBrE1U885js7D4dqZzFJ\r\nEsJcnNlvFT/1byBx5NgF1gp8m1hnjRD9wOmhEJhS/utJ42e/4etyDhB6kGj/\r\nbTklu9XXEIWKIjpf8DhNOSUBOJvnWFm66d3R0QCJ05aDyvrDVyVuBWsm6VJQ\r\n3LCWVw57aATxIzyUast5K74hNpB3rAPj22kavkgoa5bQoQJ8qCuA/LsPwE9E\r\n3oOTJ1QBFoSTGWCY4v7JmQyH4DoDrqvczXmRuiPQ4NFi2u2bUQ2qy11Z+pTR\r\ngQRQUQMv2OAsQPw35Haiz6vHblmPOd3i4IRzIGldiiwxs+X7UdcQxcpEjVaw\r\nk6Y4nDnSFFJV6hH49o85c+dKPPYFQ7pnV1zhrwnllSC7VHjcnQJE+bJhzBNk\r\nGEU6jQbXGWq3cD1pkWMhPuQx3jqmG1bb0flXRHC3x7zmj4CuJaRFxWd0Ocw0\r\n7mGb8Tqpld3wSR9YoXDTxwCCYpQSfAy2bKI=\r\n=7lKb\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"f14204a01be3c79ff286a8287a0ab731c371492c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.5e5c2afc0.0","@material/theme":"15.0.0-canary.5e5c2afc0.0","@material/feature-targeting":"15.0.0-canary.5e5c2afc0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.5e5c2afc0.0_1667994771085_0.5600422014937849","host":"s3://npm-registry-packages"}},"15.0.0-canary.3e3f43359.0":{"name":"@material/shape","version":"15.0.0-canary.3e3f43359.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.3e3f43359.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9087197db3dcd3237c156adb037cee347aaddb1a","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.3e3f43359.0.tgz","fileCount":14,"integrity":"sha512-ZziJuIsASSGBMJDWmL8S2wIyCDnGzTlN+u9+DUvyXisyyP0gQS/ld+DVqkoss6XH91VQUmhsxLmxZeREhpTzMA==","signatures":[{"sig":"MEQCIFHM/oWrzn7INAeIqzutnIeWQW8yqPixzycZ4TILOQhNAiA7lezDP9DFxjTzgG6wWe6ZHrcUe++5Kvl0cMYR7nV7qw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjbAdUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq4mxAAkbdZJdJ0yktJ9zsZc5I0c5jGd6w0EmyBsNpVGr2Gk9MaJFAx\r\n/9BWyFSp7r21RynzdRf7eGk3SGMkH5coiQiV5flDpBLJcujDaFPRwpHc8kKL\r\ng8Z+bW+//dfAFCtIfgQRTAnvClqxCbXemzBurJcFVwYh7SHE89on0MbdlTxH\r\nXMfl4NPe4gSDVOBwsZS/fqbErzMXNxxl6Fu9/JpzZ1pkjUbJjI1zuJr8PoLT\r\n7xOVwPpddUj1EQTItWYPtZIiR09nK0ZpINpxHLC8Mjv0g4CDk3h+eNuKEjYu\r\nAh2pJ399goRv3iZTusXN8Y2RTqXXqzQDvlOJhIJsEX06EP45ezuEC9n3JMkB\r\nVu5Mg9Y2Vp5lWDtEuC1LRo5O/cJo+gwUBOLAKlJtm1xX27KdEeGaROtIqf/k\r\nqWLLRrtyIFar/SKY28f0JTFBTb5c+rzUt0PaqORd99mCToXdOSHDQXQSxkI9\r\nbOBam0zKLFaBKMGlAKz0gkjN0ruypgmJaoCczsurDVabj1MdIKV2vPysD8xO\r\nrpDGEs8P0pVH6LrkJgijqO3uxnYyqS7m6lAvglv06artN+i1Iz2UStzq10Zj\r\nUZ1sDp+0vzeBXg6a1xYAfOAC8Q4i3qTpJ3TxKhRKpQvnOVGWlhu6Ms72PSHU\r\nA8WLafQUokRbgJGYYbHZgVvF73+sPJPA+yg=\r\n=uwhh\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"722326ecc6026aea1f22d8b4e1c9901bc13141e3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.3e3f43359.0","@material/theme":"15.0.0-canary.3e3f43359.0","@material/feature-targeting":"15.0.0-canary.3e3f43359.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.3e3f43359.0_1668024148379_0.5685459366985837","host":"s3://npm-registry-packages"}},"15.0.0-canary.3f667fac6.0":{"name":"@material/shape","version":"15.0.0-canary.3f667fac6.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.3f667fac6.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b80dcc788f57b095fa56b188acb96ce9b2abcaf1","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.3f667fac6.0.tgz","fileCount":14,"integrity":"sha512-3KPFyuUAynYKwNLvrMW7zAAuv7I7cqzzlDJ+KfPZDzmVm5cjsf3ixsq5f/gZJk7Bw8dXZpx2XHatgZoN5VqIAA==","signatures":[{"sig":"MEQCIDKafaQcMJtqSrV9cl6Y44JYlTjhAsnxmXfHDtQut6znAiAkDU+r2Ygw0IySZjKAhya0Ioy6dYWlLJKKn9DsHmw1rQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjbCQwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmptrQ/+PEXQaMjIMALlOfkZO8OerUCXMC6VN39WUfizyY3ADAzEIk9T\r\nnh9g1CtRMWwWqYWNVTHHpdKy3X8PlNzAY/cZHJLY1t09Rl+hlsOrOEiAwVHP\r\nGTShtkZOuXmcCsuTIFis6m8WZb/q9aB2V3DrZOfFgBAWvec0ibZ0FnS2wiUs\r\nihFrRdnEy8MUnvbOu3+nmDiceq47Y9y5lp0oWmINj1oasJQGh9RR5lWp2S1m\r\niBIKeBytKMgRUdAtjCWkIbjgBDowNDQe7xek6VE30UtyqCM4CARP8Ix31uZW\r\nCw105Ac6xxdznGB/PUgLkhyt4hbitEC08YJUg6vPJ0d5bHeHG1afwHpdzw9u\r\nXoSIvwZQd3OOy0nVCZvp0oIt5UuwSIEO3xbOF0axS3KMBeYINkAUFDggwnMj\r\niKJuGiyUcz6DCOoC4ePfmqrJmu4PTqvN6/I+Br+L8crMIiAPF18PsfG82c2q\r\nJcvkBevTD/6n4uMInteCSWWkOPF124h5bnmHUQim9b2fPAN/AVoHtv+he1jS\r\nAdKliz1TFXd4VISxiaWZ0H/6jL+mEp9vsGcrnLZ+2h16Oi6cqAbcYtcnmr1M\r\nO8szKMIL+59O7Is2ZjwsTGMjLKXH5CZFwoMNRENed7oA6Eco4UmnqiJcdxzD\r\n1tEIFTF9wCoiRAaiV95qMf0NGruteYIoL8k=\r\n=21nm\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"0980467335d47e19b4ec72e32644ba0a08bc0c34","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.3f667fac6.0","@material/theme":"15.0.0-canary.3f667fac6.0","@material/feature-targeting":"15.0.0-canary.3f667fac6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.3f667fac6.0_1668031536453_0.13012721286115347","host":"s3://npm-registry-packages"}},"15.0.0-canary.faa28c1c5.0":{"name":"@material/shape","version":"15.0.0-canary.faa28c1c5.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.faa28c1c5.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"255f268e75a806076281117fb06c4837ddaf3599","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.faa28c1c5.0.tgz","fileCount":14,"integrity":"sha512-jR4qo88DvFl0hzDL5ZAVh4H6v8ZzXZz1sDqizid5xS8FP4n/Cn091ugnbzzot/KCZ/u24+003mLXK7MmdYpU/w==","signatures":[{"sig":"MEUCIHHvXNZhfIg59y6qUHCkM3JvnFdv7b40ngLswX2elDU1AiEA5Ernwsrel0pZnDFB+t02k5INL2Kp9I7nogABWGE507o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjbnnMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoF+A//cy7gHBq5ScmH5fQ+fcLgXy7o1eeTUV6Dzs/9RYnimA3E1K7K\r\nfDs3z3dyIz9/HW7ROeiRdwQLPgW/Qk7ztpft8y03uoyC8ZIdPPDYiW5oLUUV\r\nD8mmsj9RrQKcO7y7Ecrx4X1+aUKLfjUq2gbguPHD2FDubIScKJm0KABSKjsd\r\nZlBVYcKkgk/iapYkpJTcq6CrL/7z6hcDDc/BOYH4X/1droBHWtBXWgogbJP3\r\nevBGoHY44HOvaVK1k38TVCMGqnLQsR1LfXavho7gIsbUhw97KChYCkI5GcJK\r\nc6YuLUPNXt6bXSUQr7GyZOVodVXc5zEn4yh/pkwg8fPF2wV538f1eRjZiwYX\r\n3bGjh5DnfBXOHsZhxx6v9hz80WgI0HVSAaVdu1fHjTIOMMwpmb3pvdK3y9WA\r\nVah4GJIUDHHtvTjrNGX0IpHH743uME930zTcBWuXphxVOw6F4tRScV5OTdf4\r\n/xgOhWQKe4RkQry5IqghjzrLyFhYV2hodN5QUw2PyWVmP0Fwdk5w0Pvhnt0z\r\nlRh2kciiFAjOXohToDL+mD/WblL0hPwQAVXc7jixig4brWfguHmRK6Wwqnrg\r\n0mNjV19Q9v4k1qAEqX1Xnn+pi7nrgCmR+qBN6pFwq3AEVYdRo2gM8AhcGKax\r\nSftYl6HMZg6/u37k33CrV6FrRa7anbEX2dk=\r\n=rRCb\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"d36350ee1c0fb11d053acc0cd521939199fd696f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.faa28c1c5.0","@material/theme":"15.0.0-canary.faa28c1c5.0","@material/feature-targeting":"15.0.0-canary.faa28c1c5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.faa28c1c5.0_1668184524369_0.04245566428808156","host":"s3://npm-registry-packages"}},"15.0.0-canary.a868c7866.0":{"name":"@material/shape","version":"15.0.0-canary.a868c7866.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.a868c7866.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b715b6a8387ce3e5400dc841a5267f2c87dc9bcc","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.a868c7866.0.tgz","fileCount":14,"integrity":"sha512-qwn0jGLQSJhK6zMllua/5JF0ODM0SRG0SY9LGcADLLxWjJw5h8oKhp04sYKcyfIWx9keP0DH+OwK0/zwGeXoWw==","signatures":[{"sig":"MEQCIHCdkkBSeQeTS+xglg8wYb6sa4dJe2WdysEoQB3d6wIGAiBESwqYsmFSG0T/N7DEa5tLdHtXzXALnMf4I/ehO0OLbg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjbnn2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpLVg/+J80hJOq3jzTvPFfR5ej9wcjCHcfntaxZKQtIg6VUkp9FRFvz\r\nVA+V4A3te0nV9ZxxldJbAw75nBopK8XnxXIj1QdywXoGljH3SKWS/i7VULce\r\n0Ld5HpyYINZAK54LRV5pNH1BU1lowyroK7ZZiEDTU/6krn8bq7iW86F958xd\r\nXw3xQ7Aa4olza2DCW9ir/tfvsISrqK21oiwurD1bXePW2ZsynEoJfoTG8a+8\r\nzWDUEbFgz49lG8L0Vv11IwegDWlqJR5CPUkHOh7kdSgbHQJOdRS42V6T55CM\r\nnv4La20EizqLr4OKVzhIH3hXvRPcVp+hh/Ejy4Q+yLAz4BAG9us6gPveGDsr\r\nlCE4ak6yPcMy5XZhtkafZSdfGSUniwXd/syZ81BF/FyueUCrMhVtB4Iq5ZPs\r\ngMMRyPb/GpNIF9GZOCVOcIo3IFrNgWQvjU78YUtLklc1a61HMXVX4QlM1bxV\r\nQL+fjXkHXse5tcm2kw3nzksyiWrSfDG8xQkW5m3BDQfA7vfbvvQdWFLE7zEp\r\n1aSauAt2za1FJfKXxhcMRuGF+pgr3d04+B3WQXo1mYS3btuasFYAeEh5mLwq\r\nEzlPRw4X4+H+3b+dXLL2Qw+xUzZvD/Jf/UrAi8dKsTanPs+hdPPH9H2pP949\r\nwfkT+ElBYJSNaz2JejxYRggAfgAv+l6CymI=\r\n=Oab8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"d35416d7d3365898437e980f43ade48e60904e85","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.a868c7866.0","@material/theme":"15.0.0-canary.a868c7866.0","@material/feature-targeting":"15.0.0-canary.a868c7866.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.a868c7866.0_1668184565906_0.5396492550115242","host":"s3://npm-registry-packages"}},"15.0.0-canary.602fe8efa.0":{"name":"@material/shape","version":"15.0.0-canary.602fe8efa.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.602fe8efa.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"778363026c5de1c49b6bd09ea896c7a602c91188","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.602fe8efa.0.tgz","fileCount":14,"integrity":"sha512-eARbijs3U2L//i2hZeNxTUbA3zxtx5LQ1YZw7+0Y7qBuvrG+KVJnNAT6lkrtEmaPOyCKkiMparTBU2oa/1Z3BQ==","signatures":[{"sig":"MEYCIQDOCQ1wb26TENBeO4yhr6BL1Pi1S2QEKhngeYk+2phI/gIhAP8wma/9ptCXZ37r6oPc3bX6dVWYCw+JOwsaa2wHDmV6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjboI9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoBkQ//VBVAIivKWfTCjm/kRb/BUVpjQw7+jJDlo93euT9H2nzkKarM\r\nxXvt0cSJWoI4VQhruhdxVVGiKG3QSqbA0A/tvqt9mymM2TgZXQ/+YAZr7pGw\r\nOp//69S/mEThKNDWUMYPrRlsnsHXUSaCdac7wMKBF3XCwHDNRkYkRMIb1ehD\r\nk7lhxKaWdWpYnnJURXRfHGAo/cbVMZrnEZyjLJ4DJ9pDn5JPnnKXaBz+8haT\r\n1L88E6GQggwSqkoJjMOnZQbFH3mN08LoVaz3ZRWwzHvFGpeLJ3uuX4ngYOb5\r\nMHnh3P2UqZpAqJ65lHpADbKEssyYxagJKFJK14ILEQbXNZz5RNSUDjckEqNh\r\nqnNqGdOJU9GXDAtEkqqPaxmPZQqTCnvkbChrJCZ3t3G/OEwFbIzgODLKsSo2\r\n21WAAo+H7FXSHtmdLL+bX/TOBIV6Brsy5BlawNPM0IPmZWVoRypWZPTzXFj+\r\nbt3BUd0D1apqY8+u0pHuZ8f9wN3C1c2rndV3Qw3T0SDrnTVoitLwW3pQS5e9\r\nRowmW+1wiZUQTU3314XANWVpywQq/3psoYJZL6odI5AvrA/vIvPBVyJmKafB\r\nVCvefdfG15vvg33+/jZHPZjrGvfoWF0VtinJA9j1RGuds+1ygAeQV5KYE26a\r\nyA+yGBkRsNjjYkjrEwkMoPP9rEWRDi1HLKk=\r\n=Eql4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"6bdfaf09ca41b2fd7e3db4797bc2f536f8fbbade","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.602fe8efa.0","@material/theme":"15.0.0-canary.602fe8efa.0","@material/feature-targeting":"15.0.0-canary.602fe8efa.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.602fe8efa.0_1668186684982_0.9798645812220177","host":"s3://npm-registry-packages"}},"15.0.0-canary.558c2be62.0":{"name":"@material/shape","version":"15.0.0-canary.558c2be62.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.558c2be62.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a1c45f2cbf2ce6b42b62749837c23d8eb9cdecba","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.558c2be62.0.tgz","fileCount":14,"integrity":"sha512-n5cALgXC1R5Bfq82fYdbUnsn5/Bn/HTDi+Udx4J3s08IlrftqTSLMDf/LD64ClMjHMbtLsGMzmvBmYcxOh5shA==","signatures":[{"sig":"MEQCIH+Ygjx0lJsyf/h8VY0s/LfIo7wXgY/rZglc/gD+mgNlAiAfg+Wd+CJrCRdZCx2iiWnWQf4jjFYJMgpi0/Z6lAaunQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjbtBlACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmosew/9HhInjaxSQtHhfQiOmjMB6RSHYHtDffkQcUVHQI1Rr6PDrBoF\r\nc62rkyPuarRk7jTHs/OKWbgmgGdhZl0jUuhXLyDF+x16H3Ikjpu3ub/YOanx\r\nwSSwn5yUlObkb8++55c83bEMBgnsPa85LyyEawLWIrMBipwfYbYorOF+/rmY\r\nhgtSCg7FwPAhVlYPPm+qn/wRMexaJ76MiZn3iMYbfQQs/YxU4NeWvHiTkKip\r\nFuHcYCIBwz3FcGSJKlvG6xd4L6T99usK2IiYqXFlRhUgY6p4KKO2shGCgryo\r\neogkWCYkHsOm+wTqEuIeVZx/MZM1XAIkyetFLJbYXX6O6EqEXjkyc36RDt0F\r\niYQKvld6BUiYkHLPAiwv52TgRIpO1M66rgFvd+4q/+k4E8/9GulumYm7ffwl\r\n+spQvsxYxFUnzAkZXcGVwJcsiEZi5UNapkokioi/kmqFRqheUarOKNjZv12w\r\neXh3kvnn15qMdaor7YZV5/eBvgrmstPVUMGWs+h97UlNadVVJuGUfqxKgDbx\r\nnHCiDjTrBPiq4DAZ2YJHWcAJTeEC9su6XNe0Q6PGJzhZMWivuzBEtbLUe5wO\r\nGXtKxl+EnMJ25gBFB+f112J0UQeQ9bBtrKs3+zrYQh6mKN6b0BMHTm6eSIIv\r\n8GnYmBRkn7W68jvKhotC3WFYWc3uG4KMOvM=\r\n=c1kB\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"64666caf2aacf562ab6ab5b701e89f28a9bb5c74","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.558c2be62.0","@material/theme":"15.0.0-canary.558c2be62.0","@material/feature-targeting":"15.0.0-canary.558c2be62.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.558c2be62.0_1668206693495_0.311105092661484","host":"s3://npm-registry-packages"}},"15.0.0-canary.b5c13a7a8.0":{"name":"@material/shape","version":"15.0.0-canary.b5c13a7a8.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.b5c13a7a8.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"083ff8eede5f6454ae0e0a1dd39b0131e91014ae","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.b5c13a7a8.0.tgz","fileCount":14,"integrity":"sha512-y64a037hcMKeBagJWs+ymkLPpEwByeMbq4G4kwj/Ms9GqqzHgCR5Btfo1plR+nxMeTvwuKCDwaWIutUg8byfOQ==","signatures":[{"sig":"MEYCIQCBmWhrtxzPj7cLxBM5D4szJyLLz13hyAjxLlPJDXyFDwIhAOdjycYpdxSqUIHewlFOQLSqN0RCHs0vp/Amms31D44p","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjcmWPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoV0w//SwivDMG6VTXl2GDKCgYC3iFrPOEzpmVqtBxZJSuNPCzIGPED\r\nfGTTES6WWX83dVGz9UHPytWILFFOjrHHFN5Zae16O9fVKUY7cbRY1A1jSMOs\r\n/orercnzzW49JT9dZEAJNzIh8JyAM9eCbqZhBo7VtS6rzzpb2COszTx+G2+s\r\n6hxMihh9btM+UOsl+guDWwvZ3xMUe9KmWP1drpFtKJjW7kv4W2fxejqr2QWI\r\nEWJJtUdTXcCrDg3+X9DouSzQMOV6cizN+4MlM5okCnu31KGELqNDgy2XgNIC\r\nOL66saFSXQCAemY/7BgmSZDJcxvbJfyZPD1WkWTjYnSWLA+cD8iP5MDwXWeB\r\n7tZhwYGCA7qkpoODiXRCZWLHsQbUcUgncU2CWvj7O0+n3oAerIvxupy/1YE9\r\nbGL1LeA7snGTUvD09cqnk1HXq8KxOd2mz28AwK/1oq0bX8VEinBwCEV8nFmT\r\n26mXqMfBJu/VC4FY13QeW5QcpscmfQjcUO5yqWu40lMkMSdYLb66tjI9eneN\r\nmyGyeAk2MTG0nyog55hp7qzi+EOOHzAMwMJkzoreOLB7ZDCGxY1VHD1Hevn3\r\nz7FdnDQDp0nxYK1oS9weP6gBXd3N1oqw5BMJqKIzXAqxowDPsXyjMvlGdT7u\r\nMoQgRBjM8NQG125XtbG7JGoFyRFd12QEDNc=\r\n=xoZf\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"d7e326425877e3ba53b64755680e3503090a01cc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.b5c13a7a8.0","@material/theme":"15.0.0-canary.b5c13a7a8.0","@material/feature-targeting":"15.0.0-canary.b5c13a7a8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.b5c13a7a8.0_1668441487604_0.5583948130494749","host":"s3://npm-registry-packages"}},"15.0.0-canary.a6e1c0702.0":{"name":"@material/shape","version":"15.0.0-canary.a6e1c0702.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.a6e1c0702.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7bba4584949d2221a9ccb6d05e8997f09274cde8","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.a6e1c0702.0.tgz","fileCount":14,"integrity":"sha512-xHi1RP8NoG+cMkdpBav0rFUKkjx3t5RAbDcLP9Gtlj2z5ipSQtq0Yf24UVJV0evZEHeCJCnkIWQdm57SnBE6rQ==","signatures":[{"sig":"MEQCIC6UhIA8ELO0IHpeDdFDALpHLjHRUBnAn/bl3N4bndZLAiBd60cSOXDO0lrlF6Dgyx8ehWYI+UfR1NDQxFRb3NvsHA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjcnpMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr74A//UbhlANuOCAjQhJaCvTsE6EWc64fMWKQ+cVk0i9PZABXqKwuR\r\n+bbKlWFUDt6GJnq+bfj7YL1StGjjpeuI0BRyVKLOxx/RkhGNojx2aAFs4i+L\r\nLNXCMUETLrYs1jM2oTmN7Zd0Bnga3/es/rRfdaE62W0D7RuGJuhTUnStlztK\r\ncR9dm9321pZMudeEXeHDe1k334eavNMDO8iRxgNClwVPBhULTjIotKlyHvkg\r\n/8kTxggKbOYRTMsV39dnXTctcnQTw456OjJuRGZtBmskOq0FBSr0w9SKlzUv\r\n9TzKdid66zzdcD3aUJS2sRO+bDIm+z2htgSfSoIY9s8JcG4/qYUbERqCQGqq\r\nLWbU3BDriinzvDsiD+QusI6HwtGvNWNk2u5Rw7SnBRT+yNTxZWd9u0Bf97Sa\r\n1fYyPCIers57j+sO5C80/J11oQ1OxMKy1gNPh++FWWM/8X4HXRUyhVJhZPhM\r\nz2JUQmdDWn8uOtS9UcjqWP2jruXYfUGBh/qw0bVZ+K5JtvPn//0TSmCaF4Gc\r\nuK6IoTyROkCOkeR4qYc1EaU/ak20waFFoGU+X692VKLpzx7aDzQ/j7Byr3Se\r\nw3NZRPrztY6NgSosJg/2HtdMp5tlIYijvRLdKZfT070w5MDjSkWmSb9blBta\r\nRZ+ZRPj+yInQlIMTSFzRbj8A/opV4fOgKX0=\r\n=rdL/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"3c1ee7333cad68ece747437d4bab1a737d6ea96f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.a6e1c0702.0","@material/theme":"15.0.0-canary.a6e1c0702.0","@material/feature-targeting":"15.0.0-canary.a6e1c0702.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.a6e1c0702.0_1668446796782_0.8621513797103213","host":"s3://npm-registry-packages"}},"15.0.0-canary.b6f8a06de.0":{"name":"@material/shape","version":"15.0.0-canary.b6f8a06de.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.b6f8a06de.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d9e7365bf90708942f7857390e0efe109d00d645","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.b6f8a06de.0.tgz","fileCount":14,"integrity":"sha512-aI6vxvAICcER5ijhfAFW1zNe13nimvPsxs3y7fwJFw5zkM4NnhlX90S8wo9gEbgdkkz7NcQTkLny+VXG5vhUhQ==","signatures":[{"sig":"MEUCIQD9ocpAHORqz9Jbk7fBZ4IAcWFBkwfsmQP/a13GJAGilgIgFTRLTyKnC26CA0zl0WD0mOWBtH5tWyOR6Z1m7k5+9xo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjc1uYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqxPA/8DO0KaYKQ1VguHzrpONAJ5Cx0x0yuLheZxxYy+l80nTxh4VhR\r\nBUOGLWth8NcMVHUXoSbZla0tsVl+okuyOz9WSC7Z33q94lv/6dieBQ2ujlCT\r\nz9Q9ckORX9hGQiD589Fx5lnlP+GHHzA2jbYae0E5olbnLNtJpDj/UdSN/BUY\r\nFclELcVRTKEyqWAjMCXql/f1uaJJZ9f60YgxQNP+fsbtsVxysrQUnOVqlqV1\r\nl34+HyFIBccLHLKVhKiWo1e8K6uwABlRG1bWL4hAIr7VAWPvSmkmFQ6xNeEl\r\nbU94Pf7P2WgSPtXcbsTpIE3vEm6/G7AqxNdOwrq9s0WLJ35p9u2md+kEHKq9\r\nDgvPuEY/VYBPujH3OgjWv1nF2plAkqsjUqAchulPaaVGKezoSHZTTSdf40yZ\r\nKlF7/g8nD6fku31yvnjjFCYDWjqzCP68TJ/GcL044HAhL5+fA1RfCcuKyHuD\r\n++NRM/nbMIvPPx42czqt6h+xxDNXH9c//hrbPaSOUnoCe+ojf4bvLmE60WRb\r\nEKvJtv8LwzKzurN55VelbCJCLOqz/aK8Q7D9zx9IzenoLsp6BInhDU9XWHPM\r\nzYzXjyWgueetYDe770COoQjui1in1DmI/IbG3secdcW3/V9YxK2h6zSp3fEA\r\nSotyGUtcqS9TtyqmAq7A3JyORFgMKhFg6I4=\r\n=nWd5\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"92681882b16f14e6a94df4b1ac983fa86e242640","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.b6f8a06de.0","@material/theme":"15.0.0-canary.b6f8a06de.0","@material/feature-targeting":"15.0.0-canary.b6f8a06de.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.b6f8a06de.0_1668504472337_0.1140276383680896","host":"s3://npm-registry-packages"}},"15.0.0-canary.0163f3ba5.0":{"name":"@material/shape","version":"15.0.0-canary.0163f3ba5.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.0163f3ba5.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7f2980baf1d62052477a02f028cca320282d2ced","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.0163f3ba5.0.tgz","fileCount":14,"integrity":"sha512-3SoEYDEfSKg7iHnSHa7QQucYUb3Ulj27YIVFiFyFz+PGmOGDBz5hmJnrZaU/jqqjQnq0S7eAZWZGxoZ+i1kUQw==","signatures":[{"sig":"MEUCIQCX4yaQTzi0wh0F590suoDpUUbzjFrarF/gxnyJPb27jAIgfePzsExJUDGAgsS6kyvRFF+/qcmvqzZRbCR4eFs5nm0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjc9P/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq3XQ//flkU8504IL5vC3aECS8GJohfo+5D1h/mSN3rolPP+GbqR3pK\r\ntfH6Rw8kaSmIuvOsXOM+eXLYvuBUTvHTV24YSndhEIYDc4sKTCT7uODFCb9F\r\nh0erw0iR6zJaaVVWqopqZb46Tbt9QcErQpo7N3t/j/TiMa4eXb+ck38QaWY6\r\nuLUtzecNV3Q9AqmNceOMDeke/Hvj1RlVZxlKZj3q1nm2nvgQq2XXZb3bsqhQ\r\n6j8o2Zpjs9FQyjpIefFnmZXQGl8w9jY8jJg8MiA4lXWhCH08nntjyGmgwg57\r\nfWoGnKyIJB0syXIFCaQitcnEVN+4Nkxdma2Y8hOsZfhaCZLJ9rEuVEaH3CEn\r\nCf8MRFaAKyeqemBuUQ8UNVGtEoueFJeHgVzoN7NTbxTjPnxBxyvIpCfoEwpQ\r\nVmLOOILDJ1MmzWhdQQfRaOYUTzvh6jQbyloUB7Lvz+CrfSTMycEd9PtITe84\r\nnrSyhHe6HErI2Jmu3UvynfJchCCleJG9t4kBSk+BR67K1/ZCQiyALmaTzLDj\r\no/xYbXtK/IQKk71F9MmTCcQkPRH39boyLI74Fy584lzxZYcGStLfDL4LeVVv\r\nQZseMMni8Qci/MkpJE67XZSh2agkUzt6JKCYXXp9CwgaB30vUM4LK7qylGrm\r\n2Z9GkKoccXcErex+6LONi3JMMTn+HDILXMM=\r\n=LXfs\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"4198cde77ba33a68c74eb5e814d92df422f464c8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.0163f3ba5.0","@material/theme":"15.0.0-canary.0163f3ba5.0","@material/feature-targeting":"15.0.0-canary.0163f3ba5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.0163f3ba5.0_1668535295481_0.530636792217273","host":"s3://npm-registry-packages"}},"15.0.0-canary.66c5cbb94.0":{"name":"@material/shape","version":"15.0.0-canary.66c5cbb94.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.66c5cbb94.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0db52cb1de7e29b3d595f344e3c5d4b51dde095a","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.66c5cbb94.0.tgz","fileCount":14,"integrity":"sha512-cAp2fpKC622lB2MorHrGo52Gav7LVn9A4NXNpeQLibCbAc+mGytl9CCvEkgwywG2jYwe2KHBEsqdmKpsaKZlQg==","signatures":[{"sig":"MEYCIQCbsFoGU4B2GuVR94043LdEf4tBGHgKH3/xULjSvl/9pQIhAMPapCzeHkzbN+Thh7JRnC6P04kcHbZbdJS8J7Cv5/0y","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjc+ihACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoFWw/9GPOIQjUIfwgpuUx+mNlx+kWMtAgPM6C9pVFWQaHkwXJg5Blb\r\nmIF/yTrM77gtUN6dycPKo/6exb6ntwST7MqAENsLD00LJg7T+19xZXMs0ViX\r\n9vFwi+sTsnhjGo21rgopMsTMRpwEKs/L7q2urAcm+f1naTic4iSKADOuT2nd\r\nn4bQcy4KzTImwo0S5MVO0s+DxCxlUU/AtUKHfTRZVEavFO4TQo4nT1ql1gyG\r\nC4WoRfw1Ev2krnR98H4wIJiYwwwfX18HzcfE7EM6X9DpoEY7MRC/aCZOq4UF\r\nfUmXiTBZF0jw5qVfs275Xj2RBSBsbUGk7hW+wWT0TfZpaDgQoEm6SxLxAYrT\r\nqQ7xMBhJhiH6D9GvbtNI3+yB7IV2Klh2cJw1vT8fUYmHUaTJ3B7PBOOmirmp\r\nCeJsWPVnMAv9T71eH8rIO2iYYEHDEFElmmmuNibjoCXo2jzPLubZlGsoyBJm\r\nUOy80VAxyrTOw4xXK5u8AQ4w1/WR0e9sMIVowZZBkkIwV3W4S7BcYISTEa8P\r\n5HOjiGK5EZz6noJBYrtEQrYVdtDcZI2pBm18DyBRR94zR8XaOmPWUqVb/SRV\r\njPRaHpFtgyDDxwjy6mfcMYF6ix/2pW+oSUBtx2BjhuzAEy8zbZrCjMTybb8K\r\nSAqfU8DNtJFceNar9QdOojc+etxIZgfR578=\r\n=PkWA\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"5d01716a4e4556657b2c4ebb469b826660673327","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.66c5cbb94.0","@material/theme":"15.0.0-canary.66c5cbb94.0","@material/feature-targeting":"15.0.0-canary.66c5cbb94.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.66c5cbb94.0_1668540577635_0.13960504745353797","host":"s3://npm-registry-packages"}},"15.0.0-canary.b01136063.0":{"name":"@material/shape","version":"15.0.0-canary.b01136063.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.b01136063.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0ddfee2e2e3046bd3f819c9eeaaceae7e4cf0c02","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.b01136063.0.tgz","fileCount":14,"integrity":"sha512-5fE427ER/Kps5uvHfTctQrt6VScFwHKI3Xtc3mkTuADF3ugW6lowEyFuSX+N1l+qr8qOokB/PZfeCrZRB7bncA==","signatures":[{"sig":"MEQCIAXMmOK7GEEQg1+dgTY0ySFrS7Y5BE4kgsZYvZWEx74CAiA8Bwn+RyMiVuc4X2dlBnCNqlbwRZ6IN82Ij7W81uPKhQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdCubACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmryjBAAiprJrR4J8aiLuJe4IbYVLDbMcVkk5g1jDbRWnyuoExAp7Bij\r\n1Ksmsr7GpboHH1l/jwzkqO5tG/7BqSYBvL/9g6vVWgHJb68EYr0di886IEzR\r\n9+Mr/fKFw7c7af39X2Nlet7av4XT3dStrLjnFu+KtErdKsbCa1imjA/Q5ODr\r\nDzeskDW44FQPQtLtAnoNvyB0cd0aDHZ26cqhcdd9Khxs553ady/thUuOdQa6\r\nFImalQcXV2M9eejMw9zAB9g1gjFwYDKzPmCalGs4jNF40pnClw4muJ/Vjtmj\r\nCjqJmwv4sx9Q9zqJdd83kkNiPnZrUlmQwsvXEl0ZnS+Ta/lwhpVoEfqcTPJ5\r\nKtEpH728R4QCtbuiXEWKK9G3a8QkeKJJapp3cOHyyFRyxcXZ3hQzitajFIGr\r\naysVGXwKL4xqpCbYmBWA7pepLCQK+P5btWkS435qAZfLkJNwaxiHjvpOGKag\r\npdG8NbDVNEz1G/0n1GY1aeCREYnIAUNHwWxI0P+E6O8cqhSFh7ZxggyYC53y\r\nOz+jyTkRTgvNQU5T8L3egWExhikDINwQ/ayiBTI8Elrw+8KM/vzKSOX31dcL\r\nlhusLJStKStKkhlO9iipS2UYSCD3cjI09OiQPP8nGhW8Xzs57FXhhQkSS0VN\r\ndmCp7hJ/P69XG2sDbqMOsoTJbgX5mtQz4eQ=\r\n=C16e\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"125921cea459cbed7dbe3e1c938761a0cc03a263","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.b01136063.0","@material/theme":"15.0.0-canary.b01136063.0","@material/feature-targeting":"15.0.0-canary.b01136063.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.b01136063.0_1668557723276_0.20506286434373888","host":"s3://npm-registry-packages"}},"15.0.0-canary.01da0cabb.0":{"name":"@material/shape","version":"15.0.0-canary.01da0cabb.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.01da0cabb.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e2a560dee1a2ef36ca5d8d07e98dde3450b0b4aa","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.01da0cabb.0.tgz","fileCount":14,"integrity":"sha512-s/+QpiiOwlzYZVt3KI1xsD55qZADw7gWR4+BPKptTnCeJuOmXKyMh5qpm8zS1EnHIZlteuXbXv6/ACpeSLT1QQ==","signatures":[{"sig":"MEUCIQDVa82LwI6oTpv8rPMIflWxQWCS+fRXB/D/ud3sMKeJQwIgQbLA/cJ2S+Xejysbn/NrfDADm4o9yc4jS/JM8o2RjEQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdKmMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpZ8Q//WS/bMLnAiBGL19vS7yA+DCBL4Id6pgOV49dkrSGcBFx1Hr8g\r\nKmoH8VbkbngHIzArWS+z68g6j9lVYcRhcEctI6pz93UxXAyLvhNb8tNQxh9P\r\nM9W/SWx4bJQcCdRCsZJHGPr022zDZKfii+GyA0VYoyq8JAknATjo9M+Mrbcq\r\nb3zwO7wWGI4RyCVgE8xSJ1RBx+HM8g6SwL9E3Fct7cRUll8GuBFsc6IDZEbF\r\nF3Uleb1ndtpDFzYv+LUCmumvh2biaP/Bjo8PlOkM92thvMG3iJc2Vl3RewkO\r\nR3YAHo5Auu8NvCTCpZxpLfZnqXiXr1Od2zfikOS0MzFit7jOgsBf6BRxhnvM\r\nZ9AJ8hvKMKpczAbP+hViDVWX/DXw4t43TZ4Y6LCLC/DI3U3yAHuGnRVGOIep\r\nheQXmQaRFA2vHGns7Jzh13XP1Jdy0IFrfi9Xk5EUIKfEgBsmvTD0Pl/lUHbL\r\nDgi5bWrblprJ9nsiSc3L38/4QAtZypvcB70dLjaDIXJ1mSNtopE6CBA+PaZB\r\nMxixVCDWQjut5cRXQ0tyO1yZeVu2NnV+iqLG+JTwBJ0n8F7I7qxlxflRyD8G\r\nWHHt8WjLYr0YftppufFj0X93hkfj0lHY8pjobxJibid6JY9WzF4AQ82ZuZyV\r\nkN1HXmdEQFaIebf4e1uL47ie2MK2mhuJON8=\r\n=0/MQ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"63a5ccdac9b23a6c70c2bc776e20ab703cd1dbfc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.01da0cabb.0","@material/theme":"15.0.0-canary.01da0cabb.0","@material/feature-targeting":"15.0.0-canary.01da0cabb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.01da0cabb.0_1668589964242_0.729607451321977","host":"s3://npm-registry-packages"}},"15.0.0-canary.4ac393164.0":{"name":"@material/shape","version":"15.0.0-canary.4ac393164.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.4ac393164.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0c776a6715b1416bf13de35ab63ee8de7b9436cf","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.4ac393164.0.tgz","fileCount":14,"integrity":"sha512-3iuvf0iRHuVgOHHlZTYSToaCIVIRwMiEDl/oG+Jbkc8oI1aSZgb5UX/noyOiutsWfC0xVGEGbW3JLJS+w8eoTQ==","signatures":[{"sig":"MEQCIBGlC/frl2kCScq6JCV3a8L9iwfq1yVbaqnZEsXGUeQwAiBbNlKXgWUyz0TmkvvCanEBL3WPBk0QWOSt1BC3015eFg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdQx/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqsjQ//U6pyKZ09Boq4zi8auwDuciylVYqq9fGHyneImtBm2TvcSlbt\r\nVTeS4usq3faAosn+/rHa4PMh8sl9Z5JKk5891xdYPoYwBrkQ274xQl0r4OjJ\r\n2Nl219X5vxt5vB5ddyMnUUfh1AV0Unw2RJbr71jwR4+tgf09NXg9pRZxuaBU\r\nAS6Wg+L+rjlNa8U/5jhAJRrrDXwcK9XtybBlQe5Rg1MXwX1YzBYGK7H2P2SL\r\ngCN2JNEIzTV5iQafzhdZfQt2OL7JNiCOCWjmx98AAV5FMFpQ1I+n1rz21FAe\r\nm0zcivyQ5EPNhv9Id3N6x1yMqPn1B8ehaeqkZLvefvM4TqWKCk89Z2anuZbD\r\nxxEoEyvYvwik3+jl5hCYeGhSvx+lOg1X6RY6MSoZ4PlfIzryh4GzVGBN93RW\r\nSsYH7ZfKOdiQGu6f8XGCwQ4gTCFSyw6QRlGbQEpPVAGvBU8LFiqDzAt1pHTg\r\ncRY1JaB35KhhzOe8sY/yJHvJjQCH8tYw44/X/01eebw9MuTQ3/Unz2UDQaj9\r\nBP2O5co01CJ34VkPyU8wVQEUcx2IglDerLFBt5lGkOxpUpszcbWOFEoVV5E4\r\nD6DJ0gTD4viUAafMkgzuwdlAXufbN1lOQytTRkKf94Hecx6LqaeAwFGoTgZ7\r\nEfRdZVPzSloTLbeiPFo8Edudmu5epQRWfcM=\r\n=2y5C\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"f14d3444d266ac4c6c92142c377275be3fbc5d0a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.4ac393164.0","@material/theme":"15.0.0-canary.4ac393164.0","@material/feature-targeting":"15.0.0-canary.4ac393164.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.4ac393164.0_1668615295518_0.9817938203006367","host":"s3://npm-registry-packages"}},"15.0.0-canary.6048fb563.0":{"name":"@material/shape","version":"15.0.0-canary.6048fb563.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.6048fb563.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c068b21ccfd663e81f8701e52514d7e4c2d14766","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.6048fb563.0.tgz","fileCount":14,"integrity":"sha512-pF0ym/2fngM3iGoho1PObSZyVLNVSm9jrQuKLyGWBDwb9itx5EXaVG8jG29Tsg3zG+XOVzER9Db5RqCo3ec2BA==","signatures":[{"sig":"MEUCIDaTU3CPkOeeaOv+KSafgLQVKKU4yk+GyYA3pFKQIaXmAiEAw+LhzXOjV7woHoOMClZbA4pPUFiqhMHr/gmjaRpnflM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdQ0DACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp0gg//TtMZhk3IQt7cmbV0oGp/xcU8vb4ay14/qDTwPdiENLwMEE9V\r\nG8wfs9murJGCOInVI8TAIFsUeJDWgoTOoiX9B1POY8Uy58JCULI9sggJBqEG\r\ns4XV7rFWMIync9xpjxkmgiGscFJbxjCNNApQ4DVWVUWxSlFpSndZPQ/K6QHS\r\nAxXDc17kCg5VtPOpLjH1XD37Ujz2x5fcsLrI6zn/8rKWHvsfJv7LMd368fb0\r\nIaqfsurCYCfdY8HGP7aN25PNlqpSA5oYWJn2+VD8AGSL5ArQctRZ29VAz5cw\r\n6CLTC8LjrXuvu/yR9DhkEJWSF0LZHe81svl79I+guZRV22wAkCkl0LMqgUEo\r\nzhgb1t32PYyiYIc7ywauROJl+nmN61LzZkamnx50eUFa20eOZgzw0AelRGJo\r\n68IVg/HSSGka+ghlKEZcWshbHDE248R71/yS4DntnhNy0Qy5MSxpvET/dQ+Q\r\nLjwRlCwrpnPDRm3OJ3yEkWGLyoKNmueodaj8+sVeCIDDDwCJrFBngezami62\r\nUy+tU4BliHbJiiPiyxPh/l/Z4UPldcixuabvnZG+zx8B4GGlLXODTIwYB7uO\r\nY/nzAtQDWY+rJRCyV05TykHfq935XZcNiBz835IbtVbPOKu2g/1yZeSE8jy0\r\nMltkWW75Roy+M7QGRo9QoglO3bIpbDDarik=\r\n=R450\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"590020431978794ff2128a91f19756dff9dbc37b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.6048fb563.0","@material/theme":"15.0.0-canary.6048fb563.0","@material/feature-targeting":"15.0.0-canary.6048fb563.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.6048fb563.0_1668615427331_0.6624432525799209","host":"s3://npm-registry-packages"}},"15.0.0-canary.3777b03cb.0":{"name":"@material/shape","version":"15.0.0-canary.3777b03cb.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.3777b03cb.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"724a2e5b1ab05c01af2bba36910fc39fc4d58cb9","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.3777b03cb.0.tgz","fileCount":14,"integrity":"sha512-nFb3JXxwIOfqvsRGAoqbbHyW8wum6NLWmYKcxKMF+FjjMjN7YZp/Sp/GIsKQiQVZLFBwJZgi8GBUrQ/hx6KXTA==","signatures":[{"sig":"MEUCIDNDX5aL4y4oMLxpGR8la9DYcx6jzjWtc6xF9DLxXgtQAiEA/6i2IQlfmxVtI+XzjVc56J/08p2b8kV3pJ0GeScC6Ro=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdS66ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrRQA/+NEgmSy1DrL+TLGH+SwJr3cpFqu3FXVgbSJ+W1tV6M5KgcgvR\r\njdbyxbJIObWxCo1PAtP3FEOijMDNFhaq/2ILgrN54cXiLn93rgW9YH9X858x\r\nO2+9wNkjW4BCrOaPiBq74K8u6nLcuG5WEODUMqCFjn42ZDbp4AdYca8cLmkI\r\n5m3l4z+vFV7mY67HDMAreethh0YY60C192XfI32nXrChdoWNA25qgBZTA3BC\r\nK3LV1FCVgNKzeiVVpibCBTw6/28I4bWCiRyHqlX8s8F6T8aEPxtwNJKWZTii\r\nCLNz5fVa5OlXycKyV6f1XRbefdc+dMrYVlOVWX/6Xja/b8bVT+ehi7eHGVcZ\r\nGZURhQVZJtWl7o421bnbX812D63H5SWGBe18sVFNUUIg6aWW+M0UhpBbOapg\r\netoluAunIjM2I8t/2UWdM5+Mq6ommeQcMSicrzcKXh95bwt7cI1l3TlX6kQE\r\nTgxJ0aBnF7gLF2yhpxj6xY7/XclBAuMGv622f/oVh3by0PsJgNIzsBNbeYqA\r\nAiS4mrPVnHHEK7hcX82x1xjiZhUbcxLgXvotRz6ATjNI70aMsIRrG+2lhRKp\r\nRXf13DMv9rRDxgMX/osg4/ChSahwcZK5quqfuKNY8qUJBhLE4yQ2XzUPXhmK\r\nScQSgE1ysWAqeCLTzqMehYjdayrndHZvsEs=\r\n=QUAY\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"e02f6251b19559b874fd1998a9f0bea7d651e41f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.3777b03cb.0","@material/theme":"15.0.0-canary.3777b03cb.0","@material/feature-targeting":"15.0.0-canary.3777b03cb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.3777b03cb.0_1668624058720_0.4959198158063811","host":"s3://npm-registry-packages"}},"15.0.0-canary.f7f56fff7.0":{"name":"@material/shape","version":"15.0.0-canary.f7f56fff7.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.f7f56fff7.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b5e1b52c22c5b6a850b3ea9f7386779a004fa716","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.f7f56fff7.0.tgz","fileCount":14,"integrity":"sha512-MNt8wy7Cy5IxBRpWD21oITpbeMVRBdZKi+IYmMgkNCcNmncZx5KZRAco1ZobtJ3ad1BHGD3hfUgfAX7szU5QwQ==","signatures":[{"sig":"MEUCIFTMgmGb/knYwhbomGn+kz72p1wW6H8yd2m853tCalrVAiEA2MvkrQKWbk9CQvsbnZ43etdfyhll2ILinvpdtOWT4vY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdUA1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoxBxAAjGvSOwXzrHwsgk+hnEUeEi2pU1MxpkU7krhRqnJqnm6Jtuut\r\nGHr4LWzJDjdTfi0b4ZWTkt5OcblV+GwkcMDRly1cgZHKuNQ9/OdWJzZvug1C\r\nPjrQGl9KySd1roymx54HAnEK8wBNUuVeGcL+RBCjWQXjrutSQ4dZ9KooWHXx\r\n2AW6URf5e04sei/VnglXacKRy5icm8b9ccHQxV9YfcWFivxKcyBExC226NCu\r\niWeXsDYCc2iaHZQBxAFUbHXt1K96fPwPdTf/BBs3kD3nigtu496RlnzqWIRr\r\n3sZoexW/DwNaop24pAcRojiC/uW+NHnPY9PeV5x0bSSn75kk/oUu4cUwQFr/\r\n5F532gnwLT+vxI4iD41S3Fzqy4PoxqdunftcPgG5MJCY6PyeF1KKqpGB3V/8\r\nhV26FxmAHMvp5xbdH9cAhY3A1NCzD4/mY0gbQsEPTkm3RpiFcmixBenuSmHp\r\ny6l0eL3B4+Y+HA1IkAu1UgvafMUtRs9+tYWIpVd+RMQqm+GMcIdPV0+C0dr1\r\nBFo3JvGDsS7EUWY71mhehNiXgXEpf2tJmB+lUw24azGSyI9oj/Dy/5w2l5rH\r\nYaZMQce3W+n5Z+TQKRCIz1yFIJ69x56d2OC6sAWX93qtPFBj9T8lcu0miaH6\r\nrwzBoQ37TCWjhc9ig8EgZLrmP79rSjV/UX4=\r\n=3lAu\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"bc90613e754d04f738197ec3f3f4602e9b362d8d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.f7f56fff7.0","@material/theme":"15.0.0-canary.f7f56fff7.0","@material/feature-targeting":"15.0.0-canary.f7f56fff7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.f7f56fff7.0_1668628533221_0.45340249642778896","host":"s3://npm-registry-packages"}},"15.0.0-canary.7c73f6134.0":{"name":"@material/shape","version":"15.0.0-canary.7c73f6134.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.7c73f6134.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9aef29bf2b79d1c08f38f29a8fc1f4d1a91ccbf1","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.7c73f6134.0.tgz","fileCount":14,"integrity":"sha512-oDDx8fxp/w0BlS0NbvOMqIO8rCIv+iI4NikdLSVCDAgAt/nH2/skXKOwVvxi3QrLR/Kogg/sepLM99IrkkTcSA==","signatures":[{"sig":"MEUCIDMNp0Vm+dzr/6FXkYXIjI5fyAAju6rPc/f74EoiOWraAiEA/I89+RawRsuppLA/n5xS7X37P2iQRZmL7GWdscvxwvY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdUENACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmonWA//R6iSZ68T0ZlLEwmiSg9O8OEhhglUsD3+EwKblpZp3+pJO/MY\r\nS1No1vdwI37pk5PgSD8km0T5vWZ0LTlBuvi928VHW2Y4PzS21BliWgHLrT9J\r\nCewijPAWWBPjHNUbhLI/y9Nj/mb/mCxKVg0FbYktltYpJ499Uv4UnFNcDEm6\r\nJZHSRq8FSM5suKGgcJaFsu3gqoF5kVolBUUQdMNeS+YLa4W3o6ZAUlm2J496\r\nLuyxAUjvYDY/tCWvbDIUPVIUopELnIeS1B4bgZTIdxigh4KvrXELsM8mahyP\r\nKzpYYa4PcNG3jhvg9cz/oEgJizuLX31TuDK/LIii1s5IvJnbMQooG8U8GFXY\r\nEiv9R0J4mvZF3Cq3AYEBO+Kwy8Xll3a7kUd4FwWcz25MaAQ7wt+dvAuNvyWA\r\n26o1yBRg8g3TFK9tdk3+qLl4oqQSPDMN8iReNxoaIE+0whBzJI3kAb+F49pQ\r\nT41TDzCbsqSIbrMLAxb6M437WiPIw2E4XXiEVBIj0ZGZzLLbF2YO5hW1szDF\r\nZNgnnkCWea5y+Ycl0nRzCaZmZJYq1zQqEqLfqRhOuvulIVRHSS+4mW06C6Ow\r\ntgpJ91pSVsyD/FKesLq+czShAuLUqTEVB7f3tm4I4Nr+owAx9qIfVxbBpoW4\r\nMl+OnQqCpi1utsXO43spWFBQ1tufmt0BrxQ=\r\n=I8NX\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"14f53e565ed77defe907254a486b9ecce4b45146","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.7c73f6134.0","@material/theme":"15.0.0-canary.7c73f6134.0","@material/feature-targeting":"15.0.0-canary.7c73f6134.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.7c73f6134.0_1668628749017_0.13345517469098334","host":"s3://npm-registry-packages"}},"15.0.0-canary.f1e037150.0":{"name":"@material/shape","version":"15.0.0-canary.f1e037150.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.f1e037150.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8f95f83f5bf87a2a36262bd64b50a50d82494ac7","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.f1e037150.0.tgz","fileCount":14,"integrity":"sha512-tUxgDbZC9+VD3OJatf6G64unGalk6XbD6Oy71bobBFwrCPSv0Bd64oYwb7MKN/dvtKi23oQ1Yoq7LzgzkXtaFA==","signatures":[{"sig":"MEYCIQCgp+DGyV4mMTS9yVwJVGyE8vTznC33W6UyI+KSKvIWwQIhAKq/JelvrEIKkKxhC6YNJaVbM9hgJeELddfTZD1MC8ly","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdUJeACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmolrRAAnmef9TEDpbWWme+xGZ1G3cX37la2g+Fd4lP0ogiDsEQUcPmm\r\nPPJzUynBqquUpFwEwnyYmeuasWWAMCWQu0xh5CsrCu9qQupU/aTfCfho2Pfn\r\nmt9cnyE4RBpUj6dJ4q6ZHt7vheUt1yj1Ol8+pqVqyNT0sohNU8WS0uNxWXQa\r\n+g62bShgig4QgOOaAVETGx3Nmi1fhYtLHQENlRVy2EYesivSm7xZSWNvxm4V\r\nkJJ6N4BGiuDkx+DPep4QBpjZj16l21UZRp/kh6qLX7Iygd48tDRC24gJ/TeP\r\n1O+7qM/2R5Zl38tNMiuHL9TbS7SMRER1N/mMG5jckvAd7q6EneXUitUR0Rkv\r\nRKD7WKzXJCK3vXEtN+Hb2obTSlQonBXlkoLessQlgCck5xPsV+sB16NhXPci\r\nCJLMJdUX52lQf6+MQnjT6pKHn3j6rKVVkTB28B4Xhcu9ZqbLR0eWp8c4EsJ8\r\n93M1Yb3V6Oyx0AH9q9+M/cImMVYxYLTKOLX+TSurLSIlD5dzKygmDV4tuxM2\r\nEW6C4AaoR0q3r0O1PnRN6N30EYMsP4hdqP6kanrlXMP82NYBR+BbkcqM+YBN\r\nyv/RW6mchtsm4ReFMsaMjFTl4tw3I8WF6JlBkEtUvkrvHJEQAGgbCMdYtMgP\r\n2d3zgj6bp17zgjpjwzTruQ5xRlHrpYIhw8E=\r\n=Leo4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"a639195febefa28bbed957ef46942b3da6a4cecb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.f1e037150.0","@material/theme":"15.0.0-canary.f1e037150.0","@material/feature-targeting":"15.0.0-canary.f1e037150.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.f1e037150.0_1668629086540_0.8196651362691392","host":"s3://npm-registry-packages"}},"15.0.0-canary.40b18d043.0":{"name":"@material/shape","version":"15.0.0-canary.40b18d043.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.40b18d043.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"70fad258376df3cc98fb757714eea60fb2bafc84","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.40b18d043.0.tgz","fileCount":14,"integrity":"sha512-8sT5WgxAUuvI0fZT2bYiwmsib3CTK2drhUFzf2qNfK7Y9TFabDtqWA3y+j4xvcK/r2MviQ8MMpXs4pVr0DtW+w==","signatures":[{"sig":"MEUCIAcfCLbZHftatMUsOBQm29CcXEUs5/RrMKabMXf8dypEAiEAz+QGKqD0qNIarpMeCSTXgY9PU+TPdFXR7A4qNrBDIe8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdWsOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqD6xAAhpldVFYNJf2v0YjH5XseT0Jk7fJMrbZUDoswLykim3wz4dze\r\n194kmf5JRJr/pKqRYWRVIvz7BkT02c1kS1PV5ORW9El2qZro68ByTBVtHiiD\r\nLI4pS5TsqPSNUQZkV7+LgN6EjydMLRffrCvI+bVjhB9HkFDnjQByGGLUBR+h\r\nwqGsUvSEiTrmndd2iw5ReshNBV64gp579FRbuWCJfx6nzJrofErLYUpFqlR/\r\nx5XdTYKm7N4B1da/C12Ebi2EGY90ikXwk2B9vGe7d+txgGrpDBAhD0hXqd9z\r\nkJ2u11X9gE+q03B+G8qHi8Fy6l5f3ynCFxWmS9epEEmwL4HJyTqAnzkDVDYk\r\nxFITtGpUNOerEGgWcX6plDXtSJt3+IvEF2metRG9i2qG+khE5dhnkbrtYzZ6\r\nDCYbeL/aTLXd2Mj9zZQPCgyvZXPRflWYQhkWqQhiTPbdiwCgUyaILOibrBtV\r\n5HrEJarkW9G8KXMBe5jagVbFxCWKreKGS1zl/VNhYmTR3JyqSoDMfqHwiOhm\r\n3JEzvCHlDk63LPAxtn6N8PRUreB0aYHUHHIQoyzyEXxj6oF2/t054lwrIYDm\r\nmKG+Drsf0E+ShgbcPD9nM014cLkUlCeKb3PdkrlOY90/YKtbMrQSPIpi99Nx\r\n+lJDCmYEXK1C+wNpdjfNHOfs+FWYF+PwwhQ=\r\n=6Agq\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"9ccfc97518c89cfcc2b5e776dafe81024d137f31","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.40b18d043.0","@material/theme":"15.0.0-canary.40b18d043.0","@material/feature-targeting":"15.0.0-canary.40b18d043.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.40b18d043.0_1668639502116_0.6570627797409019","host":"s3://npm-registry-packages"}},"15.0.0-canary.86bde5c06.0":{"name":"@material/shape","version":"15.0.0-canary.86bde5c06.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.86bde5c06.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"55ff082dab948addc4298c4c9a6c2cd91ae3563b","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.86bde5c06.0.tgz","fileCount":14,"integrity":"sha512-O4Jt268ew2bXKYCqLhAvqkUOsSjVqgSQX2C0RcTlM78k/1v8tLa73MOBqU6oZpSIHUhDNs/2FGrbmFGt/nB6cg==","signatures":[{"sig":"MEUCIQDuLJY63M90XX5+Vqimdk/D24Td+Jq92jQ181AH3OQvJwIgBJWiTvKcp+x18mW47fXVrdUzxSgqPxbYfS3KjpvcNRY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdW1wACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrCWQ//f7LmhP8mpi46pqNFNSpO08aZzHk7jYztQNofEUPTJ6oMn5y4\r\nTz4YlM36DDFaZR3WfqzUEOBpopyr+g6eG5Gn6WFANk/RpIVKJXQKpK7X6dAj\r\n8dKNJu2grz+GlKNz/6uz9DjIe6DQA1SmdbEBjZ4jY9e/a8FPlao8mk8PNy25\r\nxjhKKYsSg/jdvMZWIQ1G9Q2VCJsZQbqaw6F78P7JjN8jiJWClDr9TamNsha4\r\nqlxbzqVJ6Tjm4XIPAhMbJS5ihMc2AhpCi7YrfBa4zHiGvYi5/gBAkXX9mnVz\r\n4BjJOt0kXU7lIw++1oZB8NI4JZI8r4Yjb9J8arv1q7bF6DihvN/yCL+Tua0A\r\nHeaybjiKT8w7BM7pOy7h9n9Ajjm9iNJdePl3ve/M9laYWwkO2qKdpbmNtpNJ\r\nfCicX9M+1UKt41NgxF64Fi755VzzvxE8c4ZjwVYu75E1cIdokNfE+jtkq8fa\r\nWbfhgMKT34oxz+jl3Bp0fzSLPcRPp+wGiGg79nXAP6gAQ8yytsQ1jzwRRklL\r\nkViZOnn4i6JRCbqmGY34xGi2qD1OCqi6xKvsBjHJpTf4vVlCoS2/utVNHrVk\r\nkekMue0KTNEunOI6/7CCEsGwwRYb7zlQramsk4AdIi06sUDrfVjuNRjvxCrd\r\niYlY+LQVxZkbwDP9vrs1mYnn/vYSi8Ox9bQ=\r\n=B3U3\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"b9cd39d4936a1961536e39eb1df855c5164d5840","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.86bde5c06.0","@material/theme":"15.0.0-canary.86bde5c06.0","@material/feature-targeting":"15.0.0-canary.86bde5c06.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.86bde5c06.0_1668640112380_0.4846637480024143","host":"s3://npm-registry-packages"}},"15.0.0-canary.bb7751002.0":{"name":"@material/shape","version":"15.0.0-canary.bb7751002.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.bb7751002.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"931a0e185f71215eb93e089b072c5a5a6e2196db","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.bb7751002.0.tgz","fileCount":14,"integrity":"sha512-lNADDwX1KAvGjPILduUpSnBntsoddGMSYPPzg3Hzmul0BgJA/QFTnS3snJ/khbIaGPmRj1xLevpbRWHYTu6oYw==","signatures":[{"sig":"MEYCIQCoCPnzV3AozJrukS7JrUsHkhtqHW6YWMOaMqucQD96KgIhAL0+n3ZwQ4xIUPyrYHrejqpkbJC51MqkKdY0RtuUP8gG","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdXlwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmohtQ/9GQ+uBbBWVw+PRN7z6xzGZlHvCY1C1BduwXV+LpXOW3HXQ7NW\r\nQHRSKflrJ1/MvdFQQyIbQaqJOlWH6mRpbYkwuOEeQjxiVC8F8syHVNG4v7oB\r\n49IN6w0ZnBOwK886ZTl8Rk+AI3BpH7IRaX8zYWojCOgGcO68c3tPETbeflEl\r\nuyYJckHuMo0M3zZAZ0StyragMVLnAFsO9nR0cPyVzpi3fhZ5iw0eK3j9uGiz\r\n9v8RVjfmB/PaXuTsT5m2vclCI2uWy8LK+QkF8F6fa9ccNDdraPuilzhZ3Drr\r\nX0SkVOrmHb0WpUOveXAjY6Ymyj8QS5Q9tC/5xGCFBLSGrb45+2we+nhxXH9i\r\np8jP/dQt1ap5aQjMZ59XwufBN3GzFj2Njnudemz+7FRz5a0nPWw7RsJTML0G\r\ne/SkgLa2ea1e/lRTCaXUIcEIlj9NF1dSanKRgBz/hSG9aa034EG1hQIDoqcN\r\nq6HXBA6m2gOVuLaOaq96CX9L7eOkbvuzTf63bJXeR0LpQ+rH5RHMXueYSMOp\r\nDwXH/gWuLmoUzDl2dnZsWVOlHvJXK2ZVVgYWFraMJCHo21inBnM5pMpxTVTs\r\nKs+9d0fs7hngCCygf0YRNyQu12umub31WlS6l2Ju5kqVZUE5K60jN9WuaEui\r\nrVxzKklXVJhumGh3GFhnQjDjuxVxmkn8n4E=\r\n=ISCd\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"f83cadc3a1330a69930926dacdce7fdf10432f98","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.bb7751002.0","@material/theme":"15.0.0-canary.bb7751002.0","@material/feature-targeting":"15.0.0-canary.bb7751002.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.bb7751002.0_1668643184061_0.2163325951436914","host":"s3://npm-registry-packages"}},"15.0.0-canary.63aca9af6.0":{"name":"@material/shape","version":"15.0.0-canary.63aca9af6.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.63aca9af6.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"900d5a03f9b404b10f94c366e9b1026f8d04ee4b","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.63aca9af6.0.tgz","fileCount":14,"integrity":"sha512-mRmOYX+7B8qQiQYslMhqe4Jdti/PVKX19lBBQnKISXy7v6ML8uduYpkh1xxlcOl7GXl6vkZK+UJR4P3UDEntuw==","signatures":[{"sig":"MEQCIBc7yjlKFnhmF7UzUVqFXN1haVoWx4MaVnAb3hvFPaQFAiAw4RVW9pqi+EbM61ns82lnR64XoQzz9uelcLvFGPvhFw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdoTdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpF3w//fRWbb+gdIl/uk32fdSRUw7nJNrrEdF095xMdwRQgWjtflGoD\r\n6EQ5rf5/St5jR419pZLPNwcVF8oT3+7jwmRQ/xcPv4TEF9/tTyrvCh57RqLv\r\nJ8xXtqFIdV8+rid2sLXji4tG26BVR2pK5Iq5/n/tuLfkJjF2tMDO1bM2tuj0\r\nJ1lpqyXBGxzSywBWTlz0Y0fBYaephvIbywLl1Ms51fP5dtSALvgi3fJl+L86\r\nQFVEsx0cdG5RzrBF93pqskzlLCV05Lt2PjO9k49Rmn+EKpOyIUrnd7RZvmSp\r\ntg2zNoVcDQ4TEQG0uJfPZSXAsG6XEpfUtOYQwh+VkYf7Nim2kEo2K4CrDFfv\r\nl/6ee7pJDoTrqAUOAGGSZEveQTTf2BoipVzRaXG8KyvXZG6L3yedMpdRDlWg\r\ncAavWdZsx6N94FyRuEftpnsF3c4PmeDEw1RDGO8WNsgZaE8qG1zpP1jHj8/f\r\nFqSqsvdm6EnvnR2RUT745Pk2gN/DIpExE/asNbzOobxH9dA4YXS10uiShte6\r\nsSZY9fh4fXI0yVYyaIKSna34xpkaApbM+/G3bJ9dFCsBpFXOG1EneVmtMHO2\r\nKUco1nn1pD02AiwwGvy1hwVTOHWKClU20uIaBzUTyzwHA8qcrQrkfrWSGMUO\r\nTUGlTtoH+te63cYH4p3rEgAX2D5EGo4FFOY=\r\n=ySOz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"c2c841973403116b6a405bb9aad3ae8476bc028f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.63aca9af6.0","@material/theme":"15.0.0-canary.63aca9af6.0","@material/feature-targeting":"15.0.0-canary.63aca9af6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.63aca9af6.0_1668711644868_0.5533947425242536","host":"s3://npm-registry-packages"}},"15.0.0-canary.56482dc2e.0":{"name":"@material/shape","version":"15.0.0-canary.56482dc2e.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.56482dc2e.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1d00286c3aebd4ad54d1597938ce553ea5d4b1ad","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.56482dc2e.0.tgz","fileCount":14,"integrity":"sha512-fIliiA5d5KGDfaEAc0VDD4bcqt0QNTB9CWnEhbWjr56syDk7wZN3y+G/vdD3F8xPBPFxzF+BmJpHyy2H5HPAEA==","signatures":[{"sig":"MEUCIECjPaB9tI+qze37z2L19Ocm9kNRgusDmSm5C0NrKk4CAiEAouDVW0D/2IYSGrMK61cbHmI2Z9K4BsQ5dCoxnx7IX14=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdq2oACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqLxg/6A09r1Q9vOO9FM5nW+gMSSepVfIV/BXLaIeq+MYZCUTt65PE1\r\nCh902ilJI5GjUQVx1NsplwVyDPb1xXMIRoknr6q10jvbzehqwAMuC7DByP73\r\nq9hOHyvSHQ2xAE55H7idOgyFeslExw0O6rRaNVzsVHLAD9aktoxkf3GtuAPi\r\nMOs4rbTGhuwYjWnbA6wQPV7Phn+ImFVhzikydYJE/N5gD6hWpkfaS6ZLZC3r\r\nG/PJ9FC2mrV5d0GxGd1ORlQMkBZ1Nb84X6Ix/89SgJq6/58ELI7DVg48FKBS\r\nNdRjsq8ZEjuQqcM/IPQ8PLVP6TeT6RnMuiD33sOFuvtcREKgEhF7mtJiHjqG\r\nvdS9rmalIRRzQQS1chdG7HDamJVglWvfYJ6voJo3N3VOz2F9ekONK8vbhjyO\r\nnqb/9AUJR1sQ9vS2W8ZEVfBMIOlUBZRF3TsA5WCHGBtxRO3PNdgL+kjdesVN\r\nEQmyVDpXGiUD1bf151bCDOgN6whpQnQT4O36SflVOPmCEMVjfRorwKYUg//p\r\nXI0x/QvcXAKGFYIkRi4UuyGHFxYHdTpBR6KCS91eHS/MV1AyWGK5VLBLlkpE\r\nb4GiMV/4DgJ1gmIkX0o8Fc1xNfpMBA9gW87p3206f2apvQi+kcuLclliwisw\r\nIqsp4oup0zg95NL4HVzEgoDP38g7GXtZIE4=\r\n=HSuC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"c65945fd8948c8e5ada035d0f2538dc2ced7a28f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.56482dc2e.0","@material/theme":"15.0.0-canary.56482dc2e.0","@material/feature-targeting":"15.0.0-canary.56482dc2e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.56482dc2e.0_1668722088523_0.8721546523447075","host":"s3://npm-registry-packages"}},"15.0.0-canary.953e689f3.0":{"name":"@material/shape","version":"15.0.0-canary.953e689f3.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.953e689f3.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e29c5f013c99b0823604130f51d066f2dce8cac9","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.953e689f3.0.tgz","fileCount":14,"integrity":"sha512-viKB7G0obfIOWEDnaSzVwEPoAGB1mNJtoRrg1tjSQn3PMt5cOXXeyF5zdf0VlKahA7UTHPFm92BBBaZt+NoPpA==","signatures":[{"sig":"MEUCIGz9FMSoyiPfjvcXX6mOixGuDQ+UwN1HO5WqyJ2L9EhiAiEAmaodfFu4yW03yQzeaCGE2esdEmdqozNcftE/OqHVJt0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdq/hACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrSxw/+N40QvRT4FNSiTTYVtmlA9gv3a1kNm8ccE7HiP47utS7ukDET\r\nRJuiqD5LutrSm7TIIRd7uiFuKiviTGLbK8YvDQKxfuCrnsfDDzR6aIQiTgug\r\nGmIadnRMXMFF92DhEZ1hz4LMlNSCIykHQfwOrTJiOSq5iUQ188V52kwSqbVb\r\ngBkbg22JuU1QsPQtAdwi523EsKGRv0qOR0zvzAEuus4qT7ykV4DsyDLvDUqk\r\ndGHoSKRRCQpeBOTWPheaBjUXS0/gWtOAYjrV99RjHXqaRtoh+SOlfUOsb8/h\r\nuM7CMz5um/hgtvcG9i+cWNBZyjbjijX309GxA4AQO4q6OL4HlSW+kIGnr3gi\r\nZHh7PWKbeG138fQVdN1v3uu1jhdIU7Nh8WLwEfPabRZDWg5XTqPvW2r8oP8Y\r\ne+mFR6PACaHEh5/C42/rR5xlsmAXHyYsKUuzg9gS/Y0PVX4jbVX+9+vVoilI\r\nIjKbAp7Y1PNQod3XqM63AfL/CZQPCXTpCKXfTQ/+dqnzWp58ST3Q5FcjE5c3\r\n5g7ht/yU2flY7b1JKFaz0VEQOM/prf5aLIM9NEDSk4CVxtzAJCxjCPzUV9JB\r\nqv8NQeM9nnsSzeriX/1FvbdV2k07A6aZ7ng9MlOUXoIdQiIKwnFdMz0cm7xH\r\njBHKE64jl1KjAjdJUX4UqklEr8LNCw532fI=\r\n=sJ4h\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"9b9adee0b4f10a2d6d77fc10e9291c3aac8be42c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.953e689f3.0","@material/theme":"15.0.0-canary.953e689f3.0","@material/feature-targeting":"15.0.0-canary.953e689f3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.953e689f3.0_1668722656827_0.1317659866573746","host":"s3://npm-registry-packages"}},"15.0.0-canary.b5606a793.0":{"name":"@material/shape","version":"15.0.0-canary.b5606a793.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.b5606a793.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"25d04fed4676e41146c152c29075f00608b57d03","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.b5606a793.0.tgz","fileCount":14,"integrity":"sha512-R/IWy9X2EWlTzb/7KwFIWXSwVF2QbGh+LqDDPyndwiPInMjRm6k5z3buo42RxWbjvYVecdVUrJTtnBzmP2Wu5Q==","signatures":[{"sig":"MEUCIQDzl7Z2cYQnrt0gEGBwSXWziSG0p7oloImBQVnA+ZHGRgIgW9jzHLtzU2ANz9t56BRKQdv4e90Ergw8HqMywwhBUcQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjd1x+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq9+w//boCVYqAXcpxgOnKZYrwlwB3FOl0sksJlzExSVGijC9aZ6F8Q\r\nyWWZ6c9gE6niO6dKNW/D6wBwjmdFJFsgkXjrRkOsnYzz/iUEJKP8uXNNSLgK\r\nR5fqAEO/0JARyx1vYgg9QyAc1Ne/QUDhvdWPQHob/vcu52MlWBes2wmH+fLb\r\nmALfQtTef7+NU56AsEFrh2EHZ12T8Ao5Osy03T2xFxeOYR/BWL2yWs75ilK+\r\nRuEmEbgmnAjerc3l7IO9q0q9gtxT77M57aHeCWe/Jb5xZO8l4GKpDX4cRh84\r\nLBCpoabCI4qBjkB08mdwUG+13c3pEoXgVFE86jY56jRUumuVg9D6gFtc5tea\r\np6OYMuRv014nX+rKJKoQMqu7UV0KKmaURAN5Ei70222EP1EmTUXFilvYdd1n\r\n9e1oLX0XIo6JvveFkafhqPB0BeIn9RTNuk26SScjI/3NxrEMxRan6Np7fCUm\r\nY1UR2FhLlPrtDbM8g5NgY21si3EmAnk0U7jTL75G19TTRuLBi8DUVTAKBhEy\r\nns+2IzsNiyzZm6k6F3JU09FGd+TvjfkwnFjtk3QfRe4G3Zp4mfv0+7i4a9sP\r\nTSImLrMsP3ppBMTofeve7meoUagF9WeHsYPeyJJzm7JUCeBeWhUaGT0t4x5O\r\niUfn5NvOSku3XZZW7C5hJ1kBLanQEfqD5wk=\r\n=ctLh\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"681685532cfc9993a6190aedd85bf5cd1b3f80e3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.b5606a793.0","@material/theme":"15.0.0-canary.b5606a793.0","@material/feature-targeting":"15.0.0-canary.b5606a793.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.b5606a793.0_1668766846195_0.37257375404047943","host":"s3://npm-registry-packages"}},"15.0.0-canary.8c5675942.0":{"name":"@material/shape","version":"15.0.0-canary.8c5675942.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.8c5675942.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"89f860a5f9fd47027c197ea91f5de88f07beb893","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.8c5675942.0.tgz","fileCount":14,"integrity":"sha512-rSP2BUdCAdGaNQ2Ibpe35fifikezhpXPSbV7SFQ8RTP06uUuiCJv3u44Z9KCHr69NCe6WEmoOI6EWHOWccosOQ==","signatures":[{"sig":"MEUCIAM1IvuVgLV8en37mS7A1W0246WHfGppf+F5fiEyiYPFAiEAhMuGIk2Bs32Z6hy8usw0V7f//mh7QDNS6SrHzinOVRY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjd6GjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmon/Q/+JX9YGCxVbXlNNcyykZXwiMmw0khUNwxqPzZfTjHoQgdZ6ANS\r\n6qd2yUN2vTs7NHePu/srcMFmBLESS0vnAUnFGHuCwzw8jFwOBDhW1dkNLoNy\r\nnhBQZd1XsmAiiO1XRo2plTgoolXo0vgrx/0tZdA6uHljadbFUWp4KveqoCVl\r\n/kPGWUlTN0NP//pwLXjZYLG3oEnuTElvqxHz8mjt+PyvSe3Q0x72mEktbaa4\r\nU8A69+TXLMZJIVrLBZRn74T+gKhjFZaunAmYQ7CwM7aKpMlr/WI+L7FqZd6n\r\n1LGBWfrLbRkMWcVkc00lc8UxYiW8u3YfbL0GITrNg+g4sNww+oeDVvm8vTVe\r\nugXfXsgC7Dmmfrd6AQ0wuD4qEAICMU2oU/bAGTZFHvHoKYBHZeALHPzlMcD6\r\nSWx5xLKGcOOUGbHzPQ2Oi4n3htZH76blWZv6LEHROLl7DAvNBeFOq7fkNgWW\r\nqJHiA89o77N3NhAjMTVF4XEcIS50InjakZJ1hUfDeOkEO0zdQvcslSGlVXi8\r\nRvt/MRuZFJgapVKSUOwKuD7TAO1w2XE8yYyH4elvva/RtLUd47XyvAwkK5tq\r\ntaCA2qy8JkUlhNkZ8YCWA0rdSjc0WaKm5avk4NLL/ZIpA0XhgsFkEIZLEN/6\r\nxb32QVHc5VfRNI+Yj+Fuyf68aiWFG6Ff5wE=\r\n=IIRq\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"46367ab28a14e7ab75dbddad4b3a00d97443debb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.8c5675942.0","@material/theme":"15.0.0-canary.8c5675942.0","@material/feature-targeting":"15.0.0-canary.8c5675942.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.8c5675942.0_1668784547393_0.8499041310785478","host":"s3://npm-registry-packages"}},"15.0.0-canary.697fbdebd.0":{"name":"@material/shape","version":"15.0.0-canary.697fbdebd.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.697fbdebd.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d80c9f0f116c2c411d7bd15588f1e01e6df38af6","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.697fbdebd.0.tgz","fileCount":14,"integrity":"sha512-CCroazSXIewYQrx+6mT28QQ2HNNwoS03Ja5JhDTXlhfb0AWWForhVFTwlyK0LzDquQDZddsSMvo7ulyNK/Bt0Q==","signatures":[{"sig":"MEUCIAdKM2RQJiePNLz+LIfAszMOoOUop1mRxKzpxgeOP61xAiEAoqGcg9LSl4swRfh1dKy/tbPv2sh1sIqMGWLOCgRQuKs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjd7ofACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq+tg//ZaIJ5Jrcxr8YxcltYVGkHYNRJcL00SKUcASB65ScmY7Du9rX\r\n/MK+K3ICU6Nw+JspobI55zmaIvZM2jpXP8pBFYGqBQetJ51rebgx7XAv0/RX\r\nKXQh2A3hlTpBkpMgqRFUftTBa35tTuAMqobU5Dswc5KMyh74gq0WpMGyGuD/\r\nB9/eJ3gyV3846iipmUpM6GGmGQnyuvpheLnzhiz/RfaHWiHSSJwTS2bXyJx3\r\nxoaQNhrLZtRSNn3+AvB6EEeKS9p7Hxrm3tdV/Ujf0NSIj+6s6GGkKj5LnGV8\r\ng+yd6x2xvzmFkD6qhwNj0C3KOX2ClY8eZ5ZFtfcLioL96nCNS5Lj5lOuLXPG\r\nm3iSTFpSuykW3cjU/wpdLhEhhl91kHJJlVtCPFG+cvXDIGpoyKdLgBt8vAPr\r\n7ZuR0qDazV7a6P3faj+E6AkC6TQEl0MzME711Yp+26Lv6wSusx8xdu4FlaYd\r\noni439nqI8eyRXtK77dUjxTsR/hN4UwJn402W6jXYB/7SkB8K6HnKyfuhnDf\r\nyPLaCNrQWMz7khzIlZuMGZl3PMRE501xQkjuQBSZK0dUMX6PnJc3/kCljc36\r\nNdesLWabIc1VoqcUbYMlCXHyaudbQtvWkDW88WvUh9NhGwVJEk2A/QMPJi50\r\njQzg9gDOccqp2axf6eWDjrc51eydT65UJXg=\r\n=zEgL\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"633705dd01d68334d80bad5e354eb7e71d9fa30b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.697fbdebd.0","@material/theme":"15.0.0-canary.697fbdebd.0","@material/feature-targeting":"15.0.0-canary.697fbdebd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.697fbdebd.0_1668790815000_0.361547184767548","host":"s3://npm-registry-packages"}},"15.0.0-canary.d58410453.0":{"name":"@material/shape","version":"15.0.0-canary.d58410453.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.d58410453.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a651f9552d4f39b2fc21d055697af4e4f3cbf488","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.d58410453.0.tgz","fileCount":14,"integrity":"sha512-lfKgUgaQMc9BBvL+XHW15tnZWj9zxwHSK3hmNPZWxTUJP59si8c+P4JBKo9gLrovEBFI2R+y4TNowPpLHQzpWw==","signatures":[{"sig":"MEYCIQCRSGSmqziylt8tOjxjAX3OS6KLG28X5O4kuGqSTO1ZmwIhAJ0AFoMrox2gNXs0zcoOVy0DGvxIWkTlAwt5ZaS1M6ni","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjd9v3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoL0xAAjV9Hr/W2hyihce8JTa3Wlz8pBCtQCmN3Oy/bY8wtd0fJqWBj\r\nlvQr6ogGt5a4StMFKx7G/KFIkXL2uf9Au9MBfDJ1DOHOIQ5IrutL0V56kclY\r\ntMdkp5XDkYSXrwav0slhSMRnnrmPQOCvy0tQhkR9XVUVvlB5r+qPfs1+MkXz\r\ne/0b8jem7OFjvZh9EYwJjdqBGHZCywsjROF+aYF9o1iCuXI+DYw7dZzDcosA\r\nFNxZcgxABOHLiBXq65ADxqzqZP1scjeaSfK0FoAqEIdkFuXdLiEV5Ux2ow6H\r\n6rff91V9MYUli/JMa8qWgK8fWftPZVyWE9E1YLk8ZVkuDD/4hSagqsJdoEY4\r\n5YeHFlcKNA5zqWAR882OiLVGUXtDrT20whd8DiM1EMLHLtr3N9AuWeychwJ/\r\n/+5Bt9SiYgKrzdp3GyAK6pvaWxj1I1a8fMYkNlmlZxdINkqp6ZfQwnsM7QIw\r\nN6OKGuBtIHLSrTMzKkuyp2/WbtFk8A5N1BKHfVROTI390FBz4agMfeNAjm3E\r\nm3h7Fxk9x6O6A0/k61YpF59C5QslzCLAJPgFuRytht7sYy7uFbluGeHw0TEH\r\nsTGfj8cBaQgm8xUaE39XQK9WwOTuey8BX0PzXEU23HtO1WG7IrkGdprBO69P\r\nyNw34y5gB/eR7q47r/+tYEMjeNU2siUR+1k=\r\n=ZWDw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"65248afd9a1318b7afdd324f3def6a9c8e67c90b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.d58410453.0","@material/theme":"15.0.0-canary.d58410453.0","@material/feature-targeting":"15.0.0-canary.d58410453.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.d58410453.0_1668799479198_0.8170511737891479","host":"s3://npm-registry-packages"}},"15.0.0-canary.7971d6ad5.0":{"name":"@material/shape","version":"15.0.0-canary.7971d6ad5.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.7971d6ad5.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"089fe54d52a09c365a4895821720172d36b7bea0","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.7971d6ad5.0.tgz","fileCount":14,"integrity":"sha512-mlsNFWKOK38ECoB1onCFpi8HKRGgrElk0YioF3V0Joszp1HVV2Fn+SWoKg2LwWHaJet4iBYtNoCbQC6dH2YBeA==","signatures":[{"sig":"MEUCIAr3LLZTOfuO160Bc2btLh9XrIAM+wB1p5J/o1+ki3QRAiEAx2RxUawF+trb23wtTPjJO8ifWfoYUomE0u8O0zjyl3I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjeJeDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqKeQ/9GfRyaO4wzkYb1kiEfDz2AtBVCjxwoLPPdo142vbn5MTl1GJu\r\naVnSZbGiRN6rEbd2FjxAjdvmOiIAJoBmJaGBpX3fztDs92sT9m67r6q5aG54\r\nnw2FTYXNZmfFVuIqr/1qCWf5hISPN85fUww+GF0ohIP8W7VLHCwyK283AKi1\r\n8YsMYEJIQ0EjFwfdLMy4z27HA/TwvOv/drJQihRktqfXsJ3+1nMID8Q5YPUb\r\nqr7xi+tmZeBPQYN8nOgGc+WB7hINcTQgpl74XKVgTLaU/jf2zQJ5E8cJzpYm\r\nZUEHzGqaiyR59UAnLGx/SxfaiAO/PWAUWbuIx71kGyqQbZzh6cOqmrXtApJy\r\nkvRHXQCEaeRIAXgvLpdhYbtOycGVjOQGkkM/UAcbDrlwQr4zqBic47YZENdt\r\nSc9I0rPZEz1VStingQ0565aJFoQfRallceZRxeOW4/u6Y9nXRdgNHvahiE+a\r\naW+/CGelesSmHITiCSschI91Qp74eZHLPH3hDHMqkYLrPerqCbOyJux+z9UW\r\njrKiwWY6dfUsViMtpsdRJDNc0RlYlLiKWxrzLKo/8Eya606zfqTZgVnZBnDr\r\ncJQOasYIuTzT8vMJgluN2cEF2Ma0rJp0vgw75Ti8q0i06AlAf0Itzu8Tpeji\r\nVbaDeb/2psHO39hS0/9ZYLB8wUSY+DruBjM=\r\n=S31K\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"caa68cd6e7b5cf4d64e037521bea18e312048e69","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.7971d6ad5.0","@material/theme":"15.0.0-canary.7971d6ad5.0","@material/feature-targeting":"15.0.0-canary.7971d6ad5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.7971d6ad5.0_1668847490907_0.6055593128295336","host":"s3://npm-registry-packages"}},"15.0.0-canary.a0ae73b0e.0":{"name":"@material/shape","version":"15.0.0-canary.a0ae73b0e.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.a0ae73b0e.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a5df9e852953ce786fe29d9dced1b18c29bc7352","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.a0ae73b0e.0.tgz","fileCount":14,"integrity":"sha512-Vf7MDvBq1HsFVmcnK+m8rZYb31tl5fyUvLtpjuyilEEMUsvq7SAifRVqdjAxCT7SPpS67C9I2ieqF9Ad3HNpGw==","signatures":[{"sig":"MEUCIQClJ+Ua7iKF3tD2s5aIBqhk9piA7nEDpC8UE8kpQREBZAIgf2/TOmxNKEaUQiM9OUbP72tzXXtizcSHqBPqfFSZYVA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJje1ifACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpjQA//ZLJZBJH5PWm6F2YrS9KubmuilThNm708qN8NaLTfvDfomPDC\r\nIcwVE+VPUyZ773ZQl8o3kuSpsB33b06PU0I6RadcRNVqxZVFSVBny99KN6Ym\r\n+/0lmfqp6puwVpef22u7vL3e85QymacP4d8vamf7XN3zoHRtFhvmqiXgwWWD\r\nh3SdZfiFRa38PAYE92+sYf+n6NgJak8Jg8nlouKiLQaxXtFpjliSmuS7V3CH\r\ndN3XE23wwMWWh5WtIjwUbrx3VKGX8B/ml6p+8dplJUuMHOVTWb5k87oMBqCF\r\nXXZ6bUSkE0PzSITDqYFykJYv1rQCIBioXshVGsPkygtrsmTSkcsFlpr5u7oF\r\n/H2EMqOb+k/0nFdUIKplG8Nfr6GIolnKfDf0XeBQFHYLBv5g/vfoKpIXbjof\r\nPdDUtKCUt+0bQQxKhGdzZ+8PaqYlT3MD724IYXdTJdpMOlrhH8hPQ8ioDfnI\r\nE6T1/ZT3dn44rAgwpngsK/PRkJbbV2OKSYT60Yw1kV3BmS1ljF3ovSDCw/OH\r\npUiNeZdHpgw+VNa8BuVC6X+EQTHjLrZu+op2zpVippLFv9m6MT5WFBvXn1lI\r\n0+PK2pc+ptGpl5kIUjsPEz4dKh0hSjuL9TDenOCpTmkSUKjxozytJELCJ5DJ\r\n6q4VkCj8ZekbNHp3GhfHiR2Fu0nBriqBh+U=\r\n=5the\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"92b496120a9385203165ec42657a2edf41099000","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.a0ae73b0e.0","@material/theme":"15.0.0-canary.a0ae73b0e.0","@material/feature-targeting":"15.0.0-canary.a0ae73b0e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.a0ae73b0e.0_1669027999388_0.9856404394266469","host":"s3://npm-registry-packages"}},"15.0.0-canary.96f472604.0":{"name":"@material/shape","version":"15.0.0-canary.96f472604.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.96f472604.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"16988047a843722a4422dbebaed012223ad706c9","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.96f472604.0.tgz","fileCount":14,"integrity":"sha512-B/rGh+MIz/EpuXqhZ8V3iZgdP6hdWMoKE4JvR9acCLDmwcL2/LaC8QMrWg35llsQcGVQyJyZlQsniZtKRic6AA==","signatures":[{"sig":"MEYCIQDlu+ytzIuu+inSuYozwFJx9VgjvsrZ2l5BG/gBeqRCWwIhAKnfwVN5AjS5tbE5xFu1TD/xsgZ8VrQnOe3SYV7lymue","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJje3SAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr2HQ//VRBFQ0tkbV2rUhg4DX1pL33n6PNouQXyGkIdZWErnnUSz6bt\r\ngtNO1GeBcwNBDfpJg1hhl2655BgpJyb737gLbVBen4gjWdemd4gBcwsMFqJu\r\ngq8dtdDGfY8CyfqOhRjZuH9zL7yoPHcQAzjRNAF9mbnzI6BHEl52pRl2heVA\r\n7xoSpiMl6nUjMxLpbIF9rKhJDLbR1OlAbChqNHCmitOg6U6m1riDnrQkBOLj\r\nyOkgxXElbSnXyMEJHl+gx9YccRcvOcvmnRvpsRD/gQ1bWvfHvxg3ABLn9AcO\r\nHWoDawrwf+Ih3kw4lkN0Jq0W/ckeYwI4AM8Arbygr9d5RLc5HpjbLP2xnVUg\r\npqwo/nI+V+Bggl9bmPGNbSMu1nqUoirQekWxIgJJ6blZOcAV0LuFqYCw80zN\r\nc03GIBcPA4/QkKUz5ePxl6vhzZyUZ9GWLOJdqYsC5ia3aYVhfjDksIMW/LF+\r\nZ+B7OjsKPf+OkzKdAwoNNfOkaNdXA+ZoLjPCaGzw4ezTcyB9fKaxMPIH44vu\r\nr34XhVT0G8IhYqu6ERh5sCfN7rYFuE/p/9Ki53RhTxj38e+kyP5Cwh3hLjlU\r\n5sJggYIUYztdJKjMdQuXyyf478l/yC3G92PTfZTF5bgr+5i4vFQtjDRNJM2x\r\n6nZ5ntEVr4dOnelwUaKXipzMmOUqJF6SGQU=\r\n=+Xzu\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"28f313542547c982f69fc57b98811983600931fa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.96f472604.0","@material/theme":"15.0.0-canary.96f472604.0","@material/feature-targeting":"15.0.0-canary.96f472604.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.96f472604.0_1669035136741_0.1500563250022109","host":"s3://npm-registry-packages"}},"15.0.0-canary.18b8f31e1.0":{"name":"@material/shape","version":"15.0.0-canary.18b8f31e1.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.18b8f31e1.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d03c49b0d5574578f06d25eb32eab004eb74d254","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.18b8f31e1.0.tgz","fileCount":14,"integrity":"sha512-Hg5+qlMkcq/OU89w4VkB67wEv4t9G6CHpkT/rztgF6vdNV4b49mVa44kCAB4qnROqlXgz7lHu1xkxf9GySg8dg==","signatures":[{"sig":"MEQCIHNcY3MvElDp0QKGpxqcxQLd1o3K6XXBvv4d/r2KQNzNAiBOPFEg+0TQQGtPY5eNaVSJKfkcaJKRvjuGEwccD4lDIw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJje6D3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrLLg/+MlnUjyOIL05Ns9tJTg6+Dw2/8zASoC+nXLeMVQSbyP/p1V4W\r\nqMc4elmKxxu8gmAeV3QSAEvFCym4QIUQUNZiqCRJc1u9N3gAblhmywOGShMK\r\nlRtWc7TZwDazmwLIqecegXE1KZkQ9NHQw8Hfl27QthYgAe0Hvu0to2giguU9\r\nutyiGTs7o6fHedvoSkbUnbjvpPQjCK/+cKqvn6mwfo5qs5pAK9ZVS9rJPF3h\r\nHDibU8+zAbT4zi0jSC2XlnMBDaK5z3X2VVTaLXABXs5mA2uGbCK8COxr8+6y\r\nudDIFoPwNiQzlAcmHhKAQNXBDgOU+kwnHf9CQ1MNbgQdiTtLYPuZo+1CuvxW\r\nZvbCs9a+0cpni00/TUxhcuU0TdTcAyatoabOJRDtwNW8ikolEqyXXiHtBb40\r\nE0ysV3lFHb/0VwnIKO6nLouoPlp04JZDFDduq4QpE35Dqe1mIoRfK2ERKK4R\r\nA2ebwHrO3nKubKKKl8dhKqiWcp0W9jNdBndHIGNEh6YqoQWEEc32nYiG06bU\r\nV06P5Z8ppoUnRQUCDUMcUMqin5I4cra+kig6fR1joYA5MPHGtIWOVlWc0jUn\r\nHSsbgd9N+YYRVUEfV89yefK1nOIKIEAz8CNmfaO6gOVsHFmPMjF0RlBXTef9\r\nc1tBZTLrXQt09Cz65UIwEpWH3sJcqx2KX14=\r\n=t54A\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"99a6c50dcaf8c9db8b49ca9378d7bcc70fa3d276","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.18b8f31e1.0","@material/theme":"15.0.0-canary.18b8f31e1.0","@material/feature-targeting":"15.0.0-canary.18b8f31e1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.18b8f31e1.0_1669046519093_0.2662935165762321","host":"s3://npm-registry-packages"}},"15.0.0-canary.912f33ce4.0":{"name":"@material/shape","version":"15.0.0-canary.912f33ce4.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.912f33ce4.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"db3a05396a9c44b3af00d39b5c085a05f30fa4c9","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.912f33ce4.0.tgz","fileCount":14,"integrity":"sha512-GAjVkHi+ANAdZH00qBY1Y24NgT2+g58mKoK2mDlkRJb16NdQp427KXtwiqvSHZCwkFm2LAxtOsY8YtsPg1aHjg==","signatures":[{"sig":"MEQCICyb9zeUmhYApAR/SlfXkNLKSY3NOFDNrSHcT7IQijt1AiAaZ1ECGFlfNzTWOCfwcrqPKeJUH9W92M4zTyk6L12pMA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJje7seACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq4ag//Ui2ng8MzIH3DD7OG7YPKHdSfcztRG98xzOpSNF5eIsfQUmmM\r\nahSt5VMglhsWQ2HJ0ddNloTDz1ci8czo3cnZPLxfK8KQn+ueNPUgIWp+7g9C\r\nbYIL8WkqAHTLgcmYCTZN5IfFUF3TsDVhiF2GYmKjOIkG3AE5roFaUkWz6AIy\r\nJKrlt95WTzQSMnfzY1DGmbBUlO32ZffvTGpLOmKLJ4qwrXbDvSbn31xTvluE\r\nbrFX1rzvZwNM2jJf6h1FG9sCgtJYdJPD36Mtov+i/ukjT/To9Sw/7JSGQMWE\r\nWjBy5oxFvyBPPx0E6qmzOCtl7W6OooaPW6F+dXECOLq+NVLm7xKH8XKBIzvI\r\nGSgflatcbKh3PQ2e11ClriwBSsnUQS4NaVTbjNTfypt+IDW3sVqA8Mrbz82Z\r\nJqQd5/FurjKdxZVo6HdG6Wz544ue34DB7fafJATvA7823FCeYKTr5yD5cdLw\r\noItiZ7PBLJBS24MV3+/ikkPbqC3ST7gkuWKl2Am0mV3OlUEa2M+BdPXQKeGl\r\n96pGb94DdF1bt8SH84gzZDwHXULr2axjWUNjdREIt8dPFNad9tjns87jR2i5\r\n5vVXbIsO/O21DLNga2umj9UGYsA/Y6TK9JQyXyngK/5ZqljASTlEn9nPYSGe\r\n6GaYqhtDnP6xXXnxviCVU3R5TTfmAbDKAIc=\r\n=0gX8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"cbdf5145fa19b6681004b6c2d5de771b50f5b6f9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.912f33ce4.0","@material/theme":"15.0.0-canary.912f33ce4.0","@material/feature-targeting":"15.0.0-canary.912f33ce4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.912f33ce4.0_1669053213911_0.6256509625703297","host":"s3://npm-registry-packages"}},"15.0.0-canary.1e1b1c369.0":{"name":"@material/shape","version":"15.0.0-canary.1e1b1c369.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.1e1b1c369.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"585be0b078d5843fdd9b4fa8d065985a7564cfd8","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.1e1b1c369.0.tgz","fileCount":14,"integrity":"sha512-ojYsCZvpRrEGNPceTC2LtGXVKEjvsgKD0pt21ESovqa9xAKHOKJj671PTvW6QNFbzy9IxxIhxv+HjeowQhquOg==","signatures":[{"sig":"MEUCIQDM/TPex8pEiM1aYhxhgIOOr3bR1aZAxpAEYTec3uqW3QIgL13M/TbNwnSgmzmanYSZcEkhJUbYoKDB0hzhfUq2HeM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjfm26ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpE/Q/+NCj2x6ThInXHEYrrHxWSe3eZ4uwSeKNK3GAFuT71dLjX8RKp\r\nQkTHYygEIOeflNzv3YLO03fUVoRTXnhoMjibXIKPcVK5kLoQZMrD2NndjPXh\r\ntnyb7n+FG7dhb3E4I/yRaMqCflcokn9zETlNFtFx/Fi/Yp5xYRu6nxM7ZjEF\r\nLPga0aeXDhqGIUiwgULvxDEcIEVRJ4HIAR6Q9KBYXpjOEODPXm6JGgQMZCON\r\ngU8jCVaa92+9/O6frCvBncnO7p7q1HRX6AS9tfs597DdM9RBALdnONsrASrr\r\nxz5Izp6TEYOHq+ULiWoGizUn1gIZmteXpqEr6fV9M43Rc+Lgkh3YXNkzMET4\r\nrapAyWG9pwmQKGBwikt7jhMMmXlYh3yzZj1Ci2C7X4uTgfUclCLBdXE3b15r\r\nUj0Tb3V0YXHMfVoz2Ub2bgBCA2wr+Oa9WqFyXOZuUUpqFABH+ZjZ6CkhpEH+\r\nXyweSjl9jW8putnIBeo6KXYXS4A2Q+zcS61kflIA8KHDqu4LXr+hA3yp3Auz\r\n0HuRrxVrID8PIIW0TGUYinf14kz9KXxQLUmCgRUYlfK5u6KcVr53zZEtKghN\r\nNQDVfBpV3LcPHqWzEyhYP9RZNz2dqHd8sJFyx54YiJ5dkmYa6xEIh39h5csq\r\ntzYMdiI2A7IigdQ5SW2oxN1tEkRKwTrJ2+c=\r\n=ifvq\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"b59baa6ec6a8114401e616de0c9d3675a34e4206","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.1e1b1c369.0","@material/theme":"15.0.0-canary.1e1b1c369.0","@material/feature-targeting":"15.0.0-canary.1e1b1c369.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.1e1b1c369.0_1669230010550_0.6453294084063668","host":"s3://npm-registry-packages"}},"15.0.0-canary.a2ec49244.0":{"name":"@material/shape","version":"15.0.0-canary.a2ec49244.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.a2ec49244.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7a5fdf3e9a1f3a172822e105957c7615037f1d59","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.a2ec49244.0.tgz","fileCount":14,"integrity":"sha512-phtkXYjc99YRDT/3Q/twFmhd7l6g3Lne7RUo6tkj6YmB3OgqvPXg/TKZmqiPmJIOKIjNJtxhI+vUixCQpsZ5zg==","signatures":[{"sig":"MEQCIEDhYmk13vDplelveVJAvOyJoTWB9vbizZIvTwGd4wSEAiAgBMZTaGP3KJ3nNn8M09VSoPSxE+YZ8LX7dJISnoswbw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjfnTaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqujBAAgy4ttAJ3pc51noDKAykxqi2lPU4yllXXPEtSIZlxfgDHL2oW\r\n+rXDN2MO9r4mxcH1U3ZYpNjkKB7LwalMrLmYNai+PZZu5YxtDhe679zQsgW7\r\n2NlOtZ/atJ/jKvqbRY48KRnbhJhcNrrxHLg6Yol5fMatpmkdCALtgr7rRq25\r\nwXZCzCVaioH5ldy5VUNWRiQKfZibMhEIQMU6+qGRTRZe0O0pX0X/G3cDBESc\r\nCHQDpTNHrYfmdH/vRdN1yeepQqflocNJGIsq5oU5vtN8qWvR3241vJSVSB32\r\nq6dVq+yoW0s5zL6VKu7H2WMPVXS+kfSdew6A/BuweyzBv/DF05LWVRVa/8IR\r\ntl/xzZT67RQFwbH7eiZ2rgyJ9FpS3hnepqCU4jhtTkOPsFsHxuI+l74Euz8a\r\n/UVxW11ItXHeuJvWJO6LDla0p9iogWChWK5RnV+NCOZCndvEb1pLziltO81x\r\nsrGB/jSzerDa8ff6uFrGhFHVHmVOEYl1t3IFd69e3oE5krSr98Av9SxHg0ll\r\n/eRWC703TmkA7CT0I85G2Y0qib8dMdCaa2nqbMfiWx+TK2CV6qmsf222p8Jf\r\nveXL/rRd6FHJm98Z28syHs6MuBfN6TNVGqxGGH18nnMhfH81BclJEtz8Uoyr\r\nU5Pt9MaRLWdIx/2Il8i1wIZiKxKvFeqjEko=\r\n=gRLr\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"fc59d471222d0010e05a636e8c3a9a5a9abe2b3e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.a2ec49244.0","@material/theme":"15.0.0-canary.a2ec49244.0","@material/feature-targeting":"15.0.0-canary.a2ec49244.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.a2ec49244.0_1669231834106_0.0742153103525578","host":"s3://npm-registry-packages"}},"15.0.0-canary.a7458ba0b.0":{"name":"@material/shape","version":"15.0.0-canary.a7458ba0b.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.a7458ba0b.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1cea3a46d8b4b9749ec21c903cc93c18f5a53bd7","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.a7458ba0b.0.tgz","fileCount":14,"integrity":"sha512-P/CwlJZHMDTsZY3/Ou6HOLr2SR56jmtKzgorYAEwgP9Ez/BahxGCvMhdHIm1MGPF8haKxebAotUKDHMgEr4m/A==","signatures":[{"sig":"MEUCIQCH+2aZCeXGUm1DYuuQwnJKMvQlYGwHp5MxgMTCluPeZQIgcOi+eiV8ptPa25oUFuKKe6oZgYllqJ672483hHlM7w0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjfn+DACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmprHg/9FuKE7cwn9s37UhfQcljVvsObfuya43SerA1gSwIx30ecNCfL\r\n+hr/GAyf7vBFp2gRVkcDdOBAhim3fpxSiRNxBcYfFgU0YM+98+7cDbQpJFp7\r\n4j9L1ImtKcxPoRiSBierLJMdSAAp+PNxTj1AYDvbR9MqWekXNM7Y04aYbujD\r\nXWJAfc63o9qo4Y2NrLwoZ3epAPCQFjLxrzFWgoaEhEodNriIuz6p6Et2l3NP\r\n0ZdCziuMsLuU/F6u5/0E5y2zEYG2/NwlQ6ik0OcgSUYR5V8Vyaicg2fE/72k\r\nZ9H8epeRAiYnmbA5HsouWbNnuD8DTLoYlRvFV0Pj1d8OypteHNg7iV9EHEND\r\nFrxxMYUBLcgPuhE4KUlPO9JEiIiutDWZngJ/Jks5DEc93XQ2QIo4HVgHKluD\r\nNFzlSUyR2WJHynqg+nlWGhYhV74VnDq9pAeHBYSUVL4JaVc4fe6+wVnFoYK1\r\n5A3j8GJi21txsExidxelPSDc1YGMB7U48MrGZXpFLAWrBmLRw8eO6umWSz5J\r\n2yXava/8A74EGRs/zzjw/TpTH6XRESnlSMvXkeewgSBU0+HKutwFNvFCGv6C\r\nZuhb2IwHaPk1QJE3wq58VQlwAt5lBm0Wy09vjbu8joFMpD+CMySr6gFxHtpW\r\nTKOWRuyT9u9lDxHqwetwQTwqrAuHx5kA0aw=\r\n=BtXD\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"62e6a15e0784982b77df0a1d824f81d5a15cb6f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.a7458ba0b.0","@material/theme":"15.0.0-canary.a7458ba0b.0","@material/feature-targeting":"15.0.0-canary.a7458ba0b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.a7458ba0b.0_1669234563241_0.35916114486699047","host":"s3://npm-registry-packages"}},"15.0.0-canary.7c35e5036.0":{"name":"@material/shape","version":"15.0.0-canary.7c35e5036.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.7c35e5036.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ccd7d2125814f9021b6cf80c0bcb5ca0697431ff","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.7c35e5036.0.tgz","fileCount":14,"integrity":"sha512-EMBQlgvxjfIuGgwlt2MErl+F8VBcs95blDaUrvmkPWssaBkuhwABWesaPWNDa7Q18oWFyfF5mqlcicYGdbm4VA==","signatures":[{"sig":"MEQCIEcc1CYZnO79pQ/lZZ/IuLaCHUjsExkkt0PO+pPrb5qNAiB4+fhZVWSWfdI2Cec1oMYDTgnWaIzLrRn0V+OxHS1KPg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjfy2qACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoQpQ/9GhL7omOFeUWvyBs21itQDl14RnIkRy0bgbWzXSdIHTokwFfd\r\ndc0cySidTvr80kAGLKffyAx1kGMh7dXhT5EZuMGTNtvjOLtOeiQhIrv0ASSR\r\nsMjbXO9XB5vxeSt3GPG53GjrQFGIkG5dujWKWWZ1r1ghY2LLIxE72Yrjc7JL\r\nChYx4she0STZGfW5bzAkoz1QyB05D4ZbrLKkP8+72f6U+T9hcrznWiEgQ0k1\r\nCfjD1+zbcM0vmLgsJWaB1LoZnXGHntP9AOixIoJB3KRZBCjuAO2RrhxNu8KL\r\nJhxCwq/XklDc2Lm3G2RbswTZF3m8sqcErwMQ1x24VU0NyJCVFE5zOL67IjD2\r\nmobCgStcFwXpPFzpcKT1lIhh2E0BYqsbRRsZeJE3JNLqCKlc2oxfQ+Tol7gs\r\n4F9KuVE8YrIgQJCViCC6dAZLn0XZOBrGfn08KoI7rUn5Se2ox3Ary3VBEKRr\r\niWJr/i/RpbbqhCtZ8slnL7B0nF+Ef4HzaA30FPytMrzL/vAKHADFRCW2s1J/\r\nir1+2i9DmmFWwu2ZiW7rnnBDQalVFt4WXrDPZ7iUCh1omsDJ8uXomuo0PmSF\r\nXFT11O5M/+Rw/PHNbUYVN4ZVw2D1Hw6DztUupNeo2wjlkx4HkLvxDhcE5qVa\r\nb2HLpnU5syEWnuhS19ke712fgODhg/1HYWQ=\r\n=b3A4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"bb1e9aff747feef28ef92f415776fe33dc1216c2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.7c35e5036.0","@material/theme":"15.0.0-canary.7c35e5036.0","@material/feature-targeting":"15.0.0-canary.7c35e5036.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.7c35e5036.0_1669279146634_0.17412143767031885","host":"s3://npm-registry-packages"}},"15.0.0-canary.4356e05c5.0":{"name":"@material/shape","version":"15.0.0-canary.4356e05c5.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.4356e05c5.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"797ea74e79e92481f32d8ca5d5edc2bb00f1919c","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.4356e05c5.0.tgz","fileCount":14,"integrity":"sha512-ocv36gyonL1bHQJQtq+40Lko2q6Dh2OnI0bEAbnuQr3lh/uyAbnGVJpQftuGrvMY9V0zZuzEp2aV8WrbxG67VA==","signatures":[{"sig":"MEYCIQCgqeFmndAMtD/cNC0JleFfUv1aDtkf48p4n9nn8YFONwIhALivvqlC9tbUz0y43A/3YAlh5A9KxAFUDHeNPCHFjuN1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjfz/EACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpJ0xAAogxXv4tzT5eDSVRinZ2uE9/G3tcfASPtgibD1LzcedTwVMGG\r\nPBiY/pETFh2gAN8PJtknKcSUeEHVkiGaVh/jE6EmV2/CiHiXvsxKjSmnHVsr\r\nPtkVQxuKCmor0ysJhIW9CRa0Oj2o0LF5LW9/Qh2DjRPA+rJfTwj8keeMN83I\r\nz8FrTy9oHgIWR/xYp9p5WCwbqju40UoRwuBbQEBuNwO00eURuNBm8yAlSNt4\r\nFjzpGMgy0oQJGfzKfL7TMLo4Hi0lq/SC6BvrIqH3JjYY1QpM/SfHIROmwFD8\r\nPGIYQ2c/BXun5ZeoVA1NkJJqSuU5ukd/jv6RCAHK0pO6J9/qeGLo76WTwZ7I\r\nlNG5T4HZp2OZr23z31p68+5fb46GS+cUFP6KX0rDrEUgZZglYriSwCEQ90kx\r\nWDckEWHydqEaj3ZjBoM0jbWT4T61dfy607l6AB06vmOSG3jOqvicFQTqj99F\r\niFuPZkoOGu8qfXtOvgQ74Xe0/UV0NfgBLnOKWH36NmMVgY6f5ndSV0IS3hox\r\njjxQoXquS+GJsXdCx/IP1TXCoG98VrTNFzjZ2qbquqlljZRN+zcjP+G01R4w\r\nc71K6MFrTRSBE/kQZwgbuTYNUWzqwmc7SBz0XXgYMNiTm28CIL0zDuuQ5LVN\r\ncMypjM095joFBJIp1qAkToSQwYBZmmfteoY=\r\n=YfgN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"8f21a6abb8b52fe9aa5804b940eac0cd94256fd9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.4356e05c5.0","@material/theme":"15.0.0-canary.4356e05c5.0","@material/feature-targeting":"15.0.0-canary.4356e05c5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.4356e05c5.0_1669283780223_0.49819529368247784","host":"s3://npm-registry-packages"}},"15.0.0-canary.cb605f8af.0":{"name":"@material/shape","version":"15.0.0-canary.cb605f8af.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.cb605f8af.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f2cb29c5221605c6348d5794f95ff7db12f7c76b","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.cb605f8af.0.tgz","fileCount":14,"integrity":"sha512-NleFB1Qzzj5eBig2dSVRQ8Fee+RF6ByZTKtpdorDZ+1a2B9cOWpYyQNcYzMGlLj9iX8wpyz6Iy9rGBDI5XX0Ag==","signatures":[{"sig":"MEYCIQDUbeIRLLtZUUV/mcFk/Zw47oLv629anVYuhcX51gmMWgIhAKXciX6xprp4LT7G0jj9FptwkANe27CB5vXjqFHDlavr","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjf0QlACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrRJw/+Jg6L+/qSTyyilbhBqSUICM5PQughhkAWrTfTMtX/kQRwjsV+\r\nnnHxMP1TRj3e+tc2neE7RzjGTDbVFj6PZc0/AviW/BZMP+tVK7EUjaUdE6Ed\r\nEQOS1xo+saQBgrCPenOAysVuSIkM84+eAWo+n4N9/GVkfxGXrwMLiDNCIe54\r\n/J308AgL8C/rK+m4tcKSgq8eg8Xq2yHZKCmMoWF7NwDGyBjtFl4uAZcxmi3W\r\nmE7VdvVm47Hx7biqk4rF6scYhZI7arJ9QWoFHAnHeSym+92M5l3lbns7YwOK\r\nJ21lVaj05jZ81D0KBXNeyD9TXSICR/orqkkdzCgWaRy2l92l6BlZ8ZeWBVq8\r\nU1NdNyoNgzTZTdhGEUE/hFvBrl1Qw6wd4isUu+rsBgV2bMYayqoOw0H6ehtr\r\nf+hovBGMOBE2xhnq81wVYI9nJUE0CTybFHZ0U6pZvtEERPshF2T4DTDNNF+J\r\nuvt8G4JAGi8Xwpt5Jc9YI9IxneQgefHQINVyA5I3wLUIuZu7z2gN2OKSSAqw\r\nUUkseyJehoAnRHY3ZoPD3rWNPbGIF/GtbSwNekzX82afmU7dwlFVpwMsKP8U\r\nAy9kOqRchTUe/PsqAuuCYN4VziEoB0Lv4IN+wKuIUXCIC5EIUk+9VLg9qlEx\r\nReJ9CfD5we8Cp+SbIlnpLFY/2V5WEYO6h60=\r\n=IRHU\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"9d617d11bc1506bf595e8a4f05413067775d3880","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.cb605f8af.0","@material/theme":"15.0.0-canary.cb605f8af.0","@material/feature-targeting":"15.0.0-canary.cb605f8af.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.cb605f8af.0_1669284900748_0.7527578107834547","host":"s3://npm-registry-packages"}},"15.0.0-canary.05fb07f9f.0":{"name":"@material/shape","version":"15.0.0-canary.05fb07f9f.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.05fb07f9f.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1aace8c8236cc2a8e048cd00c0424e24c20805f2","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.05fb07f9f.0.tgz","fileCount":14,"integrity":"sha512-WVTBr6/ITmjxuMlC63JHJIpxmcPK0L3cCiF5vmdpA+tNMcF9fIA3E89YmNA5OCMkwQ2BAofbWHNCCUuJKUSFHw==","signatures":[{"sig":"MEYCIQC9Iqx3X0OW0Ng2waJRDNQyc6om34IWRKJPqY5cd4LQ/gIhAP5LMgvUUKjaa6ng2Zt3Q2KvqAsJ5jBVm5VRIw0H8kFF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjf6YyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrPlw/9GsFQ8W0Q1F07Bocmg3yvfXM4y4656Vf38uvdXdTVQZnm5sPE\r\n9ycVZsSVMotmNlGyIndlTI1pZVjWyp+CNXEAENlqISCaUGV+E1pEt/mllz27\r\nOkn4r7tu0HDNh3iYXU64GRBjB14A/DoUPcIPvpdH4fifT6DYDtzC8iqs2RkQ\r\njX9KQSlg+pQodHqVnR2n3QmIWu/gn11AT8rF5Ofqc0a44wwo4Zw/PtVyLfWX\r\naS4XeRUhOaaXzDLp/qyaRz9cOjMV+puvdNCAlDKqp6Mfa9DA58xUSr6iVmm6\r\nmcx60w4rOMg4OgFzTgtBb7W43dawzQ58IqLKZu5D33sNOgbENdxG/yUmfEPd\r\neM7na2P3bcjqYm/NSf5EIitzolk7eqklQrnT1rNmJ8mitg2rjL6hrTbd7Jmh\r\nkR45yobyHdNaxL9zVHN7iA1Zj21Z1/9BEPubZUYqm7jnLuKKSMgCLJbha6qI\r\n99rz1bK+m3HNu0kw42XlpUKa2Syt57JurLLTrh9VHir1jWgUgqEQk5ZTLrzp\r\nVcq9500hKXMSwNAwBAbQjUzljk/+EweNP39/hsd9X/sS6AVmP0+d3tV4J5O+\r\nZ1tw8RenGEfUphltaxkLN5DIy7uxMccnCBdIq0d8ROKUqc6lyKXawCtG5OqF\r\nzaBqYogS1VxZx2ODJzgSuOQ11jrKMCjVDBU=\r\n=tm8F\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"fbbdaff1715be513be46d4628f7aff9d8f7e27fe","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.05fb07f9f.0","@material/theme":"15.0.0-canary.05fb07f9f.0","@material/feature-targeting":"15.0.0-canary.05fb07f9f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.05fb07f9f.0_1669310002291_0.5774021518310175","host":"s3://npm-registry-packages"}},"15.0.0-canary.a911b386b.0":{"name":"@material/shape","version":"15.0.0-canary.a911b386b.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.a911b386b.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c8fc04255431260054fb0ce101ca09d5e4163de6","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.a911b386b.0.tgz","fileCount":14,"integrity":"sha512-sTAE0LkiLRcv9LZAkGC3YCfl11WZNLWbHIAQBywlFA5SQy6YJ1AA+hTfjjqHS5V+9e5oY4Nsk1uXX7GSvZT1Yw==","signatures":[{"sig":"MEYCIQD/k+oDklO71zkYza72EL5JUWvQPpZfxgYzvKTO9uzK6AIhAKmqAamxR7rraIIk5R79OiTPTm48SLg1g21dpZCHG96P","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhOYBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo2rQ//V4b2IyNRu70r0IZcVjLC+FKOExzo+oCOWLw0sVMHWA9RHhaF\r\nAKPVhPCjOSNpClVMjAGPpG+x/Oor1J8FNg13ILavrxWZRf52AsKrBMUbCHmm\r\nkIrAhFJZbzIZ3i+l49bi9+An3PUzw8ZJGRgtgWOJt4BHX0nBeU6HWO8qVR67\r\nvb0ZLJZ5YJQCNWupryHqk0EeuCILoCLks0Bi0n733D5ZTWjDa+zTY8FGai2z\r\nTOnmweFIRzg3Mh9kiFiD9RWdaD+C5zg5CF7dupx+6wTM4/QYxVfeXywQGMxa\r\npYdhtavDlz7p/MaZREl0sw2KSLYeLxE4MCEkBMn/nqjK2IKmDnN68fIFG3VJ\r\nG8d0FTlAMZa8YFIUkv61/C/iAnkWFKHEe+Scu4r9c3HSspcJayzP6K0YsrUH\r\nLw9RBDoFwRhuTK/kbakuD7pbo7o1c/G/klEVV+8AS/NTRgUeP+FRFlrlcjhX\r\nE+Ji5qjgQqwY36Mj0MpBRskIpwWhYLLHl0Z/RwVF6AjuTXlA2mAkUPfhMFJD\r\nYUVusAgubIHuwd8cBEaX8YnMhtEP6C+nEVjUqoB+ICqosBefSYhIB14mdhzn\r\ntaBjGlGvtEhuL+V1mVNF4qthU5WTjAeQvdOcwdcbHNHDwRNaBK/J6A9Qcq2o\r\n1PTz128fiIXpEn4dZvNZYqsIDihkSZkrpX8=\r\n=Cegb\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"2487492bf1103f4c82913b328eb64ca5b71b9f5b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.a911b386b.0","@material/theme":"15.0.0-canary.a911b386b.0","@material/feature-targeting":"15.0.0-canary.a911b386b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.a911b386b.0_1669654017429_0.5565968036066626","host":"s3://npm-registry-packages"}},"15.0.0-canary.2aa8050b4.0":{"name":"@material/shape","version":"15.0.0-canary.2aa8050b4.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.2aa8050b4.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4d07785fc0d521451b8b614db95ba86ad3feaece","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.2aa8050b4.0.tgz","fileCount":14,"integrity":"sha512-oEVYWKwsWlWqu1zZxEjNwVqFJLNLRlPAJMnVUceNRhN9SmbEQ6gWjLXSW7Y7LzydGTfDPLEBlqqMYp+N5mHOfg==","signatures":[{"sig":"MEYCIQD80h546EQuSqi3lqElQ6P78oCmikRaqPZk4tR7ukbozgIhAMIewhub2ajwKAKYPUz2iqGInGNNfyruLDt1giIhSkQX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhQfPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrvOQ//T+XLaFFABlpLnaMQvTTcb6SBp9/Ub3OuMj0fDTD/MJQPS69D\r\nVSSgjx5xuko2c4/puCrNHLmQJnYAdDUihmntmxqumBL1cjameVSL374JoVlI\r\nIy+JsoDLOByzpFYE2Ryhd6FWrQdeLAfHmq1TiB9ov1r1GqEUjb6SUQfWNTSO\r\nnE0zn7OYCxVLPcQ/JKz0O0gmmlGlSqfQjyzPvAkTXx4EWNGoBM4bEZzTkCCf\r\nK1WiXTqR1FtulHsaBpgH7SpcfXaD2Z2KrrPR7LD6XVKqkBnSMAuhvkSkuped\r\ntYEMD397fgzmCROngYOIlVNATcUoXfhxj4/vjHH2CTRkn1WytN2im8tUYEgw\r\nyciCB3HH4CuG8Xf4/l70zh4XUVsjULk62+BP4JOKmCeQ+JzZU9TCoRJxWBNo\r\n6Bu/G0z75x5+Kmuadui2F7E4Fgxu7jgCd8YGkIaPqF+bn4L1cBAdB9bgdT8X\r\nJcJWYl/xhGhdBHn8xV3eV+kpNqwutd/Hg+sngsmW0lUbPmZV4dopk50fr4ML\r\nfK+ULrahbbpOsKp592z7ouV8atC0xgU7Q3jgzX7pxVjGHXDhr7hZUNXT3e+V\r\nHIGCvNaD11aPJgOZsh5sPgvp01VqYnpKb5jYDw3nZyBXA5cVDcyleHO4x1r1\r\nTtiTLbkWf/asLqHoWC3s2K1POW+Eu+E1/ds=\r\n=6bpH\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"7ea9b47d90d470adeb6f1cbc0c1c98b88392e56b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.2aa8050b4.0","@material/theme":"15.0.0-canary.2aa8050b4.0","@material/feature-targeting":"15.0.0-canary.2aa8050b4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.2aa8050b4.0_1669662670907_0.8130278818959027","host":"s3://npm-registry-packages"}},"15.0.0-canary.323904a9f.0":{"name":"@material/shape","version":"15.0.0-canary.323904a9f.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.323904a9f.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"453a2bdc77c28b030d74375f25693c1e4a73c7ae","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.323904a9f.0.tgz","fileCount":14,"integrity":"sha512-o9OMC8hXvYgPaUTO4XSs9jSub6+I4Q5oALXy+mg4eAN37YeTFqmU8u1ZCjYS045t1Op8Z3Pa+ka+3MmypEQNVA==","signatures":[{"sig":"MEUCIQDYm49yp0uFTs68fiy/ZKGgEJJqdJYjApPQEcXj7O1oCQIgJD+tXzR89l9QYQ8OzNJKAnsWASNvayqasc29YeAskBE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhiZKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq/fw/+Owz6NKrSN0HUZ+nTyu6yKpD/qaZppgBpB9aLW1qsvSdfb8JS\r\nJcmcmb9cj7YNVbIF0lHsVWYWbvidc9IIaSnNZd28QJhiWAOpY+fmFj9ubysL\r\nV8+fnUuUUhmxcTVok28jBMv7iFnouYQwniAbhGQjPv1bLIsSva7lNSE3qv9n\r\nenuq/byqzLq4+4EB8OCrYr5nUUXQhfY1DIQE/YqoYuYgQenYlqxQPPoAWoXN\r\ngV0c7MPy20y8f9u9g4XQjoHdXd9LpAYMP8QAnko3fl7YmCCkNzJmfbirm/+d\r\nS9+5oQ+Ycor9lotaVxoMES/RmIdPBEs0otdjF940VCcxX/f3VodL0oE9xAf6\r\nebj12jqZyj1mqQIU9yuhyld1Oz72LF621rbZuMHcQh4mkjvlWyiofz4Ix7W6\r\nyKbp5bxMi0iAwwPgmhSKJ+Q4Tr4cPoTe+01Bho2//ZTIR9TN2358yW1CIv1q\r\nqt+A7eXWmaNWMHF8rZ3/gNRcPj4wY+b/V8iTZ+WWWzkv8A8s5AepE6kKhSLj\r\n97W07HBo9PtlF3UwicgAe/h4J9eyTj0eNGA2pV7CwAxJLKUlc+kwmxCxkMJQ\r\ndhDLbI3AGpwkuopvSc7agsVWrlr8Vd8OfHL9oDXsZJjWIS5qP/NBQQNNW+yO\r\n+z4SVWn8TtWRgaXjuc3R/Bftbv+7Xdkkvsg=\r\n=Jg2/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"a69fa8c7160aaa07d868f5bc365076bdb159bf99","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.323904a9f.0","@material/theme":"15.0.0-canary.323904a9f.0","@material/feature-targeting":"15.0.0-canary.323904a9f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.323904a9f.0_1669736010524_0.7070192142319147","host":"s3://npm-registry-packages"}},"15.0.0-canary.168a629a4.0":{"name":"@material/shape","version":"15.0.0-canary.168a629a4.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.168a629a4.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c10dfcb41e07d32f94d2f759091d927007bc6d76","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.168a629a4.0.tgz","fileCount":14,"integrity":"sha512-actaw3Di+b7Ad5U5ncs21d+NsgcO5Vwu6LtOpULiYeF/7wuRLelqLxU1Toj3ho9FJdXm9Pr0XZJ+EAbMOjZhaA==","signatures":[{"sig":"MEQCIDE11AvIDJgB2a5hjXlgEBjPde80eUGYfRucuTDbt3WDAiBGZRL02YbcH4jH1g2sH9DBn/Hw20dpZj1y+Di32WL9Lw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhjfYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr9iw/+IRDjcWU39wMy8KrIKsucghhZUYP7jk7/DHT2kQQeFMEptmmM\r\nLVb7m2caFpn8BRpVAaCfqPMtohmV19LWGb96ir+9W3XPRYZQZ0CDrJOMF1Ye\r\nDxlL8NUL+TbJa8/kIJcSubl5r3ELEUDbWZjeNmNPoT6nH7+MqJzV+IENW8tj\r\n+e3HKDzwarYCk+7s3wavsf8TeWady4zVDKKZKjaYiLX6Bc5LYt9rT1FAu8UZ\r\n+LzShWaxMZQmzIeilX5S8ar44/r2FzzzwjJy/bXCtaXc6t0uBiVJT4jcHHu5\r\nKjjbC4s+GIBApabEjiBH4z/BEPVqiZ3hnzleh4HckNldZdQlykyJzFwx7wCz\r\nF0B/QDjiRRUyCWk5wR3LOBhV+ODvHWGqCIbhFHfu0C4y7E1uXh6/WQnq12GA\r\nYEsq5HiQRGSualDZaLT2Ape8RvnCU6iEWtPrYD/hdk8eVde+FidWtUFEgJKP\r\ndtmOvt3UXGj7olKYUFG6x+fq72x+1iwzPKhdkhQG+aXZU1xi8oU0Wznp/DHk\r\nuzweCi4Od/NuRioeqlFtCLl9GH+1TykT01DAcx9P6cv3HsR0v3/BEqpNFljN\r\nYexRzouZR2FB6BZ147z4TDBL/N1XMDGdxPHy2qPLLrERBRE5avPvNHU+YEhS\r\nKN9u8RfUUXaaeF3ZDNd4v0WK2T3ZuuSLp+c=\r\n=NF5b\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"3091b344799132cce493f92839da8e544fec7c05","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.168a629a4.0","@material/theme":"15.0.0-canary.168a629a4.0","@material/feature-targeting":"15.0.0-canary.168a629a4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.168a629a4.0_1669740504191_0.763526686128444","host":"s3://npm-registry-packages"}},"15.0.0-canary.65c411674.0":{"name":"@material/shape","version":"15.0.0-canary.65c411674.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.65c411674.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c1b4180630497bdd07719197f89d6df4900c26c5","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.65c411674.0.tgz","fileCount":14,"integrity":"sha512-Pj3fbzI4BNPd5p1zZCYPEAUUJmnC3TLHYPWRWNtiTB/t2mrOQrUjFbG/pNeKYNt22dDBk2ZKF978UDYn/BT5kQ==","signatures":[{"sig":"MEUCIGUUPwyuE/14XwV26QcoVX7rahAjUcV3ZWVTTfbw/WoGAiEAqe2FRxuZXFrsxSSH1EAkwdkYtIRtpCazjOY0/TTSuo8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhkNtACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpOKw/8CZWZzNFCinm2u7pYVmucCVg+3/2dVGjwPXMbZKI7pw73t+m9\r\nYWXHuKfq4T3ofPh5Kiln/n/GihZ6OLj2WpUGFocZZzOGWecAjtO6i8bDGbqD\r\n8ab9ZO+yTE+6z+mpcTKzHkF9mqH6EhGsnPX1QCd3uSwJjMaOzM3OiD+/Lrtg\r\nbZ7R/qr6E/+A0grB2qdJ357Ir2n2sUAcn+K4z45fUodFJ1/SB7Qlsu63k2Kw\r\nu15apRFdNYHWtart8rVUJQ9URxkgOm9lAy8FuF9khFBb86+B7+bVi20ny9Xa\r\nk4E3Bm36kClZhPvoIZhc+rTBWjduA8/09q6IiKjeQPS89rqRH6XD5UxZuG/C\r\n9+wi4BGlEgIEu0jszrTAeVZlbCKidCf9IONhICgOTxo5XKAAiTnUrmhGuDDQ\r\nCWX0UZRvrtAlj2UxEFGzcI8jWYWf75uLb7IBGCBiJlsN25ahLq5WjsTYE7hp\r\nEjTNmJDRygZvzbEsVAkso7KRSK4I/3YAIsQKz9eYar28sbVVY3rrWR+jqvbt\r\nXVz+4QQZ8G+yCTg/y799Rk84lMawLWBJ6ig30rRB4KlOaWya1qvkFbkFlgSw\r\nGIOOuWeZM7qbhJz2HBI6Zzaz5AMiGWHyaOKaHMSYkVpB9Pd30gQ21+NDvezV\r\nXtdSkIXMzs96UW6hkAjjrbqLeYR2Kvkh9VE=\r\n=ZQyI\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"d80879a8c467caf0f52227ec97481bf5b7f2cb16","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.65c411674.0","@material/theme":"15.0.0-canary.65c411674.0","@material/feature-targeting":"15.0.0-canary.65c411674.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.65c411674.0_1669743469324_0.3230564211215605","host":"s3://npm-registry-packages"}},"15.0.0-canary.a86d36fd2.0":{"name":"@material/shape","version":"15.0.0-canary.a86d36fd2.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.a86d36fd2.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"efb0b5521823ec0bf474fa4a2b764d39d01e9d56","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.a86d36fd2.0.tgz","fileCount":14,"integrity":"sha512-2U3I3o1MmjWQ+uU5svqzNub7X4LIFzu+E7N2JQcklGH3ofZ+mhPTi/d6H3aIx3fL+e5R5w5kqZ6Vq9zTYvo4jQ==","signatures":[{"sig":"MEQCIGvwJ6fAjx35AGMD5oS2sVxRGJnZvUkXkkobD/MZI80CAiAXDPwoOn07Q3rArFugzSEKr2ep3Djn2jsysjDrJff5Cw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhrxcACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqzGg//dME8H6bH5iapUfrq1AoTholAtpU/DoGN+W80YSiCI+Kpkdy5\r\n06gflYntMHwzZ9Gidxh5gCPifRQhsqq1uJbHPPbS2o2ry4pq9hgjIdqGIc78\r\nqIpknRrWSWtZM0e7c8+fLNnSJkQKPOQorMAPIttRsjVRpVa3A16h6eS7Al1j\r\nL0eviZUal45I18uJG9B/YW8Rof0jRyScTx6lU4YXqgaqqSNR1ZwGhR8nGn/B\r\n7QBkyXmhcupjrs1YD/2pnLbK5IhJD3s82lC6CLEBOK1xNucfmra60C1RrU3O\r\nvJ7TUiAV1KFD7Posuxqbf8Kd+NAqi9YYqKpjMpWAFhxQaYkEE5j6lc1mfbU2\r\n0A92v5pWVebXC6I+xg+1fDMqIOdqoqNQwp5x8dMoEpdqw2r8yjLh2OvK0Plv\r\nHq2BPA9WIy2LxDqRTDLBups7MKIsz7AZgcRy4oyMYy6lbFRtBrlFbfe2pYRf\r\ncXdzjHyD0yW5s+vPm0BVjuVgqz/qIvMSk7jst7Yf6RscMPNH7Qw9SRJOAkIk\r\nBt4cfJ+y1ZNdZB7HovyI7VLhokQcHJrcTJEDu/EtBUay60RPWeMOSAMvpHtM\r\nULRqeZa+82qPFPQAdYmtTdgKsxWLk/VOHLFjiNJuvzA1jOHmjReizmo7DS3R\r\nV/35kpmmA1xfs3b4z8Rv0V0oHpB1V3nvV3E=\r\n=paNg\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"85d3ff6d42516ecc839fe336441543c8df62326b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.a86d36fd2.0","@material/theme":"15.0.0-canary.a86d36fd2.0","@material/feature-targeting":"15.0.0-canary.a86d36fd2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.a86d36fd2.0_1669774427833_0.5602340439038633","host":"s3://npm-registry-packages"}},"15.0.0-canary.3a1f46c66.0":{"name":"@material/shape","version":"15.0.0-canary.3a1f46c66.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.3a1f46c66.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ace26e2f964029f76d44361a4a0e0028e8d477ea","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.3a1f46c66.0.tgz","fileCount":14,"integrity":"sha512-Td8k9YzWa3KbGVW7WZXDzHaQuGEoqtMAcSSFduDXsK5KpZKY11b5PuiY3K2kCziTCDEefs2EVaWnTyqxt4UBIw==","signatures":[{"sig":"MEYCIQCYY5s3rOZW21WPyhNe9d3IDy/CDwJzBilUO9W+pRK3NwIhAMuZoCu6Iz45pou7RZfFmS8BeV0gidx/Lbd6aWFIBBUi","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjh0dMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoa/g/+JO+5jWoALrZ80Ys8Rb+zYoY7QBAGw1rc1ghTClGw4cs+4uMo\r\nN56gsk7LB+4RwpJTn/vl223Fjy1hDtkcKBXEEPohxREvfj5sk6BCEDr68sVd\r\nNKEMTpqhw/g3RAlrLQV85kVWrubVymBXkP0jKoobeSw2Xw5FBOGu0sDaP2GL\r\nrl8RsxmBCbJfDlkQsGv8zaP5u6KDgNyuaRSLKoLr5BXqt2iX0myBNTd9E3ks\r\ndzqyUPYr5Eks2OOOCCnyqda1xnk2E/C8ryDHLaxeZY0xQMeXl+Paj+XBVGqM\r\n31xdc6z7kAkQw77oWdBKbup7g2pK1mvZ3s12t922KYX0/MQW0DYxCEenvLFO\r\nwGrsK+wRFhHfpqpGgJ5JFZ9JLZLJr4lLB9gyPqZy/zIGFvq1/6cFk+fX+Xxn\r\nfcISGQbX2hnA3fFpgAyc052NNM80u59n+nUJXrYY7sdorxJw3RIYYeEu7MCY\r\nZltQWDXSzbyO/Fo0FL6Lq/UNR2Z1QlJa/M6uwjJG05E29Lzx9A9nZZlehRFV\r\n683uadkOV1TKK9roeXEB46cPNhDcZwf/399koUbR8N30w0ZrhDRQLTHMQKyh\r\njDWfm6QVNKl1iKZlCZdhEIg9HtAcWpJ6fBCQnP9xXwmuX7r6Mui/QK1BefCt\r\n3Z/M0kA1WwXOXFTDpQjia+1aIE/0LhCdpMo=\r\n=hIHl\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"c3f9c47a1b8fbcf554e1fce6da44837b6d412e2f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.3a1f46c66.0","@material/theme":"15.0.0-canary.3a1f46c66.0","@material/feature-targeting":"15.0.0-canary.3a1f46c66.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.3a1f46c66.0_1669809996270_0.3249768201998704","host":"s3://npm-registry-packages"}},"15.0.0-canary.32d8a9648.0":{"name":"@material/shape","version":"15.0.0-canary.32d8a9648.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.32d8a9648.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"99d567ed2830821fb58c85ab3c76e2ed2f55892e","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.32d8a9648.0.tgz","fileCount":14,"integrity":"sha512-ZmQGaxqTSke3BMGd9haGz4nx05lXSufm7gHGEbNM5fQCa/xN+pIo2k9RPcPWWxS/ay/5BdQMsq/zrM/EXxwe1g==","signatures":[{"sig":"MEYCIQCknveg+sgaB6CVhuGSYr+zep1/2GEKQKBdgN9sum1/nwIhAO41Znxn19IaGc/zCrWaCsqUIJopdQoo/++Ier1ZXKmI","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjiOROACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrojg/+O9JmYoUngE43o7WjuaOLDX+0O4do4L7A01UTDYiWFnpQ+/EV\r\nTu2gbmq5g+gfDD+eGlTonCC6EHYM8JFQ+GLCdP0+SJMWLyB5CG/puGepohpq\r\nzT6igyFyBqudRE07YCfLaFHOsD5mxDJqWswYpsBW1QFk3VZTYrLanZqXQgMm\r\nxiwSemCHyaLx4TaibO6PnMKshQmR9sCvYIFKSlbaU1opZxt6P5piDwUPFpWT\r\nASQISbmW/GiddabMpHHi3m7Y4LkcMkCUH/eHk4TMHhOswnu48VFKnu0RHWpg\r\nicW1axD1lutW0DPt09bpgGEiwh7IocdF9zktrfaRAD8CPky7C8D0MvomBf9D\r\nVi4/esO+V4sb/miBTrIkx+waBgvUjhi5QGIb96G9q4s9qWnUO5LMKxXe/2Z5\r\nEnZm6O5qTnjslRwZVbVkUmaIztg+u8dFgI+0QLxFhDPNSuEOuABtqnHiA5jt\r\nc5Y+FaNBGmg4AA8GWViFtnN4uhE+9cUi2qsdwhs1gblHLIfESl06SXj+LhkN\r\nFNCTsKsmADGP1DXqqEwi1z6DIhE8QZ6fnQM8AnimnPkoT/1nHHz5clc+jH97\r\nHH0XzpONcla9qQ4vOoKANNDqhta36eRGNoVGk5VWCWtXkshmS+2Pz3e2TedB\r\nAUDQTG5iurOtx7q2ipAi7xS9dtbTNI1h6Kc=\r\n=mzwc\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"5833a540d2f362be3d86a707323bbeb6cee2c627","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.32d8a9648.0","@material/theme":"15.0.0-canary.32d8a9648.0","@material/feature-targeting":"15.0.0-canary.32d8a9648.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.32d8a9648.0_1669915725974_0.5796074508431277","host":"s3://npm-registry-packages"}},"15.0.0-canary.03618ab70.0":{"name":"@material/shape","version":"15.0.0-canary.03618ab70.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.03618ab70.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0b53c0077272941d849a5fccacf81ea9acd63947","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.03618ab70.0.tgz","fileCount":14,"integrity":"sha512-1BM11jnh4OpwgIHrelJjItgeS9FohO2w93b8VriHq2ufEEMOMvwH1HPOwN70V1wsfe/fpb+cAKeFeXFBL9hxYg==","signatures":[{"sig":"MEQCIHzFyvYEmeLm4O3Ooy6IpebflVcsV2zz6wuiv2A3QKNnAiAcjRczXCJsKMBvGGPbucEi5v6xm31TOdPikf650TVJqA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjiRRwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr2gQ//YDfmj/UdWDpYrhihcVAUaE42+2XvgAglGkmej4Yopd6GsuTX\r\nz3WY0rljWbRWlA5TkYbAbyMXCyQEsMsTcIMKHxakIXLcqI1kMdN0ktNsaLHg\r\nNzDjyMdKS6PEW2ylXfpsRudJNv5XWQSovfO23PIERUGA05RHGDmf7FuuMMkB\r\nxpaBddss5NUlO3RNl3i319u4LcJtgpGNjBlKdspGBjYs1ImBn/vYEsLS4KnO\r\n2L9xHASOShsQJvPoTq+XXkeySyfYXYgiuVkubUoyag3tAT3JQxA5z3t/I2uX\r\n+HX3K68BlDa/xWR8cOstxU06KtgGKwkhY5TqPKd339J+ORiUxA7A2VL2ju7O\r\n9LBwADb/Fz4Fa9RxHbfpxvE4eQrcj7pnlu9L13oQn0gA9DK6WFwNUgdy8AWm\r\nziaU4nt5vHKzmhhQy8eCnTPiyK9o/e+D3/pS751JyxLUEdmiHsH37wsSedoo\r\ndDPeJd3EI/UfCSn5n11Q2x4pzhwjZKIBr+E+HT3dXAi5z0uKVO01rHHtBhHe\r\nGzeprkJYPAntjPd7xrJ/15wzMUJkY5KJkgIbgbhhHqo8IvPOjZBNi/QyvpSk\r\n8WPNF/OkbffdnLzIGMcMOq5NT9UvJYXXbCRb/vmtz09NUOw6wuyffJltwHS4\r\nlUTEz/pDTTQ+kKHVU8C2E6p6juj6nNkEKVk=\r\n=Xlme\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"b7755627c14a2cf095b6ee87d1ad15c14430ebad","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.03618ab70.0","@material/theme":"15.0.0-canary.03618ab70.0","@material/feature-targeting":"15.0.0-canary.03618ab70.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.03618ab70.0_1669928048350_0.04940393634297968","host":"s3://npm-registry-packages"}},"15.0.0-canary.68aaed940.0":{"name":"@material/shape","version":"15.0.0-canary.68aaed940.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.68aaed940.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f77b53af10e8908dfed29f344053efe03c744c6e","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.68aaed940.0.tgz","fileCount":14,"integrity":"sha512-FBYm5MMmqmgS6m4AL+vq+1XeQxDsi3iNgeRDvyrSiKXiNLRXoFZbtiLDk+ShdUl3mE27Ebjrm4I0Ijck2UZvIQ==","signatures":[{"sig":"MEUCIBlt1F9YMkJUwHYwuTnwzMEYgOZU3E+VQ8oUXYmgqezCAiEAoVvXfG66WT57A/O0qlJPRG2nRUPTffhgB7HEQ7/DJgU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjiRtiACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo7TA//UawP5fq/srp0DKpjM2rMDfHkhpkptqLAsVmdlYbNgVhanabI\r\nA4WI2kXiTwRrrfEPG9VUWfHJxAMH6feqEN8R4eN8K3AhrWPWcuI9ZZ41pN/F\r\n9G49grXm6GuWI1UVNzMU1cj5OsvAaLthmBgn/AMyGxpvXUmX1iUs448tcUfX\r\nBMcYWFnm9G+0EYjpDnWdhTjaf7kyHF/+r3xURNfnyL9mRxGZysdUsISiXAl7\r\n2W+8G4RMe6ZD66WVOgDV0GF90gZXLJqmbZLMMaf6v8F+hyMEwPjgeTocs8Dq\r\naj4cH0FYXxVwmag5EQXKE+Nh8bSrnhpHYQeqCUM9czB65yfsWzRMjUiyWlFG\r\nQARt/6XWo8HttAJ4lSxLv0ZAMpG71o8+rWjbl0AwJLOSzr5tucdFQzQLoU7p\r\nVAhmTdmB47DQwCHoASyLYWITPXioqToOJvVm6K7QRYkiYY7ecOKcJnnrp1Yr\r\nkKTutpq6WWMEteUQbf/oNd2Ppe1iT1dhMxPpw7l2ufXYk7rg8PwyqdjJdL3E\r\nwbm8f4kMZwG8Q1U+2R2KFSN0QYDJ9m4C8rjoIyhPASTNzcbq1sp37P5AYUCZ\r\npAmiP5CW/UpGtS7CS/e8EwLENZwDGVMbH1c3SEd9V82kQ3KtLBzQP2AxwGUp\r\n2jAbLzz86tFwLXIf1MoXnvpuLpvqM0TaPro=\r\n=hMUq\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"6092c4f3bcdf41ae7f55d37c6ad51793eb8f040d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.68aaed940.0","@material/theme":"15.0.0-canary.68aaed940.0","@material/feature-targeting":"15.0.0-canary.68aaed940.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.68aaed940.0_1669929825791_0.47739154330156963","host":"s3://npm-registry-packages"}},"15.0.0-canary.f0a0bbc75.0":{"name":"@material/shape","version":"15.0.0-canary.f0a0bbc75.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.f0a0bbc75.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bf7caf73326a449c0c03b2e0d41bafd03ae7c3b5","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.f0a0bbc75.0.tgz","fileCount":14,"integrity":"sha512-SZfrpdSOIxRyn8nYiKNgqKIcx9OmqMXIPxrPMLk7fF2ZSv3Db6/xG3+Un9X+/XrSfbMZgsRtWzHOP1RtIFxMlg==","signatures":[{"sig":"MEQCIDvarTqJi41hLfsxYu7TVhzDssxg8QeIyAUILCnSYWaAAiAu4G39H2mdR+rx1Lyw0Ovoyhbf03qTV+F3/piO0k2NOA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjib7iACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqW5Q//cL5UunQqswVRCXID+9ghhKHdSRaKVndV6ZbHBfT7/vFf/j9d\r\nQqZXQmGp9mWyWAAPdJwxj9cTzOYhCwnX687XBZPZj3wkR2RoPjVBNde/X6BH\r\nsrpJ7++Hi3qAMjdBMjivwk2MglUkSFoPYMhVFeP3d9IW/7pvoSN7Kih80leE\r\nuSAeTnKe80mXjGMCaNQxGPW7kbxLQ0FvZwQnIL/8PYERyUy6Pr4q7StvdHOB\r\n/WhSv1pyhtVwLxiVn8tMs8V1eWHgJwNu/+XN9WJZq8nSkkMdcJn0q7viPh9B\r\nvDi3THEnxyrAc/6kLzVKkWdjnsMcJCB+UuqfOxUsXckw/2KQLgBJbtkl0s5F\r\nWXz51CARzE0J/+WX4sHRrAs+O5UHuQKdUpgQwUhAO91PGwCV8mo5nRDRyTEq\r\nELTOTy06JSbKUbiBeI6FzpwyJtzdIVv3d4RJcHAsdoRiLmMTUK3/xcjFswcW\r\nSOKTb4sjXzryWewh+JG3gHYGn6J26TvunPqbJ/4KelAkl7A3BipMGXSsG1AA\r\nqTyJb9gn1FWLG8iEhB5WGafKgfQZ+2ddx34csfZlrAfyrn/iKUl/aKHjw1WD\r\npE6/mfMuRHz0E1FtBALZPNHa+rwu/zYex+qOXRxM7mava3cplCQtB/sj1LnB\r\nGiZ+3oB9WJIf+WdEXWvI4k29JznhzwdO290=\r\n=iJgY\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"5111125522be9e3847929d9bbaf323f31e9057c9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.f0a0bbc75.0","@material/theme":"15.0.0-canary.f0a0bbc75.0","@material/feature-targeting":"15.0.0-canary.f0a0bbc75.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.f0a0bbc75.0_1669971682694_0.6230852788328509","host":"s3://npm-registry-packages"}},"15.0.0-canary.dd99c8764.0":{"name":"@material/shape","version":"15.0.0-canary.dd99c8764.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.dd99c8764.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"07e7ff9f5f06743f54b3d3b21a1a66f778e1333d","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.dd99c8764.0.tgz","fileCount":14,"integrity":"sha512-op04IAa25Gn0yIGyOnFODMn63Dsp0ItwMKJIcOmWf+HzY9gd+Rjn/lk1Q9pnLN6xUA1tLo3/UcLtPjv92KtUMg==","signatures":[{"sig":"MEYCIQCBBtQLUUb7S0IeBhDFsvO9gkujrYCOX5jGU+3A9euh3gIhALaGO1mUeRQ0Vbc2ysrwpPGhrQAE70/l1aIaZRYkMDn3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjigUEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoQLxAAnNFhl/+8s0IEu4c+XNNkkKzgW7Ba09LM1VozI92eNJH0NM1E\r\n7wOg8mxG29TlQ69KDW2YuJZTvsPx8Bnwpjhypwqq1dOj/gAUWDQFQGtJVmwY\r\npvPzB41l2wrHCwVPt34iIHEkXjOtggVZVyz9gjDZPjMbw7lZ4BBtwZnl57WL\r\nOh8dZR232/ZoSFaSZ/RXrAolSsuDUCjyFCin0/yIZbgoC1gcWybRXZh91Iv8\r\nd3Fvj+F1CJaNPzx9wCD5Oby4a0EGxGYeWkf4t91D/eECvv1E/pbmZcUj2tR1\r\nvW6eoN6YePuyZJBGFSnEBwrv5Z4Ze30y0Y2VxGGhe0QtYmZ4Wxx3tWwfGUwG\r\nxH5zVp6jTGyS4C6VZAvXEz2/p66aMybqLwzTpkGCthwzjSheCyaw/lhEswv3\r\nf434PbSMsv1dLuL2BNbzOudiRIXBCxKhB/N1PVxJ9dkJy9mclQRd1UEM+Dst\r\n+gTsFmtn8YzTqrpanqYi1r9UuQea2tvvE4H9O6hJv28Zn81ZUltG/LqGtgRy\r\nJCOCpWEhOFFoJOMuiGkgZSzSsIgO46/lRPxohnVTU0D8Rve3mbxOaKCrQTY+\r\nmCr0lDt+K/QEHMLoJI4QDrSh3NCLBQmZP0LNxgyeyWGhXTFN+NKu+cTHpG/R\r\n9fcmxY3wBKEaLd5nqoo5J8wO1K776knBPek=\r\n=SoGN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"a9ff7973c7dab53b620d5be8d56e0c491cc5e7ed","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.dd99c8764.0","@material/theme":"15.0.0-canary.dd99c8764.0","@material/feature-targeting":"15.0.0-canary.dd99c8764.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.dd99c8764.0_1669989636681_0.6296944296120646","host":"s3://npm-registry-packages"}},"15.0.0-canary.fabdcca3a.0":{"name":"@material/shape","version":"15.0.0-canary.fabdcca3a.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.fabdcca3a.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d7ebb4a22c565a573785721d9fe876a04f6518b6","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.fabdcca3a.0.tgz","fileCount":14,"integrity":"sha512-n47i3J9IFsZbJRFoOqCjC1PgnTGQvqHtGEjBfrShAwg10jjsfzx3StOpUgxTTtXF3nnRC94yg54UpFT8diWb/w==","signatures":[{"sig":"MEUCIEwp+MI6R1rVVfyPoDOM1KZBquJx+TOp/36mjO7cmpnKAiEAunry75Vy9acRVpafwo3itfSUF9yHtv3iY31bNiXVb9w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjihR3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqcEhAAoiPrFNglqQ2NZTBdJpHngDW8xk73lr0AsbdixeXNi0rfhguh\r\nsuf4UyYseyjXMLqPJ/rBwTVIttuBAVffTVk4AI2Hl6fQzrRQcerWLsHDBXqI\r\n3+6Y9IHdoIHAaaLeHPhYXHxA7KqQixaELDGB9RC2mZndo9Z3L15uzf/Z9m+X\r\nFGsCm+Yr8otzXAO6nk0JyEFZ51hlShkQqD1vESlToVEeqwaknw/+kKUwtyhP\r\ntuXEgoMkAbsmiJBkVZ/lhFIcLVtaq1E5o5IDeolWXApsTo4u8YWeKgdkv5UY\r\nHvxUXpFpwUu0XadsCQRvlDcKKHVScNm83fZEeDvijELXXAcaBSUwvE8byYZu\r\n9oBt64vtGLAIJV6gh8iI0/OX3IhhcKt3rdDlibnGI2Q3NcAyk77x9I8WSsKO\r\nFNIP3P9BCyZweGBxrk5grYW9q0XD6Bbv4BQfGMCn6HP8iYJG7miMZwzPh1re\r\nTc0mfzCSU88UfJa7ubm+UvWjfPobH+R6FRgS73K9e+EEOp2lWjuO5+a4eq2H\r\nQCMZcvGlC7yC/PIPKSXWDT9Guvq0A2hyitpmN7vzUjylGD4egPhNK8Y0VziU\r\nyWH3bZKDbvrWv4EBI1EHNIC32e7t09YFgG2I+2X4iMniMn91dqKsn0T6sCfC\r\n6xrEWqUxEHKHk7A5qLTHTCwjWvZdaqUWvAc=\r\n=Z3sD\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"18ea36a1261419acae3218fc917dab4ca111bb9d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.fabdcca3a.0","@material/theme":"15.0.0-canary.fabdcca3a.0","@material/feature-targeting":"15.0.0-canary.fabdcca3a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.fabdcca3a.0_1669993591525_0.19578548300159593","host":"s3://npm-registry-packages"}},"15.0.0-canary.2d26722d2.0":{"name":"@material/shape","version":"15.0.0-canary.2d26722d2.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.2d26722d2.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e4d552a1ff14d40e69e05f154a6ad7c0dd660156","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.2d26722d2.0.tgz","fileCount":14,"integrity":"sha512-LwA2JsLTMe72lYiOb34Ei4i1T5WUzdR0wnat5UIu7QtjWvdJwdQS3tjSEPPqpcPVIhXb2y4h+F1kMMvjlafxlA==","signatures":[{"sig":"MEQCIGO3kV1NcJFTQNcZbRINpHjT8GtEYNgZhT14R61oUDD/AiBjO0fwOu3Uh60iFK7jbxuKZtzcBohaan4ZrxtMirx84g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjiiciACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq5oQ//UlfzS8CIWjDa2YHxaiGcvI3jT1OE/bIuT4jfnlgna8GuYjny\r\nFdHHm6/SU9sONajZfkPj7NrsL9MFPsUMGoHJjOzXc1kASimostX0vvkqu1op\r\nG/ZXP66YLX9IKlKpZ+QbK8aXebn/ZkhhUBDoQDl0ziSvSCdtngHWnUlhIloF\r\nbMCKqSgsHJLCQdpmQwUrwUxTSq67Ip5wfVeBsgptsUahuj+y6T/e4hhhNCBj\r\nUVO9348pdnw5EQi+TM+zGHFXniY6i4Zgufsj66W25nD7ZoiZJYji0xoBEzi1\r\nwk9oLbDuth1+v3jHXkmNG0cWvSSG4WJ+1p6st+vtVi/GcoDnkDT/G2fvdioS\r\n4cH//l/jqU3bSOhCjQeig0rVKPD5KOpRoZkBwPiQwp6wibTdyTimDp2fLHNS\r\nl08aXMBd5N/yL8wdTTcywwgjQCNAohzyC3vmIEi+azYPld7HogD8ZXO82jeC\r\nnRqLWsjP2sDQwLZhbKyMdLK9DsbTx5gmsSPiRrAj5qlU4xc4G9jWotmqzvxw\r\nEvPM7GmHtXVVTK/qVLW/YjcZko3qnykcWWMgvFGWmu8c3kz+ioD6RaRTPXBH\r\nlv15mAySYLpQZKRfnGRPo6cs6Nn+MYdWAgZM0ypEnNrz1jJaYAGQlHPoLpTf\r\n3nm1LuAdVAjHQDoI7+qczvcXNQvCyRF537c=\r\n=wsBk\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"76df2659d7f71f74a86512b38245422ca356fe12","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.2d26722d2.0","@material/theme":"15.0.0-canary.2d26722d2.0","@material/feature-targeting":"15.0.0-canary.2d26722d2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.2d26722d2.0_1669998370536_0.14663798560285612","host":"s3://npm-registry-packages"}},"15.0.0-canary.eaa0c3a86.0":{"name":"@material/shape","version":"15.0.0-canary.eaa0c3a86.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.eaa0c3a86.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cdaf8dbe204945d9b0223ceeeb1bebd3862f4039","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.eaa0c3a86.0.tgz","fileCount":14,"integrity":"sha512-Y5f6PnF1t+2JBKvx+gZy0XL66hCf27WjxW5i9PPaE7N40lsvufmCExYxe/2H8oCLTMRpFxSeBPcAFOzzgskZNA==","signatures":[{"sig":"MEYCIQDdnBiJO6IGAndsKbtd4RLIIBAA/JmC4/cbYozX/aYR4AIhAKbop8vADFb612u4jGdUGWFllviDLshm3kDbgYcqsXu7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjijj3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmofKw//f3n50YNR5MBmEseS6NnCh70enm0FNQmkD5GeIkzvNBk0y81u\r\ngUojwcvkUVoDaTC2ljb85Zm5xBY/v1uHCFGts1whhCr25yhScBzew7gJebnE\r\n0JjR+g9H9IiBzviqU+9Wi1U1o5WRADzbaFgEHNLA+T6H2JUTKFgoayxjw/5A\r\njAtmGvJZHwdINrDhT1e1MsZCmcXEA6VrkvkmBJSITnb+AM53f5a6iQLWXh0j\r\nH7e7h4aKvEbdU2e3azabIaPhi/g5TZVe2TkfGP8MLUwpoKVs/0aDSTVuJp+2\r\n/JEWhCR6qjwBuNICc3YQ/0z89EyEFz8yN+va4RKrWstV/jSAkPWcoWoPmh3R\r\n9NKmp26cpcZ6CEh5ZkIlBz8OiEPCdMHJjDA8lR3zSE0nogrhvf0U6O7hE4Nr\r\nZLCRfKRw2KrPKTiyFwTKGiYgyIFgY0Gbms73jPVrHjKuj4gRmGlNSP2pPsfX\r\nIEc/ectnP5VHectaZZxODEcjD7GwaHjhPXvDRLcaElyGcj3i3ZO+DkqooxdX\r\njEX2N3/hpPpJeC/S4rwLipiS1APII7Zm7PobPwh6fRVD69knuOtEHQGiUMKX\r\nlAC52anvcPAW4327/C1HsFIPSOZDXGQ1pc8oBzEGb1QB9vDbkK2yAx+L2hBo\r\nJKaAH/dAl9MGrLxr0ek/mKBzjPNCgaHQ8gM=\r\n=h5je\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"c54316c7c60bacf8254758124c9235dc48d44064","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.eaa0c3a86.0","@material/theme":"15.0.0-canary.eaa0c3a86.0","@material/feature-targeting":"15.0.0-canary.eaa0c3a86.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.eaa0c3a86.0_1670002935226_0.9225630707594266","host":"s3://npm-registry-packages"}},"15.0.0-canary.79a613bbd.0":{"name":"@material/shape","version":"15.0.0-canary.79a613bbd.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.79a613bbd.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4d2629bc67fe1eedff2c4ae2de685214f2469ff6","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.79a613bbd.0.tgz","fileCount":14,"integrity":"sha512-A+gAbHzaIwSeySx4MD3RJJtBXFE9dmxyfLEQEOSw7nmiAL+H9Cf7lL4NKndhsYxuV/3ql2uAZ6dSLGDS3ncq4A==","signatures":[{"sig":"MEUCIClS0lbcUadWVCaAm3R740ROfGiaNnoNBk+uCRjpvzDeAiEAgZbUg437qYf8JszfzItrmEf2vNroaNQdQAbnDh+kGn4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjj1DNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpvhxAAksboXPE7wUcAoOdsLd7gZD+bB7MMwoK+g5I3Ntx+tYbtn78/\r\ndD5dkSFVFR4cJKjdUcIgZv3I4iybmq5Mk5PoJDdPzzLayT/RqORbLxVl3DWn\r\nkcL34lxhwgHSTB59zUUM7bO1nUYR2Oz5gwl/tD9kjP89cdJKrgzqQOUV8P6o\r\n3OkEZPw6MSZ+uPNqYE2/ea8hx2r8lHC3aLf6jRM24lurDPniIZEcJlJyytxa\r\nu6FkfEG9g2YHYulqoAZbLYl4mmP1L/rAC9GA6+t3NJTRcrOYlP2dza5Uth7m\r\n8mWSeYk+/aG6+fXql/7CYsUN45ZzT0HJXMaNzDY/GMDLYcSBhtQWDT4VfbTR\r\nPwfMeAzzQIOyfnyEMngrfbG7zUNVUEosaw171YlmkuoHpg8+ZJ147gFtWqxE\r\njNJMtN0azqroBY2G9z+NKCTijPIbdTNtg0t9o+KQgAzf1sRgFtKJz7tDQqjw\r\nLwPi/a3zGdLncor3ONBwLoFw0u6hxcPqf9VAPuAcXNypZxZMpkxZPL6SV48C\r\nvtKU9dlTboiYEvE2o9iVyfPHS9cMOTf6XKEtXQgy7yKvNFkzL2bqnkf4jNCY\r\nyVxHKun+rZaeEsYeURSy3zSyFb5WDmfwCiafT46Gf5iZ96vLDiU2e8WE/x+S\r\nbKvS4o66AhFkPringS51NsTXixwxjQYqdBo=\r\n=O3BV\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"755ec1ef0b2cccdcb0c8b888d199b4748e3ba10a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.79a613bbd.0","@material/theme":"15.0.0-canary.79a613bbd.0","@material/feature-targeting":"15.0.0-canary.79a613bbd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.79a613bbd.0_1670336716937_0.6094721293033569","host":"s3://npm-registry-packages"}},"15.0.0-canary.c871fe61e.0":{"name":"@material/shape","version":"15.0.0-canary.c871fe61e.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.c871fe61e.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8cee2cad65609aab5152b74260c014cd88630004","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.c871fe61e.0.tgz","fileCount":14,"integrity":"sha512-0mrjshHOAbITGYmsF7efaLtNzKOCrntyJOScxdb8W9animA937/+e6dCbeI1pQ1ehCmYFVlsIrkLFU8KCKLg3A==","signatures":[{"sig":"MEYCIQC87SRjRszDGWqhEPow64sC4CNQ5kNcaoLa+1us0b6T2wIhAK5HA4rBNxsNC9fKbj0uzT90MV10Fm2zMSQFa/7xJFPm","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjkEYHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrStA//ffTdD/9n83vw7o2Sq8HJroPu84rRaE+Ic8fc59a21PsM+7N2\r\nke5yTDzi+LTQcG7W1jx98b8M+5VF+Xn0Ixmz+BorHFOTZBwuac3Oo6nZANpa\r\np/qFRcWYN84mB/bCEuML1+5E+esWcMfzDHKP+WjfslrTU0gMzYQOA8+b27bj\r\nyd61yjHjYkxGZlr3MTpLkbZT2Ky80zDxinbzbH97o6JgiMrvv0Fx3ONfX1xJ\r\nB0sIeRNm+PB1VORO9MWqtM1ZBxYJEIVoixIBjAumPz3EQGuOmqIfdLUUrmSS\r\n7oAAHPz7pUiAwVjSWNx/VeYscwqMQiynAKGxsQhEZYaaXpsQOBFbzzbLCOm8\r\noUrm1bm9wSMwxWi7mo8yYcmm/CcnFk19nK/m0iZvpI9CNkC3oB8qynChyAf0\r\nypAfzTXPmM8eIRwOvWye4rnzAg7piBYFBK7NhwpZi4X4/gbFc1aBjWsxXhz0\r\n34V7zBim7qf3j+sPRL5uxYOze80X2N4xTd1L8fX6r4fXfFtJ7DiwIPrRew45\r\n74FMVdol8vXVdKfMd75DZ8/rkPSgcHpdVeOMquB24xHDh4JeUpEbrB+6Vjqb\r\nomLmOMQBa2xEvQyOk88UFeD/ttyA/SfuJ7r2mbWCwtAD5xh9rEUBBdjyo1e/\r\nRQOhWWRO+t8jlWPghSCtnNpnD4e/yfa53xI=\r\n=typf\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"e69be4936d1304c30ff7b83af8488b43c0ad5fef","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.c871fe61e.0","@material/theme":"15.0.0-canary.c871fe61e.0","@material/feature-targeting":"15.0.0-canary.c871fe61e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.c871fe61e.0_1670399495225_0.6286040785696378","host":"s3://npm-registry-packages"}},"15.0.0-canary.9eaee7936.0":{"name":"@material/shape","version":"15.0.0-canary.9eaee7936.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.9eaee7936.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"18ff4343546578be35ddc109399a8a03a5c8b36c","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.9eaee7936.0.tgz","fileCount":14,"integrity":"sha512-R/Lxx+jPWbuU11BBTY/PuAJ0DKZZAaETreOvLqNOrJtgbgv31jJrvuJVYmeHPbZ2kBbhow9WVIT2qopPaiFDGw==","signatures":[{"sig":"MEUCIQCxvdAXQMxQN+WAZBr30zd2ce/G7xfg5rTe9Tx5avU0LQIgZO1f2QR0AC7U7Ay0JdKLYljmf2p8+TvyvcqigsWwtFw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjkPFVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmorXA/+JNQYvvQwOzPOyncEEze7+2e3p6/0s5cPhyj1DBqCC8cU+QT0\r\npAJ/P3bSMUw+BzJ4kh4QcQdjPxm9q5d3DJd9FIx+z2tar5qGOZBgr1B87HAW\r\nPzKEfEmZf/g176gfKi1dz6lZNyFUk0VsfcupaCjvukVX2VVNdjiDaCrtzt6d\r\nvernpyxHhvFP+Do7tZL7WBMwKQkXmdrSghkd1bbNqsmXGNZ0idpwdyt2dEeQ\r\n60dKHB5oycGFMOwb6mvfjqqbZi+7Bcc+Lh5IOOAPVfTDgASY9C61O4l/37pg\r\n/o07J9Lo2Kt/slYuExXXTIpMvV81KWGpox7nq9hjQo82oDxnjzKIqidG5wQc\r\nIcWqtVh+ofCQLRKJskFPmYUxYW+Rt0LcpTu3vDTjxGvTuSYPUX0EeXQK10lI\r\n8xcJHvlbD/XRjiGhp8U73TYFuX0vqDASgSz4sAcYkBxm3UvDvUu05Yrc8io4\r\n/kjWaLSy++a6A0wi+FwJfp8VupQr22cgEtQMvoeldTkmrWZ0zcD+yy2Wy3N5\r\nc46vSXaLfJxByxfpKTZFeBArVLp5QIIAl8Ed7aUhiEeTwCgVGy8URB3PcEv8\r\nlGAre0YOTIETcdhZbcLwQMavfoei5Xk3G/EchVHHgQSffB4FqsUq9nK880Y4\r\n9c3crcKUmvcu16nv1/RUdARYZTvL6DpY6VU=\r\n=MwA+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"b1b576e68a716d1a80dcdbde7a572c11ca937fef","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.9eaee7936.0","@material/theme":"15.0.0-canary.9eaee7936.0","@material/feature-targeting":"15.0.0-canary.9eaee7936.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.9eaee7936.0_1670443349611_0.3702892262906896","host":"s3://npm-registry-packages"}},"15.0.0-canary.1d37bf601.0":{"name":"@material/shape","version":"15.0.0-canary.1d37bf601.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.1d37bf601.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"430eb92ee5753e7f2f6e97272f213db49f716681","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.1d37bf601.0.tgz","fileCount":14,"integrity":"sha512-Vx8WeLzsn5OC7CPFilzHRFkAiwZmx2VUXpuOy94Rpg3A0tEpZXHBSf1au5pJwq3wv5PEeMe+lnX50wvw8yP0Gw==","signatures":[{"sig":"MEYCIQCfebm9mE2pwwmnOZlpxY7nYPs1roC8YaI6lacIo0uT2gIhALD1RntFXX9/5kGuURQp6gUHoXxsukUk4jEAK603p5wz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjkPpXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoFiw/7Bf9uo7DNQp+xVPpnc9D2HflXqyn9RcZtsYi6QyVYUYEHn72E\r\nonJwUcP3xaZIAQYw/O6U2METdke/lW6ShpO26cHsqmFfh4reL/iRmY37KJbz\r\nbgLMtk7IcV50wg2JAbqxciaVouGCGPh45QT8YDleGYFHDLepS8BrSyyyKOYh\r\noJgQTJFy+QVg7WEvTzKCmn2bS7/9j5TaZSF44wjUPg3/dl605i058M++teDK\r\nVXdXP1S+7B5vnDJSTjSrmEP+H79ytmlT4srrdgNv6hRJSLxFq5gZlYm+h5mo\r\nloKkIsarh5YOcZvKmlex6pIMlV8rdxmvZT9cxSRkHKwbCuxfvDxNKp7yMLpo\r\n2jpE+Y2lnBX2QBakftOMEF9EaUzeJKSQZBKifdC5MZlaxE2dck207acC7Alb\r\nC8A7daSy2aTxBHJOHHsRIpiffg9P+IC+pEpOdKYUR/CrEay94/YFyaA1TgT1\r\nDWAvKg0sBC3sAeD8wbhG3wy3pb6f6FDMtvj9ekGqWzPa6/8NkvrWYSr23P3F\r\nlj0KC1oRVxuOmRm5r8VKIJXqcBZHB6frvsIpYfIFTiS3USWQq20NDNTj+75h\r\n13oUcDTcPLT+b6MPSncmeIf8O5s0UJSNI6PP/unk1g53SmO5aQMhxel/LP4c\r\nWTagc1YmKwZBJvBma2rjy4ue/cieguPXCRw=\r\n=xhSb\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"747a03f19fc88f7a2358a382989e729013e06df4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.1d37bf601.0","@material/theme":"15.0.0-canary.1d37bf601.0","@material/feature-targeting":"15.0.0-canary.1d37bf601.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.1d37bf601.0_1670445654938_0.40711612838236677","host":"s3://npm-registry-packages"}},"15.0.0-canary.a5fe069d5.0":{"name":"@material/shape","version":"15.0.0-canary.a5fe069d5.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.a5fe069d5.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"049a18c880fe8e3c6d423a72013ae13527612d62","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.a5fe069d5.0.tgz","fileCount":14,"integrity":"sha512-LUpiyFXyBuJFL70sTNm0JArVdlhlq2hb/A21TjRhTonRlwrdtpoNgWwk+Xis1RQHJScVIlsPXjtQ2oftz5R4DQ==","signatures":[{"sig":"MEUCIQCeiA8f4h4n/NeP2oqoDAXE+kHwwpS0gpqMzluaLHgzTQIgDIZV1CusvLr0j3wjJSwh/zibqUAgdiH4Upe0SNdncZU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjk4HlACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrq2A//dcqsXZL5ofXFCa9i1yjznRdqvWKkRCKnOOzpJh2QsezxUmd6\r\nr0U9xsCXdRYc+kgngf/Y0HpLYkeL6KjCROoB1TvkMj3kIIdzT6Iwir8ujp1A\r\n8BYKfZLCeUthsgEnUDYH4dW2h1/CcIOP1AfAoBxIEyQ5718vRr6cizn8SeKA\r\no4GePERI5DCYYoysEEtHmy4dZN04/s9aA9rY3Eo1UD7yYEMtwJhlUGzcCP4F\r\nfh40zosSkjEKlJVdNRLr7gGamPOC6qQJEJBrNtow1mTtd4rKkYY/L/6GHrxn\r\noUPFK07U55CV/aWwq75M7RPnOvVz0o3qbuv9ET0GoVS/C3jYSfomp3h4x1lq\r\nGFIX/zvsx6huj7G7be8h6jR4VRisA0hjIfcgXbYUlCMG+il5tqU6IY74s8bZ\r\n2KLa/5f2aYZbTgeBjuPAg5Ufqq47/07/KRBmxB9fQlRWJvM/DZjC0JLNzykn\r\nSbWhF2EX5N5u13z8qXeU7bSJ67GJj+FoW4by5z25xpRYPjDMBvL9l0lDRdDU\r\nSVEMXzeiu/oySl+KYmTnkbkf0ueW88ziZchYvLijFvwiCqurofXbJ/9f6O3t\r\nnrrmeVnKSSzXm5HYYPOQkGtMufogg1Pxi1XUHGMjTI60Di8Pb36jG/WgjqL/\r\n+EdF13PsaXJBTtJk6BsZHfseLVgduCULj3U=\r\n=Oo1/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"c41dbe93704a7d03ea10d8f1b4de13fb8c6e19ab","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.a5fe069d5.0","@material/theme":"15.0.0-canary.a5fe069d5.0","@material/feature-targeting":"15.0.0-canary.a5fe069d5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.a5fe069d5.0_1670611428807_0.2950225140998699","host":"s3://npm-registry-packages"}},"15.0.0-canary.ce8b5326f.0":{"name":"@material/shape","version":"15.0.0-canary.ce8b5326f.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.ce8b5326f.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"06457dff4046c7533325075335f06545afdf6f74","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.ce8b5326f.0.tgz","fileCount":14,"integrity":"sha512-PjiwvXJmYiQRZf76hwR3WsvNS8xgBC9KKvUfS5WZMWx7Eg0055d9gq+mWUDU7I60enYS91FS5MfQIlK3hRbvog==","signatures":[{"sig":"MEUCIQD6N9PkjwxtlmxHXjXPSSXY6+3cSqHctpgTBaRmrNE67QIgJa2q8XmtWbS8nhvoDUfkmd9SyndIZV6YSlKY40h65FU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjk8USACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo1wA/+IHpXj6vQ+0dW4fCmlWnA8fcZ1an1O3qwb7BGwXXROOJQx+8w\r\na1SIrhkQqXrCf9hr8ETD/hJZtPZ7Nkm6pc77dvMvLbPaxT5BRok2ktAbZKjw\r\n3D2UV3DtaS/RZVsSfj7UEvAPFXUVRTqWoRlinrDi9WBRh1PCXaJhT0PBlnAh\r\nEgo0N61fyDMcQwsyXLFGoi+2bXnghn/hfF/pYvI1Hjz+4PLSJlQ1Nxwhmi6V\r\nK0BYy+JzZcF+VRl3dVFur8H/vRyLC7rLu83KtJXb8NjuXrAWZYT94uaCZ185\r\nHIrZJzU50kZXxXUHRFFXJx45xlcBY1Mt0mtZi8zBy13jhT1Ff0PInqTzSasd\r\nGnwl5evAuFFNYoK0eZOJ1/UOeKCuYxcp2r6EIDWjvfAr6za+7hGmcPQNAfpB\r\ndv4vKtrJ8YP/lKd9QU6StuCpDyvzgSEpq4V4UwCSvEepxAcV86s44jJcdaz/\r\nSKMeqLBb7rhHM8M6gBAsJglXosp5XEYecEsR+FF41fVs+c8toNz7iHjGBwOT\r\n3bH9f4XvWXTP9rmYJD8hpwlzgybx+4AlUlNcKn0uy0+Fd//jmI8BXGA/f0up\r\nehlvx1YYyotP3mGQjWy+6x7gefNNYa+NSKZcAsrRRek29i6SnnXn9T7X04Uj\r\n2C31N1xsVoDwLIZirVtk+tbevF6CZkh3BIc=\r\n=vaLm\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"8ff7f9974a16b8178376e943748356193d364587","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.ce8b5326f.0","@material/theme":"15.0.0-canary.ce8b5326f.0","@material/feature-targeting":"15.0.0-canary.ce8b5326f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.ce8b5326f.0_1670628625991_0.17650876033539853","host":"s3://npm-registry-packages"}},"15.0.0-canary.43f5323bc.0":{"name":"@material/shape","version":"15.0.0-canary.43f5323bc.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.43f5323bc.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"95333717f91509443fc05032effccb3dac4b6268","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.43f5323bc.0.tgz","fileCount":14,"integrity":"sha512-iP4UlcLAJzEz8BMnTaQOZai6eB2eKeAsWHZDC4Igp4otz/G68Renhpw9e8mh4FX1ETlLmj7j8lu+vqTKtQD9dQ==","signatures":[{"sig":"MEYCIQDVceHQGVo6QxxQp+NfRb0HXcN3MUN1rQ3EDsFj5TL/FQIhAIJGtNVWXVDnou+fKR9nfEojhpy9I54ankED5MmC08Yi","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjl1rDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpwWA/8DNKCFAnNrl3Z6NPeN1KvqSDeIHa4UDRv0vrtvGMw61V4qndc\r\nByrDuP+O3XBWSJL5KuCobW7AXGwyj/lX0X6Zba8FuycjDgI/4FT3bD5dG9ev\r\nDPVXb861wYhRLpZ7KR0ZUenVYwgX1wz7pt9ZkZhphpUWGFrecx+3pIOO+DkB\r\nczN/ASQfDJYUu44kXklk6Q3oDOA5AKOZz8pWNhDBhkNkpRiVbHeF8A+9FAyj\r\nR4FGBLvZtixy1ZYuuLfgfWz17REfOz6timEiS9GBpG8lnRMPlPPLa6MnOiAi\r\nhheqwjZ2sP5haQqSXKcYh7GjU8MWkSWYtBId3gwufDR79BKmB42LMR1r4o1q\r\nYIUQ2r5xYuUELBjGBfPl5gpfPo1orhrzjHB1L43CGYJPYWBWrOWSEI0sWB1v\r\nMvivc8x79Jk8h7JAPYfLbwYUNK9Q2jc5vHqQAPwSCW+PY3hQBEGtw4bpQS1u\r\nbcOicELAKVybeUhO+qlzvzbvFXKC969hk39eHbQpp3qyraeRoDmpdL2ZLVyJ\r\nSg0YPvDF4Gfnjin2YeZ+Kw5dyynmPSBE5QsY309WQbFb2K3rXAKyRl8Vpc8p\r\n0mjOi1afjx79uAsb3NN5oBSu2jMQvCepsBemPF8Ja5Vw7nVIKr5azojJn34A\r\nOlQFHLS1W2QjmqhYIg5ym56Nhi0P3e3jL3Y=\r\n=XHwy\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"00be798d56184d5daa74ad6f53d4992db90688bc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.43f5323bc.0","@material/theme":"15.0.0-canary.43f5323bc.0","@material/feature-targeting":"15.0.0-canary.43f5323bc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.43f5323bc.0_1670863555571_0.5627857261876459","host":"s3://npm-registry-packages"}},"15.0.0-canary.5490e32e7.0":{"name":"@material/shape","version":"15.0.0-canary.5490e32e7.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.5490e32e7.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f8d9f8da6dc5605c6cee971a4a05a03873eeba10","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.5490e32e7.0.tgz","fileCount":14,"integrity":"sha512-dAkokbirXMqDvkeZP6Slh3TSI0oUiuereMTOERQLxgeS2ok4PRM0i5axUbdAiYVqayxSPVEg81zoyvWbYA8b+A==","signatures":[{"sig":"MEUCIQCo2CfCbS9IYVljasO/F5SWRtHSeMXB8M2xSP0nphrOcQIgSHzzUQL4Iq33D4CsNRQmYBl5I2Z44kAlGujZSU//cew=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjl157ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqoeA/+Jvgp2YK7aBMujdoqocK/rmsgJk4X/6YoNw0XpxK2WV1jPuUi\r\nHN/ExmbPd97sZBJZUQiXkYiog4v0POSwbHJrwp/eq+t0VYeM/FdlE82JDh+u\r\n/x6mBCyO14R/kNo6EznQwDG3rNL/q+BMN9vlBoE2326+jSftkC0+rRknxs57\r\na7S4OkuMTI4Oa9vqffYiwniNWORdwtEE+jmDkbt/AlmoHL1r3qgvSKzd9aYY\r\n6LaX0HpTU79BokpXhd5nFQ/CMc0M9JByD60bT55XBckyXbPJHG8DFZlHAKvz\r\nXItbD7TMlIRL340nem30syq4jTKUSSLbGMxBjBcnf0CudkWl/FuseGRRkV/A\r\nOGurCA3X37BBUb2IFtjM6PzxIAvnxL5wsK6Mqm80KxBK+NOc5iYteGx0mx55\r\n6tQoF/wmnNJUcwv5eokZAZ2YnwG5AhEJoYbe0u77CFXF+hLtZ0V0PbOZZ15j\r\nx6qlfP2w01EVjk92n3WyqwmHJfnzNWsXKCq9P9zYh08UShjWqRxbrtoTddea\r\nbeOOG3shfIkZARy+438jmRtQh6Z+v2fUE3pOhl+oJiGrONGi/0IpygtWEXTy\r\nr1s6KwQlO16OJac5DdlxJo0noWPPMgMVCg69tNckEZCqigFsSjcIRiQXtAyQ\r\npdVLYMVtiKXTUiB9QOFyD999h8n/ZlCHcCA=\r\n=2KZY\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"968b84204c7a8626355569e2b90063abd574f7a8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.5490e32e7.0","@material/theme":"15.0.0-canary.5490e32e7.0","@material/feature-targeting":"15.0.0-canary.5490e32e7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.5490e32e7.0_1670864506866_0.8635063923400825","host":"s3://npm-registry-packages"}},"15.0.0-canary.817002c29.0":{"name":"@material/shape","version":"15.0.0-canary.817002c29.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.817002c29.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bace09cfa3369115d333ef026e1d591ca1d31a1d","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.817002c29.0.tgz","fileCount":14,"integrity":"sha512-q5ApEMbsmlk31kFrB0YU0R6V8lQA/kDip6STdocSOrVvxYFh5S6H+ybCgeMYwsKVnftyGLrG+r3XIYLrB5gK/A==","signatures":[{"sig":"MEUCIBy8Z41gz40f26Tw37q21Kkk+WsDIF2D4/jQpu884qgkAiEA+r0qMA3EyMoCfR5uK9Af18vG3p+NMYjXhqFValb/6xE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmPRgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp03BAAmfVnb4HIP2g63a4C2zfOkICnKfqUHCaKS33QLmhh6TUoN5oC\r\n2PGmOX9nAcIBwIbUpHG2DDLssExklz/AOxa8Q0tdxaErOEf0f6OdpXA5Us1T\r\nUUSLwh8xPMtrnGtx8O96idJopSCv8nn7c2eUZpg9K5m5AkgQDbssZ6HStKZw\r\nYQ8Ijf2zwfRZGxbv+ubzrpp7W8PmVyktFiq7/rmwOFSa7GXBuChgC8huDWh5\r\nkz0sBSdRhIIvAcsWgkDMjay07EkOA2StDVaYW4mYKLB1LJ6xDiaOhzdkSesY\r\n8vkoafmqy7rNJJAl4Vh8NnVLAj9TZIAoBVxIreNwmwKL+x1UGHILkydH9TIa\r\nmaGkAp2TVLYd0kN5B+3ksyKHKALIqtGTYPQX4cY/vSNzlCCg1J7QsugjlkYx\r\n0vGJQGluoID3OWXPjfq51JeeVp2YE5oMid0qqdmuojvCdWcXlo9RF2kQVAiQ\r\nzYnD/Pe2eajwjJMSCqhjWJu3Q1X3lzKP/XZ++J8p7tpig5UFJ3BB5/mdxyrd\r\ntM0Nv/zvOVlkQz3IV1chbWGUaL3mT//NKkyv/OgAszKPA6SLPfC+TFqd0DoK\r\n7T6PhhZipjemiYpUvlV/W0Ur3RdOjw16yrDDMMuI770dJbMNL4rnLoOYY5MI\r\nQdhy0TxGQEWQwOcUDmC8Ya1hIev5CtpYtLY=\r\n=Mv/p\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"8a85122d0f4bac7142c66fa54e2fe9a569e7c4a3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.817002c29.0","@material/theme":"15.0.0-canary.817002c29.0","@material/feature-targeting":"15.0.0-canary.817002c29.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.817002c29.0_1670968415891_0.2268487837930635","host":"s3://npm-registry-packages"}},"15.0.0-canary.313a1326a.0":{"name":"@material/shape","version":"15.0.0-canary.313a1326a.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.313a1326a.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5bb88d65da5d2980d6e8e89dc32cba4c12ef8a3c","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.313a1326a.0.tgz","fileCount":14,"integrity":"sha512-wZwJdAs9+ujS7J1BuvC85LxSz3MopcmwVgcfy2r6KTFeTxI0ji7IxPEhO7nN9R7cS/8Gyh12HtypWdLmnSAcyw==","signatures":[{"sig":"MEUCIQD//NOd7/BHFpZoBaVi01cBdQWHEM8rdCysKVX2qLW2bwIgMwlJp8uvbNfvIGraQ+zXpLa8i7+z9pk08BcXdPmKryI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmaVJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp2fw/9EtS1VkBLPrTX0RTkWXCUghIzmZZl26QKhd+1199safzX+zTL\r\ntQLgsQd7iezNoCZ08EqCHT1uI3MZZKTa8gd1gXgfMecAY33n6b1N7e3pFxxv\r\n+Qe/m9jHvoVfAZnhUYSE+kQE1p6t5YJadRKapMFq8yDE4z6saGYURyAhPhEl\r\nlvsoCMgXkdZu+v77kNSw+SXTm+Y0xDFZKCItIi02UtqTvSPwsjXN15EJXQi1\r\nZtNDNOlS677MBQ4asXvME7JajMGoaQQd4Zf4B3kTAZdoXVqbXEmcqGRasM/Z\r\nGi84quPhUlSm6wJo36FsMdyRnd5tyStpNHkLLfN4OFJkWzzpmCkeel4ee6l+\r\ninRetRtuaL8xlpIt+JsQgt1RVKC67qLEDsJaTEHfV5NTjRWm60fqhVwhMw2h\r\nLyYQaSrhbgq9YiJcZXdFKhcU8HlqpLy5ZEuD/MmBQn4cTfoVBd/CH+7Qbank\r\n4KhM990h5Os0aw/xLfMe9qMScaVIWIQ9l3ym4F4oGJjqid7VhnmSGN6K+8qx\r\ny4r4g+9zpoB7aFzHyWrKUnZiQ2t3SKYs/9F0XR+dDXaMv0qCp+6J2PtzxGTU\r\njTc/7JTKsEKOJ4EXRT0E0Xb6CBVhLmslKbZFuTCxEc/G5AmlyGaIT7AHnm7P\r\nzdI1pUiRU7JI9N4oglibHgfNwAImWHaOII0=\r\n=sd/n\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"899522d523dc8a23968f530bb4de8698a5b0e78a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.313a1326a.0","@material/theme":"15.0.0-canary.313a1326a.0","@material/feature-targeting":"15.0.0-canary.313a1326a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.313a1326a.0_1671013705038_0.2528437877374432","host":"s3://npm-registry-packages"}},"15.0.0-canary.a69c14e10.0":{"name":"@material/shape","version":"15.0.0-canary.a69c14e10.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.a69c14e10.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"95cf512f57bc22fb4efeb4b5d5ab35ab00f430e4","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.a69c14e10.0.tgz","fileCount":14,"integrity":"sha512-vhxh/kv2ZPBvKRyEvC0mZkaOVC4MyjdboTuxDJSiNrobYI40AhSD/I741qMeKk0rZdXUDO6AppFiC/vWSum31w==","signatures":[{"sig":"MEUCIQDRt+xGyE8KSwxD1QXbQ/36/y5Ieb9B2wLEhip+4AnH3AIgOmLVva3NLUGBg0z6yWPW/io6aXYp98aU+6pPwRtGhcg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmbEKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpRaQ//awh+6y5i+osvoPHX7DeGospe17cEf+Zb8HZkU1VqfDatv9TT\r\nkfc0fohutYsZauNmFxoiULzuBQWZWd+j9Jh/UQTPZqXc9Jj1hm//kea4Sfls\r\nahHVwDtN5ZoKilyZfr3GPvw3FIdF5JW7RwZ+fQqsZxjm+be4ZRei0LzT9NtO\r\n+Ra900kpig43f9/9Ab+AZp9oiyIkk9YVxK7pfVQcRZlDFY7oRGeTidAhqJ9r\r\nmEGg8oKtOoGm+6R5gyoQ8/0HXUHZHyRLjCv87I6lC/peBofoygXVLD9vNN71\r\nva4d7Rh+MEIDFKWiRiAvR2zUmrRZfUYXOWY9aLCRAcbD4wfl1VBQlYKrzIzI\r\ngngyRD9NoE1A09cbfXA4pYxOsxQAl+tkboDhy3bX5ZARqHzwUt9liWBGqaLf\r\nT5BKatbIV3OAMuCAx/J5t6P9Uqoaz4zPVKBNDTQyryfycaCqc27MWiWzHz0b\r\nlGgX9DmkDhOtjvQSi3RC4hvp3TP3thaDY+YtCKb4rrlwkiYVh6wm1sX7TYTW\r\nD0rb7RpNkb+8QHkYcshz0O9Ll9vpl2d6b3MdtdE4q0bulxKxQtKB5kIW6/Q5\r\nIyorvzDbrxrfizl0L0T3XNBLHSDWzQmtO+f57sitxB2lS4EPNTWBwM9OecCe\r\nNu29C2fsrY0ONs59uXs0HFdgQPrYBNbLT/k=\r\n=Ym9R\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"39b456415cb22d1c1b4de3d505f0e2412c1f5316","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.a69c14e10.0","@material/theme":"15.0.0-canary.a69c14e10.0","@material/feature-targeting":"15.0.0-canary.a69c14e10.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.a69c14e10.0_1671016713922_0.7307528404550772","host":"s3://npm-registry-packages"}},"15.0.0-canary.f43e0ceb5.0":{"name":"@material/shape","version":"15.0.0-canary.f43e0ceb5.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.f43e0ceb5.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b7937569b0815c1d75b713355d25ca6bb6cf3fe6","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.f43e0ceb5.0.tgz","fileCount":14,"integrity":"sha512-+FjtBsPy6KBcThHu0Ii7/QhUDm9uor9TDvcbyJzpXb7dc7umL8VLqpJBhAHeChqAFVabdWjbUKAIMpG4O2sSYQ==","signatures":[{"sig":"MEUCIQCzTuPKM6eqbMaLcp3I/k5eUPpa/jNAzv6sggeNI329aQIgGVaibZPKZPyANZMKplF8rdwscLOsqinmC8jPFPyq4bc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmf1tACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq6HA/8D43KTKCi80j9P4J/8bYfftWWnJbdilxQZc1xxgB4cqC83txV\r\n5zqldSHczvI5d33kxCYu3gEo2cdgkQ6T/5Jrq/ewJW/UrQZXcHC6L+fybrAu\r\ndjJLXY0fMqdwWN6KSy5D1DHCQETj6416H7dGbu9GumlvXZKhNYK/4wjj4P5T\r\nJ71DtDpS8Us5EzrhK1nab2+T5JfxpdCuZCrSDlbagXcLDG3WBgHB8QHj+Bk0\r\nEw41ktPF5oXIRRAtOEIMrfFAFQbZzN4mdqUzvPEdWCE8ihaempLp9qmQQ6O0\r\nr8yrc6NuHiW34UTK6NrDYpyfYnxqA5X6u1pww7yiI8mYd+50EjuXJRaSoLMO\r\nLW1dQv00IS5dxKH4b7LppROzL+dodW5YU4VSP4GFvzCJn7USPhOcKPMTMvOp\r\n/MkuiddVEaXL/RXQZldayIYRgKU11tqpMgHQHp7CMp3PQ/lTyMg7Jn54wj0R\r\n+E8E89IUyGCc2s8sHDZlAJQ3SyLTVYb9HrFlKRA9dbl/tAGKib0Pwd5CvREn\r\niaGgo5fz4sNVDBJriSKFDHqKUwOfxJquY5pL9Bt4S4/NQBSSaFcUPx3tww5T\r\n3W1Xqc7UrOeZxGQop5FU9uIdpQfuOm/ORuc3I0T/g6pvmGMoM3S4HtUDlSEm\r\nwT12R4rM7hp5fPiomoYK2mjwXh2zzCjvKAo=\r\n=5+OD\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"35662ba23c37e102fa09f72d61e38e5ce3b10881","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.f43e0ceb5.0","@material/theme":"15.0.0-canary.f43e0ceb5.0","@material/feature-targeting":"15.0.0-canary.f43e0ceb5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.f43e0ceb5.0_1671036268868_0.5725956967265784","host":"s3://npm-registry-packages"}},"15.0.0-canary.34767110.0":{"name":"@material/shape","version":"15.0.0-canary.34767110.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.34767110.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d5e7cadc1e8e826c3be8573b60df0c43f41d5cc3","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.34767110.0.tgz","fileCount":14,"integrity":"sha512-nv1GWitsF3tKILgWZO8Oq6OT18HtBw6fVc7ykhExu0R3oLYgy4HNxn0zGSd4WaEgbr94JS7YHlSCE8e4MgB9Kw==","signatures":[{"sig":"MEQCICky74Zx4ur6FI42KUu3894YGmrlqdr9jd4rbkElgp2LAiByVvLJu0TotXJw6z85kybcrELf/i8ORTwDMp11f9njXQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24801,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmgY8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrc/Q/9Gc49QB+ICZEl1uNJbpSAM6NWqvkto777KsCW0gVdTN92UDbX\r\nC/Nr8fwLG+DM4b/w+n6nWT8qyMh2yeLbd1t2tdxQlrKH2qY9vzWt+CXGJy4D\r\nF+0kRmJ+TlYUt41zrmghfn496LGTEEXk8uej7oOGZHDaLQuigoImxMNi4tun\r\nGeHnt5if4HZstrWJoStKcgfCIDZ1KvPwdve5A+WaLhJSTUj/XVqQh0rmg01w\r\nbMFq1eIGG9BKazSTwe4wi/pipyjs6TbzljTRXRZB6UDdMDPoFqo2BEjEW+50\r\nfDhco02OyISeVuL69gABp5XPetj+Qn/77it62WIzviv4hMteLSUaD34nO4rt\r\njnMVSCYOQayOWCRKS07PIGljxlANVbrH9yd41Rw7JtiPRpq3P0hJ0LLuOlNT\r\n/6yBQI3rv0QH1NcfVIlnDffIoHA7m8DAPztxssW6uaWjK9SFhMhRLFy3am9Z\r\ncg8f/1rjnIciBedWJbk0hKOXcliwOWBr7pa+MJV2VoeavqdL94l6ena7seeP\r\nSObubluSqMPZG4yuJglGiH2P9L9HpGFvfcJW/DOLAbUJhQ2Re5dF/6flD5YW\r\nRHs28CYInVqA0Upg+DRbacS08JHoi7mJlnhIOZuuQy9qNwKssS3ElR7qp3rz\r\n/aVQx3rFa6iHI0aOH5Z/LAbdgCHWiWAXub4=\r\n=vIyZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"ed8adbbccdff96503e43dbe6291e95b5d2bca2c8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.034767110.0","@material/theme":"15.0.0-canary.034767110.0","@material/feature-targeting":"15.0.0-canary.034767110.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.34767110.0_1671038524699_0.44666915225644255","host":"s3://npm-registry-packages"}},"15.0.0-canary.1f99f3c50.0":{"name":"@material/shape","version":"15.0.0-canary.1f99f3c50.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.1f99f3c50.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5a3339d2c2d4f4a1b80f268b21c879e3ad437023","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.1f99f3c50.0.tgz","fileCount":14,"integrity":"sha512-VkcPld1JaypkkHicdukNEqznBnlKCGRQV6Z+h+r9TooyJ1Rqa3IhvrXM32Rs4Uz0I6sSXvjlgLhmKguXhfUn6w==","signatures":[{"sig":"MEQCIBp0Yg6P6D6l1w50Z3AwGsxiuB/O9BNpW92Hmi+3pEg5AiAyJsopeHl8/uh+9JRlQLUr5h/hIyBqNAsY4ONgOOIxVw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmy5IACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq3MxAAoFTrLM1bPyyyA0hPZS7FVXZDF6Rs7wVit9Rxttbcy2dON+d8\r\nPpoVTqIL5HrktK5SAvwuVB85Z2iLHjOxslXcl8icTQqS0lQcWzl/sl4cT2by\r\nk96P6JL8OKWsX3xAnUkEeYvO7fJ3/SkcakLBKy7favnVabLqtl4EkBDJKnHL\r\n1y73gUdMa8RaWmnulpe433DnRd47yeq2ep3XLCGfDlhV5ecexJeIHacY/gUr\r\nmp9cRB+ERH9T2roUIIMMhNiGW235Lv3II6/dkhEojGtBd0cyRSQFlBTh374v\r\njE0xe7PTKStfwKw8K6vqR/2I5nVzRVcQRUZjxi3AoP5izbEjJRRgQIBFCiTB\r\n/5JLNjFmJiWentdw2c+aCa0rPgTV1UT2rpy82/8toNQb3jl4y0ySBMipNcPW\r\nqBK31EKPy9CcReE6NNutBFjhjqyUGZg0xbqb34okRk2szMS1C3hLVBtY/yD/\r\n2qFhToe31tls/npbYNqxV2PSgpWBGNN0Ymm7wKG0wYjg9BGncd9BqZxZ6Npb\r\nklDbPXZ9jRofw15uqVQZImba8z6OYSVY2PFEkOa2Ma3MwhspzD5Oo8g1FZpE\r\nqJ0ychYhlV7XxkTtHBQPmoBIqfmsi7n9MiJINXsugg00kTFrJO2naa7XZkAl\r\ninx5MJGwiINFBC9kt9a7tzMSzjX2CTQ4QAU=\r\n=ffLL\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"c9094e8faca1eaab158d26f7ca8ee4b42fb54bdb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.1f99f3c50.0","@material/theme":"15.0.0-canary.1f99f3c50.0","@material/feature-targeting":"15.0.0-canary.1f99f3c50.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.1f99f3c50.0_1671114311857_0.6475554634435583","host":"s3://npm-registry-packages"}},"15.0.0-canary.cfd69490f.0":{"name":"@material/shape","version":"15.0.0-canary.cfd69490f.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.cfd69490f.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a091b3af7509dd49e65bb46983f7b4c470458af6","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.cfd69490f.0.tgz","fileCount":14,"integrity":"sha512-VF0L4BTueu2aizvTsrwn+d/Gf+QjFlYhyV9QHOqKsN9C/scpAEE1WdZ8tgA7PZrXLXoqD4yGC41YRBp95497QQ==","signatures":[{"sig":"MEUCIDb3dYkiUt4s9w7PrxnL6YgxCmqtA/WFHMglIpqWl2uOAiEAugIXoqHZ3iE5MsidWWcrjuYs8ZvyfvONaf5ok1nEFTY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjnNAsACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrALQ/5AJ/ZErtvhFsNHCIHtxjbD8WYUflmsN62U+9aICAQth9/MoBH\r\n37DOcCG4MzfX8q7KQVzgjcMmUlhFRZwTCVsn45qxr1IiiKRquo/eehsePiZx\r\nLSj8JwMhIWbVEMiOKQ4KAJwiN1QKDtuDTcutBNRIaRYtImZYe6oPD8cfWpks\r\nEpXXqT8ghYAQG5sUhwjYdCX1xsV5yKaOHJO22uNoPX7KYMRiQKXUTHwcCgDv\r\ng++mL0K0kSQWR6QNg0kdj0ME/mS6qVs3nYyDKMXvqp1Sf6pBv2M9Kx/mxxUj\r\n03k+udL4/fXvPOJqYIpqm00/qVyQqxmBXNIyhLm1g0WhSrHypA2rzP92MKWt\r\noj/wKlK70yXbPdF4Ay3Ix6ht0XJRSKkGfy9swF9H8/uo+z0KrK3EijsE62ut\r\n4Aqc5tRnY4tzoFfAHLNJnpfuiIz6XNlWk5pL6ylV7xPRqCIfgM8bbvDRct/1\r\nKiRWZhEjjEDWquDtOCDC67qHiGDHPSkGgEJDFL3MYr98X5Wp0yZ6ho7mgU4y\r\nqeLpRNYIfV0TsPlwsYS1FEsl9xkh3MHFagLFwdX68xRZRZCh4tsAJ7tmrgXs\r\nhEMqdjo3CK+xAwOvznkPxwEuB7t6VkwJqw1Sis5ryLP5x4x5oZ4ca9NbwYza\r\ntC3/75VjlnT8sZNsKIlQ/XXavADxwNB28LQ=\r\n=tH3y\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"a7b9218e1ea7572b08b54629159e6f3a98970096","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.cfd69490f.0","@material/theme":"15.0.0-canary.cfd69490f.0","@material/feature-targeting":"15.0.0-canary.cfd69490f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.cfd69490f.0_1671221292169_0.036536624561537945","host":"s3://npm-registry-packages"}},"15.0.0-canary.94ad8d986.0":{"name":"@material/shape","version":"15.0.0-canary.94ad8d986.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.94ad8d986.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"909b1819b76026ee82866fc4b455d136af5cd099","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.94ad8d986.0.tgz","fileCount":14,"integrity":"sha512-3e7jE1Af0QbA52edGU/laA4fIZD59UPVL7Rnf4EALqPMwyBiql4u4gEakr4O8jjWGzs7nS/8HpKbx3/8K/+joA==","signatures":[{"sig":"MEQCIA9OCc0GhjjwUKRN5NS770NyoSu2McomxWr4jCgZzuFMAiBD5v47XFzQcvh/7EccD0ap77icTyAVNYmq0vi/o61AuA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjoLr1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr1tA//dtA8Vgtqc1jZ/b7JscjYoZQnmPgHpWrKhhnAFIhTXew9LSDh\r\nPG0UaOPcqATEEpFMYLpUYwnDnu94OORn6kxyy/UCqhQMQD9IXaIpSfLbnaEE\r\nC/RR2128764WuCpTPDhW6jD+9133+Ac4yBE+aspcO4m65TcWDOz+LZZFloeG\r\n5KzwAM53MNy1Jqv2YsZBf4sXktVQpgIs3UycmLaPkzlvbp+MtQu2701IjP3j\r\nqYtlV5VM+Aku4aJ1j9YfWY9RFismw9hEYMPQ7PvoGkznvIQa16iz1kThrBDq\r\ngpVZScbv5Uyssm0+aatMehVz3GOE/BEqIcRZOWI75rHi7dAyYBrb/V2md2jG\r\nlYmLkm6ksqIonkkZ84ThKF/l9GV9eB0WSE+WR7rlLjPdVUsKdTlMHhRyAzyU\r\ns4zVsv3NzWsZ7SPzk70IHFDPs4BZ0sqP+ighAKoGBgzJQYtsdYmgJDavYlVv\r\nhZGuqjee4y56Z71ir4HqwrQMiyVJ9jbmWCKSux67zqVxTpzWWm6Q16OVmg2D\r\n9UOjMClOlN42qWcAsh9qsNRijPcK9F1QnA2ZQTJjzYO8a+GcCPGrGvoiyUNn\r\n7FXavfTaRO+opDuJ8ovxo7bigeXIG4fQQCRDLK+vti26ZvdCc6+I9/zaJN5x\r\nYBNhrNXcnGW3L28iguhvSM9588cpye7LnCY=\r\n=W3Mo\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"8e8a69afb313ffa8badca57ca15ad4a464b9f718","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.94ad8d986.0","@material/theme":"15.0.0-canary.94ad8d986.0","@material/feature-targeting":"15.0.0-canary.94ad8d986.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.94ad8d986.0_1671478005513_0.3271793027143908","host":"s3://npm-registry-packages"}},"15.0.0-canary.604264203.0":{"name":"@material/shape","version":"15.0.0-canary.604264203.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.604264203.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2164cf3968ec73fedbf2655eae58bbe85635e598","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.604264203.0.tgz","fileCount":14,"integrity":"sha512-e8W+PMfHwBoI8nsUU4zDzZkklRZbq+YZRB6qqo/FyBzi8HEn6a874XhNYqag8fBRUjiwuLH6myJsCAJ6OKq/gA==","signatures":[{"sig":"MEUCIQCItKxyL7Si/gjNJ8xWeD4dynjYKPxm5Sq58837FxmgzwIgKGSkzJW7bZWAxF+Hzl824i1gAh0lOXxe3h4NCVPta7o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjo31OACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpg7A/+JB+qiNOJbSQK3owny38PqToWLFkxi6TNCudtKa7wYxqSpHFs\r\nwyloe0vdsERcM6M5MSsRfX6yj2N+GRXJYmTbtQrueVOOkjFzezn8+ZGxCbbl\r\nszeaVUroWx3n3M6RyXCp92VIp9G0RjT4KJEbObQ/mSaq2HxJfL7SkknziCrc\r\nlSlzVXDavG+Fh9SG2w4koC6zlOMdypoJDwMB+/ksWku29zoqYba2eQ3jmkw6\r\nuXVERvK1ZO6WDtbYjE+g/3pgF/ZwmC33nFEmgWEwmef9BM+argsJ1Tvs7c1D\r\nbONdjYC5qOce5CABUSx7ArhzSKLshEfCuoic2LxzpjLu50InyzO2S9dt0q+4\r\n4q59AqhUPoSN+RGJHWZaQtCaaMtbFhReYh9/Cu8vEpXKYW1nNeBnX1cLzZhi\r\nRrJfw5+Aqdqean0tHL07CLCtpZhGZ5HpKC/pXSTD1GzG7HfXXzHGg71Elk6S\r\n9ztaA1oNaXEmW10OJAaGyF2gkfl4wlPzknz20+5V0wYIu1rMWLlUThDIUB+k\r\nQg8dUvBlGKZ/hqftc93HzbnnspgthY+/4XuW1OmzNEYS0s63vthzl/SY8LP0\r\npnJZOvayQP3xQmWJyon1CS/W1ionBK02m/YBUc01wh6Mvh45eNXpynnVKN+7\r\ni4p6F9CZrW5TScVTjqVOuqcahAPjgKxG7UY=\r\n=39Ok\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"e37bb80002397246ad3ebd1bf11a465b2eb763e8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.604264203.0","@material/theme":"15.0.0-canary.604264203.0","@material/feature-targeting":"15.0.0-canary.604264203.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.604264203.0_1671658830362_0.8040248812106086","host":"s3://npm-registry-packages"}},"15.0.0-canary.85bcff6af.0":{"name":"@material/shape","version":"15.0.0-canary.85bcff6af.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.85bcff6af.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"45b5cec84fd52a2d7d1f1bfe56572760e1b1cf0c","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.85bcff6af.0.tgz","fileCount":14,"integrity":"sha512-H/vKI7cqAD/809SbjAUqopEhNTFx0nx/7r6rJkLSA2JbQml5GuxLduk2tSsQhs7nojOAizTCYb2RmJucucWMVg==","signatures":[{"sig":"MEUCIA5S1M64ta8HVwEt25SSdXPlkbwiSwBv6o2SbmdfELK4AiEAhahIpsIUNXoKC76+rQKQz5IH5svQ008c6Pq0xaWCog4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjpDBzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq+AxAAhJ5pwKrvuL2UkFzrq9Ztx/dlpxoUYkNXYLzwT3Esnpg2GD8x\r\n04U9nwOIu2lKMqhzyCV4p1fsXjUPvkhM21IDxYl6AgK0qAPEdCo7pNqt13Vx\r\njSCtV+8FbF42r3KzvTrKcVEoayGhK/KmHVERXl1mYZhMA9/chMPg5aZgo8EO\r\n+rUv+EITnD1BDhNRHe+yfENQOIu4lkP6PHTRHDMiAZe0JAakcWAk2UlRiAxr\r\nLm0hF2D8tEl6PnrqEZfxyqD/2cFgpKzp/cqZpsPGJeOrN9MQ9hW+GOrDqU+r\r\nrUAa0v6ZZuQLkPuU4TdIHM+ea3xGClgDYDqSATmZhPCuZ0Qr8Ov72Oe/65OE\r\n7ueZ7Gh8flIFiHQWMBINkt1Gk+S2JF53Y/OxUEk3NRqBRLamOYoT64t4uE+P\r\n31n+72dO2JlS9n24KHKPZDqlWS/m6yfEQG4w85A0KgNMJW7lsr+M8EPWWQny\r\ntOLYJwenoY7DLKtOUXP8IXiw4AVcSZ8qHCxSSp982mthcq+jdMIJchiRVKPT\r\nmw34JDTXfKYyscPHtkbOND0CsNPz0Q6BKbylkDrqWOyHABLCbhEvJhK0wqNL\r\niHttn/uCA2xreIL+UQ6ez1MKl93D650yA79+uc+HB+0qhfMVuqkCE9aSYJqx\r\nSfI8HCQ1BLEUcxldoevE5zcyBW2MxBl7J+o=\r\n=RT8J\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"ccd1f76fc7f93266cd894275969c05a833a002b0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.85bcff6af.0","@material/theme":"15.0.0-canary.85bcff6af.0","@material/feature-targeting":"15.0.0-canary.85bcff6af.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.85bcff6af.0_1671704691330_0.19987587763181724","host":"s3://npm-registry-packages"}},"15.0.0-canary.ece3e8d21.0":{"name":"@material/shape","version":"15.0.0-canary.ece3e8d21.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.ece3e8d21.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e35cf799ada78dd63d08a5b8c2354f242756e084","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.ece3e8d21.0.tgz","fileCount":14,"integrity":"sha512-9w71xa80KE4yxA2tw3z7Zz05QndVZGq25U4lOqzNB2D8Yns0ZiCVsiLRe44PWSgA6zsQF9mwXDKDrxV0weWFHg==","signatures":[{"sig":"MEUCIEmvDC5MG0Q4XO5rS7wHsodEp2C1thD5u3Ds9BLSQXtFAiEA+RQMH1fspwa1EkV3ydbdDTOb2mGb0s7HxZKUtfgylHI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjpI/bACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo/RQ/9FQ/byj+Q5nY+wrGDe2yrJ8o1iE2oqSbGzkSW4/fAPfM9nhXL\r\ntGBx/wqL4OBXBL/sqDirhbINZfaHs2eIyBzMAjxFI25bs03zk/IMYK/VDRZx\r\n3vVO446hGJhb/ySn8zKAXfeqTOZH5JFmMJYWCiozqUQ3ddha/keNVr40g/GY\r\nY1y80hpYQ0FbSzcoUn7AORmlOaW7xezdDIviDCA+x/YChZnOIBIBdo3pHc07\r\niFYRxxCPCLlwBzdVrnl+HHfJvLsH7up8cnzIqBL7BqIUbMkeTfOtvmDidC8N\r\nDe4tD8SSzjlZxuKKiSxEBFEjzAk8gAVuNZHiNhwy7qWEehn8cJ8l3mBPlTTv\r\nGD7Kiwg1XvgUV2UUVQ8cIuVLLBhHC/YfHMZnVmAGjIsW5TS9t7lMkngJ1qTw\r\nxfMKhvd06csyq6SDjvgjHk5MRGLKEWEOccvZ104UqRn+NjvY/czMOShhUix+\r\nq/VP0NDJe4qWBKYXZfkVkAdcsme1RXblgn1XNOuqXxnkNQTSb1vdg1m+ZGxU\r\nufDRJ/x9OX6f9CO3W5GmrOw2/G0WqAZsWp5FAtZU349FeJtL9RhuUVNd2Zf2\r\nwbRndjZPPaesfAVYN3saFaFBXEc9416y4ixJoiD5ewcBvBurk+GQJHBUOnrR\r\nkxfQxI2+K4UzMFfbShbHKjoGPOhZLymVcUw=\r\n=kCz/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"1a4efd7042befb584384fcbb35f1ca445adaf1d4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.ece3e8d21.0","@material/theme":"15.0.0-canary.ece3e8d21.0","@material/feature-targeting":"15.0.0-canary.ece3e8d21.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.ece3e8d21.0_1671729113092_0.8310767144490634","host":"s3://npm-registry-packages"}},"15.0.0-canary.278ad53d1.0":{"name":"@material/shape","version":"15.0.0-canary.278ad53d1.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.278ad53d1.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6bd742dd182d884bad1ea23d027abcce7dac6300","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.278ad53d1.0.tgz","fileCount":14,"integrity":"sha512-uNe/3mFoa3kYt4no9LTMvFDpeYPZdK2b9x/PQJjnofNnOkJ1kBLi1h6YMrTl2DyFwDKpWDH4chQJHhUHcwoEOQ==","signatures":[{"sig":"MEYCIQCui19sJ5e/Of4wp2KUozlrdri6kmiDaNP1trVOJGYtnAIhAMUdZJlimyBey1eEHsE0m2C6aI5gDnbKrXfTq6/OBZvv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjqyWsACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrU9g/+NkTgupAlPVZ5BGUFXfHaTYbKtvWp9nXYkiAbQNVmBSdaK9IP\r\nR+V4qhfrh/WTl+ANM6dXlKop3B0aUnyIRnX9KJrmxBDydiZFl7nTUluYrw9A\r\nTZyKWqCYsWCBFwzEzSPUMtMyXSXi0jtx1OW1u7Afho68cHAOIEIZHDijOGST\r\nljdhfll6DzU6n9PzrMyK8wYpkfq9woDdXtTGs+a6A2PXNfmEEADmlh5Fymaw\r\naFgLP+EXhZZojn36Lcc4OX1hn3OtYHPI2qQvRNWzDAX3smr4ys9Nsbsc9whZ\r\n+KKhiOMKpwhDc6F+6UnOmqL4PBhak2wYqGo/m2DMsIInD/bpDY26JHjFtoS3\r\npav9kpDCjvRRUY/L6/FUPS8ezx/n9sMPW4GNxXqXGnV8Cpp7HS/88qo8v8ju\r\nDKJF7Lmxx+zsvikv5wVzMz4IiIcdLYkSUsjVdUG4+lIq53LI3zt6ZI0GrGw0\r\noYiqzPu0HOdzqeS5RFBzhsk/KaIWeTfkB0ogdcZzIoAlKjPFUNa/UWSOJ+I0\r\nwaXMcgBA3dYRtHFM6/T+VTY/jUTl2udqik/CpD9POoggDnlbj5yL3IUx4C5t\r\nKUHqAEWOPs366kPCd2rrcWc6DufwJOEW/yf7a+oDdbHN3Hc5NpbEkSaM3TTg\r\nWTNBuzQeWDMxmrImKoZupuMhR1+2iyyZLE8=\r\n=Q1Bg\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"967cf83d2b9fa8a3e6bd992aa107c66182e0c65b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.278ad53d1.0","@material/theme":"15.0.0-canary.278ad53d1.0","@material/feature-targeting":"15.0.0-canary.278ad53d1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.278ad53d1.0_1672160684061_0.0906210818013995","host":"s3://npm-registry-packages"}},"15.0.0-canary.a7d8389e1.0":{"name":"@material/shape","version":"15.0.0-canary.a7d8389e1.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.a7d8389e1.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d5dc55a7fc85c7f874bd08ff1c29cc963fa7f7db","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.a7d8389e1.0.tgz","fileCount":14,"integrity":"sha512-GHgu1joE45GCokwjeh9oN6XnSoq+oQdiNMPVJvCag56BtaWoPPgfOtjA8EuYpk0FcrNewubD7eHGsE/96ci59A==","signatures":[{"sig":"MEQCIDq5kfcxwDzLTLQXGRdThM70v9coITylmYGzN9PZlyH8AiB32RWX2dDojM3+etfc71VuJ4/7d9u2PNI9Zguf8YSPfA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjq0GBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo5ThAAgczX2paEwi98uvkoldvG9wxBFn2Hy2anwnExP1EHvEZVoTf/\r\n+Z1+hSX1V4DGiRGXG8J5y9hgyQ5Et+GBR1NVJARw1b5C6yOdkHz/+drDxGpl\r\n0PobnjWOju0l+Z1NJ2LmCmTshfQtGxa06B9AUTk90jz0trRC8S7m7Thkr56n\r\nKlybCUlkDOsck6juGQbhZN/rFkU083Dj0LYV9nGpcsj4B9ajT/KyeeY//alG\r\ncJeeKx9jYKoHU/0d8RpqML2CLNEbyjVFFp+WCj8L3z6ktT0vYwChCpGlEGyZ\r\n2IFmo35yK+3IBJfGfw6JZ8we5siGEKiTssLhNHjaeUS/yS7aFw5OJaP6GI0w\r\nrOnsiHeMQobywAKgbUG0NUwS2IA4VECUiCQU/+MXH5jhw0Y/S+FfvxBh3R4g\r\nLCdD4oADS//t5metvDyC9D/INkdrMsWc0ZnRltaL3EDVXAa2apJFtL2Yp/y0\r\nRexW5uuh80iyaUrEWIzBCVjdbDW2K5RXuqGWg243hjOYwidGwAkX1+Fup0yV\r\nbc/sN3fnxszp/BAY6xNO/BS+j7DQCMXgznun033i/7qtMkUZoCztPdrohAyG\r\nr2AgLGgTOjJwNAGTk0p+Wv/oXkOVmxlz6J4KLw/X2jHcQvTp57D19tw9ra1W\r\nwXVa1VWoX8guXbCgtDAYjCD8q/ec3SoKcDw=\r\n=zqO/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"f9b27084bc44ecd4530cd2252389b0dd8116709e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.a7d8389e1.0","@material/theme":"15.0.0-canary.a7d8389e1.0","@material/feature-targeting":"15.0.0-canary.a7d8389e1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.a7d8389e1.0_1672167809010_0.33526865890878943","host":"s3://npm-registry-packages"}},"15.0.0-canary.8175d5eff.0":{"name":"@material/shape","version":"15.0.0-canary.8175d5eff.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.8175d5eff.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fd7e971f8feea54a4f40715aa7ae5f04e240aad8","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.8175d5eff.0.tgz","fileCount":14,"integrity":"sha512-srh8lqR2gcuYwm30ywIC4hhpiJ5Y+2dOH81CK/hxItqdFzCI89rg1zxsmtsfKgQi1Egta8w7DlZCQwjpQGZ3FA==","signatures":[{"sig":"MEQCIAJ+MWFnwtBY7gCeCo0pmOn9FvVHuVmL1stNsyG++g3OAiA0eV2XneKdI7v2FMBIrnC93VH4zUwBQG28MTNUMvh6iA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjq6ESACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoqGw/7BJ2qeRPEsGb9NFYHUmJEJ51WJzgnFSok3z3iEowvb1NyzAmk\r\nTJNBghyRWxUkoh2M6fsbYURqtTb6sUnl2PrDdHIZzEvl3uieIlgat6kr26sx\r\neVIlViC9TMNAFm5nmzXl/xK3RgiVK36IA/WAciwPjWDkMQ2wkTBWzRjrYxKX\r\nCyY10nBF0Ml/2eNDfGLSxPkrFm3CWoQ2uB/IEUioZay4tbX2p23xOnDCNw5l\r\no1aKCNa2Ikt2RKLE41fSGLVO8eojLRMyVBJYQQQvz6BcmQdw1UITO4jC0Aea\r\nTj3C1CBzOPwXPdu01+wPtUftLlbWtQDSHTYyVhYDc6pO3Enx62l8BsdgLsv2\r\nyCPlEXx+pJ1o8QTlWTQIBuAhKZ/YPxV0Okf0DvuseTynR02kkxozLRMaEcIP\r\nlcynuoSi3k2igYQy7Ifvw/8kNcGth57hURJpBFoTuWxTSkIIcknBbVr/ryXz\r\nn7GRikUAs1zcIjfcRJymp3dhxcMcV/zGslnPAaF1nhbaQHqfoHfbq6uQSDdI\r\n9mvNN9mzhTcN1MghWXqzx2TOUoPtSc+B5BUEYNXvcTA3CDYh1Tc91ye5xe/4\r\nsLjMGPSbdBcNtfGuvY7blwpS7OTtO/BEwGeMD0puGEGeNvW/MzakOw69+yAV\r\nX5fFDdw0Tv4LJ4DzIimNXs2HCi5xZ5dZbVo=\r\n=S7DR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"c3bb551a6b32480853dcc8e29f7f8513d62154a2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.8175d5eff.0","@material/theme":"15.0.0-canary.8175d5eff.0","@material/feature-targeting":"15.0.0-canary.8175d5eff.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.8175d5eff.0_1672192273952_0.11188961023991406","host":"s3://npm-registry-packages"}},"15.0.0-canary.16abb41ed.0":{"name":"@material/shape","version":"15.0.0-canary.16abb41ed.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.16abb41ed.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5df0dfc51baa83000d081b05cdaa597d950a327b","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.16abb41ed.0.tgz","fileCount":14,"integrity":"sha512-nvxMKRFogV4ieqe0sze/7gBMcs8WBbnn7/f+uRWuGxlcDGc5OQzau+4zIPv4SgoYiiFVRRVjcuMdN18Z6JxV+g==","signatures":[{"sig":"MEUCIQCn91uzgnybkH172vhvI+U2KuKwI51r9zoOSbJv54dFdAIgSimKmXjfswXySnt0Z4MCujc5YHDbCCsFXDNVEzENi2w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjrJsgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpg6xAAotbY9fIlhDE6A4M4XPXm3TOYcnLr8gvvvJ7zhad50ID2r+Xn\r\n/F9/MEF9QPDmA7MTpomKno/62emF6ByC16eSX2u93NpnH7S6Hy7H7XDRfLEr\r\n7Mq0G7YWLIaGMbyh4K+zP3UlXpn38ElzG1+nCwisZ+spr/xYUtaZUf80sdfA\r\nKIXS0SOKtSXq167kVA3sUz9DXhuZkgDcPsizIYGwK8iRmN9je2/aGRZjW3kW\r\nebUTLRr2ToXTmIS+LaOyzL0E/K48kfV7TQUs83mf76dtv6OcYy2+hfZkbpVw\r\nsFkpmF0XFYutKo8pQHuMe990+G2ae/4wRVrM8ttqwuyyB5k6qkUjd+ieipNS\r\nfhrIABmrOiFX0Z2vkmQEd/y7kSdMuQtcNlz5VId0AWN7Y+SPuXR2igUO5SW/\r\n5A7cdJfflv2RBGz/zNSIKezdUwdsfTPEr5p/trOvnfia+FFvxKvWZEWYxxY9\r\nXm+FGGZmTxedPyWN1tsCUOn50rHiliI6Zo3IbdNjYK5IQNBBrXfc5GcLqik6\r\nZN/xXKr7B1KSzVaB4Ygz7YYsAvElt4Xiwo8NIJtgYX6aKIVd1C8a8zksSq1a\r\nRgKdZ6l0Y83jPcbqTdfD3CXpXOYj698Wh4hmf6S5WfORvXCYtwRWpnpnSLBi\r\nnGN6XfHCXlHhru6Tn7HrxSd64wsSnNiE/PU=\r\n=/+q0\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"d76b7c826f30ccda72f622ff722cc7585648dc34","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.16abb41ed.0","@material/theme":"15.0.0-canary.16abb41ed.0","@material/feature-targeting":"15.0.0-canary.16abb41ed.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.16abb41ed.0_1672256288361_0.34005834729708484","host":"s3://npm-registry-packages"}},"15.0.0-canary.e21dcb86d.0":{"name":"@material/shape","version":"15.0.0-canary.e21dcb86d.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.e21dcb86d.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f0065e9b65a588acad6a7ac452b26d6ae25c3a8c","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.e21dcb86d.0.tgz","fileCount":14,"integrity":"sha512-eJ/ft7lmDbP0UhW5bCMRGY4S9sEhPRpfImBZS2Y9K131Qiog4DEXX4xdsi8R0LXWQuE/WhbaREpyymtFBAFNMA==","signatures":[{"sig":"MEQCIG6jxA+t6qoTD02YyEdav8+uScw7EKeNyH1BUmoTVqkUAiBVn68hE4pBC38TlQfmk6KlIL9noml5tOcExobzuaUHEA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjrZ3SACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo3oA//cIbWon4tl11KP6+S0UVMNOGsUYIs3YStLkyCEis56VYg+fqQ\r\nhsur5Lngy98pmZacs09YpsWFE78kFrg83YzJ6O+zFBLoxWXJmgbJ2P0Byd5R\r\nawINdghgKqqoZzykzeVHnuL+jExyiRwYt6A8L1q15NcjvIM4x77l+pR3BVz/\r\nzkINVGY9cm9uFR2iN0nMLIDUdMgCS+CRO+lR6n3DBBcj0KAQhZh3P1Yyb1QN\r\nLIdpzvv2zEHEALBI+8/P/hI3S9nEqkblHNnBM0d2IOjgYj63ttRYLb5A+Mdu\r\nD+PGE865F+0h3ZcpFkg2+Czf01W3Ufv0afW1JZKXgu9MjRjHavaCIk3duc4n\r\nliD9GZASHZ8bk5qrmSshIn3UIXGYBOGx/4ne7ShHPJ5JX1LGbaWPeGAvIji9\r\n/bBaSENo9IF04W5So5o5DGiD547B5bSNvnkMcObIlfsQOAhwealk8iy5oN1g\r\nwXrJYGN+d/BiFXvO7zBMUiUkxY7xKM11pnBVkW/sI0+x3MJ8bskY0Ubz55vR\r\nhbGfH/UD1wC+luuU1i7L/y9XwjPjU/Syz/fZpR1XL+njVceY0H6rC0fmP6ei\r\ndcGQ1NDJ4ge840h+4YYaBO9AuaLGDPEPSMyib+xLe2Maqd+PBCX/HiZ/one+\r\nE/sI09Po39r3tztOfkq1MkOkJ05NWD0Qr+o=\r\n=pzrt\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"a32b4ac6d2bad60870533296fbc4acf050735b8f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.e21dcb86d.0","@material/theme":"15.0.0-canary.e21dcb86d.0","@material/feature-targeting":"15.0.0-canary.e21dcb86d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.e21dcb86d.0_1672322514114_0.9268562060008354","host":"s3://npm-registry-packages"}},"15.0.0-canary.20ab6f5a8.0":{"name":"@material/shape","version":"15.0.0-canary.20ab6f5a8.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.20ab6f5a8.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"606bd84c464d26fc72be3d36cec3d51ca5644385","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.20ab6f5a8.0.tgz","fileCount":14,"integrity":"sha512-VxACdJTbqK464d+bWOAqrQ3dBd49ANjrT8FQjIzUrcgBLdR7MveRs0EGVjIKgSXlgFIAYYiWnT87WI4NduD3rA==","signatures":[{"sig":"MEQCID53+EHGHPAjQCN5UxS5nIF7Vqd8i+1vZbDUNHeBkS3wAiAjuB/mI9JcZf/JFgSqEcQ97cz73SaJQn0Dn/uukXKIQw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjre04ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmquDg//XX0Az2AEmAolMzxJGjLXzOMUeBHBpJMsz2V+3wjzAjgM8cXs\r\nm3s0U1a1QRKqKaTouvMJfWHnBy/4XAhzGrHmsoGmkIUL9NsUHlnT3dvKbPWN\r\nNLLGgrA/O4TgpALHHw1toRTDBa0fKMexKQKc7CikX+LMwK9zhJG2JbFIXQen\r\nArh/wYW5ZNXmdRLy3V25V+DEW4UexfNkudGj9ISK4J/oW9PCSdzFfnHuGXJA\r\numD2c+phYk1ZmXrJMlG65S56sli0Mj6rdX0mTHiJsEqrVOyB8g2ri3h6aCVs\r\nyvoSYyu+T30tGPTIG/4J3yd92Fi9RQdciwXCgca1dlHOyO57+kiBira3GwKj\r\nDwMWjqm3UrSQuBZ5WqMlUo2JFlsB1EapJlAAfRdCWPNGwvIDX8orNirRnXVZ\r\nqs7FfR7Faa4sVRxoYrfEWzSX7/e9JbA/V4StTKBZsM1zqUpqmUXLNX3686Ox\r\n8FN7IJew+JDWfcmwWKlOruuOmpTWFAlYfBq80JmhGCkmEisrYVSzzQWizc2/\r\n2zlWzkHeSdEiOlAqwSN5UUXtxpbUdHJ9y3N5VlBpIwnIleToOLRLiSfKJFnP\r\ngB+k6FXTX+4iTbkmT9UwvLxUQLIj/EZG79Ef3ED9BlLDq9VkSgIlDdt1qYlI\r\nIbC8UdIaVrNN/7DR/AMAud5yCavxl5R9Y0I=\r\n=0rth\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"abf2135af6e71ea44b6e6a4de17493e5923f7255","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.20ab6f5a8.0","@material/theme":"15.0.0-canary.20ab6f5a8.0","@material/feature-targeting":"15.0.0-canary.20ab6f5a8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.20ab6f5a8.0_1672342840023_0.8736013426016338","host":"s3://npm-registry-packages"}},"15.0.0-canary.b9806f623.0":{"name":"@material/shape","version":"15.0.0-canary.b9806f623.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.b9806f623.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"94e0a5f5ffa40bad98a6c584be838c3c58b4d78f","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.b9806f623.0.tgz","fileCount":14,"integrity":"sha512-qhCYnBy9AzToe7a+r9zzDLqbcbGjZWYRFYP3StjV0YD/BemucYVZ2lOVHfMaJa+PNl74/7C+9PeJ0GUUBWepzg==","signatures":[{"sig":"MEYCIQDjPxwBo2kwlVv/aBbmpAEKewfAC6JUuRk4mKQLSJDo4QIhALOC44VfL+xyeD7ckAVFwpbY5qKhGFhg5LO6LEMN3tFx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjrh07ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo3zQ/8DusNnvBdqdUfVCXsUccFbShUrGkNYdbi/SPMI0Re0U3wsCTI\r\nko7SPD2jzBtAtJ7mjdPUejxXsL45IyEFZUIevMeGiZnCnOYU/2eN5jXVeE+n\r\nB5mnehLAQyI7y9TDzoyLsxmYOIgG0zcrD5JzmUcvKmCnKrLNWk9y9yImB5a0\r\nd3HzqpcDmzdRl60hIGaXbPKcCZC/tb8pFhNfhC+n64az88IBCRNd5kWAwVf8\r\npbCvq4BxDOdX2vwRc/aJe4j5Is+Ufimp1xbW6WScHSGNofQ9CKwCTVeQuZnP\r\nrE/RGZenCMJHY0JGvliq7a+Cgg0CyKXSbTl4TJ63iGLATELfMd4bW/ulVQOA\r\nPlbG2M98uKRYsOhn+EdORyYfKq3F3i1RtAmsVghvmpAvIyz5xn+VMapiZzHY\r\nDIP85bi6QmcLsd+pkZ9I1GKutk6X90Zwh7JxLukGvEIFbRJ5FG7yV69HokZm\r\nYRdYFmfEYofvyvUUCZbm8LPUTMbqOXn8JzpSwjDL8VQEKOnyo7E3eC0ZYA7a\r\nZLAd+gLUd8vxxsuLu1emCI4+p2Uige3FSqEFdyDPXTaU/hnyu6WJmc2TAVCr\r\nZprtYdezjmnxRb/WdLPa/Q+6maVBM12UrM5zdPPgMmHo2sHtPlVTVGXI1vVa\r\nLk7X7k7qjufsOGh9AkbYbInayJL3VjoKJFw=\r\n=lze3\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"0eb4b8fcbfba4d68dffe3a2b5c7478e69e2e2eb9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.b9806f623.0","@material/theme":"15.0.0-canary.b9806f623.0","@material/feature-targeting":"15.0.0-canary.b9806f623.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.b9806f623.0_1672355131597_0.4805184628828907","host":"s3://npm-registry-packages"}},"15.0.0-canary.50c9f550e.0":{"name":"@material/shape","version":"15.0.0-canary.50c9f550e.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.50c9f550e.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"df1a3bef7b6c685fcb194bd8601feaf0e5bdc6ec","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.50c9f550e.0.tgz","fileCount":14,"integrity":"sha512-Hzoz+kM7ZzhqWPlzGF45chHTHgJnw2+Rk7+5a61Um0WU+ZEM4YGZoL8FfQWgDxZV9GQQsED914361jyFao/P0A==","signatures":[{"sig":"MEQCIDUY6a43Bk1gyZluwvwSdcjERNaqbhxYmvG7HCuUpZzSAiBkd+oXIEeJdQHyPbpm+73n9MpWrP1tw46HPZC20g6FIg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtE4OACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoo3w/6A78RC5cY4kAvPRtDTZtb+jhspJjPGbRVSfcR3OZGx326sg54\r\nIDawXRIQcegTwdsb/ssg93mxcS25KyJrhjEeIQi2XY7gRDDiEDTr0HYtCK8C\r\nS97o//irMk/IbPoxgA/jCAEbGLhTI0/lsKfEuZKE1NrvpjMP2/fnPuNW7pYx\r\nweqK06l3j1ci/DrX6NtporPdm5GhMVvE1WLqC+KGaYWn+n9xCsykPjVTzmFp\r\n7K4yhpvcbvSATPfoIjAfsEqTgYVQ+0I48iXdqT0u0oBwpJ0CyZujf+B9Yfzt\r\nSkjU0zxaal+KjXse62jQy8pWnVYrDp3dvZ3DV1fw+wdEPSDu89PNfaiia0eS\r\n27JEbFntPc26buHSdlAh75KCXu4fLpUlIG4w94un2DzXNw10nEKHrbb0BeEO\r\nVW1+l7WTgoNb/H979SnU89CPWfjfBbo7O8lsY0mBQJvg86GfJ3dGwGuq9n1h\r\nnEANZ8fe8+92+82wloo0+lzZaG86YzPCMosTC/ypj3YxIxu8EpfLvMbbvY1r\r\nTbO/FvXjENxKrAruSnPGusfU1POzwiCQi8AcINsBKBnEZSArBBp6wFCQOSRx\r\nB9RmNBgACfdzP8gBwE6DVEw7F0VXX3XNyjDAEYcmDi0PQv+wuV9FTulbaAeu\r\nSc0yByORklKQnF74uhWlt0bGz+cgL5Y5gf0=\r\n=oK8c\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"d020b19d0ab5525ccca1f803a00e184efafb15e3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.50c9f550e.0","@material/theme":"15.0.0-canary.50c9f550e.0","@material/feature-targeting":"15.0.0-canary.50c9f550e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.50c9f550e.0_1672760846600_0.9813805818431582","host":"s3://npm-registry-packages"}},"15.0.0-canary.af490a848.0":{"name":"@material/shape","version":"15.0.0-canary.af490a848.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.af490a848.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e0344442af8cbdc38465679be40ad8793e25e38b","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.af490a848.0.tgz","fileCount":14,"integrity":"sha512-SozRn11MQMVdT7vPtYDMEMuNb7cuIMxw57Pf7WvmkyDbEUEJyRyHJl1ELah4sOqzubSjEVs/k+Hc3Pvridbq8w==","signatures":[{"sig":"MEQCIGU9fuauYpXRr2R2aG6k4Rg5ZdCSRLxS4lxqpNw22lyrAiBfC0FojWA6bLrJoHY+t46ijfFghduh/rPM84zoLS+ioQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtFA2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrtcA//ZMsKPgi+qaP8vdENOiHxCJ2dX/l2K6ih0pfKq4GEUuFVbAgq\r\nIBD5CnXl6eTMbzseISbUSgIg3QAri78CyQv5NcOMWZBgbcM51HuwKpbWR3X6\r\n5D2IUH1yzlbyR90/ULRdokeAW0Vm9qLB5venlanCrj8zwALuq+33SJYiPrYf\r\nUMK4wQE2l1//NFrcXVnEQ1Obk5SpLhXTznERKjdquWc2xQwovQh49pxdeoUw\r\naXZ1tboQocZuYyCJbj/VybUBL3W5m1pJS5SOO8oRhZnm3lyOmeiOx0WZ2i7j\r\nk3kVuBb5TtQuRrj4snNK4+ytd/KKHGP9qBcQFUJHADDVE/aDVdBMojX1Wcqg\r\nBhSpZfto81QpBn4Avf/Rc9ds0eCrhwuJOzH1Hv8JkUcGZmB2hfdaTHAkUE5c\r\niWFI+hknxkaphzU6l28qkTnJyti0weeqQQXCKxq8nZQRdYBt4+ZUwpbEeOcR\r\niE8W5gzVvHbPaR89DQswQ0VHwRGCt92xjUbKBPUb2KIJmqhhkCuNWq+CvKNy\r\nQAs58bSl0hesSqunqotgIGMRfRepErqPxiI5ctwIoXTfXfvYlQtz9tW18ox3\r\nsbMlMfN1/luKriQK0hf75p+ErGpMxzpQVT06xKMLncouTrd4U61q5s+oJq9m\r\nDoanLr+O0VM6PftRD5ZLIbMnsRi8HTQCLyU=\r\n=vnt2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"95f5499a3dea1763e53574fb3b884e8e45cc974e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.af490a848.0","@material/theme":"15.0.0-canary.af490a848.0","@material/feature-targeting":"15.0.0-canary.af490a848.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.af490a848.0_1672761398685_0.21524813515576513","host":"s3://npm-registry-packages"}},"15.0.0-canary.7cf487c98.0":{"name":"@material/shape","version":"15.0.0-canary.7cf487c98.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.7cf487c98.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5de353f9d3e584ab63de492cd5caf5f87ddeae64","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.7cf487c98.0.tgz","fileCount":14,"integrity":"sha512-gmzzSGDF86b9imaroKDPxEhxEUCMEy7uTDBlXbLcDjBUvH23yZ3cAslRy436eCUpTN3HeES8wymizZg0iYNdLQ==","signatures":[{"sig":"MEUCIQCC/wKWIOmUJwYb+3VIZH5RKHHBYm5XeFN6+lyCIkw+IgIgSuIIP7WipM/57Wgy+Kt5JdXkJc9P9uZUSG9hVgmtF8k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtGgTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrqJA/9EuYiEduTq4SKqB+DI8eQI3RDhh22Hlyc1zdSFVsa8JBlCVuG\r\n/QbrIdrSiz9bWONt/RZ+qUmdBAgOe51ofwHuLZPkcJO/W0N77DsbI7bAbZ7m\r\npsp/+E5/UlCPyn09HuWlUqeSSqkw++RIrurjg7HBOPP1mJGAohU8aH+iYABE\r\nmOvLGETsjwXolFfsGmbyuK7Ol4o1QDInqhOL3+oQKVjhuAoQDoCnJqI2MLeJ\r\n3bEVtqXhpDF9mAB3jWhCcwHAwv42hzZD0+zdErBpiVnuiCBiyiKf1eCFfEz1\r\ng+I4kof8I3FYtCAFuaW/LY5FZ2+rrAG+ZIzvQlIr6kzvz6HKpbdTz4DLGvxX\r\nGeoPlH6gLBJSCrNgT2xUcC/gHps8rCxEWJWbiK1/7hqtpI4W/lHcDPsgMiFx\r\nesENCzWgiTgOSY+1LOguyiUR7hUxaP9u2b6q0Drj+rw3KqNVIEL1e00RNaD/\r\npAJtPzIvNouq8yuxOOvOuC27Bz0yA7ycZMN6T2p7XCbU9ILlzal9raovDn5a\r\nOh17hojRutx0j6i/fJpcy9VukEQgGe7aWRzWPf+RKR/PJ7S7RvwHC4q/yQOL\r\nLj3BL8RjdfhxjOMKRf/JnWhWVucCixGwOZiCQ/7phKLTQaxMwbhGRZB1deG9\r\n+ERetEc37VbaEa4yX/5eeHhan9H34psFLog=\r\n=MCsw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"8d246270c785ca072651213aa63882309c7cd5ae","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.7cf487c98.0","@material/theme":"15.0.0-canary.7cf487c98.0","@material/feature-targeting":"15.0.0-canary.7cf487c98.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.7cf487c98.0_1672767507321_0.7287916999107276","host":"s3://npm-registry-packages"}},"15.0.0-canary.a52be2d5e.0":{"name":"@material/shape","version":"15.0.0-canary.a52be2d5e.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.a52be2d5e.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6c8e2e7a8e6aab02094d7d4265b32e91cc86a5a7","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.a52be2d5e.0.tgz","fileCount":14,"integrity":"sha512-YyONNtH6/rAlYpS2MGGc3v9VBjOd57xlu2n25UA1zTonPBvsXaMLLpwtX1WSK6v/wdqhds7dKQiNDszBqNT17w==","signatures":[{"sig":"MEUCIGwI0fPJI6pSAP1IPGzV8tUG6gG0E7p+H7hzWdTlb+RSAiEA2hY8CUKsnlGcvEU8Dj+l563ZJKQmU3NwAAVuLA5h8Ek=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtH40ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpeZQ/9FEAK0x6lZ33NZBmcayq++QHuMs2bO8HeGruh0nlOqebJ5/If\r\nGTdCx9kLpZozmQgnH8BIX+RaNqLsURg1Sp8R9ATOopvkrOa3DeNSbzLyWHc5\r\nmshOdOrVAcOUwZhxTV1ufLbnSOiFcgPNZXBm+dd1rZKnhhGqCTddfhIK/Lal\r\nlNlReEG1m1OYv6GN5mXTPthYG7WS84bOAQM1cC2ATBz2PzyWE9FyhPrbPnyU\r\nK4jh28qtOBifJG23DR+zKOQMbCm726rHtoL+atzEpa+wO50A+zpAqXuT98SD\r\n8L5lz+i3XyrUhtsNxltCcMMpSc6MzQDh71vWwGTseerECrufUqzUkn0zjP60\r\nOyuUFuBK3bdU7ZVOs2ZOjWuuxCmL+mDogkjTIpiEqxGJgzwvZXzus0RM3YGD\r\njNoOlVOj44h7AM3hZC0wBCYQE657UO92cm/OPvbIUb+EnQCdknogxec7igg9\r\nXTRmcRVE5X/TeF7DBERg+FK7cCcc3Pj9MCIzUoHRzzGJsid1TN3InAUFoAKL\r\nbFeLuSybRfxGdqvJXuLlzNsjl4poAqU7q5cVleo//FpEJpUTEzPckduTOtOq\r\nPGjN4ZVCxzf3JqMG8m47O4wQj4NHYolTfpqt7AQkwDHqlcJYtqm9frk1BoxJ\r\nRMZzmODaNWUWqwgumnqCs505C9+jv/wYNkA=\r\n=ls8v\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"6c2c2b2b16d0188fcfc620c5bd95622d34ab600e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.a52be2d5e.0","@material/theme":"15.0.0-canary.a52be2d5e.0","@material/feature-targeting":"15.0.0-canary.a52be2d5e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.a52be2d5e.0_1672773172064_0.6316367756230459","host":"s3://npm-registry-packages"}},"15.0.0-canary.e38ba17c5.0":{"name":"@material/shape","version":"15.0.0-canary.e38ba17c5.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.e38ba17c5.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7d33b50148333a89a97e2e49a270fc7dfa2f68da","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.e38ba17c5.0.tgz","fileCount":14,"integrity":"sha512-w/MpLzsDONUXIbWugqNbaIVQUq4P0XVhqvT17OZREO3N+VcVwbSCTuNgljsaSKnmVWrsPdNjA88g3KmCRh1y4w==","signatures":[{"sig":"MEUCIFRZmTKEEPVnbraJ6qcDDpohtmkFi55P4cHnMAEKXdqRAiEA295+x/brzLic7WxlzR1s6tkC3gHySf0Wyv9iiaIlHZg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtKzpACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmphvg//WYd8gWqnB/0FGZsohahuG4wJfx9YNMmCkFci2Kp2mJ//JMCM\r\nioTSIPT1EzP+dUlIMpYXsIIP4NNyuGHMGXAvgVUBUo4D3vweE0iEKD41CMIs\r\n6AiPSLldHmA81OuvS3Hwvt0/QqLWAwsZ3KDUOOG7GmQ33kgXQSX7tbZRMPsu\r\ncn9mAcgXnKSNFzWJl3DkPkK+AkqNn+KHYa4Tbqs0nOQszyTMZyhM8Q+/SgEB\r\nGMkqu4iVnCpGw8O9ZXstkU3iOm4F4f/hBz2xUk+a0ZYASIynlKvM+7IirXXn\r\nu2kGb+1oD8z0HjnriWjvGk3/bKTEkALakNnhITsZtg8HfPx5a+oRKHURnASV\r\nMSs9iyFigSaJN4yyGzdcOQ8J4StCBigqIfIEunyYm2emA/fGY5ze9kR72K3j\r\nH37ag7K/DY/dLa9iamT9/OvSRUxP5mJfpQaC8IiyVT9tDMX3GnY26Pk+8Oov\r\n/p3OMyXzTLjj0Hs4opCDZX3R4guBFVK0AKHzWBxHzusgaX90EwXoX60RHvJD\r\nRV/1UeM5pPqo/Z4KhgwbzBKTT6YgfhH/ZAxvt+yO6u6f69qx8/Q/VNFdn15h\r\n8lgEN5bhqmcdaTF+wQ7aUJOJ/sNHTlPhBed+yr7KfJxiGydYkYmUQwuCPkKQ\r\nQAGkt2Lr79fjJRfeWe5Mt5zvFjmd4gcEGlg=\r\n=CGeW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"d44100693c450240b468ed28efc3841fdde62da4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.e38ba17c5.0","@material/theme":"15.0.0-canary.e38ba17c5.0","@material/feature-targeting":"15.0.0-canary.e38ba17c5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.e38ba17c5.0_1672785128806_0.9710931430917782","host":"s3://npm-registry-packages"}},"15.0.0-canary.49041a6c3.0":{"name":"@material/shape","version":"15.0.0-canary.49041a6c3.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.49041a6c3.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ab26cbcf2ffa443ced99aeb763be2685cb8e7871","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.49041a6c3.0.tgz","fileCount":14,"integrity":"sha512-El3Tt8tWEmFqsu5udQK5DfBYDxvmAh5DEuFYuBvNIgXlTMNWdrv0BKGElbkAqpXnqSCUrVw0JWsymS9BVoh/Ow==","signatures":[{"sig":"MEUCIHwdcz8XtyYS6+97hf2AbKqCdh0JtwpyU/HorZdM9YRGAiEAyYDO3OrIxBa25Kuajog5lKsT1Huy+xLwRZVHscFxeYc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtZiEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpOrQ//YN4f5H8YqhyixNo9HUCmK43BfJ009+6gcPzw4z5JZP5duFYx\r\n7xjBFUEstxv4b6ICnDfsKBo4IKqKVm0fzT60k+fi1R3h3Pft1MjBPEMrAS4U\r\nncK2ciULC1CAC9jZ/ES6j22cyqaiDoVbOvzkTwG7zz1Y+iHlTBMP/r9AIHsT\r\nqZGNEvbiZ3071R05QxnQ1eJGVD3tHcJmJlK4VyePMJwJM5SNO6yxyhMldGBg\r\n1IDD/QJI3qAxJbrRtrfkY8dh8RuRJNDkSQhhczE7iN0opfwLXwcaE0jcl6RP\r\nI+3DlrrydJ4ulqGLy+nFummbdkH393gqYh8HbeALFfOjTGjVBeSDO74yg1gT\r\nansaYSbqinn3fftrmXHiQ14nunWhUajyvrmQztDvoHQApU/YXrB2I+iZbena\r\nCQc1NSv4iPhQ3Y2XYAJtp8QLbMz2TaLV28DB/xuGDJRvzu1jCBtaifMDMDs6\r\nHtVoeR2iL9TQQ4zX+Aq6RJnSlI0qmv791e/pXQEtFMgHD/9BG8XQv6vV3d0I\r\nZLwdxT1fzaRaOIB1Md34FiumByGNcH9WNeKMeNpjzSi2Mya6rtUHjPFtPd2Q\r\nNPGXEJOZwNgTf7g+Ay3xSYrgU2oqrundEmvZYKuk2Gvr0f8ouBM9pMcS/w/A\r\nk0dev+PGy5ASKqGIAZnwAKdBKxj9rycflJk=\r\n=YeZT\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"f012497ba1285ac3de691b5e25afe7a21ff62bdf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.49041a6c3.0","@material/theme":"15.0.0-canary.49041a6c3.0","@material/feature-targeting":"15.0.0-canary.49041a6c3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.49041a6c3.0_1672845443761_0.35779816090563243","host":"s3://npm-registry-packages"}},"15.0.0-canary.c492898c2.0":{"name":"@material/shape","version":"15.0.0-canary.c492898c2.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.c492898c2.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4bb4fef8a46b9a3288b6319db8eeda8b7985ad91","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.c492898c2.0.tgz","fileCount":14,"integrity":"sha512-GP2HG5NwHBn4FQhb469pXEgLi3VTgYHICdb7MdPvtPtZF0QM6hrBgJBVm+I8px70wYV/yOqxRp5xOiEdvVasYA==","signatures":[{"sig":"MEQCIAjo/Y3NiwFDVRAVtg31/oCj654h9G5w+sw8l1HtEVpxAiABZHjShWzEkQBTTO5FGMqALZ6RXJATReq94m/6DYMl7Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtbktACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoZehAAg0NgHmsTBeAqVqqOlGwzAzWaQmNiTj6R+5fqCfNXuqPmJZiH\r\nUo9u7voXzmV51GyKYO7sgRs1H6jdAenxsOI8P61xnrMr9JLhKPDbV217cIEp\r\nAAxH2OHQM+3GXFXI2gnOqRUbkiQyGphgaYTdxn/FHpOcWF0T3M8vzJNmZ9QL\r\nRb7XrR3ms03rvrRepswJo5IaynWQLhHmc9mvR8GAhsFTdhZ167iUJyTtFa4m\r\nSuKtcrce0o30FjKqW42c4OvPeDC+fdES9ceFlESoVcoLIWKXBT9avduB8teF\r\nGyOUZqG/1vZaAAfMNJ860WTtuBT0o0nh29slktNzohFYfaZr5Yi+zZpuv03Z\r\nT1eXiouoBKgbC8X89/RBzHkl/H8gi4+7KCUB3Dd+RNODo7OWHv0SpnKIFs3g\r\nV5CoHcpGwFMf+xt/8hum1iJ7+5w4qHtn0p45xAVPvrg26cR08qpeHiRHfFvB\r\n967uSUUFDtNosYP+ZMxJnCEOVlHwWYNKZABmBGdUd9SA3EsNUZ1T8nYTalPT\r\ngMJNHw1m90lKpOSHBAVtF9HB/b0in0559ORqynHADwhhK7H22UFRY2sWugOw\r\nTfaaH8mUrfpCVsCVdScelPTFmv7LiOhITOh3rRh5kHdQoi2WF/y8jIDQq8NK\r\nNxlj2gSRCFTi7cqABaF0GId5O0WcSdMDWV4=\r\n=Lu5y\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"8f57d41cc546a15258de2fac7e4ddca48b2987ee","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.c492898c2.0","@material/theme":"15.0.0-canary.c492898c2.0","@material/feature-targeting":"15.0.0-canary.c492898c2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.c492898c2.0_1672853805543_0.9116098687477696","host":"s3://npm-registry-packages"}},"15.0.0-canary.d7a2277de.0":{"name":"@material/shape","version":"15.0.0-canary.d7a2277de.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.d7a2277de.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0332242da698ef75bbe76182dd42afddd15344b5","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.d7a2277de.0.tgz","fileCount":14,"integrity":"sha512-uvYMuS8PgI6Yf6aC75pXtYigPr8Zy8tHNfOa32TDjuGT5Gr9E3u0grSV+P/uNacfPyPv7RSOFOT4mYOJ2zVORg==","signatures":[{"sig":"MEYCIQD/ktnWVDFq/9O0OmNR4nYcynQiU96E4s1fYQCtvoAb2AIhAPyJZtzhgjIJqy50t0hLA9WiMu8JivkzEUO+9htYsnRj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtfEZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrjSw//faZ7owLPeOkOmDFgJjHPfl8PvzfSTs/hKUtTIjNDnM0PcKXt\r\nV+pdbElZhRIvLFEhHziXU5NaN+1H62g34JwvTCtgPZDID9w7H9zr5qDG575Y\r\nQieRqv/C3SAISZoX1Ly2q3GVrAUERxShCoXOVCitKRRZyMUto+hTUl51uffl\r\nmqxrmSi9aAADIWAMJbT2EbssV+SihKXgkpvE0y/FCjYD5wEOxqTELRwDTw95\r\nwjJ1BPCKjE17HAlnA2nHJSOb1hBqn/aqG8i2v7wldzvKvmJNrUbcWMyfI+Au\r\ngEGxzaq9IOrg6uVBIx3HTgZYEm5X6GXdK6CbN2rW6tyA5B/njQqoO2/Sgpbm\r\n1/7Rkwbq3VSdnFWHoBgjsZKaDAObfUpuleLaJMeQ+WW2GyPpOhngZaQxD5qh\r\naH0dsQUxIV95AcoMlEA8PI4ITgyqZtnKaMUUp3LDhByxa0uMUTsmn881WHQm\r\nLNPr/jyeIGPepJb3Pu8nHGiDaYkuxAt79re/m1IGSu1GvL08FNeFFlGg73Sr\r\nkNtcVZchzGLvEweSg9v0z1xWMKYqv/dDguxVggEXeOpApqRlaVmaY3lhUM/9\r\nCX8d3KTzZEbsbXw9+yKMBgV1d7j8EbS3XMfdaoiMUtobHLpUo7hrUHWpDC1n\r\nzWIrkWXYbQypxdPbhb3NhnsxTBmg8JujD1E=\r\n=61+1\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"f9c71e947019fdd0ca8837669de0401f3752d1f3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.d7a2277de.0","@material/theme":"15.0.0-canary.d7a2277de.0","@material/feature-targeting":"15.0.0-canary.d7a2277de.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.d7a2277de.0_1672868121335_0.775247144059541","host":"s3://npm-registry-packages"}},"15.0.0-canary.fd95ca7ef.0":{"name":"@material/shape","version":"15.0.0-canary.fd95ca7ef.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.fd95ca7ef.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"61a84745f21955bc95ef1de008db89fc3b1fdf92","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.fd95ca7ef.0.tgz","fileCount":14,"integrity":"sha512-+nJg/Pv8I9ZT1c3d4b0ZJp66HzLO25DEKWqmyyzifHsuwLK0u9eeN02UguMXqNvPIBPsR2fciwBgJNcuEv+WGA==","signatures":[{"sig":"MEUCIQCpAOgeGUN6pMoJjdQ1ECAVnRJ3yHFK6HDX06CUonkK7AIgWSt/YCWgk2+jA+6ESxNTfTzI3gJnhviZ3dp9AiCQ6Hw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtiGmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqikw/+IR/rSmcNXpPTY/JDa3nWkjsip6lk1bVQ5CiG0hXsxo3eaHov\r\nt7gmZIBGZY+h7zKTV2Rw1srXuPjP9+CcpZviZJmhUD3rwZ9xviKHvXxvnlJf\r\nKwMr3LhlgfopI2rq8SJpiIHDxN4Ee7HJA6Pt8CTpnl4WvMZCqKYhdKk4i8WW\r\nfTMC399QmftHQwUNaw7ba1d9TNSnVP/Wo+RknHmttzFXk/Zi6kbLZe1TKRBB\r\nSlti6hYSCXq/fo/Mgp66dZJzXO8ESFxSKfFjj27Zj2V6ddMlfabo1I46pHRd\r\nDLXOOJCWLoXoLLGD5JhSDwl8tjZa4/6rrTdzdFKCIMQ259jQ8N6fXoa2JDuS\r\nMEl3CEKKvFmSCfrvnWByLNdvi9GokgCBpB/VfIbe852RGbjMNWvKqEV9+b3l\r\n21+VOGN5XoyqiHwSw9Ej+5eDiZzl9TqvFvewZ8ccwuf8gocJamoaeg7LcIor\r\nROlo04BrX/lgl9Fxss3BPEAj5AjLN01KCHBCtvGnGwrSE7P8Kd4V8nTWnioS\r\npsnImaA5kqKlws7n0e0GRFHj4xG1BTFdoGum+P/B++0REE/OyYSakdYbbbU/\r\ntOeIa95ahhVrE2PW47/CArWP5kAtvQps9ZjdRUY4RLHO7yH6J3DsfFYJZNVJ\r\ny979mlPWzk9gfSJ0lCaMPSyM8wi70r+vwGc=\r\n=XqdP\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"b0d2fa371ec4a3d0a8a11e19d9753b1af5d2d62c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.fd95ca7ef.0","@material/theme":"15.0.0-canary.fd95ca7ef.0","@material/feature-targeting":"15.0.0-canary.fd95ca7ef.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.fd95ca7ef.0_1672880550389_0.8402171034530026","host":"s3://npm-registry-packages"}},"15.0.0-canary.1eb44faf9.0":{"name":"@material/shape","version":"15.0.0-canary.1eb44faf9.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.1eb44faf9.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d3958da7dee72bcb97b62664db6c077bdfc7bd66","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.1eb44faf9.0.tgz","fileCount":14,"integrity":"sha512-AuAxSO+zPjDNAypWZRGDIUxJylfVF3j5ZROf0g6F3RNCbILlO9DkfHhtUSW2fZxsnCHKum1Wf+yuADDs3jh/bA==","signatures":[{"sig":"MEUCIQDznuPtIxsfvwWkthQyuG3ESdJrz1Uxy8bjIa71DXU66wIgaBBV+Szi6mCmav55/ciBxBq3uOnqXVNSeDpfIjaYdtk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtpOvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqIgA/6AhnunHZPuCskosEcl4TxFxLFdb/D5mQYRsDrIffpM98sPwFP\r\nz8DcUFxKSk+nkaasdV1EKeU4vgHYcOIbs+mJDGRfMxHE7s0Q7l6P2RNxrRCp\r\n0tZA9RrDpzUBHY383Css0Dbkb6wfImSUKerg0PzWCn/RiDq3pBox3fjonM/5\r\nUWe/VUD3Sq2PsH50xuydAqveEfHh8DywhFX6b1aENdWZulzO/1KeyXRrsnqP\r\nghOAgcwSa72qfG8SUiNUxHG9wj4l+TuPiFeLv2EpfYn20up5qMlP7RuSWDRi\r\n9t91K9k+nnGAcUCwxw+plcdlWbjQbS0DfKk8i2YAmiwlWjJhIJhLX2N+glu6\r\nyKc7tvlN5pO/HvYiCSf3Gj+SB4hnHLDJPevLKo7nUzyP83bQ3C/BsTxFp4vl\r\n84Lz5MCpvdGHcsuYD4fcXQdKlQZ+V44/trvNzX9Z1dwCVZI1KLGl+2q606X3\r\nDSSN+UM6K2DPT9CJACmfLFBMNEBnx84Gs22jvkfueOmCYRGtApeImeGrIFQE\r\nCxe/w8GgEb+BeT3+FZ0YjBiJujCFzr22/TnCMB1ifIXK/elY+NoImxIY/c4u\r\n6CmjgYsTM+qyXdb8ozkVQ3CNbfJ+lybF/a8rEB/M8hGWl9/y8Gqx/B3iHOQ0\r\nxE0iJt+qNvbCQpKK3gzlNVgHQfRYVOzUzvc=\r\n=a/J1\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"e0eeb94598a14217ebc97ec3e249d126a29a13a5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.1eb44faf9.0","@material/theme":"15.0.0-canary.1eb44faf9.0","@material/feature-targeting":"15.0.0-canary.1eb44faf9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.1eb44faf9.0_1672909743440_0.1328968729880442","host":"s3://npm-registry-packages"}},"15.0.0-canary.adcdb7db9.0":{"name":"@material/shape","version":"15.0.0-canary.adcdb7db9.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.adcdb7db9.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"49de722c76ee9a8915969d821ce36a4020d7f18a","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.adcdb7db9.0.tgz","fileCount":14,"integrity":"sha512-XkC4iVlB4kQRc5Y4Vi1qrrRRNiFhy3N3vDXfvQnXk7lbwzicwGCL5MxA6JLzhGULTPn5YqDd8RoJ4rkq85525Q==","signatures":[{"sig":"MEUCIAvr9KD8RGuh9naWTwNYjVw5bciO5Ccd0PDHrAbg/LEJAiEAiIpuX5XMC3aOuMOy7EVFvNazVU1vfmZ5cENljMwaYuA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtvj9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrOeg/9F2PTGWR2EKGYGeVNr2JbudkNPREcYWVoUdpntIjcjwfX6TwZ\r\nD6IzNC9SqEsn+GJR5/2v3CdmRTdyxfHymzEyUDuQfQ2ofaSsyeyFdjNofMxk\r\nztsqUUYERVoi7HBCKo55O5pKLo6IQ5OF/CGieOke5ufemRJRiMw+TsBuV7Di\r\ntLtTUtH52xtbzMab9dODYVYsL0fKcKqbcPUChQ+cvfFTmrM3mHjitt/1+b7m\r\ntsf6pOqQBIuW1KnZXR6c1eA0aIQXZ9WO8B7iR9hPYSDqhquBG7qRLF3g49dt\r\nFkv8TwP95Z2mfl+lm7UzPAOrQjnOIm1R7Eentyf7A/dQtVHAzsqoK1kD4AUV\r\nQCSH9zxUSv4aU6HbMC8YaK2QwphPgL8HPvPjeLAfuZ0BvTwz1hAJq5pynAh9\r\nQ63Wsjhsw4lZZQJx9QjepN6kH+REcmuNdKYu3tOhU7sTkj3GGzGuyiZa2kBh\r\n9CcD7ZfdNjI46TN6DI6B2e4Bv14r556y6lhOpABzuDj4lICriNlrzB9i11Ej\r\nE4tMO1ncME/VA7LOilJiegVmo0bCJokZO+aCrQ4Rshcxig4Ot+YCRM8ytfv5\r\n8qvlLJHpgSrGOHnIFKPEyIjbbsfut1vemt8R323YUOgri/tAktRO5tP0KAA0\r\n2Pz0m08nH/F/5HxYLE1MGZdHHaPZv/Kllso=\r\n=FtEk\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"2bb419da8b7b393c085616b6c5f28a3eebf832f6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.adcdb7db9.0","@material/theme":"15.0.0-canary.adcdb7db9.0","@material/feature-targeting":"15.0.0-canary.adcdb7db9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.adcdb7db9.0_1672935677110_0.7165586820448309","host":"s3://npm-registry-packages"}},"15.0.0-canary.067af7eff.0":{"name":"@material/shape","version":"15.0.0-canary.067af7eff.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.067af7eff.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e80a1029256e612f652926fed640e6841f574693","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.067af7eff.0.tgz","fileCount":14,"integrity":"sha512-C7oN2p/kuGiO40tSAzpnUTEE3GIc+C1pw2qP3wMg2kElHXjA+2MmE5iNkIw2CtQs/txnxchpBfSufPfAy+uHnw==","signatures":[{"sig":"MEQCIB45e0+3f5/Yb2GMByXcstdkF/sD6L8SYxmXlr9E5wRjAiBpjQdJHONXBtdPX/nF4zqmW28lLV1yu3zT9ZjKoTsYGA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjuKulACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpK0Q//Qk9Z6ojZsvab2Qu7Y6OkN5o1LhrBgbg0x2tjTZKHqKjO1FFy\r\nre4qTG7Blv0ttZpueGJo0LxVN5Rj6roy3hvGeRmiVdf7Q2PbE/bvpeitvqyV\r\nBqZgu1US1s1oCJqVhwbRGwI8zjaTPR388Dn2Q7tcj6UPejHi7UDxeAiAWGll\r\nyBo0Oa0mj7+6TtUXTUz68X1jqJ9WCDGqHdt5EcAQKmVYJ23ZStCvLamwJzod\r\nwwUEIEpiyeLRTXv/eacYykUZsLihkffhwXxs+ao+PiIjXRq9hEUutjSEfmZ6\r\nPHmMyF5UYqKCwaQJyyhnOc6gMuX0F6Gmi3h1COteyuLgVhMqcNRw2Y8gzl6A\r\nQJUyLmWsZ+YB0e0VaZnsA07hiJworO/V0KFqd6p5HCeGkfDQCoItMavG6DTo\r\nWGuEd4qpQIoY9hGj/aeLjXFe3iDDIHDR/3k9eu888rS5G74zdWcwUh7PTD2J\r\nOIPagMYJm2dlgcyDGvoLqF/esJ0cyIbxtyF+dToXiXCfeLb4+2qU/SEgfDyF\r\nNhjmlA665LkV6cp0w2QS003eEuJngBjKJXwuvM7RDL1UI50PJDDjB9RG9VSW\r\nHDcfj7r1ydsWW4jG5F1tECO8DvIeabCugmdlXRoEJmtXl5TnVXGCzh6mWfp3\r\nFPVIckvIhKTd0MejjKBIz0Dftl0XPHpaay8=\r\n=l/Hx\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"1fae2c792ff8ce557995a8d5d858676b4355c7ae","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.067af7eff.0","@material/theme":"15.0.0-canary.067af7eff.0","@material/feature-targeting":"15.0.0-canary.067af7eff.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.067af7eff.0_1673046949562_0.010678892798719808","host":"s3://npm-registry-packages"}},"15.0.0-canary.21d1196a7.0":{"name":"@material/shape","version":"15.0.0-canary.21d1196a7.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.21d1196a7.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eba8e86963d0969ef2f96a7bfe054476d2033af1","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.21d1196a7.0.tgz","fileCount":14,"integrity":"sha512-V2qLmprWks1NqIkTUWS0wKKrBMJrVBljgCS5btxJMzcblqtNNgFLSkyNRCOXzdF/mxf1GllRzNDCzDiEXOTXiw==","signatures":[{"sig":"MEYCIQDxeTH5EL63eOKhLjuxtT0edoWH3Itu7UwsSK0Osm+usAIhAPBUfB5JAREYNf4FRqWvRqzFzWM9QtifkxavCYcBeD0g","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJju++hACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmomsg/+MpS+RgaxBTE24qXsRjXL9TT6BZAie3zrFFJ+QmvDmwt3AWXc\r\nd4Fo03FPHheeVZblVCQiIO2EH0Bou6OBpBOlEU0daghSoFqgZKMYGkAp//mK\r\na04ho9bNF+BGWelOO2UMkl3BcIcTRJJ7c4AfDEb1qmkA+HrAfL2Zr1URGd1y\r\n7MF5F6ewFk5+Ky4NSU2ouA9/C3Q2p0F4t6OfuMmAY5LHYVMGExzKr2lKnv0L\r\n0ZmaZogtllXCgDsQc8WaZD4HRAQyN6FleYdSNNDrCe2SJB+yzwU4NbdmIuh8\r\ntx1Wo0htfP+yjBm3o1IIYDUowai3ovjUb1wIon7WC1CkqEXWaYx2xNY7a9k0\r\n9nXi2xsDEeXKSvv6HEiFnK+QSdCzQb96uyqCO+ncWP1TvHjDvKy9uTwGC6TV\r\nPQpta2ODfAf+V2Gg3BXvgPrbiLlKwdqFUCatDbGeTtB4m8IR2XFc2zU0E/IZ\r\ncp81IcAwzL2KJpMJwMsNV4iAbaDDcAOWrvJ1WMgYFv2NfQ8AC7nZaoupMpuc\r\nQyV3Ka5lMFx7MTmzJKIt8zBAJZXye2NtJHJfGq3fFCaOhQnZh27WTkdJpjGU\r\nkVSSQqnU1QFrHH94HOKQS5igF076VDRXXp9KfvTaj6UxWXuXj1T4W3a5cc6A\r\nb62Cbrn7qMv/CsqBxVRsyvrKAFDC5EOFqyc=\r\n=ZrFH\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"361e536c54e276112f021b419f666618a20599f6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.21d1196a7.0","@material/theme":"15.0.0-canary.21d1196a7.0","@material/feature-targeting":"15.0.0-canary.21d1196a7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.21d1196a7.0_1673260961731_0.35353905769697413","host":"s3://npm-registry-packages"}},"15.0.0-canary.8d2d8d3c4.0":{"name":"@material/shape","version":"15.0.0-canary.8d2d8d3c4.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.8d2d8d3c4.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a3b9b52df479e268030006b84e30c76842e27163","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.8d2d8d3c4.0.tgz","fileCount":14,"integrity":"sha512-M4TLB/xpgD8zeW9Wml3N9+CUDNQLzSrCvj/1gBgf3Z74DdI6EZPVqq61EnZxITh3ylimACLlRWwMxAcAvJWv6g==","signatures":[{"sig":"MEUCIQDunzxn1dvxtaZ8tlZ3HXaEuPIBz1DmdCBVRIHfm8hsPwIgZXk6wy8hRjGuzo3Un75U9Lrhgc7dlEAfyXAIlBAB0lU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvJPqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqa/A/9Gc/VhaU5sXrenJmfoyNbRL4dtrRGvCP6qkJPOrqvy4hhY39I\r\nDYzlp73kXJZ1eBkDdNtULWQC6VYfqY4wJSdcjD6G/RXbdv9wsMbX5ddIzGa1\r\nY+U9SjpwSExMA8U0OQBsPrYS75HopCZR8VXn6D+SQpL6asFzB0FFmQnNAo/m\r\nqGFnavgneBaX9+weaozbwMqmS3IO93OmJem+Vx2D6PDEszk1PgUrM40MfSXL\r\nsVgA/4Dc0WZvlxDnwoqbX4JxGcGbQClBjW4UeKlvpm5PZ5KOkza91LTJ37U8\r\nbOYFlcEDTWZEdUGZu/uZlxBbs90W5rWLUQFlX+I0gf2OAPgV19sCF78plwkC\r\n9n1OZAQ+blrAh23H9wYQ1Itr86J9Q3ui/QW7K6iEWujjNYkSBS6IzZ74Pggb\r\nMklByHWMDaMfWTyqdA5lP9QiKiNiwpjJ0aalrHmckPY5nZ2Id3CrrLhlpRCB\r\nZ0p46JzffkCZPE5duVzkjfZTDFAdDwt8Q3glrSTRUQJ6zkCSNlmG2w7XRGJv\r\n+lI6tGkYp6mn1FPQnrXUQq/cG7AJdlI0ksEWYm+eXUqMf/RIyJ3y65+YTQPJ\r\nxO8LT0GM4nHuU6aaPnMTho+VDpBX0rHEkxqbRld9T7y1A6IEMraQQgywtDX4\r\nvzokGsBy1eFgaZ0bBfOo/yPZ1u0xHcUERqE=\r\n=hgK0\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"c2df4624468d99280d9dcb0894d04d839fc8673f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.8d2d8d3c4.0","@material/theme":"15.0.0-canary.8d2d8d3c4.0","@material/feature-targeting":"15.0.0-canary.8d2d8d3c4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.8d2d8d3c4.0_1673303018072_0.47761917414157096","host":"s3://npm-registry-packages"}},"15.0.0-canary.f476fdece.0":{"name":"@material/shape","version":"15.0.0-canary.f476fdece.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.f476fdece.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ebf79f2aeec18d0b1d252d42683bd582817cfdda","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.f476fdece.0.tgz","fileCount":14,"integrity":"sha512-VgxgHP1B/o61u0exEY83QY9+kXu8d7g1q3J8RcD6lyBBEoY2Pf6eKMsTypSrmxy07MlnffRekfW9TG/TY6i7vA==","signatures":[{"sig":"MEUCIQCaggaPFiTAvTZqie/gTH16zcvOMB92AILOqMBGg3uVxQIgL57EsKYI0szxCgYp2hIRVML3uvQmi9pJnS1H7Jtf/FM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvY7dACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmon6w//SQcEonbyr3aKnFWDXai6Zo8w7nmLroNWukyEYIB0haGfyWTm\r\nx5z+0m1pFI8K4VNyZuvZM2rYoX75IWZNbAco7gGget/ObrEMykltTU7aMaCm\r\nNXzQwlIRhGDG3TiJbF150s9Qn+cKr9xXT3mIiXBiXGrVY/6Gvy+VxIcValGS\r\nGiRZDsyT9Vbwa8oRyEwytHVcg2ONzJZPReZz2hR9tpvA08R/ZSEHfAKPRNY9\r\nye0DLveQxbiVW/EbRTJnFaQz7Nx/NFcLusxtrsFBC+OmQdlkNQl2jotaIdyS\r\ntvmjsJ5wVwOMSKVTPoZSyCbSldED758leqw5iETaJdhWisWCjWF03fU2zD6v\r\nRvsTZzCFHmMn1ZLX58LKAuaBzEl3WSJY0kZW65VjL+ovhZ67mEjOE/3xtmSX\r\nLm9kGNuiLRBhxG6SVNpf/ll5va7xWGTxY0Ydqo5F85BK/7u7DEjGhU/RifY5\r\n+0OPD97b4H2tDEDQgg34vx0KWScRI3Cv12btSLPEkA2+NnGB+abvKbjj3vhZ\r\nix25SuTuv3jGRSuYSo5sYzS0kq8uIWe5LfJwWnEsy/b2/d9eQ/NlomYN1Nz0\r\n3fwpPehSaKbQKGC/vNZiboHy14LnV0DADfMoQLuSFskUgywzdcqsVXk6E2bM\r\n0tg0AQDBTgyfe31X77w3bIk87RrFd2A97FI=\r\n=2rcF\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"672d5b55da7c88d57180edf75e7ce65ca2fefe0f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.f476fdece.0","@material/theme":"15.0.0-canary.f476fdece.0","@material/feature-targeting":"15.0.0-canary.f476fdece.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.f476fdece.0_1673367261530_0.976045430700816","host":"s3://npm-registry-packages"}},"15.0.0-canary.fc6ee6c32.0":{"name":"@material/shape","version":"15.0.0-canary.fc6ee6c32.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.fc6ee6c32.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"75e2734a5964fed48c5e6ca3ae3f2400f4134ca7","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.fc6ee6c32.0.tgz","fileCount":14,"integrity":"sha512-nuPZM4pZ7q+Rm/oe/8n7YPLlFja7TqQhrU7axQN6yFVqVb2MJ4rOQxz00KAyS9MUqY0vcKOwY9fVjnOo+RWgww==","signatures":[{"sig":"MEQCIFsX5k/bsI0RApfUtNvIN9mxZWhmxueVfZFwDNs6yp4oAiBQwRcmxbXB2ae+zHoVX8inlHo7nmpaf3D2AXNvnTaJkQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvZH6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqFqg//at/0gYT8F3z7G+pxkXHIuxDM9Tn7nXJi/L3jTSbntiWGqbGN\r\n0zd6n3YubdWXeHEI47xKhV4iu57A+5/oCzktPgyZyOpg5yHnjjZ9si2yY2aQ\r\naYK93T0B6og8+j2vkOegfG/tQF2ZhpJp55qEnwC0POutViftkOQTalco+xyj\r\n+LsaZS2x2Kpa8zdMOwlluYuXXef63OTqnIzO0lDTSGJBJKkp2hLHJVGkD0IM\r\n5v3B81rA+BzVdsnyl5MUZx0EnvonVXLlBmoy/EO1gC/h4LGZkvKFuIELmjCg\r\nzVP6DCZpNPaAC+R0NZ7T7+xpuR0mXm5v5FXRTa0ZMoc8k3IQIrZgR1yQYVy7\r\nGjdauL70alBuC/PHJZ9xyMjLtKABQRbeZci861k/54oSv0b+XhixMyLIO7Jq\r\nY9suIlBQ1URsZmkPZV3NJ5g0f59Bp5bfQVGtzGEAAIm5eLLXij/JtIpMNL5p\r\nRhn24h4zSvWaxHRAewQ/KuAyQMUQ5J5Vz4ElpT0MptbzrlJkEmlWWFEddgZl\r\nc6ziHFom+JPTdROCNr10yzppoyAo7x2gC38l1mybD+6CZSp0hMzo3DltCKRT\r\nVpaYdQRj4qLQTaJnkB9AiKFUF8TMFhkLIioxgcrKMsy2Sg4JioKndIjh8gce\r\n5qbq9X+JwW2AKXj8TiCQAk2AsMn4xfnvpzU=\r\n=lPvj\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"225aabdf74bdefc3d2f70f268ddd04c501a821ba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.fc6ee6c32.0","@material/theme":"15.0.0-canary.fc6ee6c32.0","@material/feature-targeting":"15.0.0-canary.fc6ee6c32.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.fc6ee6c32.0_1673368058754_0.3145515756239601","host":"s3://npm-registry-packages"}},"15.0.0-canary.73537ab0f.0":{"name":"@material/shape","version":"15.0.0-canary.73537ab0f.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.73537ab0f.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f14390e44cf358e3113c7e68a7a31a6400b93c1a","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.73537ab0f.0.tgz","fileCount":14,"integrity":"sha512-hmgbkdYmlN2MSV9RAuUjXuovHYPwrugzN2R7lxTit/KAOak3wjqcRPsmmXUIKtSjogcA/LrEeIZZ9cArjAW5Ow==","signatures":[{"sig":"MEUCIBlDAlFfxmrpYbzyTutrNxgYjOBjPmsHPdiqEo1dic+rAiEAybhaifKsGhRWPPGT9/tAfGnlMwQcbmEjagc2KwjPJfc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvapCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqxPRAAhNPHYl9DIVk0zYD+lX1WgRrDKcNidUY07KGglPCk2HjtLJJU\r\nFladd0hl3jHIQbJszsYQrmgaEiDcXloAmnazPM+yRnuqkJrywGi+R7Da0oew\r\n5zGgdMIbmHH9XBlYQSRyTzCD6iz1CjtpYCcyrravfNc6Qekl0irmnlrvhwsR\r\ntldGxfgOcMkcpCyff4lvgyOAbjzMysAg1ScoVW0KwC9NxWafOHxA9OFPpVli\r\nIW/tDtK0ejCX5xevJUGdDU1zFe+JtIUcLzZFCycEp5jmOvDrIxuJ06XmW/aY\r\nO0Rvlg/z6COoO4TlW2JUkkYDr3YPW20sNvHDeIIGfv4nuxCDIbO2H1K3r2qG\r\nAmhYemBK7sbMxGJL7p8zWi7p3u9fIBMnUmco/oU2VyEv4sw7sAezO+ip6aRi\r\nCzNmP2+FORg6yj01xAP6zseI7jwjl1rpNB+2rDs+1RSC1wLwJl/ktYgx6qD0\r\nJCgwMlp//YX1ZhiZcx/i/Grc/epb2oueNkCi1gwflraBd2Ivy6RnIpZKoxiI\r\nFtNqcEEE2LS69HKL8OUx9cdDklCEAIsv4fqM4iueo9T/bE1zWmgrRhMCjpy9\r\noqioZNbqD6g9b7AQR2EKPje/imb9MFM1rzsU59o0Q+pFNoDOP5VN3QtkdfbG\r\ncgNKHBjBLmN/Rxnbm9ncqi1P/bLfDbETzHM=\r\n=mJ75\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"cb3a480e7be3c8c7bc8f8ee0acf1ee8145f266b3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.73537ab0f.0","@material/theme":"15.0.0-canary.73537ab0f.0","@material/feature-targeting":"15.0.0-canary.73537ab0f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.73537ab0f.0_1673374273878_0.08526668103950152","host":"s3://npm-registry-packages"}},"15.0.0-canary.684e33d25.0":{"name":"@material/shape","version":"15.0.0-canary.684e33d25.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.684e33d25.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3e2ac86b9bff64a87c145d46178baca51e6cc99f","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.684e33d25.0.tgz","fileCount":14,"integrity":"sha512-aEelpaTFmpnCji3TUGP9bVCS/bRVjUmLTHBPZtuu1gOrUVVtJ6kYOg73dZNJF+XOoNL2yOX/LRcKwsop29tptA==","signatures":[{"sig":"MEQCIAgjzzmo5kCcvybiVdo+Bgiwak16iLaiCIUug0I2orrnAiAXkN8hWejbDpr3fXon1AAhot4hJHm+5Fp26VNcjpnCWQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvbn2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoUlhAAobxtHenkzhREo322jAn/ESS2ReKIcP+8COtKaA5ghy8FwBXx\r\n7Rzq0LlXhOEFWc2Aq1/iho+pSZcFM9LLdzC+fj3Zhpacn/gdQ6JJ2rha5154\r\nMBjK4HH65E1oU1smAjG1vlsXzh2QfnpwYz7udcz/ZvDr/1ABhGjaIUkFrham\r\n9vGi3QCC7+1Tfly8M+MKlP5JRsPIT+2tsFdTw0gCCrDwB4/zR3jSADsP7tQj\r\ne2RnVwWRzePOoSjtdOGcNcFMQOQK0e8+LADoHLWjfJTlsoSDxjwhEaCPWygG\r\nQY+lRw5G6CkmO5x60NLPNAEDUnPBBzpqWzGs5t7tgssFRqfDoEEgUideSRyl\r\ncP8CYOzJQ491yGZbO5Q/NDBmALnwefUV+PMIZGSQTMIdJ9Tbo4gfhL11Kj1+\r\nwE8iVWqJsjqYDVUooI3JR9gKZrSY2D4TM310YKD8+x+3I/pNIYNEh9PCTzGV\r\nInp//W5qj+D5jSDGdMGUPY1Mr95cLxbyx35WoULPw4yNkIz0gswTxz0svAak\r\nJmWmLxjVbPwX1eXP8euGPMtQqtIc2JsMNG1HTs/T/VrAZGITkMdjfdiQ1AkS\r\neEjsgnf2gjzvrOcFzfFGcwzFaWfBX5eNIHudgXB7F1CXGAxwQ18ShWK2Z6yQ\r\n4WM0jLjk3wksYLm4BqGf7HnRRR7vCipiYKU=\r\n=LwMQ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"518d26a1e091925c1b3a87f4d4f4dc828580a863","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.684e33d25.0","@material/theme":"15.0.0-canary.684e33d25.0","@material/feature-targeting":"15.0.0-canary.684e33d25.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.684e33d25.0_1673378294145_0.27688663312498285","host":"s3://npm-registry-packages"}},"15.0.0-canary.0e89aab6b.0":{"name":"@material/shape","version":"15.0.0-canary.0e89aab6b.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.0e89aab6b.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d269dae4dfb06cbed33fea3056992fe33f094152","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.0e89aab6b.0.tgz","fileCount":14,"integrity":"sha512-OHL1uUnPQIXyV+HLYlsQA0eie+XsLbfJphs6OpskGtkd9cTHDOxuvXrZFE8maVA4G5kZrRuhU1KSy2GLaXj68g==","signatures":[{"sig":"MEUCIQCUjOje24/4QYvytKj5jgseOje+4JNfAu2hLs1ihvOalQIgbYK10k9fnqm5BYoCwl2Nqc5wro5uNrw/9Se9R0Ry+YQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvuEIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmquNhAAkfk8iFr5YfwG9MzxCQbOI7kkmZjcOcPW2nEAkOA9p3ZhGd9i\r\n7H+2kCMnY/ya/i2bBprs890woHt6aiI4x/VniKMlhz70UTFxPMiwhD5hE4fJ\r\ntLnGMsDo61VdgNRei0/Zu6xbg3uqoA0jl1UROFt9P6kcRjljmq8wRgzlNqgc\r\nki0oPrFiC9MsElwhVb1I9ApC+5goPtX1tAfnYM/sinS54q9LTXQX3G37XXQM\r\nMQGiJ4KdKcpv0qjCvoapmfRsskRk8q7mtjxhSpzHGdAnAuPeVPnvoL6vYghQ\r\noiCgN7oDhTPuI1aQ4XnUDLRmRJZzgGgKtf4d9sIS7ctnSvpknFYkBecGwdbj\r\nbln/PmBgqXbtbVaAb+2GHEe0lRR9epgjbqNAOLrDIHoWvwRCgjzKoVXRUoJE\r\nfWlK3m2QT/rzTvWWyJ4x0jcp9ew9nDUH9i5oyNKPltOwlWm8ns8RpvvdR1vt\r\n2wiYVuiQdH+Sk4piexg9zj8V5rWH06H4tTjFm9Ss2Y0fBhbReQdgJdOoJHLc\r\nhCDIqUSvog+d4s++L2MiuQ/kFKN5rXu7PsnTXdF2Ofh4fGSnj04P6AlHqS+z\r\nAaQl3Fuj/R4Zh8qDinbwaAxUUDrnVVHgLmHDRypjLppz6DSEvShNiopaddUI\r\nu0zHgIMQ4TGX+Z10uCH7uYToLQ7UNM1agBc=\r\n=nVmW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"e4a9f0d636d7f4d6c0fbbf49a7016627715eb3b6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.0e89aab6b.0","@material/theme":"15.0.0-canary.0e89aab6b.0","@material/feature-targeting":"15.0.0-canary.0e89aab6b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.0e89aab6b.0_1673453832170_0.6042568348841566","host":"s3://npm-registry-packages"}},"15.0.0-canary.b0103d10a.0":{"name":"@material/shape","version":"15.0.0-canary.b0103d10a.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.b0103d10a.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9fea2396b7c8480dc7fe9cab9da48c1b300b188a","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.b0103d10a.0.tgz","fileCount":14,"integrity":"sha512-3oAdMOsjI3YSgjtgiUeinyoAcKvzfavTnZHPs2MXNG5U6Zkrfm2aFu4id9aBodIPGa07R30g6e427mGuaqIetQ==","signatures":[{"sig":"MEUCIBkcQt+CF7UqHCP5SQ3JppeFMoiUB/Xc0Zx6i9mGeH+FAiEA7An1w2f5z1LKEcmECCyKoTtOH1DhUJVX8//EoRqDuXw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvwoHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpw+w//XskpXnvmz2yX2SoEtJ+B3cNlfHjihkC7tGIf7CCH9+uVFM8G\r\ndFo6BcmzjatWIDSnpbzJ9Iug0pl0sLCpaN86sLeVE0VLthIHrba7/006zCht\r\nMxdLuUYgtNb0L+LOFn2ZCGL5e+ldwz97Zy2wFTiRfONRgtqPm9lRMtptulck\r\nFYSzUnLwWPAsC21vv0V24q2jtZPRc5/yH0eUtBIqdLYUQXI13Eu6lUDBR3e8\r\n1uGtYlpEytrvHrTsggsPo6qDOo84fZBho4QNtPrtXdMmBwV/ZMsd0fLCg+qJ\r\nVlbQGUa+ed05P9vY9ExgmROzbKEVJ5OnWFNyWF6lkn4WGFZo+taqKwvBkI+x\r\nAHAlghBVvZBrU8HqCDTOv+KY/2JkKJHJ68MggCkeVvK5BGl6QyRhN/frriI7\r\nLoZfDFhkVm9Dp6b7QLOigQ7HO6I0UgajnoE2synGAS+4xGQ87sST1jtBUudg\r\n+cdKBjGE40AS+0nDWO8u1z+Lu0UWyMoHAUrJptU92Rw+Rqjy7n7zFhl0nV9I\r\nY5vuTCKmedbY84r6hX7NnkqMxu83d2BKYxxMADmjmA3AvrXH6xs+y0x+Vrj9\r\nHtvfpGWxIyWQrGVF0uWJDzhvJcH1hlI9lVhaL8vNYvRpoI6En5qEt5WxeYU0\r\nf/WU6T97sGjOlOo6/QnH+OaLfR4cU2lYUI4=\r\n=J168\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"0e133b89a4afcc8020dbafdd4d22c734080d2d17","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.b0103d10a.0","@material/theme":"15.0.0-canary.b0103d10a.0","@material/feature-targeting":"15.0.0-canary.b0103d10a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.b0103d10a.0_1673464327476_0.32000944194559366","host":"s3://npm-registry-packages"}},"15.0.0-canary.50e7a5312.0":{"name":"@material/shape","version":"15.0.0-canary.50e7a5312.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.50e7a5312.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2d1e31c914a93117961488fb0f115a3296ecf672","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.50e7a5312.0.tgz","fileCount":14,"integrity":"sha512-Gsw5KGTFViylj0bnf9ZDzntzaAX7jxaLi/ltIBUDpsBhafxxz1ccXlSAYlNZfsbuQlwST+hREY16ioy9CyRbtg==","signatures":[{"sig":"MEUCIHosi6K5zPmRXTNKh1uSjjSs8W3pjsKxYPtRcnHQOBfnAiEA1SuEqbdZCsimVChr81gQliOcLTrMYftGKVhHguzTE/w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvyHaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrJVhAAnSfVJ6WMWht7OVWMY6DceBSX9/LiDX90LGKWu8Oa/zkEKbHw\r\nGpDJiYbYxfjZ4BqfeSxHGM/7SslG3gSTcIZ9oE02K7H9ttQF7AQKaRf/85v4\r\nu/PDTluXAqs56bRy7k9PBrdQePaYWG6lJPpW4pPy3CEhkeruWjaPGOSldQcJ\r\nABosWgKKXOOX0r2sIjQ0N9wNnNoU/PlaQ9DyK2cQXw5n/jhVM+k7wi0DDdoI\r\nWfSJEnhs9mY78VShQFk/BRZIpyLwt3rC4xZTBnBcyPsukUeBe/B8HioLqQ5m\r\nLm5fU7fYMffHfudvykCuZEKPfXGw0Dkc926SNlEQevjiNNTd0u7sMuCmSn31\r\nxAqrVrdO23O7dtCTHLbqCeQ2iBw6LljGgsg4iuv4AHU+AtZz1dEJmZhYSXZu\r\nx0WvyFFFcSWaEvjeanesX052Rp1z4D49hoxsSqn2k0mSyS+sA6/g3tuQwjOU\r\nFXYDWhYu2H06TAw/HV76nt40hd6MMigbi2IfBcU+tCoIW9ouUBnU6rq8Ua47\r\neVWUXHQOF4AvyMIGzI9HULwj8c8LAszW1uNutq62GKVjN4yTZywFzN38kT2s\r\n6yv/Iz16G96InDxmuOAZhg5q+TqTzgsSZsVr4LRsQ/Z7oOKddGwZsM36FTlx\r\nuVvH+8rgSThL4ilVBZSv8vzr9p3vTKyu2HE=\r\n=1BQY\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"2d4b8df3edcb9b5e9fd8d8b6645dc9519d92f376","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.50e7a5312.0","@material/theme":"15.0.0-canary.50e7a5312.0","@material/feature-targeting":"15.0.0-canary.50e7a5312.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.50e7a5312.0_1673470426278_0.49131602673956176","host":"s3://npm-registry-packages"}},"15.0.0-canary.202823f54.0":{"name":"@material/shape","version":"15.0.0-canary.202823f54.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.202823f54.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fccb947410e5e069114618842d2518373cfd4a9f","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.202823f54.0.tgz","fileCount":14,"integrity":"sha512-Fdql/zmsMnZ4xy75dExcWgEfl4L7wU30s8neqNoxloa3d+vfRPBmLEaDrTOrBPbOgxCzBopTLAYRIWPV5D3Q5Q==","signatures":[{"sig":"MEQCIFHVY+5bBRJXq2ArIw2mBiYQqeLPmxwUlTFlbotIbKaAAiBaH0AuiQCf87HhaY+AOXQ1wM/UdrH+G7v3z+jIL2Xckg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvyucACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqsLg//UdalaqaIkQZ/pb4iCqk4qpGBTeOujliC7nhCkWC8MEH60I4p\r\nzIWFuElfnnaBK7zaAmCyfFnklTg4Lbxd8KydNXWtP8dT42HPOrVhviKrIQlY\r\n7w8Izl4Gfw2cWgx8dIf+cERS8zNYEaIldwkc0vzqnYIicDocvvmBH683H3LE\r\nnZNc3i2LqmJh1fTlEE/+ln9zwEw5oCrGGsj6PbNZhsIxDCDQMO8OmaLvHeML\r\ny7Ifl+GkY3Ku/URdxcA9pg3XJzma3QmIWHFF4CAyWm/CKk6s4QF7GZ3MF07U\r\ntA3mIrH1FuV0DLsRoNnAw9zGwTpOS/hjchzwCMMu/OuJk9I8mQ9xwMBtyNJ3\r\nz82w8VkOssiVTpk9VA7wW7u8exxv0x8swMZG1kH7vVO3C78muD659JPegv9Y\r\nN+a0OvAQbcCV0spiCXpuDzDC+Ho87BYUGBnqj4LTbRuknfl7eTIGmySLWJ/q\r\nOhtNZp54eWXOAs6P6rGCOMkoT4DNkhOrheeYjKuEIADzkDaD2O2WQXb4k3JX\r\nxTjTx0ImYn2shkip5eh//OzlCXVAYbpN37NwvsyhsW/9kVKziX/oH0ySwPDY\r\nSj24K3Qk6mzhB2d0tBmB8mMKOJmVD+tPgp0bNZykoDpNUr/+JCIphXUMOJt9\r\nrJksc0Zs69kdQ/tcZGA0NBnjJl+fIjFMrMc=\r\n=x4D5\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"6a4dbcb0b4c7d96a85ebe59a5ff66d2469e177a0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.202823f54.0","@material/theme":"15.0.0-canary.202823f54.0","@material/feature-targeting":"15.0.0-canary.202823f54.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.202823f54.0_1673472924341_0.8082323265099711","host":"s3://npm-registry-packages"}},"15.0.0-canary.199fe2a2a.0":{"name":"@material/shape","version":"15.0.0-canary.199fe2a2a.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.199fe2a2a.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"811300108cc6b55da12691641e70477650bef9e8","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.199fe2a2a.0.tgz","fileCount":14,"integrity":"sha512-nloVbHumVTRJGOwhcwFO8A5135Bc02FPNCRJ0/euIG2wDzEe7nAssT6gcj7NVfI72qG4Eq5WGjvWRfODJ57lPA==","signatures":[{"sig":"MEUCIQCVSRrEuGaAD6keYTNWBSaaixkgEFPRS+zQtWaD3AhCIQIgS69Xb+5w5CtxwGIMnR3KuqNsscUGtx+Bhy8TbTRu/0A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvzBGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqv/g//WVF/RRI1iR0wCM4NXTZ2qbaZidGG89aa3y1+KTLdkX8xlmwI\r\n4aTi1AYLXNUiN+33ugZ71s4J8Qflwz3SgBO73zf6IBRSuAvrjYbyhz5nFY+l\r\nLHOw5SxAiUA9XK6w3focl+eSRUls3Fa7BrOJL0+ujDTig7aK6M+dWIxNOo/m\r\nydoZHR0zpL+djxQ6CZhPe1NK9sggGCUhO4pFCd+oqqbyfKQV6ye3/yxsC4md\r\nOpd85+uduM2YsQGuhkpWdjUZZesuZjRW61Zr0Q4tZE2d1P1Z5WvZiIh41fBk\r\nZXyYfbnDPt7MmuqwGnCUBWrFmK5VebQGkFjcjU5LYPkz6NjUx2CCZkETffwN\r\nKdln3/FsIhQ2TYmHlc2K6r7zhzVo/Td+JhGr/oPFl3Vd82P1EfCdFCifVLHJ\r\nYmtMdDusjn+bdFhIsYataCx+oegQrLAI4Tdc90PdZHaZu13vkdaEcXRqvh6+\r\n37KszbvQPED4X7dmFzSQ01oeBbZppio9dPxrhSVi0ROIhzVjeQWTMdnKnCO6\r\nz0KDohi8v8hd6xy+uPXUw+eoLaDgV5zE+QupeO2gyJLRrA0NfofLqnEZlXIE\r\n+AYzVhWVWS3lagiWRlHKOCg/dTnJuOPt1u13YCz+b5YYAKlrDQfYPhfxC1D1\r\n15LZjXJjtGpDEygR4xIup476gfEdX8JLHXU=\r\n=NmvC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"eb39fefbc3ca102a52db83ad19b42f1a2b52ecd1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.199fe2a2a.0","@material/theme":"15.0.0-canary.199fe2a2a.0","@material/feature-targeting":"15.0.0-canary.199fe2a2a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.199fe2a2a.0_1673474118202_0.9836664748983099","host":"s3://npm-registry-packages"}},"15.0.0-canary.8c0786d6f.0":{"name":"@material/shape","version":"15.0.0-canary.8c0786d6f.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.8c0786d6f.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"48984471275b36ffff1d2f00f9bb083c0ea26772","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.8c0786d6f.0.tgz","fileCount":14,"integrity":"sha512-28AIuVvzv/2t2rV5TqziZLrlFbh6p6RBqYb4AdmyPQ3hwfRrXX/Di0kjn7SIuq2iRSCehyJObirRmeO1Rq7PDQ==","signatures":[{"sig":"MEYCIQD722dOQ7f8fS2VZaltUu0blAmQmE7ww4sZbh3nZ5j/tAIhAIi+yCmAofnpItZ15xKAC7aDuJQNgXVAIOP5QlkP4y0x","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjwBrKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo6YRAAoe8ymcOKaL5yPrntPt2rNuagu1Is7AntvICY4DBQplAWSEKV\r\nOh1pT3fhWm8BMDY0oJFequvsE1KOFkLg5k6XFmnEdaM08SwuKOgMt9VFrWXS\r\nDjaEW5TnQmiyUwF/IhwXs1IdL4DX8b+pZMfCU7FqSa/5n4WGlPiWEC707edA\r\nyqkbMDH9sOnLg0NuqsisPC3rBnlRAuWdcRZ/zmzq2eIzJ0PnZ7s61hxhRdT9\r\nkfRIux7KAz8JNz14q6vzCOZM9541efSorXqzHADRUpsb2JPn91YhwGa9JyR2\r\nPJE9E2RU1ylbP0OVYCDsQPQADyiIQ3zhShAzfz83vsLv4Jcx9HchBAKfgRYP\r\nCfkNwemr/I0TKZw+3m9XO8/qzlhKf5OuiGPMsbm0sb4MhHf+uygUVTuQnLiK\r\n3BtOrANrIitLe2M7dpTI5DO1RQm0P71QkScWn/Fxahxguyw/Ot3ByJNapnR+\r\nkXY+Bqqks+VsfCtoRkA+3bC9P9o/bj4rCrpMYzGq6AYOPvyDHDYBKJJcZ6pt\r\nupyMlTyfGRlxixr8kRyIZwkbCPnmRfIu+Cz7DVNGI/die983pDDRnfsCd2QD\r\nqhGnxB8kyUymoa/8nhNLEvJ8k6ka7l4LysiK6xvDTXFsyKMvZz23BHRCfVJl\r\nBshZbCti/N9S3kQ1mF1za9wD/y/R2PZiJfo=\r\n=qG25\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"9016794346c3c3cab2cf31154ef6a35eb5598994","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.8c0786d6f.0","@material/theme":"15.0.0-canary.8c0786d6f.0","@material/feature-targeting":"15.0.0-canary.8c0786d6f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.8c0786d6f.0_1673534153996_0.28479296845304347","host":"s3://npm-registry-packages"}},"15.0.0-canary.8a74f7c6d.0":{"name":"@material/shape","version":"15.0.0-canary.8a74f7c6d.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.8a74f7c6d.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"55556d20c87869486cc418e6b77993d2d18930cd","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.8a74f7c6d.0.tgz","fileCount":14,"integrity":"sha512-5Tnz/HQpT1iAomzchljmFC46apqqa00q3mcPRkh2tIWscGIshqU22zfrWPEx/jhdxWomMDWts7+DeNiE6Ql5rg==","signatures":[{"sig":"MEQCIA5V46HDki1ByecAgpUO9SezFTnpbXVfeH0zg1GqtzHQAiB+56Zs7YF5S7/IKoiW7kG4da6rXIZpAuvbO9kwLLheQQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjxvXbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqVrQ//YC/YUZqL1NBSi06NgIjbZRhJ/TJCoXuHSzQv7tGNCKhQZtVW\r\nEr7e8ZnyuH/mHExGWuFLnqQl8gZf5wPbnozW4s/72M88B237XllIwJ7g9QhW\r\n84hlm7U0Wn6wbxgeL/JATMrPbZZ8eyE/gNf+OEu62Kn4MtVZ5Ri2UeQEGiiZ\r\n6GthIIp7FdbNNTz8/huEHMz9MSfAtOQMRVhhj8E3cBahhSva+vqhIKchdz8C\r\ncKJs0m7/N/O5Y1rtRDPmzMtR8z0IQqNPAu9LkSLMmkUnepmjH5OuahdnMog6\r\nLr1rcYNJewPWAPp33ISjz5zYGoqbQqnXctRPhWjzUYdegRE2jwiczSC1Sdmq\r\nXF/6rEUxqCx/IKD5UiX3CPwlxoBDgvQgWIzKF9vrPSpBTbLDa/8iSmaROkc0\r\njVRzTR3kDtpxAQ0oWmX/Ypm04YKWR+5qtgu755t1CEYCKOXHa2ciTPkevrf8\r\nCwSBc1ThYrsMnQ041cCDtgvnqSK+VlwEqzDVDggHneEmytdHA04q582DLSPK\r\nLOLFFDTo/ArXjySyttDpDvEdhWhN34GTYpmWn22xPHTrS03SQtUnmsaHmyYz\r\nd6kbBAjkYwykpBTAEBWDnFl5qyAa4J1RG95ooejDcn4VLrwBQOYNiHMune77\r\n69H5lcoUdpfqFDregsLBCMD0bgw+Ma/bZpY=\r\n=2IgH\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"9c676a1e4329c32508a9e7110198a336dc704f58","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.8a74f7c6d.0","@material/theme":"15.0.0-canary.8a74f7c6d.0","@material/feature-targeting":"15.0.0-canary.8a74f7c6d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.8a74f7c6d.0_1673983451590_0.5785047318679852","host":"s3://npm-registry-packages"}},"15.0.0-canary.b4687fdc1.0":{"name":"@material/shape","version":"15.0.0-canary.b4687fdc1.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.b4687fdc1.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c3a126a0830ba2ddc16ca330b692dea4892b219c","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.b4687fdc1.0.tgz","fileCount":14,"integrity":"sha512-rJJG1Ohi4CDjgdLjJLhGop30b6S8kUAOS2BkOf3Y1CeCBQ7ig3g0wD7bPS41AmsJEjJEfEQ4jhI8ghJZ1jUn/g==","signatures":[{"sig":"MEYCIQDcJV+jgA3sggrMvc1i1GtRYkT1RpA2+WoEDy/OWAAJIgIhAL+jn69GPq869gs7dUbySKPJw5VoW754tYcxHOnZKmEb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjyZ6pACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpSGRAAkC0i6k9rEyBz7cpkhfNsyvgYOw2951GCX+tQ6DS2xxNnH2tH\r\nlMgTDcNZV27Tv3m9aY1wL5H+36ANgxeu0lsHq9KT+PsH8mFt91n8e+U+np8j\r\nZd9q4ax+stnfqZ79rvgU4U7d3Wvh94nDbm+sWBRcaPWRxXLsxfoKwCXpTYWZ\r\nBhE1FZWV+StKHPeFVhwjdhgrv+cP98ut1SOP3otmzn7q1rKJ3LCMwWTF58cG\r\nRs9Zviq7D/uap+5WtQev8QRNfP7NIoeAulzEZpSfK/8mRHa7PG4nQojT6gPs\r\n8fuaorRf9s7xuMh7+IK7C45kUSth2QzN5ed6TEpIWUsA/INnl8UlE+21Tg5b\r\n2J3Bapg4V4xxm9p0n4xHXqcK0oEBY3mvKhj+M9a8rgYcWNkLE/gKjSqpdKAK\r\n88UgE8sF+KIqGemKzUpRlm3cwMa4JgUtAectJ9C3cib8WDEhKWx+wnYibjuV\r\ny/FBW9LCWD7ys4iJFgO2paeaDArjPuytkYO0il6KhNdIIA1BSMlSKL6xv8dR\r\nX2cs4exk6IZc4JYidkm0whtoYqsPvH/diz8OWBQbWWlGJ5sD2MtOQsUjwi3y\r\n+CQRqWoO0moHA1Tyj4zBw4lzF9tLjKqiPtj2kBkZpxgVUbCB/0XS8EkWYI6q\r\nqnhf/UKt+S3k9ZtoBpHq8XLeL2OGg2NNJF8=\r\n=m7VY\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"c9ec43c7d66a73ecf591f982a42a582e639a50b3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.b4687fdc1.0","@material/theme":"15.0.0-canary.b4687fdc1.0","@material/feature-targeting":"15.0.0-canary.b4687fdc1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.b4687fdc1.0_1674157736866_0.8472571977589898","host":"s3://npm-registry-packages"}},"15.0.0-canary.b836b9892.0":{"name":"@material/shape","version":"15.0.0-canary.b836b9892.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.b836b9892.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7a919704e710aaed479a1d0dd1d6840601bafc4d","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.b836b9892.0.tgz","fileCount":14,"integrity":"sha512-1agsY1cdz49MzbY+SvD5hzulacgL6y+yuHisWX6NR4XxhU2eklh8jS9qfu9VKeFT0AnC4vzMmQQq/wKOW5Y5Zg==","signatures":[{"sig":"MEYCIQChMrxs31/lplLOogC8xBasq6BqqbF1qeyZU1ACU6mNmQIhANrbmB0AR4/rHGKZlfQa6GjeWYzs2Q1LeCLRRU/sg3uD","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj0F37ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoI0Q//cHIfvZLTLCVVzffOWpg/m37g0RsKOQf0SsJIouo6d+TLGGIE\r\n7UTPiOJnUOoy71Enibxh5kIcIVtVIjnhj40DWsK3E22VNeqb7WH7+aFxrJrs\r\nAK3BxaAcQMBIfZVy3xqtyZCkupXjddP4EYzTL2L1VB4m9Q+v3OWvpGxuczJH\r\nX/3sssyqeZDX5qYZeqmLiP69KdS1fFp5eE63EaTsaKwi9LTqoiFQPks3EDdS\r\nnqhW9QVKGj06VqQmNhUzamNfu+1VRMOOCWcHnMbz0xr5DO5BnH9JHLm1fQcN\r\nrEgpp4RHkJ86pzBRy+HG1ME92jbQqqq0+o8LaaR+VabhW6Tqx31ktPd7nvbD\r\nPFUSKluGe18Gsb2Ig29v+lzhNzwV1afijrABwBKomPFc0MqcKi+wSHO8knOa\r\n9nuvXm7utsAz706+cK47VEFdBDNzy9c9BrOAtFM60LLF0KsqNOrjSmHY+Gqt\r\nbE14yo26qrSDiSW/jxA+d0HeumsUzL5/IcPj4HBH+Qh2PKxgXKpFRB2WDBIV\r\nSZFte32vJu/BjW4dXuwpBpk6RXlyWKAIW+AmhsKis5iqL6KQ7ycqDGM1Djol\r\nAP+0D5+QqLAo8aDxlMSP7rpiMeSr9nDm9PmntxkDtm0tju9YEz2ky/TpfCH1\r\nKTMBwdl1F2amPDSzppE/M1jT5P2Cu7rcUHM=\r\n=c7Fo\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"3a9a0b2e64227ef1f8979cd5b82be3767b100551","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.b836b9892.0","@material/theme":"15.0.0-canary.b836b9892.0","@material/feature-targeting":"15.0.0-canary.b836b9892.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.b836b9892.0_1674599931274_0.0012086574023000285","host":"s3://npm-registry-packages"}},"15.0.0-canary.e8912fd37.0":{"name":"@material/shape","version":"15.0.0-canary.e8912fd37.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.e8912fd37.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e44bbec2a19a21746d47ecb6cafa2406f8ec967c","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.e8912fd37.0.tgz","fileCount":14,"integrity":"sha512-5FqZSXUih5O52VzSzIr4VHN4dt/bitpDesCwIWo3PhBCtuMxwymN+IiCZnX+tGofLqQzGIsd+IQBmq9snn0KqA==","signatures":[{"sig":"MEQCIAnuGE9sqnI6EDr2pe72rDeZlBE6pEPgCvxT26nGU6U/AiBUkLaTvSV7/RlHyvMw2APF6Lj6Q1O09TKsZh8v0q9chw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj0saEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrONA//dGWfjhC1IcVVijNttoaHe1BzTw3nYOoFi3RI3N+JMDhwULEZ\r\ndPsnICIRD8glePaCkTITR1zCl7/9RLERq1q9f77Y3WmqoFPgJ0OELn/sA1iu\r\nrUeVqKppFdqjH3e22vYKNG7ZO2ROGAyt6PNqae46DbwMvG7cSLyVjX7du2Xv\r\nNOkMXag538LZIE4XlgapE8fmYZImLiMpoKT7ZyhywLXGLCTxCtvB5s7A65Ht\r\nKRHpLLgdH+BBBdBgVMjGpGMUhQ5R6nU+ll5mUUsWODqmCnqWbOW4w5PePFBO\r\nu1SOzYi7645/cgMXu5CVRint/D3RJdyDAKoSoY8kwtAVvr4C7/7i12waYg8M\r\nQWcfotJQudkZ5m99eFuokyJbhu6ZGZ1T3z3Y5llT0gvc6zZn83tuS5kw9R12\r\n9r4kN6anVghXiiFSpPAjdABkUWs3rKV9hmnh05zxNLXH6VsBwruNsIokdCsP\r\nLbs4O634WWdon6WSF0nrRX+eWlQwXsCs6WTEVof8jjTY+EgmHJ6TsatI36+b\r\nRUKmP/hRV+x+km97FBS0RftZQFsl+J3TrR4Yg640q1/jDtHEzkUSGUl8lgLH\r\nmyAza3EvF1IetKS19km3Qjtlejh6CEVv/Vuq3C17xWl6TfZiPzLceiw53mBa\r\nPccexiXiICTQbss2og9ww9aziYKuWijjhpM=\r\n=807P\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"72b44fe55689bb591aeaddf242920ba73a6e5bb6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.e8912fd37.0","@material/theme":"15.0.0-canary.e8912fd37.0","@material/feature-targeting":"15.0.0-canary.e8912fd37.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.e8912fd37.0_1674757764792_0.6858070285930298","host":"s3://npm-registry-packages"}},"15.0.0-canary.16fbd30ff.0":{"name":"@material/shape","version":"15.0.0-canary.16fbd30ff.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.16fbd30ff.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4981fca30884b2d7ca553a05d4ee4041c13fc4e8","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.16fbd30ff.0.tgz","fileCount":14,"integrity":"sha512-Td45fK7xtmN0k9dZgiVXo5QJbZfeRy/9xE29/GBztd5HJV8eEPUZTB8b+BWKdQAm2lgEaYGBhVUh/8GQMqPliw==","signatures":[{"sig":"MEYCIQCiN3x9SOe7p3U22dFnpkTcepsV8dk1RDa4roa2EBeLpgIhAI2ZmcyfiIlk3blNOceYUdCIcjArP3tyMkJGS9SdUnA/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj0se2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrQ3A//WPWQATTOFxnLMiIXEiBxE5f2WnxZTkePbJsg4T2tXKmESJAo\r\n6lwNQmZ6MxbChjL0uhfmyHbUwpirn3TRFj8r/wyKu3RgJPyVvFCVENaxerSv\r\nQxhbss3X/v8n9OFaukEl4HDGRr//ZAZ3GvQN6PO1BcDJdXlXvS8+8a66dLOH\r\ngoIQBU3vMDz+9H/3tWKSM54PRXJ4/z3cBmkl9S9KZALJIC9rk7HXt5cu0soO\r\ns0DXHRwWk+uSQb6I1RQquu6j2LWvNSjqo0jBpnZCvLm/ETYIbI9H+IQgYarT\r\nZYgg66F7F63U/zW6oDyjtN85xM22/pSBinjxkZW4zl+GubWy7LJ4nKu3YgZl\r\nPtnH43BzCO0Ds35v9uvRkaBUX5efGtP7+WkHoTxxJ1f5DLP08n2pS9w4hCnJ\r\nXy46JnOG5pADlufga+0nth+u7XPwSYgpP7FCQteH0PuQXman5BGNNnDcIdpS\r\nHb4WUmJBv0ie83SlfDoPyfdY72lBTJp7EfMzLrwMMYB7cY5Pu8/MFaELZNaB\r\n3SrRyEN0RX9IdBgv+YJx3hxyjIIhT6NAaJFCt2qMZ1uw3tRo8EiDccH8eJRU\r\neoTftKlwacTC/3ctfpfTGIp5+jEZnj7N9SppaeyHcjh3XvljPWq9BqBKJFLD\r\nI3ir6Ro/cBqzjBckNnkeIjb11+3G817u5Cg=\r\n=IaCw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"f4c39ff05bbd1045563670b4ea50b0be51a91d01","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.16fbd30ff.0","@material/theme":"15.0.0-canary.16fbd30ff.0","@material/feature-targeting":"15.0.0-canary.16fbd30ff.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.16fbd30ff.0_1674758070284_0.8775541600832724","host":"s3://npm-registry-packages"}},"15.0.0-canary.033ae083a.0":{"name":"@material/shape","version":"15.0.0-canary.033ae083a.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.033ae083a.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b4258785864d3382e8b5a63c89db9d6f3a4fdabf","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.033ae083a.0.tgz","fileCount":14,"integrity":"sha512-Iqtww1zSkBk744swH1JmZJiwETig0ytWJihWUPnWGOgSZWD1dp7gcWFNOlg5/NdRAEoczUh1vxfdxS+31wqNjQ==","signatures":[{"sig":"MEUCIQDNDjFx7h//4Pt5+P8ub31d7jHM3gL7nYH+fmrTYkGkYgIgF6OXLPUGkOwQNMrE/uddKC31PW7oU5kHphYhOJP97mU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj0tPlACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoAOA/+L1VggFvutEBoESvewRFtAs21f4Z2A+no2bKv9PnulNUlDrXz\r\nG02TIxo35Cjy6lMEtYhpo8yFLeJBNWISigc9EUtHxV0sNyzRmQWV6iHa4iqB\r\nvi6GObA+gaNkwewWRi4V+c8CXO1BnDbGNOM9xr39aeOvn6dWSzkxKMQsHPRF\r\ndU5MAXjCgxZesCauvaHcjb1NRmbnaoYZ69YTw6oyCCG5qRSNdQ1Vo8ePLTrs\r\ntBifz0A2VSVBz5NM4au9ZwBy8yxkLbukBIGz5Yo5zRUuKAZSJrd+153kK02T\r\nQ8Xh5h7w1vd1qsh+KbyEA0xr5tU1XhClr/HqU6yHEh3t9HGDs4LkB7M0moSz\r\nnwjGSU7h9SzTGXt2Ii4d2Zvy20fGKJ8fcsbd1oQDRyvZ+CQsXnCvzVTejHnr\r\nGUJdHfPr/R+i+t+qirqj1qNex4esfA4Gwz1c+Pl07tvQhYIsNSI6dq5WSuc0\r\ne5jQ4pKw0P4n26I2yHpAbRpEtJFLIERGiV0bmXRJOaK7ZTErAj1Mlz2KribS\r\n+wg21+rxcKXMrnZcZJ/0ULGc0p2WfcKJbvBPWSiCESkIjZQSRHT3iQxU06ke\r\nINTyxduUcj2GMjx452Z6YV5da5s/4i7aaRNsVvusRTEnmuVGogDhwkPwCr7H\r\nGT3KepAW73sLqDESRC7q1apP8xWuyjTqXxA=\r\n=CdEb\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"89ca938c110806d9150a3889a7d25689661c2fdc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.033ae083a.0","@material/theme":"15.0.0-canary.033ae083a.0","@material/feature-targeting":"15.0.0-canary.033ae083a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.033ae083a.0_1674761189109_0.04175099013816652","host":"s3://npm-registry-packages"}},"15.0.0-canary.3a705fa1d.0":{"name":"@material/shape","version":"15.0.0-canary.3a705fa1d.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.3a705fa1d.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"253e85700546592eaebb58fef25717fffa51c3a4","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.3a705fa1d.0.tgz","fileCount":14,"integrity":"sha512-letXfeyO6I+s0Qls6mWRY+4rvHK90fo1Ss+jJ1JIBzkCz+AUfyhFjaBmCphRbtP9djhXNfwMAalLsCulSRs+Ww==","signatures":[{"sig":"MEUCIBiYZyMetOvcq7Q4LtEh3TkBT63hpj+vcMzUisfavcmpAiEA0uRE4fSlw7ErLIWKlwxKvsY/uOwCLzJNx+if5q79C4I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj1FOEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoN2Q//SwNZB5nHl4ugHXyxc6ogIyxH8Z6/XZFmY1TdUSpdhXay5U1K\r\ndFx96OyF0hX8du2kvZLPlr8an5TeP3bci+BuENOyGZ4HLSCBiTmlDV2WuBYF\r\n2bOy68bclJHJEquceaKVFJOPg2WthM1EiWmFEw+o3Vr4QsS5kCHGqGlCqU0K\r\nHOoAnbcPnzcaecen8dVvCP5apykTVPRUfdfUO+f2xBR8U5KdCCZX41KsPkFa\r\nGVj7MltwyD8IP0WUV48H6yNf20YrFpyOiocNJdxdis4wx1j5+DSXG8yd8bFs\r\nkO7ducc0ICrdoVKvka/QlZeV67G4fI1p5wCkvhyS61TsQuDhk12WiDwwThQF\r\n4VDpVFhiVXJ0bXtvtRtad3zZ8Vn3WPaz5+RGVAMTZ+OZYUyh7Z10l3MjvkTt\r\nmqeEQAbr+2fcolEiZ+3+noCDgUHaCzQCFO/rzlX5OTsfBu6CgWZbGGMJjlCa\r\n/cCoYW0bgmnh115dRmsF54LJ7GIVjebhl5algltd/yg9pfV6m1vwUxI4dUep\r\ntD5r+atRn3BJ1tIu6x6zCv70bzyiC2cf94ja6Jo05RwTO8RM7xpTDaoKp2yE\r\nocndTdIK3ncP+NrOmnoDJkNwlEIb1pG2UblvLjSGqz4kyr2Z5JDxP0mlLEPV\r\n+cd4WF2cCsAtxK/b17N0r7LudrTnYV+fZqI=\r\n=qGPI\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"7e0f3737f51c1319f66762d8021d6aea33391733","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.3a705fa1d.0","@material/theme":"15.0.0-canary.3a705fa1d.0","@material/feature-targeting":"15.0.0-canary.3a705fa1d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.3a705fa1d.0_1674859396472_0.9939480059875356","host":"s3://npm-registry-packages"}},"15.0.0-canary.d6bea2ff2.0":{"name":"@material/shape","version":"15.0.0-canary.d6bea2ff2.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.d6bea2ff2.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"764076c1a564b05faed919fb25db1d7039566fd1","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.d6bea2ff2.0.tgz","fileCount":14,"integrity":"sha512-2VaKW78p4cVZ10lQbkL8laZWP8sJL0W4qKaWJMhUg2QEmJ+vrAvxYn4d8GgQ7d6pgon3AIvuIOZNEHCaL/3QaA==","signatures":[{"sig":"MEUCIG7LEzxzPDFocIEqwQMNSInXzu5jc/HN5o3p9U5L/tyKAiEAp17fzeAESeQj7JhDyuE/Uysi0um81mUbryRC8jKGcas=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2TPlACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoKng//eDxinR+Xi4ITF6HfKW5swA04rADHZpUC9upFUQM2snlVSrDz\r\nwLNm5C6iRhhMoN8KgFRkC3Zadx+nLAWZg0Y6+PyGeG/N5IKRtIYlnaabmX0Y\r\nNAT1jAAAlVVriM3oCSbvy476yytl3/zJzMdo/Ckp+jAlOQSsPNPuTGyDgu7x\r\ngVEjL9ABiX5D1u6zj9Nu7xQWSkyehAAzDtRHsZ15u6H2XOtTHa7mapXFQM+I\r\nJJG2lBrqOtrc5shhx1gxFQI/JWuvqe13aSnzNTmAbElPN6XwLZqrccWNSsBL\r\nrMDyqNALEdJg7lofG3QRj+Nd16/zMic5g1vPKQ2nSNCXm8NWJWGAXJs3tjoX\r\nIAfq9uH0iZtQ03hrOVqZbSGfMYp7IE0Lil3uwUEW9a7QrbYW2c1VZZteKsR0\r\nbQw+B5ygWHIL/ujtCRGbGBtYAB/0MAXhQWS5eB05inbJhfnknjYtZ9ts0Qz7\r\nHU5Crek6ofpgNe6/TCl7KMVR39miz+q8/9XTwdHgRM9shadBGLdUEulmM6BL\r\nvgM1uM4pnk5X1RdH9B1Cw8HkWeDR2ooySW1DUFEcDlDC1q2zraxeSi1RzP1/\r\nR6o7atMfhVPxsmtxh8RoSAIFb6fz0yQHv0QblDvZwtY72WiTJ2m60UbONKrw\r\nBXR5LL+6pzzMrklnfm87kmBnLFhjtac5/eo=\r\n=mUDq\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"e4210a9f21a7e6ee007d475d5bd7e229dd7bbc00","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.d6bea2ff2.0","@material/theme":"15.0.0-canary.d6bea2ff2.0","@material/feature-targeting":"15.0.0-canary.d6bea2ff2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.d6bea2ff2.0_1675178981059_0.5923378978970681","host":"s3://npm-registry-packages"}},"15.0.0-canary.0c94182c8.0":{"name":"@material/shape","version":"15.0.0-canary.0c94182c8.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.0c94182c8.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"719c5ad258322266bb5062c1f7d874856c2edfe1","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.0c94182c8.0.tgz","fileCount":14,"integrity":"sha512-KNkimmzxIZzsakyWBJAijrhB3RKU8eiX510qDN+Uu3Vsz0WAbUx5dqApe3z+f8Jjs1rSpY+UApebOWZCYQyxAw==","signatures":[{"sig":"MEUCIQCeoBQI68CdKPCX2DW6xL5V4i72btzcvwnHHzbSPWJ2jwIgKARTkJOuc/hxamhBU63bE72LfMkTpnMXKNtPOxhnpcM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2qTTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp7uA//cy0SxyEit9rqCTSvA2Xd2+0cKm4nRucjA6xp1R+vxcI+EwlX\r\ni8rVi6MYb5eUuSvSZzvXl1aAD3B4sDBU/N6nul/aUa29qh/XUWF379bcQA/R\r\nwuorS90U5ZE4hRnbfL09Vrt/GP8vtKV6k+Ps0CuZ+AcJiCpLTrE1foihLJY2\r\nxn9JNWL81X7B7tU1gBa6IdfYCV8Jw1aixqKfja+v9iNkjlqLvMhRemSDBmeM\r\nxvJkn6Jz8odmSCHmFMcP0ry0TR60eH27eg9uUjJBOdBX7GDUiROCxhypKoJf\r\ngsxDZKstXQu6q3hZViAGm3XEUfWZnKBanCDnBQkiisTOZt2YFC59s3awoR6E\r\nyEKJlnQoBthJ5cEBwlx3+FVx0lX5/7Pw2wRTYhB5AFmBZDI2t8iZiZCd0eiO\r\nLz6KgEo3mI3iNQr1x2AmA9FtmK9XCvibff1UyezQv5tySrEAb8h9Bcg5Q7Fd\r\ngYfztCNKF0nvbn/iyVtspNff0k+Tymc4PlIVhUayb7O5m3bANjc2Swz5B7q5\r\nCe4wEQeCF6DWZjAOFkIEODjy0KGxFiLENgDTtse2ATpsci2CjyWs+FBXo7HN\r\nwRrOfCxriYxFjeEk6vz0LfJ8aqk4Q3grbaGxJe6ht1vSRmmqefUP4agc8p7R\r\n6mVWYYlOeL0LKXOgVfiUrSdnPaadjX4koBQ=\r\n=KIck\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"9e58d1edf6370fb6c26f762d83ca31f928149e41","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.0c94182c8.0","@material/theme":"15.0.0-canary.0c94182c8.0","@material/feature-targeting":"15.0.0-canary.0c94182c8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.0c94182c8.0_1675273426874_0.27000127943261454","host":"s3://npm-registry-packages"}},"15.0.0-canary.15b221540.0":{"name":"@material/shape","version":"15.0.0-canary.15b221540.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.15b221540.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"566125f87b9c6a60393d48d93f2f401443516731","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.15b221540.0.tgz","fileCount":14,"integrity":"sha512-WzQzJ9MJqK+2J9TzAu33CLJxZAK2Dh4t1Cslf7KQzs7+covA42H58/cZVXkmHxxpqtTQLro9QivogFkxm3bbWA==","signatures":[{"sig":"MEQCIBUkQbOGgwQUkwvJb50FF2wA3LP4bkSZ/NoPKpIw1iUwAiAeXAfcgOWBlmPKsl8EfpnWuVk7z4ByLvP2o8asQfhMcw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2qbFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqnPBAAhblwrVnRr7DnVKOpZFFI1UlCtwoYA5Ldm6FKXTEophH6YoZt\r\nRBGgAtDV4YanPWfUVUrviqinXYv5TZCMp0X6FT2xC9yaxJBJ27YYjF9HIUQJ\r\n/yMurwE6AsuDDUVuhEyeq33efnq+BmSr7DmSPyN6LAf3ereVdwZqSb4YLU1c\r\n6QzmKa7HqpN79/A3pnlcbC33t7Azr/2sroQ83kFh0FG9LrH4kgCWWFZ9QDFV\r\npkYVa4OFejg9ZdMTX/bhpFalSoM0rwRCp14zKHF/L0FOOGIzoFUXrD7a2+hz\r\nNDVNgl+K1dPbwDFYQYyU7VZQURRClEHPCNF9Z00YreQ5J5PloaM8WnEJTBWl\r\nCN3oQcNUdevRxHPyatKhkOVbU/DVCPXht45YVDWLaN1lEKiHQ1mTbqv0hhAH\r\nJ6E2MGNJnjZBBfceWH1T8RtuVv62WoiZ17r8+49Ym8lLsGIXsrknHiTtllZG\r\nsk+LIy0w9F0g6/HHNv/Gxqz+SdpLwkbxmKwWoFmI4VvUfj+z87Sc0rRiGTA1\r\niNaM28pw72SCEGAruYGmoMZEhHg/Yb1dxM+3lrjavlegTb+KzyvxQ2ph0m7d\r\ni1Znxg6zuRzDLaMXRmF2AczbRql71VZR4WxNwNOhwnJzryU0soW+GGg+R/DR\r\n71VWtwn2/cS3MAv/fFmgBLdZzhCvsuvxa3o=\r\n=qoJG\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"a4bc6d32435d33a7b99197f32b85eb0b730acd30","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.15b221540.0","@material/theme":"15.0.0-canary.15b221540.0","@material/feature-targeting":"15.0.0-canary.15b221540.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.15b221540.0_1675273925575_0.8614279284099435","host":"s3://npm-registry-packages"}},"15.0.0-canary.eeebb8bba.0":{"name":"@material/shape","version":"15.0.0-canary.eeebb8bba.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.eeebb8bba.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"113c2a4ba2c844aa310133bba90a23ce693b7752","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.eeebb8bba.0.tgz","fileCount":14,"integrity":"sha512-9QB3FkxrKLXs59sVB2E0rD78znnUSoHRDP1taFJVdelINDK7zgeCxbL0c+tYgl+heKwGUPaSWkFqe0ThJcjo+w==","signatures":[{"sig":"MEUCIQCvhQJPlyKa8/NEt0GS7F8P4X9QQaCTA9xS+ZRWf0IXyAIgHF1VqYG0CySIMlSU8XVxHTGs59sR7VdOVl6xspriCKU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2q2/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrWnBAAnSMdE3x+bJX+uK+/e5LAhDeQmzicshw7EzyCwOMguQt/+AYS\r\n/8uT+HUYhCAb4rsJjt86EwQQ9AhxPJoX4U/7rCZQhkBokAMNz2rv2HoWLZaC\r\nfsWUKjGjB2eQNNsbvDdQxgDAtZn7zx7ergx0icKPZqv/zKQOzdrb8PzfHHzs\r\nlJYbvfg1Cld0HEm+JoMrETaTlkqadzir5Wt2wgQv5Q2sXWSp/PEnt1soZZsk\r\nW7ii46eyYrni23rnPqdKKToVPtB5X74tg8qNMlaBQtsHrX5IXKafYmhDW8xt\r\nqAQw5geqobFcqLe4k7MTTKiU8FEgAZe6+MF/oRgczO4oDD6/DtuMZd+yZq/5\r\nc+qrLj6rZG3sfGEXmQlaQ5RDyaryQnOH04Vh3EjEamTiLbKuCA+CWWyFEvhU\r\nSJXeTKeuNseGz6aOWIpOXCXSw/beGCpNGjs/vWO2Ap4U/gePrr5tOeDYlYTj\r\nczhx0uyFnOCiwM5aL+L0xIgMzgYnA4/g48qy8iBI/Ys4SNgGcrpkoYBlHDR2\r\nxP7+JEXnxp3OOnZiGXF6KcMUo9In+pGs6IzpbJs9eZkbUgsjkgucYfMCvHWn\r\n02GHzzq1qN6eZg/3uTtWHzf2gxEXChvMBf8vDSabcPUH4UeASZpLTYmzWyUs\r\niQ1DPIBhKAa891zfy6dLmTWNuqMUaXm0XvQ=\r\n=tYvN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"5c8d0d2ef793b8bd564888fdde6b97e8a2502cdd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.eeebb8bba.0","@material/theme":"15.0.0-canary.eeebb8bba.0","@material/feature-targeting":"15.0.0-canary.eeebb8bba.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.eeebb8bba.0_1675275710940_0.07258512262870687","host":"s3://npm-registry-packages"}},"15.0.0-canary.6a4b3f834.0":{"name":"@material/shape","version":"15.0.0-canary.6a4b3f834.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.6a4b3f834.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b9a8cca3654d71d0186d4ca3ddb8e2afbde7e37b","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.6a4b3f834.0.tgz","fileCount":14,"integrity":"sha512-K0d9/7g1GrYkCH6JW6OR1+mEb5Nha3qDKNFnxR9BceGfe6lvaApMUi+wX1VbreVhCkzXfTM/HvSzZgsIm0ywRA==","signatures":[{"sig":"MEUCIAqQ2Y9t3rnW+RbORmWiuiedNuxgfzKnqkxZll2O/nurAiEA/8IvEQ2ozjemmMqoYFfRwQRVO7Zvvpbm/kXpapdDcbo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2rY0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqKzg/6AqS2nR7XB9CzBo6Z8dRROBOd7faS05OwM4HW68Ck3FG1SnxE\r\npHj+vCme6BA/hfWoUyNOZlLtrBu/5QYn2DGajBt6zcTpflBHzMj9eBbdD/Wh\r\nMgENG9px6bHvapXMNZxtsh7j2OMTNEL94FGX4Oha3v4U/ULUZR7MJxRD4x5I\r\nkFvOuzaDd3csbs+rsOaNBL73e9hDvY3mytB+bPAB73swksvG/bVq2wSpQYQh\r\n3J1ZgB38PcHbZQgjoDSP0LuZt0diAUGB554cjiTwhn1gRbSBcT1o2ybxIrVE\r\n84WFJtjRiOLMXEWezs5XvF/XWQ5VQDIvrZjI8r1dVnhYTG76l5tx1E7SiLxg\r\n8GWF7Is78CogUrPSs21r9fNPntql7VEYOhVGjoU2+9xB+mBG8W09/77wPI8l\r\nVRpTdItB3hZ3bl5HUxRWcn5QX5uMgACAdHMq0UBuVB7ciDgezySBXmbPCSeT\r\nwVZCwusFrxUbMf+wuptIt2qrRvbkdcBY2XY/jSLXg7c80m/28z9uaTH6lL6T\r\nPC6wvjFNFQlNl8svkfGAL3oKpgDdzUyo8P3+//nZRsqK0TZl7GOYqC20eb1Q\r\nRazQjtIAd8nD2n8Xi4NL6rUOp2NlKcDWdUZvBSOqEbXQesNh7f6uUAvfYzBb\r\ncaevByZ/cIYeVFNSxT4/IGdgkTi5oklcuKE=\r\n=dIzW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"b1f2d06637869496d98898f4cdf709ebbd279ed4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.6a4b3f834.0","@material/theme":"15.0.0-canary.6a4b3f834.0","@material/feature-targeting":"15.0.0-canary.6a4b3f834.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.6a4b3f834.0_1675277876370_0.6672521101199242","host":"s3://npm-registry-packages"}},"15.0.0-canary.b177b40e2.0":{"name":"@material/shape","version":"15.0.0-canary.b177b40e2.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.b177b40e2.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0177bb424e7e151a305b4130ec291482a3bcdc92","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.b177b40e2.0.tgz","fileCount":14,"integrity":"sha512-S7AS/piENzIF+X6Hzkbx7m9TIA4RP6Qasi0kQtB1WbIlCVYJNiow98cw5gzUui+ELD8L+OgelJuDtfdyzAudQg==","signatures":[{"sig":"MEUCIQCef+dqIxBAacCBpQlM6q8qFwGdlY8Cm5g/ZN8eD7js9gIgS++zlWujN4Y1lPBZIWcAFos9cOTFBR//PapLPcPMu6E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2y8RACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrM+A//XWu7jEbSy9zOOVXxiWB5NWJ6/0NxKG7/elcUUWbSCJMym86a\r\nzQKkpXugBKh5b13FzC12Cf1Bixp/bH6R6Te5go/T+MlLP7ka5KeNB+eBc7a5\r\nZY3paW7XsesfyGHLtHoN2MUMP0s2kbGfS9oIy4TOsfSHtNiSKiRfdqi2xlSy\r\ndqmCoiNW6LXyi7z6UwV/ppUmkVAN+dokPB08z18ApLLv6rMKNW2dwTOqqbx+\r\nGG/QKmgUGm3vOYUbITMsWl2JSbZAu1rhhbKRribzFucNZVNlVGIea9H7RU/c\r\n44/3JEFxzFwgwPxqHFg0IP0wHW5oXrwOV6E85gFK+6SJSUXgf1eEgCXMkcN7\r\ncXg7x2syU3jP1Qsul9O5linJ2s9UV+TMJdvqfuaquq4T157eLZS8IWGKm0G5\r\nZNmOcg2nhaeBoMhTh0Bd+KsaNXRbjEu5lUMAft4sTisggi2FuzgaAtRoeg2D\r\nD0UpeCqwPSfe+e25SAsBr0bP1TQxZD6GyRpSrggIIwuSfeuaBQgXC8IfH9zN\r\nCdyUHx5Buw81yFvykyCPlyIQk+WsgqKSyiX+N+LJGv5iKDajCRHueZ+G/g/l\r\nLOrm2bHRSDrsG6WfiIAynhdqv+3SVrw+WXBKltq6UKijiLTSS82OrvN8GUNd\r\nX0hu7BzZKA5S2OrrsB5WlNycqXpJXt48mfY=\r\n=p0px\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"e3b49a7dc72f9c88710ba68c63d4ddce56a58fe7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.b177b40e2.0","@material/theme":"15.0.0-canary.b177b40e2.0","@material/feature-targeting":"15.0.0-canary.b177b40e2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.b177b40e2.0_1675308817015_0.11225820379730989","host":"s3://npm-registry-packages"}},"15.0.0-canary.d9f821042.0":{"name":"@material/shape","version":"15.0.0-canary.d9f821042.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.d9f821042.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f31a73d200a9a4d092f0dd434022026b1da5f09d","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.d9f821042.0.tgz","fileCount":14,"integrity":"sha512-VQNV7R6gkpS8AqlYBSbsLwzNwI9zRZ/lBOLbJ/8CKPNakOWNELnVSnFalnumKtpgn0S2zL+Ts/1Zh5RBYcIqeA==","signatures":[{"sig":"MEYCIQCC/IU6P3xyllp8jOzzpfrnrG11MDR0oQNdaRs0hXluzQIhAOit/yrvpWPAhwuFnKDdxz3LUJT7UZY/d5T+texkrO/j","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2/TZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrhyA/+JgLx/eQjQU8k0Uqa6DuOmFvImz+kNF0CHSMLeiwsssIpZ3kJ\r\nKVi2POv1tsA/dCbHZ30XoKbx1M1p1M32msUj3NYN0n6nPH/TsnAocuavp/oa\r\nBZdGMoIz4aNN4Da3Z7joAOfGZL5PPz5QjU6cibhcHhpV17hTCs1C62c0UGus\r\n83+cDrBZHlopzwdlDRLHRhnVHWF//78mVIzdxAbK1qCN5ZKW7huUJkQceSk3\r\nzMORXhwlt0FhHAFLcgNU1B+kWPAnq6K3g6DYWZ5sQGERYieAAgqvqJnKaJZY\r\nzDyFltltbsaHb37UjXmyxw5SvS94Yb+2PsHiiRJksSapgfToVH88Qpe7suNb\r\nR8xRo0aFMx8iM7NH+ILi8YckqQlIsndwUToZsBYKuG+ChTr0wBVkyLCDySiW\r\nh7Jd2kbYxDcGfXxsJBwZvgu4gSnyuGiYgGLUja6Fem9BmojeKb3AGvszG8Nb\r\nP9kNRwkT9EzQEsGfO5KpV9MwCe/ikyTO0RaIjTCvVGWWLSPweKQreburQsDu\r\nTOOAa9qYve3uvivEx624PFz03KMreUFNgnxUCI0NJGr4pPXH+IjEbPAzMwW0\r\nI6M0jJeEdQHk+jr6C+zH99E0tCnBnJcepTzTvxWoTciQEFJIjmgS8VyQIlbF\r\nNY9/rjSJqFsKLCPzuY3duGNmbDn9ARbQZKQ=\r\n=02YA\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"9748fa2e1dd5886715f422f644830717544192ec","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.d9f821042.0","@material/theme":"15.0.0-canary.d9f821042.0","@material/feature-targeting":"15.0.0-canary.d9f821042.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.d9f821042.0_1675359449684_0.8407043451825444","host":"s3://npm-registry-packages"}},"15.0.0-canary.47c7deb19.0":{"name":"@material/shape","version":"15.0.0-canary.47c7deb19.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.47c7deb19.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"754c5bbe7f77776d6202b06cf9df8947a304c698","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.47c7deb19.0.tgz","fileCount":14,"integrity":"sha512-tgOFcCo6WFiXD+bJVZxiLxGM1p0XY+eCGy0t74BoinCrbiSs/ciC1zDCeuFu1nF6FvUaOZUfr6H2ugmxKehG8w==","signatures":[{"sig":"MEUCIQCGpSAFMTTOEMEoNQGLMBvS3dvqu1CPmgZ9Md8PiPgh2QIgEF9is2f06Yd1L1PaxT8vScOe+lmkbw1wAMrN98q7r78=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj3M8RACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr01xAAlHvZpndAi6uMwW3rMFSODeS6D8zoQ5eLBHKWJ/cmKZRG7daR\r\nYaGCHlgW07Cneb5HhwaOFYXxnkIHzQ4onHlJIQ2I/+xv4gmOY7kX6+L95td5\r\n0tttrrln3oVwIN9E8pqjnIp6olC3GiI0OdOYh5z0hSEbTh37BJsVQQdy7Js/\r\ngIvbr8X9PNjDoUFmb0AoR9thNZJnhO+QRlH3uqn5uHFOI8WCihO94CXtVjcp\r\na7Iyr5u72WNxZn/1jvsEo83w8HvieM4y4VYnw0ckTyEC6UQtv5uYpyfy9O5v\r\nLcLjPKvtACTScd6uGN1fd3YPKTltLfv6x2PzOeaLGnZjFAOLnXBChNi8vG76\r\nVmHCfW7NwVdGxJrMjftLNVwFzne+mA92nbBlFk4QfVsJR6jfp++E/FXBqYvL\r\ng8/skkhGaYPT/rEpz4lxhanjfDNLU7YCXSa0eo36gxYW/qYTdnug+Bd5ONoK\r\nnlkb6RZPxQdRkxkXrFCclZVzyd3qUxVchhpwus9qUMYz/ZmoUotPM4zMkCjN\r\nsdT3ga1sDew92+I0IQa9cLGmP6gGhDJ1P8omuQyUE76v5kv+KAjyDIcMQKrs\r\nlnTfR7ZwKa+47q6qqgJJNip6t1BGmWFdXNiEUD/xhwlDp5nDm4yWrVQEdzYM\r\njcacgHMtpjQMWHt7LJDj592x5RLHbQ1TQmY=\r\n=jwhz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"d5a6886a0dce343fed87311107975111f62309bb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.47c7deb19.0","@material/theme":"15.0.0-canary.47c7deb19.0","@material/feature-targeting":"15.0.0-canary.47c7deb19.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.47c7deb19.0_1675415312889_0.24926355157914193","host":"s3://npm-registry-packages"}},"15.0.0-canary.a16dbd1a6.0":{"name":"@material/shape","version":"15.0.0-canary.a16dbd1a6.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.a16dbd1a6.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2b54ea8f6135d28d4bab5010f48ba5a3a8008b34","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.a16dbd1a6.0.tgz","fileCount":14,"integrity":"sha512-h6oBTIxnbdH93eWWh6srHIyIQBZqHHDJE7FaONohkOrd5a+s3ODdTWQ9QPp5AIeI+RUa/44j8PGXD5eH+N1Qhw==","signatures":[{"sig":"MEQCIHtcJiNjRdH4MOqg0Gk+l77nrexmXDlnKKiswmGIF0WXAiB0llwLGbHz16030SqHBYLk40fdfUIMAjl2Sd+V8ZqLOA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj3fexACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoQOw//Tl5ZPpsWhgMWjI1I6QliZex48UfbkjmUllAJdPi5574/y2S5\r\nCUNe11slfZ4ivxvwT8pGUG58cSQWYWAE2eSMlaxoE83QIOkwzaQ41SWnN8Lk\r\nupmeyfTlHpOip8GAyCoPuOC/U7O6pe0M/AliobfgQiZV0FIkE/GJKGAb6Ju7\r\nM9WuQYdt3N8uJsX+HkIvlK8Diw6UaP5YNTygyBjYxjD4alcyS1YbUptoX13h\r\n8p1Yd64yc2FjgyYk5HAchJWkPj8WL/7YQtq8xJtxwjmFKAPSrJVlQkj3jF+K\r\nBN0wUQH39JXegHdsFdkFRyivgdN2d4beDsEyVi5bfxJAnJ6m4lr6sus9PK1j\r\nR8lSTVj+SBUSSykS68s0tfZs/whlQmyM2ly5CZvaTFQSJpRO9GtwdXwPnN/a\r\nqBcBC9G4xTRGJsxkReUiY6RvVkPB7SwEsF4gWjbBcuwF7x5rPIAXrzD7Qvyc\r\nPZVZomGOWlyt5Dd3yK0XwHjxL2DKNjxW24gYHaZwJHPxLIWOBeyQJqdSzvSi\r\nbCezeC5Rh+7lRYMEJni12uO9wZCyGOMBvRSvZ4ua/R7HMkUsWASiyj6pptcf\r\nPl0RivWHDjam0yKIwhlKL334GWG1uPMsmM3tvuM/06ltGlsj1dONR3YaXHjL\r\nZKGXR4EvkIKzrE272wEyvaGkidGdL2/jEww=\r\n=5l9R\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"6b1923aa24f460ae50c61296787e46f524bcf15c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.a16dbd1a6.0","@material/theme":"15.0.0-canary.a16dbd1a6.0","@material/feature-targeting":"15.0.0-canary.a16dbd1a6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.a16dbd1a6.0_1675491248919_0.42803211431404","host":"s3://npm-registry-packages"}},"15.0.0-canary.93416f87a.0":{"name":"@material/shape","version":"15.0.0-canary.93416f87a.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.93416f87a.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"76cfc6e142da56f19f5a2ca6b9ff76c3ccbe74f5","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.93416f87a.0.tgz","fileCount":14,"integrity":"sha512-znTCY6B0wue88zvbxW1vpjV57OBBl549C+6bDFMfeMmrvHyBMAKPV6GgbRSmn8+YrYVIYJviFmYRC5FZHaBTxw==","signatures":[{"sig":"MEYCIQCPT9g+ub3TuU5SvasRNU+UWSiIwPkOeaQVVx9DhnoFzAIhAIUQM5lBFkpEeAZskrDV2DJ9tZ17SGm3IyyDVc0cCrOy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj4lDYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrPpg//W997zJbX3QWWxXx0H2YWYjayXscOceywZIIBYopvXi3wAXeu\r\n7uYV5Zr/zUDv72GerbjQ/M1h1QjNnBBj9j1KWrIlILkw/GTyUuuqg59Sk0Qs\r\nvQpKuSO9SHrgnZz7CQ66NaoUxwaNSU/2RFWAvtMHhX7Alr3fkZmHRPxNapNe\r\nIb+PVUkdRxcL7xYr2ASJR1tLfU7wHt6cv5JG1e5/psOPRvUCSQUUIG+KPsS9\r\n9dXbj8vlBWsK2EYV6RktEfD3f+kInAqIWyYDtfwf/03DsTwZbp/1/yPPxwNL\r\nvYT/IXlNVfmhpsvk6JK16CGPgUcTTN9Oob6i6pbqKLcySOMIXhOibN9GCBnx\r\nj5WqGcJiRw2hD+r7S+UZ4dbIs1wYNs51spoG+w2EFGr8Aw8vN61nYZfhoOp/\r\n+8VYqgl6Ufth7klogrWI8ZRcXM46go5oEIA/mzo4HpintYfR4+yXEHr7YNw0\r\n8c9WmGECKOHSawYtViDwj9jHnjGiO0pXRJnhsOhVKLDYvJkhX+uxDM2Oed0V\r\nLtcT5M+n4zw0I40JXBe1xyq3dUbpxYBVYSFw5pNZw1V5ngpWsNGqCcsCnkqQ\r\nZxfzydbs5D7RA03nx88OnbNRf3Sd+NbQ82qp4EWkqx6rdBNBArSAnObdbDbH\r\nccwLdYP8LUKBkkLfNLWBnPeaH5NWYRganV8=\r\n=zjO2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"b9f82375a462288f01ce4e4efe6047a3fdd9f9a9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.93416f87a.0","@material/theme":"15.0.0-canary.93416f87a.0","@material/feature-targeting":"15.0.0-canary.93416f87a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.93416f87a.0_1675776215835_0.38792871289306907","host":"s3://npm-registry-packages"}},"15.0.0-canary.49b8e7442.0":{"name":"@material/shape","version":"15.0.0-canary.49b8e7442.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.49b8e7442.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5faa85887cb8382799bbc0b39d85731d4ca029c3","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.49b8e7442.0.tgz","fileCount":14,"integrity":"sha512-UbB0c0CPxOXYbk3Q8oxmtmqkYXxjkdKBe+bTz9c4xSw+wncGH8xahYlCV1py7Tr1D+fF9T5F60mlhc0Veo89Rw==","signatures":[{"sig":"MEYCIQD33F3O9VepnKlWOcOWsMDwROfFU83w5TLeiYbck7Sv+gIhAObboHuIcfUkGixaQ34jn9qrn1iLxYI02qBmeU52i23L","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj4toMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpvuw/8DVGU/aphoH3H6O31HwpDSq2jpN55JA2iU1Y9rPatDBDCNHmQ\r\nMyRCRSxI8P7Vxr3je13i7kU4HY58C4/hkXa4sFQJJaXEfrhKOMRdfZa+RXQx\r\nJyVsReJGVZpJldb9Jfs2YKfGgylugmy/QdGX+/pZfaSdqAMg5c3pZH8M/sgr\r\nb3XHT5R1eFGCOGjuCtqE/RcIm8DiT+Xglkvt8thLcLgWc5FxDbRTBl5HHxCQ\r\niDM26ZP7nabNFcP3bNeoJO9P0QYtgifvCDB9sGGa1V4ERtYwvaqF9Q5J2eHZ\r\nj9FrcKkTY/8I4hchmZ6bgiUx99lfBVZIPektrn9NJdFL4/bqwYusgrXjMHlS\r\no1LbaXxkOekEHgDxmleLlRRe7XCMqW++eaf7640M13TB94LDr8XLMdFDdj05\r\n+DezIY/ihvQOLeVUhgvD/V3zpEqLpz3Sa51irE0uYq/12R1GZZFgGU9KianC\r\nACVexS0qif/t8oPYadfa2nHZOHlqcozPGgIjFuqd2B5JtjrPZ2J18heNYD+s\r\nQ7mSRWY/k7waWbTWR81F0EkLnqNlRH4LbOw5xWR7j2NIy3tFa2mslxfEnnVS\r\nZNkTMni2JJqH2UpLoibilhAmZY012qS81KhMzw5t+J169isACyWEIc2VOpqt\r\n4aGMvb6zUKgKPnF91HZlr/tA7AKEJATqTGA=\r\n=+HFq\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"0ab5eaa3ea130a4b79ba5511e4e46e1f99b9e662","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.49b8e7442.0","@material/theme":"15.0.0-canary.49b8e7442.0","@material/feature-targeting":"15.0.0-canary.49b8e7442.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.49b8e7442.0_1675811340663_0.8320922827227379","host":"s3://npm-registry-packages"}},"15.0.0-canary.de38de758.0":{"name":"@material/shape","version":"15.0.0-canary.de38de758.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.de38de758.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e6b0c858f35b68de425223e280dba09d45891987","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.de38de758.0.tgz","fileCount":14,"integrity":"sha512-z7l5x2n4bp3d/+HZsmYBMh30GD8poikIFbU0lS3ZEzuCtAdEqoV1pfrApQsjC3K0eCR7stKOzYuXz6FZqWaMtg==","signatures":[{"sig":"MEYCIQDumojK2mXIT7q+Rh3ZHRuo4HyqVGYoF5jOkvhTa0cJ6AIhAOulDwBrklzindoNZvXJ5DTbthOxWvoOIeRlYrTDVe82","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj5RREACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoHMw//elh5GPUcRZKLNX7SMNEZIpDkdre6vLgTAxfDiL3cOGrwcNHy\r\n6CGg/90Q6px27OPhJ7FAsphjQEh2G9qz991DOym/FA0mCDcPgLclowJrfm+A\r\nXR4fV2TUWcZbpGc1bmImF0HlOGfPJq4/MHSPFGC8EwtiZAxtyF1n3iZb++ws\r\nqShoy9IVyTAA4eOM1eARkadS0zyknZ1mEmbtV94wVEWDyEVCA5Tf1f41dLqM\r\nXVcfghmgRIo6s/J7VHj/e8HztWaAoZ1UEnH2Gv5N8B9FuuKQG25MSoNuGGUM\r\nhQyEW5ELeYMBm2KTlTeLScS9wCatG+62XG+nzED8RTPvQs8dY5f+rxa8c5S3\r\nZZhBr84ae8ShBMaXZ9FRuzF4IFF2Fmu052ijvhJv9vC+lYtCciM7VuRxdt0S\r\nHReeci2n6wV3ffXnC1HS+v6MVAYOPqWm9Bu6m8GaSH0DWn0E3cD0B4dO/5vd\r\nLCB6Oa3E19yW5yli5MzUX3snikOwjBGDKBcLevMJRfjVnLMpQPleGTFzbsQf\r\n88GPeg3adtgMqIaoZowHFxf55ukVQ/BBbYxoIa2LwWbEi9OpH8GK+1oTzOij\r\nh9g2qT1j7O8ITntyAOial/eDZoeMfrbvqcJMEu5EeDLy+J51VynK7RK4dhBQ\r\nQwmj6LZm55CYtzsF3AL3isabFKYK5xLK/oo=\r\n=vYjc\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"72df173af8eee38e00bf9af0ca5a77d5b780763e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.de38de758.0","@material/theme":"15.0.0-canary.de38de758.0","@material/feature-targeting":"15.0.0-canary.de38de758.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.de38de758.0_1675957316615_0.39713229072907175","host":"s3://npm-registry-packages"}},"15.0.0-canary.4d62de70c.0":{"name":"@material/shape","version":"15.0.0-canary.4d62de70c.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.4d62de70c.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"897d6e80d2a1659f32c76a29e327db90c53ba32a","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.4d62de70c.0.tgz","fileCount":14,"integrity":"sha512-DTZS0QIkG4R39INNpV/ZRxeYqGrG98VIQNheKWzDf7E5ZKD9dCD/Nh+nDiaHRwZaFvIAZtRK2dg9fSw6V2rUdw==","signatures":[{"sig":"MEYCIQCIsjRdyw+OUQ0jcraPu5wfMJ1MRdesT9pBT4+VrO6YZQIhAKi/eNPiZO83XEnvGQyuRsTHqxyrUfws7vc3nA1CD53+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj5W18ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqUdg/+NVmkoW8OZvDN6URxeXSlI258GiUIBRcACe1MkbQlpKiKppyG\r\n7OVZu8vZVjMcG6j5TpruoKgxdtJb0pCEJX9sS9UGXPzndh2RffHJeZlwqdhW\r\nGlHkiPqeVSTuTM5k9gnM40xzQUoDopsHS5MElLli7aIyx+iikSm1yQKAA9ZK\r\np/5R0lXpGUxs3aiTTwSe7XdR6arMIRomLLlcYarFZP9uy0qXhyx9gHBI2b8h\r\n/1/bGl8fSYbfetWKZSpPHXSni8H5zFPnRf5iVtJk6j5IaOTVR1GcxxueZXWz\r\nWvyjnQFX7aYd2Jd/IgSL3ovSeLr7v1mMqiefE6MunMhfjJiB2YVt6zrSaMA8\r\nhvTx/w/fKoNrRuzPJMsCDWlAN3Hkw33oIYaSVmvMB2K34BeTHK8jbGqHQdpd\r\nC52M9xXfCMDoIpjomgUGxJdAm6l/+D/1uc9JHBXTYKDzgz9Lh4on5mw7vM8L\r\nfPWbfx0AjrTNY52uwQslTWZhxeyeQdVTCW0QAzgDipjn111pY03ZFVRirpOW\r\n6DFgQ07EwGchEpg2PHCBMpFwOTgwsQU4u5+dqbVkS79i5SWNhKfKZo6y25vb\r\nv/xs6z2RSuFE1EuFKp/60UoqIROZyj9oolWZ7qboK1swXBvdR1QOE2v/8Xp5\r\n8+mUIxxSYWiD759Q+jqkddVljJLhEEqeydI=\r\n=VIC1\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"d2081b5045fc9871ff56b0d31ddacd235e2316d5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.4d62de70c.0","@material/theme":"15.0.0-canary.4d62de70c.0","@material/feature-targeting":"15.0.0-canary.4d62de70c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.4d62de70c.0_1675980156161_0.6228629358945885","host":"s3://npm-registry-packages"}},"15.0.0-canary.6fcd8d418.0":{"name":"@material/shape","version":"15.0.0-canary.6fcd8d418.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.6fcd8d418.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"28e0ce15697adf79547343d67dd9de803752592e","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.6fcd8d418.0.tgz","fileCount":14,"integrity":"sha512-jJX6Y6/7C+223WE7mzsCam6cBUcDFnw5pq1gln/QbKxpZaQW66illGR2jWaiSDDigS+C8NVg0/A12hqrYz6nRQ==","signatures":[{"sig":"MEUCIQDoIZpfRIt7hytisn9XXIfDMrH5szCw6ruYqPaN2rshogIgOPU1tY2Vo59QubAsvmnyfDNdU8Ih/qIIpvIuIn4ZlqA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj6iPIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpw9A//VE7taRRwApweJGYKJ/6aqYSO+bg87RpzyaaC6jf7tzfJpi71\r\njaa2r7rOv3tGvNWrXj70hNJkRiLNjMJfgH3IWefig8EqHcflJWnxpSoPQMFt\r\n9aKum9ctQE5nwaqrC/MRUdw69cHEKiK8GITtrakju6Amagf+tAeRS8eyvXnN\r\nNxIBNFGy071nqVE2NpabA0Szw+/GeCJ9gFy+u3cy4JMnXNvdzMx68C3GkUma\r\nrJJlUGpWp3mdMUqAVWew3ecYGwbClv8r1b5CAsXHwBVt6VyvkO7Edt6mpFT7\r\nqs82DGnF2b8/wzNFo6ZVry8DBs7RcpL5YEqvjEgi++HxRKa3dX0WLFdquHWu\r\n8aFvYwn9/l6Xyjd90Bi9WVmfOMHPKLaqKOVGGZOri90QztA2HfALiDOtZD+c\r\nPfWmDOsMtfzywP00VrDOhkiCJj8wqMcWRu/eJMUxdt9Eoj4/v1txfhZ2+GH2\r\np83zT44A80xQan8MoOZSdxG/BSAzsjfPKwc1xF1Xuh8pfMSgBVhwekQzf6x5\r\nXkAfrUIPD8ka5SaOX5qpzG9owXJ5EgGbmniZ7zcLLH9McP2QKWZAedtaExGb\r\nZ/HcfF631I+xc+EDiFRwQRH9UWdGZ1GGkiyV/vxIjEjagpffUfKRUn+TZqzC\r\nZMJQvg6+Kn50D6bA9njEX3JdDmg93xVkJrA=\r\n=kk9L\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"39b4fd2a38e7ab9611f614a59dd1694de0b94cb9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.6fcd8d418.0","@material/theme":"15.0.0-canary.6fcd8d418.0","@material/feature-targeting":"15.0.0-canary.6fcd8d418.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.6fcd8d418.0_1676288968626_0.12452159087328152","host":"s3://npm-registry-packages"}},"15.0.0-canary.066d9439b.0":{"name":"@material/shape","version":"15.0.0-canary.066d9439b.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.066d9439b.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"45668b3e96f5a2a7208dcf4040ca4a8b1a28314f","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.066d9439b.0.tgz","fileCount":14,"integrity":"sha512-zCkkZP/sRVy7iooQuMLKQ5cKsALqM5meK7ki+zTqaFw40OiRE0mpv9kSb8QsrY2VYXyOTQABRhlI4XxU2ss4wA==","signatures":[{"sig":"MEQCIEAj4lc1KvCNdKRRKFDWbYZgqJNq3Reaw4KpaB13/h2cAiBLn7ewUeXkXddt1NicSVBoSAelN8S4zrCvRCZNnOEnwg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj7TkbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoYZg//QXeqSQRfx0EdClkDEGWJRNp0nOtbAMLNokTzl5Nj3Llwelux\r\nHdHVNlyF7ZIL8FmEWvB1Gz8UUmJee84m5SOFei/fj+TVKzqXyAW/rf45Mhmh\r\nLONXDfkgO35gPRk324vyzW5ysC1tHHMMxbHh8dbuT99k3qLW/JlFZp0ZhYqN\r\ni+XY4cPYeaetSniI49hyEaJxUbV9+9hUQ3fOHidUXTAzimJmUNqzUwsC4kB+\r\nncekSL39ZtDyyNbQWYTZhkMXxIl/hPYcaQ1paIZqP2CjUU8rHkt7pkLDmHvO\r\nmLCsUQY+M2H5KFuHnt0Kx7XzcqhKqm+l1AjSOWcoHk+F1/RM1o60fwBXY8tL\r\naK0YyLx3Cu2WVFZk49VBbuhzd+O4nIiBfc+Wfa33/P2JENlRRwuiNw7J7Y/G\r\nWqxe3ioVvhk9VcfXl8S3/3CbM9PNVxC1i/LuVxFZLA8tyBfKDXO1AH0wSxa9\r\n9dza2FjD/bR+Qt21fFktu2fKhrfNVBn0AIo2UU6Us10xYCx5J9WTCsSIA3fY\r\nuKpgmuKRT8bwFSsShxkkkESgl5PCTO7L10zW85y1H5HfCXhCHTMUyyD1sbQ/\r\ne3vPEjVKEPCJaNAC4vs4caHEAtxoB0+/KLwXL/qW8VCwQBowTx7FJlx4Tks9\r\nfdPpiyX6dIm0Z6jtdyjnysXLTN9Z/bCeUZU=\r\n=AhOR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"cfeee3e63b3e6330deff033d8054adb710498810","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.066d9439b.0","@material/theme":"15.0.0-canary.066d9439b.0","@material/feature-targeting":"15.0.0-canary.066d9439b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.066d9439b.0_1676491035083_0.45723334055929254","host":"s3://npm-registry-packages"}},"15.0.0-canary.7ab32468c.0":{"name":"@material/shape","version":"15.0.0-canary.7ab32468c.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.7ab32468c.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9548c56612e905e4d7f88a7f335382fceacbee03","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.7ab32468c.0.tgz","fileCount":14,"integrity":"sha512-8YzXWU3Z9HlXKQOrxBcm+ga4Usa8NAXKVfCGBO1t41UEXvS8Ak5G4Pymy2O3s6/re7p5r3/8CKZcTnTzwDWQNA==","signatures":[{"sig":"MEQCIARGw2dEoYR4GM8C+mI1hTR0KMhJfOAuu46OMNT4rzkqAiBass1QiK5ZoCVmCG5QEJy8mLpDXiI2d1VYMED+afdbtw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj9Q5+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo5MA/8Cgg29iwN2jvyu9xIAZWKWmDCS4k85y+1sCTtXK0Y3Z+VGTgt\r\nbj+ji4Om/7C/wYHZmCoo6RAxTd/jlQ1prTXB9BHJ3ani9xeP3zv1Gj71AgMk\r\nqboidL+ta2BCNgC3hKwHb3+hSFHZjCKsY70k85xALPU5dZj4GH3jogli/q0Q\r\ngql7xp73kIMT7yWBiHhd/chaBlRsIL2iMSu/kBb5xHjjnC/4Xh9HuAFJmy2L\r\neGaweLl0vMDSSUbxBzDioOT2VGK6J1oRBfruEiM15HC5pjOu1cecxP2faPYU\r\nVExzeQuD2jHJB3uumLtveWcAH6kjPg3nx+EfyxCvf56kwX2mEykgwrTF+042\r\n0TYtIvhWhUWAcCeMxXVdDtQlHZ5VlSGEz6RLYtXd6HgWkyBmu+139qoxOLSI\r\n2vAWsjuvrO5niXTSyRH+LPJfDXySDFHHkymvg4ABkrvSykHynuMaXVHmFmof\r\n66uy7JrjyOeYHE3mkxWH/5cG81Pu6fijaQ5etAEdZYc2JSkzcnZlXLapSim8\r\nBXq37VF86q4OeVvDkCqdT8JfQj5skEA2h+YnA3jEVEiG4sUPgEHbE+zZekFD\r\nGIZ1es4Irkdou0RzBx5fF8VU9SUnZ1BSS9qG1EmAuCP8opSg35wlm3XNx8mL\r\nkczjrWHCbVUE4YBiz9Nl51I52thPo3YqaSY=\r\n=i4Rn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"08b12f363223d69b2eae5d2719e9ff0da773381a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.7ab32468c.0","@material/theme":"15.0.0-canary.7ab32468c.0","@material/feature-targeting":"15.0.0-canary.7ab32468c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.7ab32468c.0_1677004413812_0.07959529271537025","host":"s3://npm-registry-packages"}},"15.0.0-canary.fa27ba61d.0":{"name":"@material/shape","version":"15.0.0-canary.fa27ba61d.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.fa27ba61d.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0906b493b6516118c7b59ef9a8738fd3f326d098","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.fa27ba61d.0.tgz","fileCount":14,"integrity":"sha512-KX+IItyWTlHPS/BMJZiFpPANstpBBpoSFKJQg6ymjwLPci1mL7rn2mfLdqh5Z3OzNSCSVuoGRqJ09u2ywWDV1w==","signatures":[{"sig":"MEQCIFBoaTdyU4ERfbgC7M1zE2rUJZRNAlhRi7/4XmawdSZ1AiAr1hJxeEquvuLs4jW039jOdlcqP5FspPsxenLpiYBpnA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj/NfzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqUHg//cN9ZbzcugpKkdTOIvIE5aeh5EOKl5YTebuoiZqhMtaQkDf0H\r\nR/nKzKUaDumz8cYWh+cvZ+tTLOIUhN3m1IghPx0pHjXRvqyod+/Gtov5dtzT\r\nBpdu02tWbpkhogSvJIsgrqPkWqgQ33fNtsCT1Pf1/FU5m0/dzP6A0CY8JQ+X\r\n6tIXHGlBxRxe34LzjyKTjvVq72n2i3BCO2JUnSPH78SQWKPcqjA2gmxIBK8j\r\n5EH5OiGxUoHGW3u6yMccyqujD2zs6e9cgYnVmVMWS6A9pTJAjzcZvI0FqXd9\r\nxbiTK3/a5KSQGY3ONne2UZho8XUBGNEZJ31uMs99SHdhqCTZ27cgMzBwIe4k\r\nVoohN2Wp+IzHReZUugK2xWZtEYmo81rmhfQVUEKbzMbXQoixbVh5IdtwUycU\r\nAGJX6xuocuE0GR6EBMCL4DBtsFgfnCeqZnYAcu2bjnfAmnrS3FfL6Y8d4uCO\r\nDD6HbT1lC88v4jc+sDy8efJybLjM1K6nSqhnWuKQefRVoFvMW0GzPSB0Uh56\r\nk7fyQsXAfj3rlC/wor+DEfS0L7dt+sKxUCArdr0+vo0uVs7EkkApUxbu9GHV\r\nBymPx5uxKLwqx+Gqsqt/ONhImRYBnBEKFp6ieBXvCQARzOP3PAgpnyBA5mRU\r\n2feviLEMVbK2kA4WS/rEy5WKen9kbiYv1wc=\r\n=A37A\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"ed40c112543fe3ecfc009ace11a6f0c3f82fa26a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.fa27ba61d.0","@material/theme":"15.0.0-canary.fa27ba61d.0","@material/feature-targeting":"15.0.0-canary.fa27ba61d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.fa27ba61d.0_1677514738940_0.04421780838864353","host":"s3://npm-registry-packages"}},"15.0.0-canary.311ab4d4a.0":{"name":"@material/shape","version":"15.0.0-canary.311ab4d4a.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.311ab4d4a.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"70beaba8c5d16ed5d10cda8d1d6ecc2b730c9433","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.311ab4d4a.0.tgz","fileCount":15,"integrity":"sha512-UqtXV4KEpWxBwcvokw4Hq4abJ4VQHqSPeOuja7PfC3pCN9cdb1ZDfWmdm0mn5J+SQqNKVwRmrcan3d1BNJR2zg==","signatures":[{"sig":"MEUCIQDj9PKT3Q2Oj5gmbcSkpoTWNW9Zlct2CTFLDaEBk2GhHQIgORyRXAyz/5V+1Py+4BNpYvrkCNscVWIlsnz9k4CdFdY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj/N0UACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpLKRAAi15iXbHnNi0gSgll0/lcvYwWmH0pQKeMby4jtmcYKVicf9UR\r\np6Ywq+mM+ySJQR1jBmqn2uRLaHfu4pFc/3HU0C0mYU1QqPbybdnicpir+uDY\r\n7wct//VzW8qZ8smXx8TtTp4iVgh3oGkydlEKHc3F8Zapt76/o3cyjUAasUnD\r\n4ic/tOS6VCRY16oHaN2+EtKIKFETC0fglYmJVbbipMgXNV0e623CJdHFiU87\r\n66QjC7VCyMTxWJuw48i4S2gzggdw0G498FxpForV0yvxEyFujPPRzsiDrajM\r\nCAAM9nba7DQ1AtIhe5dSEA6jp/hrW1266VcCe7PoPWJ7vEeVmcYxjCt4K+lf\r\nliZE9aRGidzQe2SzhnH+BBhI8rpY9jPqwsAqbFWL4SnOnleI4rHUr1jW4AIG\r\nZGSr39oc3W1vwvWP+7unGyqIphV/Nf93ixw66UGcMW+6M7vsY5c/GCqnX5qT\r\nzyl28V7ww6PoD+AhWdvBjZmoU0HwA9zkgxNl0BPxRJK4vHNTVQh69KT6CAX+\r\nOlO9ApRQ8psAfJ3b3Bmt90BrflJaNQvqzJbvJMHV22/2+Tvxn/gZjXZETKln\r\nx1jh4W3kNnpZh2VhWGsU7wb83VH5GesRKe6P2d/MbBa0pCFgRTBTo2L/IwnQ\r\nOAoA0+i9ayx+pkHipDPGHY+DuvQDnTzsNdw=\r\n=ftP1\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"07f8d2f7bb4b2f30e60a6bd8739befd9d17bfbfc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.311ab4d4a.0","@material/theme":"15.0.0-canary.311ab4d4a.0","@material/feature-targeting":"15.0.0-canary.311ab4d4a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.311ab4d4a.0_1677516052569_0.3146187095407702","host":"s3://npm-registry-packages"}},"15.0.0-canary.901c83e77.0":{"name":"@material/shape","version":"15.0.0-canary.901c83e77.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.901c83e77.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c6a923487ecfcac2e72fcd4dfef268d535fe21ef","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.901c83e77.0.tgz","fileCount":15,"integrity":"sha512-5QdhMp1ZM6zSpsUglzLT05za8vyXwBaTH7X5HEaKGBlCHj5qF3zOHtuRu7kOdd4fZimo5A5k/La5OAO4ptWjNg==","signatures":[{"sig":"MEUCIQCKwtkOeobX1v9cIeZ/XxwPB+jBGgD21gr41cXCOS4eGAIgBaRMCtYc9gainrrqyrhDrsGoCB6uApjlHI+xBF+37T0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj/PDyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp/6g//ZdMxi4uH8XekCmbWItBAdBFh/L75zifi81IoOgUECZtMPIq3\r\n2tIgyMVPchGvcuzMaueBtTTqOFwlXRTNHFdFwCvCaBkzBvkNEa9P9nbUtPvM\r\nGndvZ+k0mU55uf6U+2DR3w7HPORIqID2R2YkzpNtzMPOjCbE2/FQS0RpWIsS\r\nNDr+eVS1TDgjG2QCQjRUUOv3bfF4c4LyIk0nzL2+tuKHRzlBTRW7xSWZviWa\r\nFxxxIjyp30JOk1sVFqFDlcy5OGR8pcT/YsgeOEDqzSig2BVZ0pAMUFJrH6TA\r\nXnIGdyMpfHYSF+umPl1gwhsbzqHSteItVNzp7eXgY7Tv267E8ESERY8QmvoL\r\nSPrRTdFy66p85aUz0P/JLO48ZDij8ruYCb2HYKlCMb0z4Z84MchHe4Ipw7b7\r\nKLNqy35T9Z3l9RdMcVjrEpkgirfMNhDwMy4TRo7g0NC0P19BvpUgsgAYygjK\r\n6Eii3XGyBCxQFqn6+kmK6Tv7lJYNUMlRGoV3oJbGWiYRwWGdzGL0ZPnZDq0w\r\nNlCOvWhYGiimFL28URVY+V08xbKUWjEu3ACKLW6aIOD+HuyyRJnkYswJPxVr\r\nss2Qg/+ZaiQbBDovRc7sp5ShnO/PWVDbDO+B9R78gYn1/O2MqPSYbO4chfz2\r\nahFt7u/jw8R9c7H4ECzVt5CutPjgz+kn98w=\r\n=ScZT\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"86c988d321eecbf29bbb6cc63f7dfa18cda02d4f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.901c83e77.0","@material/theme":"15.0.0-canary.901c83e77.0","@material/feature-targeting":"15.0.0-canary.901c83e77.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.901c83e77.0_1677521138519_0.2505423253043264","host":"s3://npm-registry-packages"}},"15.0.0-canary.5cb8e2174.0":{"name":"@material/shape","version":"15.0.0-canary.5cb8e2174.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.5cb8e2174.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"623ea733160ccad696d93b1260e63e199b37c4aa","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.5cb8e2174.0.tgz","fileCount":15,"integrity":"sha512-Chd1ssZ2b70//h/Z4O+ZY7uecsItWn35cezAqFuGQpLkb3mPfdI5hXkjJGyGGbmqKarH20F8tgyo/ftVXnNpqw==","signatures":[{"sig":"MEUCIDJPRGFWQv3PeTHAzsl3eQQcOCmV4JD5R/kDffxwhWvrAiEAhoU7tckOXn/ti+arBUnr8IbB94OE52voynjVofdbOb8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj/37FACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqT9RAAoNQPjVIhORRz7qyBLT82ljzTvUXNcGg2lwetfPpN+2bK/L/q\r\nuhDfrWxlp/9Ca7YUmXp5dA+HP+G3t8/vIKdQtZqkz3XuIueGvYUToKIGUbSO\r\nMNepUg4Q4ES3W8OA5NFGy1vqNAQnGGljMyjkYVaIzrUNYgOqktGNOqkDUr+I\r\n56rEiFD7hsCkDuxSx7J0Od8JagMt0rmLXazOhuaaA/j0lYvn4pfmt7V7LnaE\r\nRx2kJSG/fntdGb1/m1GSFruMl7mb112c16QRt9VZve/nBPl7WZ0M+trAfNLU\r\nHbO7adYH2vwmHE97pGbCcUTu0weUYdv12zNO3ZHa73HlTp7InNh9mXLnPXTE\r\nas4RGeXZWDj/quogCOfeltt3LQz6h21/3vp2rAI/ma2ucwbeqMUK9HikCwaH\r\n5Pups5PGspS5vZfVJ/dOmV577QbTa4nbBsBag1c2fPU7pG1n/j8axInc/LoO\r\n7avP7OK4tSz90OJICJpXCbkJHyCVaULLwGe5w1Y5BY7Q5pGH5JVFjZ8j7jko\r\nm3RjautNxyeKhkEQq+jLR1nzMTj1SI0+uztYwdpwl0Y3H+ggb7voNBvjmCmV\r\nujGvOMRp69b16TcyYZTO2vyaKs/ya5o6pCmV+RwqYrH6YIs6Rim6rRCgvMFA\r\nfh/Q7EmjsDBkPXZDv876eds/ub19sK77duU=\r\n=rLaE\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"d57edaa5a3a3079c48ef7c804f0a642bbb682478","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.5cb8e2174.0","@material/theme":"15.0.0-canary.5cb8e2174.0","@material/feature-targeting":"15.0.0-canary.5cb8e2174.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.5cb8e2174.0_1677688517196_0.9822552353438974","host":"s3://npm-registry-packages"}},"15.0.0-canary.f32339937.0":{"name":"@material/shape","version":"15.0.0-canary.f32339937.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.f32339937.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0d9b7b5b0175cc8e490e7e4413506047df5b1d3f","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.f32339937.0.tgz","fileCount":15,"integrity":"sha512-DsCqDG2bVDyFw5OA3za2sIrIns8XAxhAGN5wpmztSNe29vphalEZO5ySyGlTAINFeYU3EPTOekNufuAFNv7wYg==","signatures":[{"sig":"MEYCIQDfa+VwFF4/Gh+b0ChpYpLz9AMiL71mJKZ0Xl3Aat3ZDQIhAIKDeDPgH/emBf72/b5PMgOyqS7qYILb3KiEta/isRa/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkBgN7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr8ww/8DMMPIwB1THTTPbKCOc7UI6dKbGBlAOUFd9aIqgc5Kg/DUPFm\r\n94DHWNC5QmeLDyihDKDmDVyCJsYQSQFWJi3Ddz2zAV8o4RweV9oiTyYK0S3/\r\n3T9gdQvRM5XKETd2iYLRYLC6otwWQ3qmmJfXUm+92Ej7E6tWfji0k1H5up1G\r\nF3gXRzMHzT9O+Sd+u5FAN1R07B6Nl0GhV8+Tzh4hGs6f6N89V2V1RZMYQgIr\r\nnbcybB8ALeoxGydc0s1eOhMfa9h+8IzhGYYyuSVLeLo+KrJNuAZt8p6NFq55\r\nYMoUXGwiKKA5DGinYIfgWHtBGE2WKT31ycmZXxzqqvHhCavSWyHl5nckhSGI\r\n96abXMZo6MIcZP6wTbPNhCfp2LgwxPNi/2n++aumhiqd1RSBjCzn+5aVL1qj\r\n1nMcuxvvb0+7pmHdv02hywQlx+vru7DhaRgY36Jaycgp1VGQxq69uNUltqdT\r\npiGehAppFO1n29aIegdIy9cevCvgvDXcZFM+ozGOlr44aPCPi8lpCv8M424w\r\n/xrFYxWiuc7NGKzHljvVWt5HXIPCd/wea4rO3cam6VmtoC7XOs2hmbX1OeI6\r\n/Z0Kw8utgsNIdzGmhJYSXLtCGJf5RDDyHf5WNVqswBYuhUinuZ9/EHl4ZRCk\r\nwEuNX5qiq1FIgAgMRBgJ+kwVZ2BtTR271TA=\r\n=eCYn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"b6c5103b89138f008c28f70d93e0d3faed285061","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.f32339937.0","@material/theme":"15.0.0-canary.f32339937.0","@material/feature-targeting":"15.0.0-canary.f32339937.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.f32339937.0_1678115707084_0.6363565885742897","host":"s3://npm-registry-packages"}},"15.0.0-canary.7644d63d5.0":{"name":"@material/shape","version":"15.0.0-canary.7644d63d5.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.7644d63d5.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f648002f121067a35dd8a93afd8b19da9db86051","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.7644d63d5.0.tgz","fileCount":15,"integrity":"sha512-6lSbavHi3qUS0wK7dAWIPBUyGWIQc3tkj3G0wjYUkbp7TmgyqMIfROHgVAmYE5xQgkq5/6kb2fbEqoXkx8KuhA==","signatures":[{"sig":"MEUCIB+kkN4PzsyE6zaDvKQ1yfa9W9D4PXPTUKYTcKKj9LXdAiEA8zPAZEG01bkQH+Sz7716M5dDy1ScSVHWzq5BLqTpi/o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkBmi1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrxEA//f9X4G28HQPzctaQ8z/47SFoIesNj4zsIQnbfd0DhGBxZjR8S\r\nGlUOSTeFZdng9boOVP70yc2Pq0ZGDNFg6JkEsmqlSbjcDrQd3SXjYs6o2iFe\r\nuz1cYKw6KlnNShLQdAFf4jNYWLVxslSK11uCYLuXGYELWNtcodKCGQYiwCvy\r\ndgmIb5pq+QFyU0QtflIDRGEcWE0gXGsa9uB0smCBpd3TiIk/VG7cAi+ryxXq\r\nWfimuvLzy+0itRNrGEOOZ/JGzbYxWL40FzaYi42HvFAuJcz6hkxOlxU0Fa/q\r\nQX6ORv37TwP2pnN4pQ0spAo+BedmO9gFkr+RWWLWtbPmqARoNB12yPOLkJI3\r\nY4O/u1SM3CP9VkjHwz9OGqN0RSRBXzY0IYQdAPV0+foxwrThdRNKYLB2c1hF\r\nH8/33rj29Ac842Cf4yxR6wh3URnN+phIMwAiASIMWd21EO/K3oJ9PZ8jjNfX\r\nB3VB12MPzz/BXdnvGiRyOtHI29yhIT2wYRy0lOIpRhxP3I0GhvI/+AjzyQY+\r\n8iGq6VU4rnszubjoeJoA7FFaKUyDXzd5aVIAd2Rygb/zIDQxB0UZpqfkWPoU\r\n1Nxs9JTpqXG12pNYzk7p26sBLdMuicdR4cnjdpJEkoC9a1Mg1IayS52Laz3p\r\nU6aMuNRV9XmkAYw/MaDG/QmgNSotIyzCWvM=\r\n=0w+V\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"a0332d9af18b36becfa025c452efffd11be59943","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.7644d63d5.0","@material/theme":"15.0.0-canary.7644d63d5.0","@material/feature-targeting":"15.0.0-canary.7644d63d5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.7644d63d5.0_1678141621740_0.8666618985782266","host":"s3://npm-registry-packages"}},"15.0.0-canary.d96330c08.0":{"name":"@material/shape","version":"15.0.0-canary.d96330c08.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.d96330c08.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e9aacdf51e4bb74e5672604307c917f344bd15e9","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.d96330c08.0.tgz","fileCount":15,"integrity":"sha512-yft66RzKvgrsFc7idzKkRF2rWDED6qhdwXQP3WASsyA+elPZtzSw82UG17fkIpaZlHuK8JA3FQD7GRA72FkMOQ==","signatures":[{"sig":"MEUCIQCvbFP1qhUr7dLaBgLNb0zL3N74qnJeqj8fxS87sL948wIgLJ4cbPyJ3Q5Bjxh/kf6fhP7nquUPPDU15YHoxZSDWkU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCHRgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmorJg//cIyKYm414BvU/vyN+doYfPbntJkD1EaxhpDg4CazGPxhtg5t\r\n+KOJwVf9bNXATn31KOs7Hp7Y3Z24QwoXayXj1ECPa+z3zVlx1nOFvlex5sLN\r\n7Uu7jqk8ZwJsl55oxzS8IOiUNuy3JBeo3DfcVQnrvPSWLaGo/sZ1H08plhJV\r\nY0pL0ndSA4oFzmcQH9HQ6lcKLa3FGJ+oS8J4VbftEkDz0HQgCOyf//mnpTZ5\r\n5P6VMS+qMQegoEVz/Cg3e5HRaseM2ChFJsPqBWsAcIjMpM8cWXEOIeawRrgl\r\nGpDaJ3+GH2qmJo2NSCUch/WAY+KgOrqrHyINdfc8IgW70ZE9B5a321nifHXS\r\n5OfK7YFso+0MiKCwc8OB9mgCwVk6oHq94km4J3+pcD3RQb8tUWGCLF3mDAjy\r\nUJrOjp3inM+5ttf0o9IKYQFOtZN1t6gsb545IASl3+j2t57q8c50LSVHoFuU\r\nER9iBrK1/4rbwniX6c6AFmoK16RWt3FfMg06ue5fJsCDHnSpjT4KlVRoTFhB\r\nUOsFsahNHq6ETkEnxIDwbovf27T4GQMN+ZhpPhU1D2I+uU/IU+UfNCGXmPmw\r\n5kSQz6+Nl5Fwc1fTicLeLEvCH7gCqGr/lHgXH0FzVIkXwX2Wz9tl4IiymOOL\r\nfLdR3gdCN/L7Yb6dP/oWbcKF38DQcYxP53k=\r\n=Hso/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"6a6d53aa84a0c0a10bb15c3cfb596881140bddb2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.d96330c08.0","@material/theme":"15.0.0-canary.d96330c08.0","@material/feature-targeting":"15.0.0-canary.d96330c08.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.d96330c08.0_1678275680304_0.5724644450238368","host":"s3://npm-registry-packages"}},"15.0.0-canary.c99cae77c.0":{"name":"@material/shape","version":"15.0.0-canary.c99cae77c.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.c99cae77c.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b202945c9879d961ec54c849d18b063f3b20feec","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.c99cae77c.0.tgz","fileCount":15,"integrity":"sha512-ogSV33ga1vlsp1Kok3ErQmF64s7ZgWYBchT8/DttfLkl8kAsQocuvsmKxsUuQWit/o0EArkA7/EMEc9cbi6Emg==","signatures":[{"sig":"MEUCIGdEskRAekYQMym6De8wSn1itByV9AogiRIn8zL6vVV5AiEA9YifggRoqsKfFbKwRf/AOmRakN5xe3Xa6/WGhp8Os0w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCR1iACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmplpRAAktpOdTXvISF8b2ZsR7X+yuuTlVJzMGE5jWJ12xhAYFeTjXOm\r\nOiwTb7CF1UFgGdrBHQlJx9bZFoaNBxFnYtiEd7pHs544eUFgv26NndS9axke\r\n3QXk13HD/nMZ5KJb5efY4Ckq+DdXiRAF5KxA0g5pPr396Kjao26RC3rWVb/P\r\n0a7ceimZ/Tw1gTyVDfRgYxktFNtpvD/c4f4NADO/xkevXew0YmcC22g8iBb1\r\neKu0m5gLffoMLo7N8QCNLVRogst0IKwIh7IMMusw3hxfMY+GBks8+Gof5WUi\r\nFiPbIrgUS+zUYe+/5d5DH+Iy4HszifyLGNFtt1SxfYcyfTvOCw2ubfa3w7p/\r\n1+LNnp7PuW7IxT4c5mUYONrhGhrCGVRscdfoj2ns9g9daF45fJEUN2pvkYA2\r\njX1xZCcEZRysz7Rp6WkGCEmosPADcQWZg3TKxkWo1BjDSzHlg764GVoV0DMV\r\nZ1bAuXOW5ZauwErwz+/v9VtHrZyGPIjw3lbL5E15fp0B2JNK3EJ0qkTBUjWg\r\n7M3t6v3cR24nhkH3Ecfr0YPj3c02UwaRQfVGn/KSqFaDxIXr7Qu0DrN+fSxp\r\nMWMvaYVv3ih031186ylSyj91IG8JvOnsrwOondTtTQsI9aXNX7EsD0nvrQ+b\r\nQuMWbIcZ/A+vSnV6gwPUvUCL4fAUaYyo9qw=\r\n=bX7R\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"5b6a7c1a1c133381bad395ae040de00c64b62e42","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.c99cae77c.0","@material/theme":"15.0.0-canary.c99cae77c.0","@material/feature-targeting":"15.0.0-canary.c99cae77c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.c99cae77c.0_1678318945933_0.07214735650208493","host":"s3://npm-registry-packages"}},"15.0.0-canary.6023b1cd3.0":{"name":"@material/shape","version":"15.0.0-canary.6023b1cd3.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.6023b1cd3.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0d80cc2ad5c2ae86d7246f5b37be0d10b1c5b01f","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.6023b1cd3.0.tgz","fileCount":15,"integrity":"sha512-gOZnAVoMqJx+0dT/3afWEOYzJPlWSq+szKm6RigFCzhQAzlJ37S8+sXiaQIgAutrzkg7ZPrG9NC3q+ygGmdEUw==","signatures":[{"sig":"MEQCIBBF26qWUAGoAYb8WUPZ4GPpe7HhcbotoS69IHnCZobeAiBbelQXuEQGVHf5heNejcF72+x8Os0DxwHhiavVkp5HBA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCex2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpIiQ//ScPjrmUPLUUPTdkUlzjN5sPhGCBOXBMixOobnHasAw9Mz7NP\r\n+Eh9ojICNwQwqi70Umx2WLd+m+MyiXHTLgeQA/VP2fO73rKjM2IU0BQBq2yS\r\ntIg9SCBKa4iQPMD12EV2ihwDnFgDiAyoU6twLduZJMIxaALTGro0dZX5Yjiu\r\n4kNVempl08P9g1z7Umm1VQbcNOOTT3d8qzh2R7MrwZu1im1pQidm9J1fGNt8\r\nPkRcaVEpjhGIglrJx39oolv+z1NVK/zVzlE9qQfbZPacTINI4GEWnGIikxT5\r\no9w4aHJ2Okhk6obBE/HCHtYDXTuXbM7RoCQv0eJXpeQKjcyc/k7vD/M6/MWd\r\nOmwrIuAFEYezw8MhhDHDR2GbR7c12RlDI9OshhuOfSvKoyG8XNnDc6pjpyW7\r\nyigEHR0raZ7mjUb+N83hwSJOuiZw5az0S+J48fV0obCsj3nECZUq2IxwhPbH\r\nF97qF8dbsVokbwCjmRObwr+PTcV5d/Tlkf1+Xh1Z2Pg9qt+0DVRsOI9Z8zcm\r\ng05evxbh/mE1f0tPHBiY+ODTpEpgK5AeXhUNs7GLY6axnF3lu30DlKk3lXQE\r\nBSa9AMnF43QWxjNaDARAf3MpRfwqvjlxJI3hd84PCEz6TRADqdgtliBXy/cC\r\n41unv5JgQrydfHVLf8MJJRmbr64ViMuwPVg=\r\n=9zJZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"4d11f175faeacd8e5fe534611afbad84efceae77","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.6023b1cd3.0","@material/theme":"15.0.0-canary.6023b1cd3.0","@material/feature-targeting":"15.0.0-canary.6023b1cd3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.6023b1cd3.0_1678371958269_0.7612689662672198","host":"s3://npm-registry-packages"}},"15.0.0-canary.274610c77.0":{"name":"@material/shape","version":"15.0.0-canary.274610c77.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.274610c77.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"501415369a2b4cddb0d30c3b17b9a1f99bafbee7","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.274610c77.0.tgz","fileCount":15,"integrity":"sha512-pdYD9S2zRktecEtffWG+Kd6OfsGHLMUQrU39vEF/r+u3Urb4rG9WoJ/eghDMrD7f+wdKryz0pe8vl0VX05tOPQ==","signatures":[{"sig":"MEUCIQDfV0WDdElF7EkRzNhvtgH9Rc3I7//kQUCtY422jRkmtgIge9BSaBCoNj4jGJtcHsVnBoU9keu9cIVebIC5U7m7B+4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCfQAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq/Fw/9E6v8j9tichL2itMaErPJxSE8MEWFL5T+PrWPWmABWFSQfPrQ\r\nfjkv8Ui9IYPRx2be94VY5MXL74Seo28r5vVJSxN9pj36/M3mnHLcoqSY2wkK\r\npm3dedKotUETGp1ScJ9NieZ/6dY+yaXi+/pmCQHgdj8JknievQV2dAJZxTnJ\r\nCVpE+827IH1a1+1X1R8HkrmMHEv5mfVrcieOgsv0P19XBIAwALymB5ujYl0k\r\nr2pC7/vROJ0bITG6jUpFs5fj2PQEdgCMBvwfy+uezZfdhuelig4FnGscdH7u\r\nBeFubSmAHszGUMOw9x03Dqin1GmbHUeaKFMxzD88dsiAjEB+gASdtstDIIJz\r\nh3lt9Mr0UjfkJYJsWW++PBVQu5k383NJwoXS4o01wSkKq0vz5RJukJ6VyUlR\r\nZFexBBaLldqPJjcvxVANR1xk1w4lAfdcOxBveIT6dcVBMBztM/FpygB+vNgb\r\n+xfDStDDFABRqqCptn6DZCIRtG5noj9V8UoKl3wV1cIxVqjJFfiQ5gy+1LAK\r\nwc/ZoqlumciMq+FmqwEuZnsvCRsNpODw05dOutihcJI+fCTsYzIay5gWqVWq\r\ndBWzLA2qVM53SRFpa01l6VtM/temAeI0601amM5LZguUivBDXTQiObs7btz5\r\nq+2wRuK5/89+McmFqwZMYbsjIWJ+Xt6kQ54=\r\n=Ip02\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"7a2b02c682ee73deba431503de1a6f1fef211c10","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.274610c77.0","@material/theme":"15.0.0-canary.274610c77.0","@material/feature-targeting":"15.0.0-canary.274610c77.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.274610c77.0_1678373888001_0.61386858188812","host":"s3://npm-registry-packages"}},"15.0.0-canary.a274583b9.0":{"name":"@material/shape","version":"15.0.0-canary.a274583b9.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.a274583b9.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"abd502c99612ffd0f1e5cf979e88aab267c5b291","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.a274583b9.0.tgz","fileCount":15,"integrity":"sha512-yFkmePPBylIR7doW6AhVFWwverLSZk513299Iu8fBcnjU2HgAWCHF60vdExKfAO3caWGHQhP1yxiNOhYJU/RMw==","signatures":[{"sig":"MEUCIQDGIOaKtJjUUFLM6COyciEBqbnjVFDBSoMDYUbgefMGSwIgJG4hh49OtnH/3kWJC6SKNazbo/zIw3Rl6BA8wlMNG58=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCjjsACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpurxAAlPNly4yMfm7nxDGBI80Il1muE5TEx2p4xGVMNlF1ffd2TS4v\r\n5QYRiVIiyyuFS/X0eTpJLwJ8G5k+jpfqNWscUOA68eAs/wd+RfC5eDWcSfmh\r\nf+K6ApC2/cEpakTUB6iBQ3BLr/tW3gcmuBHxgKOe5sl9exDgSo3eaJ6txedt\r\nJAyCFR9HYjGIM+5oiBNNDJuWV7Z8QQxgbquANLgvCaCtR4noOo9dlv/4A8TS\r\n1P2hYz6rny6iLcI8+ozpdoXAfujq1hCV0zpUi3m/XOtUV+GECx/xcBsmrhpo\r\ntIGADBcPADC6Zizq65gk4xFJtNXesoB31K1ptfdLRY9gXeq9NjmDN1oQMhPq\r\n7X6+kDd0UMrPHSubFZroVT3NWDLoJJPPlVCQQ9LbvrQU7YS+rGDycWGp9LTV\r\nyvZzvZ7Kmx6szERtOCbWvmY2tcAFTzrb1wuRXQJ4iKFm1s0FHwC9WUoVeQUw\r\nj5AnjkD9o1+y1AU/4pxYx1y5QJiaRzjTkYPs2SP82o+D2aO0gqi0xV9f1YVi\r\njBfTgOE/NHJAkEPurdjRWWzETq/Cpp/i99gej1p3HVOChTQaMSt1oJEGn6Su\r\nBku//NCp+0s1bvG88vgMEXZjPzbyqO4kBI4V9B5FTUywPnLX+2pOl/Sd118W\r\n2MActK2jpdPEqOZ9rroEv6sxSNWc3P0YTEI=\r\n=J52w\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"7a7c8184214014c45d0ba8b4723714d1fe91f266","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.a274583b9.0","@material/theme":"15.0.0-canary.a274583b9.0","@material/feature-targeting":"15.0.0-canary.a274583b9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.a274583b9.0_1678391532338_0.05592199148585508","host":"s3://npm-registry-packages"}},"15.0.0-canary.da22ca960.0":{"name":"@material/shape","version":"15.0.0-canary.da22ca960.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.da22ca960.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"df05440dff5ce167a8e70404f7362dafd909d247","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.da22ca960.0.tgz","fileCount":15,"integrity":"sha512-rL2JElT7F7xCr8jfaeRwJX908CtDJMgV8fLdy4SNpiYBOmArILo/qfLGmUrGV/Is4IY/WHf2/eS/oRRY4/HPYw==","signatures":[{"sig":"MEYCIQCRdiw4sEdNH7a6EvVrm+Dn62g+CEa4fOwC4RWMgkDG/QIhALG5PKoMnJCYz2y8bcq1O42fdXR6zLiS7G466Qv55sk6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCj7lACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmowFg/8DviuWmo+EirSuan3kbEzWxA58ScbIn1MFWpim15zFNLm6hCW\r\nPBrRWpxMKNNwdsdvRBbGLYIDqxv9hX7Z9cUFeSoly6yvikuwjt6TqCc3gSFp\r\n6ipg1lj9uvxNynDAYIPoZ+an15X4Qc7UZydLmtr/c8LkMM77YFxFstzyirpJ\r\n9xxd2wX/DilFVwYHsxaivpy7mLSDu+M9p3PP1WpzZrfxAtsuE7wVJAB2lBD9\r\nagHZOmSKKJOjYARcoSThAjnMy2ztJlFWfQDv4UgpHgl8DqJtBBfLL5U0CB0p\r\n2NSSUYttBV24N+LVRpgBy1KStYQqtZ2WUqgmc4cB7teOpB7EFK64RZwcejDj\r\n1UvRZndvEslV77rbSK7ELqH20tm0QmN+T86Lc225GL4yDTKG3hqN6/7YqIqi\r\nSPQmdTaQlOdIFfKz10TNLZEGPFhQv70wVxWON36ODTlUQ1XDOZYvKrlnNRw9\r\nGk+mZrijgwZmKdUN1VfyA/YDAYfxO11+7f0dz40Q1woar9k6RlOPMXnwpb1S\r\nuezpWYDL6AWpg0RIARxuo3iYzxpbL4gxuZjnghqIK28Ajfhi0TSRIZDjy86g\r\n0U9Q9wSLJf6WPTCwmwSNF0k3gSD2SFCvECzbezgBv8TNabuEgdIRuuaRedEH\r\ntyxiXNnopjqhHr8AjV9gNzeWprAGgT8nJNA=\r\n=k35s\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"1b58f37865efc4ba8ba06e1190cef502dee9f902","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.da22ca960.0","@material/theme":"15.0.0-canary.da22ca960.0","@material/feature-targeting":"15.0.0-canary.da22ca960.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.da22ca960.0_1678393061593_0.08712184462033057","host":"s3://npm-registry-packages"}},"15.0.0-canary.304a94e8b.0":{"name":"@material/shape","version":"15.0.0-canary.304a94e8b.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.304a94e8b.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c3c6f5773b89d11a2873851ea1a38b9d9ae729b5","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.304a94e8b.0.tgz","fileCount":15,"integrity":"sha512-QmNVx719unbE/Khp64/CwLKPjBrYJtnEewyHSXaLETecXDOMjAmTnRhiL2sqq77VEI8Dhry9tZ7xLRZ70EDe6w==","signatures":[{"sig":"MEYCIQCVjeH1ATt02E+WeTDf638A9s8Ps5r5xofHHNH8MBhzDwIhAP9mbVWr879SjhXpGIy4H6fD086AyDtB7hPG7ipr2TIK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCkUxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqOqQ/+KGNlciqhQt1q+z/yJpcQSYiIpPAnLZLt4gYN2xnwnATd0JKG\r\n3RpZM1UDenn0+p2U6A6Xy6gNZ1R9u1X99SP2EL4BPWAOfwyer5JlnhBlOHFq\r\ntUmSMMr8/Idzm1NmssmsfwQH8Taqnld9a+Q3ZM3HMxmeZmWhgd0XF67grDSX\r\nP2oxtkbeT5FY0A+citEhsxhVXtS4eg3TAv7UOpCOM9/7metj1VgXlilRf0it\r\nz9E9wNUF/6Tg+HG7JLu6/mSNJ/YQxyMZn7kklnFeUFgMs3Wabjvh8LyAD1iS\r\nMdEXVNut5PGkQmOriSb0JO2UrAwXDOqm34Zm8v01R5gf9N9osqxlGhuGuqAO\r\nEFPYWbyYCL6VU9KEuj34qboso2OWYX2mHbU2AHzOmpBl8eIgI9o3tZPJmksV\r\n2OM5GxH8PWJT25MOhM5OZiOO67L0x7wa8KASgtTe4sEYMeN9QGB1WOEClkvi\r\nBkHMgedAVOzgs8h4RLgVpFu3L3Qx0KEEGYzHXMAnIpYDO/J6BKFETI9M/C9Y\r\n0j/b+gbZBxq6zMqK5eELrur2SmWRgdHxWmVAAKEYYQkS5x6v2rx8QLGII3hP\r\nZAvpXoxqEQ7Ts1ftC+GucFOh+iJFzV2lArFKPG8SR25FjY+XSlYecxpmxd1N\r\nLHkcLRTogcKgXLzbT8BnaBQZyaBg/5x4iC4=\r\n=oDXn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"e7550e10d6a01c606a6dd78c58c4ee6e44c3f062","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.304a94e8b.0","@material/theme":"15.0.0-canary.304a94e8b.0","@material/feature-targeting":"15.0.0-canary.304a94e8b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.304a94e8b.0_1678394673168_0.36841339076893687","host":"s3://npm-registry-packages"}},"15.0.0-canary.6c265915c.0":{"name":"@material/shape","version":"15.0.0-canary.6c265915c.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.6c265915c.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"607f56b77a5f09be898b82d1a42354aa78788f2a","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.6c265915c.0.tgz","fileCount":15,"integrity":"sha512-ysl0j9uqwzYLPMiV9KfH7C0EmkxQfx4MUxzrTjbpnOPw36lHla5zPwtexBJ3zqX5WB9NsJsDpwk5H5QEaSHuUA==","signatures":[{"sig":"MEUCIGwGM1Xllpdr26QGGVSrvFFY+1aENFdzzLmjggpIw6ZqAiEA1g6/894wcA8TR4SAa4aKwyZyKH+K+AJbJCkQjQmpmNo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkClPJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoNew/+KkYhxth/6FrbIu+oI/4+L1X0vaQcFOX0SsuPtslYFGYznH42\r\nlHbA/NGft/jSrnGSURzre8Bx7tziU768CgClbpdu23iyhRJ2yKXhzuhg/PNP\r\nK/RzUssTUmG7T32j2OFsGHY01phKAHFsK5BylhWnl367EvtA8wJkHLNGA2UW\r\nln8DMWeq2mkToqMUrs/Xi0xFtxslYMMuDXUfCiT621Qes8UfITSTGBY31G+v\r\nwAZEi3uvSesqkLC64xuhY58hCdS6TcrweXFV7LBqWgBo3hNjdwbJox6bm1Hg\r\nuVgGhy3EWq3L81kmZqF9HMkP78ru8ZlmnaG8cCu+v8OGyzC1FYdcgiQCdSXF\r\n68+zxVM9Qe42W2l77EZuj8deVjy/aC5R10uZD8q/SbMsLgLd7OR5N8KlABtb\r\nrZeYPklQwR1fMjKbbjN+YQA1wqg32TmtxeVChRrFp00J9M+e5VRX7AlD0rxR\r\nH/fbca2JZhNmSzV0y7x/YTJ314PZPVyWN3SRhdU8hieb61SAzvSTY5koKNiW\r\nZrIaSQ46N3Aky2YifPWKre/tmZRnlO01N9EANA+UnyHaF5eeyYkdSuViWPcG\r\nV+S2GxcE0L6FjqO/ImykDCch/ngsUw70CCobUbBSvGFBUUZDmcYhobzr9nRJ\r\nJNLuyYsCJmj7CKhy6+QZIbKt4EfF+R0wYk8=\r\n=rc1k\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"2226d2e658d88eace91ac63729977eb6bd7a9af9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.6c265915c.0","@material/theme":"15.0.0-canary.6c265915c.0","@material/feature-targeting":"15.0.0-canary.6c265915c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.6c265915c.0_1678398409262_0.8928774202433738","host":"s3://npm-registry-packages"}},"15.0.0-canary.de5224633.0":{"name":"@material/shape","version":"15.0.0-canary.de5224633.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.de5224633.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"56524944249fd204eb45f77a57d42664f2de9aa3","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.de5224633.0.tgz","fileCount":15,"integrity":"sha512-IIcdZ8M9wK20VHFz9NSqqRqHuBeiQv/KiOBdkrKXiCo233HT06w6jgwrHpRJnF9ZtAO7QrlwWK9IAFNa/tZ0wQ==","signatures":[{"sig":"MEUCIBKAdYLqG0QSkfbq13IpdR5gzqtA1xnyq0GWenTy7Yl6AiEA4xDWw5DFM6+dUJLWHWgbvujd2JSRYCNzvoxH82ldPY4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCnHmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo6AQ/+L6d+EMkTaxbSuXF2hVAA0KFso6XF/mLhyygTTcaD9NydiZ4f\r\nvTxQdEkQhdfeLWsaOx+QDmg7CC1u2Q01mCCt60kj37R/sngvqyoLRSOv25Ji\r\nZtxccKo3U+volHnFDyTy8UGASj0LmIvwefFPVkFzaR793m5vk7IyUo/d0d7q\r\nNlhd8H4blnSLUCWgmhS7lX2cATb2Pxz0Wjy1ZHZwJlYrVS2ADNt95+Dzx+4Y\r\n6NXGUWgTEcBqb/5FHI9UdTmXZAjVwPFgGxQ+RiyL3tjXotN9b0fOGKQXO7hG\r\niGKYM3YzZWOM8bX9PV14KbLMzt8/pn+q3kqiLYbE2HlUVUugx89ca6PmDW6w\r\niVXls/MfeCVgmSqQzYOHSXJz4/Z2gzN2iaWdWoUgNcvGBesICV99DuZgTOpd\r\na/zo6oMzFeVy4J8ZpZlqw32Ip+6D8QO7kZhWpQmye3SnNWh57VwJDZscjj5M\r\n2AfEJhfkDEm2yfREot6tFYt7kxZUQEiJ35gl70Tx7WeoxzBiHaY6zd0PdOx6\r\nptoqOd4EmICJVUaH1ojzAJcy9kT3NUTsWUKvRiOZyZ0Bol4LCD8DyGNG55hZ\r\n0p2VqRUZN2fq5U9NPBCTMYTdURmTGaGVzXbfMPBmsLERandfNCFAJkZQGu+4\r\nBqVrRnT9Al0S5ny/5y8rgnTAtY+hKZ2YWBg=\r\n=H145\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"994c620135276cf7948cc54b286c6c306c3ac01b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.de5224633.0","@material/theme":"15.0.0-canary.de5224633.0","@material/feature-targeting":"15.0.0-canary.de5224633.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.de5224633.0_1678406118254_0.852030877433128","host":"s3://npm-registry-packages"}},"15.0.0-canary.8879557e6.0":{"name":"@material/shape","version":"15.0.0-canary.8879557e6.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.8879557e6.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c8cdfc59a7c606369a4e3108561de2461fe5f1e1","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.8879557e6.0.tgz","fileCount":15,"integrity":"sha512-2v/xZVKAJlcqDFysquv8pqb64C1CtxZwmltXY+jOfOS6K7ya4zZJTUYERl/evAGZg2pLmmvhJ0rO6kewd5zvyg==","signatures":[{"sig":"MEUCIQDULWNqgRwnT36Q9nB1dlJgWVuF3W2B9Lkc6bTIcj8xIwIgEIlyO3htkYG8qz3xUjN9/9Kk9IxZBFBdE+xZ6drdIjc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCzmgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpM6g//ZfrCTT1vsHfmRFAHQh+zj559sh0bt184SSStbBBcJLl5CoU4\r\nkyiG2nVRot6yz7RKim+bwIgqKgTt0wrDILJNMS5PmS386lhLvzrMH9Pr0Zgi\r\nWjj7WYEETwn9sW3v1M48suhGAF5ryFCMsGkiSZ/IG3AELiVEXyU5w42aND6A\r\nFvLtyEJsAT6wqosZ0RyhqWN82SwOnoYL+KYqeVq9VX3BfOZttmL1Eb0U164n\r\nSp+Gd60MwpVFnWzpJXtWMl2vaoCBdgqxDLLkaWFQhYn2kCU5KX3bygcixnob\r\n7vRqY+lmeMM4VUttPewO5y8NkYFJD6Ih469LilFu6xsBufE6rnHI3pVk2v6z\r\nOTqp1gA/6PiIfacVOnp8PJhI/L7eX+GzNcmLm9WcJylnlT3b6HXeCZTJMMH5\r\nzUN6pmhxrSeM+E3P5y5aLDUYoBopfZWEgZpJ/D3uSLhAIEANbfdgzfUHLn6N\r\nHKC16OdC0BtjyxjicW28QDrQwH0ro3T5zXZd/IOELAncTeudV1AiKDM/rGu9\r\n1bHudeRjWdy2vM6MMkqyLjGphK4NudKhz8QcdGBDVXh0AguV8WaWZ6UJgwzj\r\nsHVp4brXy4tj9dEtrmlRjroFyoEBb+zwjxJtxAs4LBFEcIIhbPeldh3a+WMQ\r\n4I70QvevvAeNuOL83y6OYmoc/ixDc/M/Hhc=\r\n=Ccbh\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"28f7c223e2bb4a686b970a425d14b1d1edd70546","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.8879557e6.0","@material/theme":"15.0.0-canary.8879557e6.0","@material/feature-targeting":"15.0.0-canary.8879557e6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.8879557e6.0_1678457248135_0.2725924016544614","host":"s3://npm-registry-packages"}},"15.0.0-canary.23073a303.0":{"name":"@material/shape","version":"15.0.0-canary.23073a303.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.23073a303.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3270323ec6b2a61badb35b89359cab3def25fdaa","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.23073a303.0.tgz","fileCount":15,"integrity":"sha512-F6qGHwO+6Nb5MAB9n+zxniLdN3SIItV2zApfU3S356qxaTDWvQUH52aB0uMzoUWkJ3dC1fmwrraSoYrmII88Vw==","signatures":[{"sig":"MEYCIQDkNOSr6KMbMSxt4S8OW6TvvS7tXf5OBYOngQPHSHdwFwIhANUcYcw+UdauS4hCAbDTxbmyILwcAPaOKS9ruXk4Uc9W","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCzs8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoRKBAApJtuG8Nod6QWZe9nYVbkmmW3oALOBnpLHR6Fgfpddvllp82h\r\ntmZan4jLVuCdJfR2hA8r4kkmvkdXy/S8LqRQjkgH/+uRi1NsNZI+iL9VVPVC\r\nB3RZ+OrQc3Bn9SA84co3u/B20GYqzly2Q7FzWKX33wECtfGJpsnCI4mK5Cp0\r\nM00oma337yIKGg6TSP8wUDQj/5FWIXh3pk+qR8t+VU+5b30SDEgc86OHAmxW\r\nZfdrPd/SSY1m6VZa8cqV+dZLQQcDPTW+iFzIzRkhzXNqXUEpRrUoIWb9JVU4\r\nWD+eG491QA5pa/mWOQi0n2siRHxxP+8nkOvhjx19DKlg2BgJlGP4tzgv0NCo\r\nt29KiqDOKDSX4WCxukZ/6eIyw5rTOMwco9cdz/gZMHTkQhCXdfvh2pT3neuZ\r\nm90/2yIRY3GyAFkAtt1P0G0xwS+TOrr2XCij5pXX2uBftoytfvfTqSkOm4af\r\nmUjSHx4hJHZ/3EW2xAtCCSZEacC38+L+gefjTO2lLppqVJM5Nc/YxN7VObw1\r\n8FqkilKAE9dAAuTF94BAN/Yrmyv7fPGgnHinr55OHtMNaNNtwjv/Y1pmilq8\r\nBvcmxy5pODhs3vd6bPQgCmzKyxF6mym7A+5XR18XCPnV/l5smorFUbShkHaa\r\nv5aYE/wJSe9TrFCs5CmtwzhjgscMw+kbO/c=\r\n=3GYe\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"2d7826e2ebf1c1fde12f47b603e66ec0df229a8f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.23073a303.0","@material/theme":"15.0.0-canary.23073a303.0","@material/feature-targeting":"15.0.0-canary.23073a303.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.23073a303.0_1678457659937_0.5453812229791055","host":"s3://npm-registry-packages"}},"15.0.0-canary.51c7d4014.0":{"name":"@material/shape","version":"15.0.0-canary.51c7d4014.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.51c7d4014.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"06398617ea2084bfae7f48c9c775463328dd50bc","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.51c7d4014.0.tgz","fileCount":15,"integrity":"sha512-AXjpYFag/XcBUFAB7W8xRqT74urMXAADjQsoQsvW8WU+SnvAzMZcERUexKdtk61P/inqilJO76CHW7VOB4PBkA==","signatures":[{"sig":"MEUCIQD55r/hV9jDGsWVKGetXT4Snd2qDKcuOv8oMwc5yL57NQIgb0AohGzNKsnYQs3VuHMGaLGWvOstvn2RQ0nb1mbau/I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkC17/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqrqg/+KJMVFFQkiaY6grnD+IkZyS3FRohCpYcdUs0NFIYdbi5/vDa3\r\nfywflqgtGZIGWqYuYMjodam46xYC11E+pbJNGs6sb/4k0Qt0YGXPKHw7r0QR\r\nqNATTo+gM9rokrUrpvftp07YwJTs4sPWLWwgC+3lVr9bcZz8n5DP5u+HDus1\r\nLueBFuFYySx1szb+68JGxWAhUwmXOue3ngJzktsjbsNK4cLfeuC91CZreVeI\r\n0cgoQoD422VchB2iulQ1w/IQ+/XOwaVoAjBNaB86BnuG70vk9XOeVrjmfBiX\r\nSAlc3t2q/OaPnQK0jBP5tkWNe7KAYtyZaQIXMi7Vh9ND3nmGBthIQUsE7NGa\r\n6dFDGP5qM2Lcq0Oa12nJRKjKD5dH5/AqJICvKbab3uTW8vNcox9NFFbsf9vF\r\nIRn8TYF8Dka+VmI8BvWp3+JWipQwnqBQb5qSvSY4OsGW4q0QqIYwyEchfGw2\r\nBvy4BbL6DIlO86krAeJlR+ZcMAQ47sEZkFgXXti2jjnAljip07iKYDruNr24\r\n0aieYgPuJnKqNsvd8qWPGZnb5wnYqlHBNeSjYXq/b0zhpyvxjOnuOOF5jFpJ\r\nHHAteIfxKQ2Zg1kMg7EAM++cqZnhXbieDFpgGuF+TUj9zlxFmrrmH9Shjqmz\r\nXS27idS1o1MO6k/Ll9ZVBew0FcDAhiu9avo=\r\n=sAx8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"0485e6059d69163f12d83408c09b1d41f6cb8dba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.51c7d4014.0","@material/theme":"15.0.0-canary.51c7d4014.0","@material/feature-targeting":"15.0.0-canary.51c7d4014.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.51c7d4014.0_1678466815175_0.8657889420954161","host":"s3://npm-registry-packages"}},"15.0.0-canary.1175a5be0.0":{"name":"@material/shape","version":"15.0.0-canary.1175a5be0.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.1175a5be0.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d0e68aab3918407a9a935f20dea223286c92eb77","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.1175a5be0.0.tgz","fileCount":15,"integrity":"sha512-m79kjmFILg6rphPV/ghRUEUezMzjAv4xH1GFzseQJsSzpq8a0953p4nvet/1APT/0b4tkzFWFAaU375OxZ5wYw==","signatures":[{"sig":"MEYCIQDs+2kTlWjRf4vpB2zZFNRXws11XlzBAk668awErNrorAIhAOUCm/NbtDPBpDAVo0rJOWdC/MN17RZ5su14+Z0BFDWA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkC5dnACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr8DA/9FfeTlhNg3TqTC+xEsqk+lniZUjXDnTpShSIQ6+TSIhbaCTvS\r\nf+Vx1Mf37OeRdLplautqDRFAPJ/REIfHd6bcsIVEo/1Rldw44PyqwUccLzaq\r\nU0WIXpmyXU28C8fYTkjrfCVkCvmH/kg4w/zIcmJpiS9i9G5ZDSaOf25wWwJw\r\n2AliW7+dAgcWC5yfoLNYMXwJeQM3Uq/NkH+ASeeycqvn1GXxihZVxmgdvK5p\r\nhndNybtbpHDMmuOQRo4TMADM2T0yvd3Ux/rBwaEeF3V+RYzawD8RkE+uo5G5\r\n+hGGN5neWYC4UkmtSyUGZ9hK9kIp/9mkC74JNEi4ms/OPOEEFnjCmIeLBDMx\r\nPuL54WmL1zzzaexjBKprc/H6I6tSefQPpAMk99XicbzdpuZOrptPkDTbXuRR\r\nGCTnD4nE5sb78t7fDvW5GFLPU+yRZ/SDqhyNzpNyZfjIg3DE1L01wDtEecd6\r\nF+haRxKi7H3chp3N9JRI2Yeaq/eE/6w+Wns0H4AkVg/59bVv68fQo14xJddo\r\n9M/thWGENvMopA6p/tt4dTPnbxIb4IunccBup+sJ9UPczJIobRLeYIAxzSJ9\r\nEH6zoicBSVGsQSvgeQcbPLUt1EjJKDyTxuWDI2pfobjVjXXCurgk4Sa2TkUf\r\navbMTiFNKBG+EITXKikuote12o5Y94enKRQ=\r\n=yCzM\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"1fcae3e4ba7c60c6a51ee8e61b01e26a324b1ab2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.1175a5be0.0","@material/theme":"15.0.0-canary.1175a5be0.0","@material/feature-targeting":"15.0.0-canary.1175a5be0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.1175a5be0.0_1678481255739_0.9328169012025136","host":"s3://npm-registry-packages"}},"15.0.0-canary.7adf3af80.0":{"name":"@material/shape","version":"15.0.0-canary.7adf3af80.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.7adf3af80.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3ef52f2271ba1729a68fe40533ad91268ad9c5f1","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.7adf3af80.0.tgz","fileCount":15,"integrity":"sha512-4cq/cEu+ugrUeaQZWIenXRxCAnJgYDHgHASWEPG35Cdffji12+zzqVsJDcKLtP6n+v8jGI13B8L1S6+YvgduGA==","signatures":[{"sig":"MEYCIQConRcFb7jNLXBjZttuo5l5dpLqJCs7KhZsX14xQaSWXgIhAJyFugBZXXXqVLntzcpTz6wPBhDXWO42nqZ2spCO7Ji+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkC9hNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmprhw/+JjD5KDb6w1UQQlp6DPf4CMZHQOaok3HkE8elxLOPylmCiUMs\r\n007J/spszE6tVS4XthEtIRd3+0KahD9+kLfguq+CO0u3oVUXUiR9iulimOEm\r\n3Lbj+JAftkovhh1YesBCQdIX86x/uNiYradai0lv5Yr8ChuwdN7fr7PAArdc\r\no41WQ0yjD6i39nEbnNGpn8dS5zai4kz+uP4/Oh235HYHISB2rdVEQLwKdgyr\r\nJSTqqoX1ibJT1z7bwd85ngv5OKKHtefJulSoU3WE1/w5KKcUW1Zog8U9+JQ7\r\nmbvDEwwiUG8B3hFE1jw7ssw7CDMfXXUyMarADPiJa55NMDxWRkwKFJgziz9S\r\n8O/W3438wxCQgN926T8NY2lcWDAg/ZSc05VC8P/VeluhEF1qsBbvqGnP9Yqw\r\nHCLAJnJoyjYCx3+E8WTc9yZaqEk3OIktJLwa1cQNxrINRRI38LU+zs4jpFd4\r\nc/bMw+Cdu5vEhLIucRGnzLv4Qn8GBstzniP/AksHY6qBIw0bN8WfYFlQgmO2\r\nSmBzbFlC5ZH+O2S1F91WlKjUj2wu4+k2mVE2nFDDG9VUBDO2bGuaTx73Y5Fi\r\ncV0no6hZQkVpfvO5az3U14rmrw0cA0tkZwURkW+/4XRrHfSgm8Fw18oacxWA\r\nrgxbPY1tSGhw9cs/7P/ikDxg95zhXDWbZQc=\r\n=mxMa\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"57b0835838a903c8ac3ba6c8edf79add958481d7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.7adf3af80.0","@material/theme":"15.0.0-canary.7adf3af80.0","@material/feature-targeting":"15.0.0-canary.7adf3af80.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.7adf3af80.0_1678497869759_0.5360091525594384","host":"s3://npm-registry-packages"}},"15.0.0-canary.82554d770.0":{"name":"@material/shape","version":"15.0.0-canary.82554d770.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.82554d770.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ec7a1e2bd575ff6e9c9f3cd3a68cd5bb7db12068","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.82554d770.0.tgz","fileCount":15,"integrity":"sha512-U/+OrdXg8QyXmWggvNb6NiPQHHO1lRuSnK2Wsvek9yc2UO0FvvBtfSROyVsL3JViWZ9tFLVJ0n+vOGC70C8w6Q==","signatures":[{"sig":"MEYCIQDe2WJHylmGLevC+CaZ2ATUuWYRjoBcXqhp3+3oTcnVVQIhAKf7p273zDeQe+ppcqdGvHVnTgyT64aTswTmPmUgNr2F","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkC9sxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoFJw/+MrL5FqloDprPzZP9uk4osaIhoJ2+g6dJsRWh08kxHeoNMGAu\r\nAOgFxVPl4g4ZKG6b9pDXfLtc4wG1QevOQ+uOTz5fYWicZihc1Of40uP3bwqC\r\nRiyKKN59eve/VS9YhZTERRNHcyX8EksC+wqZJZKQp2tXoUbiTSIEVVSaO098\r\nxHsj6PNAjyeUqRAdvqwaFNnzPJIkarpQIyB2M08nd4pE2YoOZ61jB6c7xIxN\r\nGRaEuhKuoSjNK96K33YMriVXnmETt3VPJXRe7ouz3mXbgwQAbAayHsZehe7I\r\nIvkeJFGDta5o6YnHpPbmUHiUXSYya54BHcayXsMG/+sJ/S3cKbtU7yOV5a+C\r\n043gvNuCY/ogO7xcXG9J2fsDZBtFGKwN6yWEDV0ZkXy6MKHft4r9V+EXAlyL\r\ng0Iiio7qW0SIbH4g/PZVcCCAhzXvzJjGr52GjsmpE8XphZ2c9v/WMYSH0n1W\r\nc5hsZWSlZ3OtW/AGedavRYibgnXGv66XehK3UFMG2tlmwdxVaGNyRLjdznoP\r\nCJM3jrLeekPoRv0eeJtVnrNPqOCHwq2u3pj4vnd6cNAuQ0x8g3LkPNceDEqi\r\nd4Ct+at3GShtNvaWCzyKEcv3aJLGBcxCDZFrIwBSa/kCSETfUhphzHV5GwzU\r\nZ80BAtBs4o5SWoH91xH9OL9YDEgJGhg7KZo=\r\n=cF3f\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"500cec655918e97ee1edc3c86ebccdac24a28f56","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.82554d770.0","@material/theme":"15.0.0-canary.82554d770.0","@material/feature-targeting":"15.0.0-canary.82554d770.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.82554d770.0_1678498609442_0.5656810556746901","host":"s3://npm-registry-packages"}},"15.0.0-canary.93fc524b7.0":{"name":"@material/shape","version":"15.0.0-canary.93fc524b7.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.93fc524b7.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4b5716a73b3a5e6d0d186fd40047be79eb165dd0","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.93fc524b7.0.tgz","fileCount":15,"integrity":"sha512-DtsfIouTO9QCmpUCuEaS/tHtfYGm6HqRaAUoh61/weFY4kIHofgz2dSihsAF6yx5OxrlckJ7m2uSHKHklAyl7A==","signatures":[{"sig":"MEUCIQCXUOxrD64/exHgBcM/I46V0prtyzQd3b4K7DKkb4mLNgIgVD1LSMedXnUKIN7z9VLaIzio/aTKvkIa0ICDIZ+LFnQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkDuD0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoFAA/8DheHx31FWBJaOUSjmcjypI5qyf/5qMhCZhNCAnj9c4rHfJK0\r\nhqk6KhhegSzPg+gux+i6/egqrzGSjXhW9pELvB4yZEAFfRu0cpqpbrUJ/srE\r\nhmNGvsqq3yarJ/VAkiAE3Nnn5BXbhzAJpkAVoXddLv/JfePhV4cgzDdBQ0QM\r\n8YzJDZnEUqfs2U9w28Khmy2DsGRbsc1MeUq0QIgk5/pX0OHqtb6V9O425MV4\r\n/z6zETc2HY4z+4tfeFhE0bu3cfFZvs0PDsckkDe7t3fpWrUd4A/E0+tS2JJX\r\nkTbVDS3eU5u+YQBvOb8uYi7beKSDwp/isDzoCY4WwXTWLcFwdVRuKny47ZWH\r\nRQ71g1b0N++7F8wlyRpVG2pczALa/eqJr2zctq8ZxpQjwII3j5G8RvjQtu2c\r\n4TZi4MKp4ozeglJ+893DPq09/4fZ4/1CgNm58aOXClKhelwkXJXGRzWYKAxV\r\nqprjiiYy2WTUI+1xrm6z08zil/8DlwyjHMllaDSIcXBkypKcLLiQv7TV61US\r\nMOfedCLYn97s39I+rsZtIG0KwaCzwkg3shHOuifDCYg4nByjmvZ/+pqyJD2A\r\nLcq66AOzw4ZpzYQWqf3NeER+fUPJrXOtWZK2xRfwWkR0p9se6ihbAdwt3LbE\r\nirRmnXIS/MGlTut+UaEpa22NGcDil6oIiG0=\r\n=bwu4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"338daa93529c874da1af6eeb4fafb935e014e096","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.93fc524b7.0","@material/theme":"15.0.0-canary.93fc524b7.0","@material/feature-targeting":"15.0.0-canary.93fc524b7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.93fc524b7.0_1678696692553_0.8293566573236868","host":"s3://npm-registry-packages"}},"15.0.0-canary.50be0fbae.0":{"name":"@material/shape","version":"15.0.0-canary.50be0fbae.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.50be0fbae.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1591200bb320aba911b6d3159f3e734d3a258d0a","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.50be0fbae.0.tgz","fileCount":15,"integrity":"sha512-rs8f3Ru8G17GFwme8oxSIJXNvcyHfkUxsItfBZoE3vpcFOEsAqFW4LFxCkZaz5HNHUaTAmNQkqnGXV6nyJcXZA==","signatures":[{"sig":"MEUCIQCO9lPBzZx/mmbk9t+MfMpa8CRt5j2P299iQm4cmi/nPQIgVAWrYeDBpjoG0icUh4p3TOQokAidfjeErKYHHzKmSAY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD2DPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpmpQ/7B5J3F3pHgOsF6o71ZTBVjpzlIpeJ5fXIDqKZPoV9qETnr91n\r\nIIjDCrS8/oMh6ZqjTzRyaiAZE4nXiJ9Fliik0K4M1XIaKM7/yMQXIDIHQ2+u\r\nc4GN3G4IKs1IPYDLQt+bMJWH1mjofhDIx85tJ1l8pqeq6zbya23Qpemy38hi\r\nUL6avmFrB1cauqv5EhNwUj80SAbsPrBRHjlBmH36y7r1XtWXlKmxlpReQHDf\r\nrg8nRM3uA5V3N43A3FUYbJ2f+En2XdhtRQBf/BgXxv0EXtUTsLNbdcsfbMhd\r\n+YYlHP0GL8eY6nVH6fLLX/WJsg5fOactmiGMhvcwmue9EPaRG2Q/6PB1yZtG\r\nDAeVxUbHq0EpDjywVnZw2jjIyr1TbkNX8q9GPRp2wTcf/IFCHeCc4dbsZyxm\r\n0sMyixJTYNa6mFaXFdqSlg6D5sKDKqWmh29s5gviCdfDx/QlCVHBD5bpULmz\r\nqusL8lwL88lNUfi4kHKZmDi0NkM6xPz8Rtb8sF+OkN0/6ouBn7kK11rdFW21\r\nsSQg4D2Di9diuiiw/TwX/v8ODCintr6EBYYlIn2aQaMUumLrtCM7aqwPWNo+\r\nB+DyZOjPoKZ8OMamhBuGapk/uqxcN4l94xORDm+FGTtomjicxt/t26yGyLW5\r\nUPahvHXA86ImNJChUq8IdMJyiyJTQukmoto=\r\n=g/Ap\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"405d98c2882461cee8d47ab1b16a4666ccf7129c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.50be0fbae.0","@material/theme":"15.0.0-canary.50be0fbae.0","@material/feature-targeting":"15.0.0-canary.50be0fbae.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.50be0fbae.0_1678729423161_0.21817124831778867","host":"s3://npm-registry-packages"}},"15.0.0-canary.6b5ffccd9.0":{"name":"@material/shape","version":"15.0.0-canary.6b5ffccd9.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.6b5ffccd9.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"77817521e5398aa9c359d40e6f3773f1d83d657b","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.6b5ffccd9.0.tgz","fileCount":15,"integrity":"sha512-H+pzy8KZWdUjkGVa35+1OlKP932AssXYHGx+xPpB/0nB89VL9JM7cWIHG0HCgR+9JrYAeVP5fiQF1KAPcv5wlQ==","signatures":[{"sig":"MEUCIF8McwhHtNRVINzKC+Fy/daIPIVtNUhdDOTGLVfVZ061AiEA+Atr7qjvikaYBc3z8YV7ShRjdAPLKRPGYxxJZkGV8TY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD2GVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr2RA//TOM+lLkS6BeZLfO/m7B/vL2Gq0gfoBvCLKT5OLG6i7bfJRbY\r\n/IVns7of7072SoPmou28Aip6zFOBT8TByAglGAyeWfrJpEqlCQN4tmHzOTFw\r\nBbbZZPeZuMzBjjSVZbBBpEX+UgXdK3cz7dDiEEMv/fBjHiV+r/Z+awlQt+Ym\r\nGdehTJIj/53qPRHoAI2QbKDtgeBWOot+4GkYwjde2PFIG7P7zpun0V/Alin2\r\n1LkbJqe1JmfR/ckf8cDSFLtIw5bkgyCHClPI1YKGb4FdPvtoRKHOIymjpQOO\r\nJSMfurt2lw0ojQTO9p4VyT/IADeCKl0naNJoYXC8F6P652Aj0ejwIp6uZuyc\r\nzc5+W5PLE7Q4jH/n2gCDh2MTirEEUakffyeL6R3D4/dFD9ydTHTKc7Nk9KOD\r\nf/5w+BtzaZF7U0Qdzrh64oawsoT9bi2EGeHXJnNpXxTSjnD16Dppw/nrcmtf\r\nCMjBjNFAG3u3jYReKhJnYBjhGmeu/3vwLEmWq3PYQUIoF4uY4N9RaVdJewCl\r\nZy3bfixdZfQtXaQLVS42UDEIoN954sdqMoaBucyzx91L7wbzJ4gcP+Ih66s9\r\n87AlFD6/eRMd41UqycGrm/C9IjkM6zTt2vDXeI5dsKyayQNOLAKsaoybW+mu\r\nv5C5bloAWTVe3QDEMmoHHZ4nvcEXgm7iL+Y=\r\n=l1iR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"d30761453fd80caeae042d8999af672f9c3eaa28","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.6b5ffccd9.0","@material/theme":"15.0.0-canary.6b5ffccd9.0","@material/feature-targeting":"15.0.0-canary.6b5ffccd9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.6b5ffccd9.0_1678729620972_0.15839213982704492","host":"s3://npm-registry-packages"}},"15.0.0-canary.1c8013f4e.0":{"name":"@material/shape","version":"15.0.0-canary.1c8013f4e.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.1c8013f4e.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c5896f32734f406fe500b835071aac4e1cfdaada","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.1c8013f4e.0.tgz","fileCount":15,"integrity":"sha512-X7IEjbk4iOTE7yq4cPEXio7GjxTlMHFraoGOjS2/gmkcuIynlyeiGA4FWqUAXvj2jiLTbTtnuFKEGufnO2AN1w==","signatures":[{"sig":"MEQCIENVPUaIECVWvOPFbrcz8pK9eY/QiF/fpJZqYzMUFi8dAiAxdqNNNzqXi9ce2HPUByaK3HHrDLe95uVd+keaSkQ1KQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD2USACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrYpg//RXPIfgwWvYgO9aOgfvIFmqvVdN1T/uo8VVXsi85jqzMTZP0/\r\n3VmxziJY66Wqq6wtAHR65e8posa+jzqli4VLWTKO78PYHWdLNCwwcrEMm8/F\r\n0Ko4kNMRAdmazqMXznU7XEgqX8oVs0gG6p277sXVijliNhi2x+ksYGhFE7Lj\r\nWrpzreYfOme4WIMlNzAxIdmMZ46uv0iXpZyV1/7kKmhFq8bKErTKnqkziBMO\r\ngC9BMih060D08dY78LyV8kJqdAuPvIvS12IGoGZIfdZr6A64oOd+a63S3XLp\r\nbQkms31IkfRarB9FOT6PyG5LZcGXCtuOLC+qKW0C9iMBvoVHFT1iuKld/1fg\r\nT6xOvnZ/M8iXXObdZitwKTcJ0ViH0NS4iVjNonh07VpKiWqWj1oRQPdm8M8M\r\n5up7L4/AB4j+ZY2rZr00uwUwVhx14C+0ItjssWE7lLUfDzdQNesMyiVf44e0\r\n79O47aClxqLSgy/4qoZy/kCwa59L3YSfHPSUUCHhTwWSKhtAT4roPk8IMYJ5\r\nNmlPj049sGdbqFmqyLWH9bwxlRBnPgpIZq+8HIjh/RPbH3y2FC2KLG+efHHc\r\n8nrftQXKJtnf9QxBqaSpjMKlO/4LtOZpqg3325qSsGahKhQIHXDtbRzHWd5M\r\nSA5tFoPdyvHeWieAyLUCqqVzonLI2x8TVGg=\r\n=Oe2M\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"ce86f06ff0c2637e8cfa4965aa614efa6bb86046","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.1c8013f4e.0","@material/theme":"15.0.0-canary.1c8013f4e.0","@material/feature-targeting":"15.0.0-canary.1c8013f4e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.1c8013f4e.0_1678730514531_0.7535770349567401","host":"s3://npm-registry-packages"}},"15.0.0-canary.112715df5.0":{"name":"@material/shape","version":"15.0.0-canary.112715df5.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.112715df5.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8170c30ba936423e59829cd396b7c270c1c7c8a2","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.112715df5.0.tgz","fileCount":15,"integrity":"sha512-QChcWfjladeVi8uR+B2XURWhOWbnjNjpeZI8w8zgVzAMbnLsOwddAahl6O9R7LlN454gKC7PoEHZ+S6nWFeMVg==","signatures":[{"sig":"MEUCIBvQKEsluSPFQl1MXJxwsT6jOllrNfBVLX5PoZmZWgnYAiEA7yuZNf1e3HqAQ/Rt4AfmSEBQBTjxEcmyx7yw7ee4iCU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD22xACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpe4xAAmf12QanxtPHcz64MmwuciXdqk+LGYVGGFz8r2mY8P7P/d7cc\r\nTKuqz8VXvDXMbvF8YmVlPUp+3ugjIrsSr+ZGAiQCDhIf6qOPcXPtD+LZsksA\r\n1f9lOJ4XoWvXFcQnRWJwSPZelDaoskMvf/D5elELPK5ZCMP71jI9/ktEISa6\r\n68eMT2M96Aai1LbQ/mG3AJbG1mjvGoDLKIFdZGM+0K6jX21VvYVNsT9E0MwV\r\nRCk9vAZjC32/qQO2g5uahEBLhpP3xRP72YLTeVRXQA+LnUTQxqY/MUFlLNZH\r\nAy9joyRT3YwLs/0NuLNJ/MXR/51i6oEn5nEPN7b5jaVfoU7t6wFyUhfA/Qsa\r\n7YjoroaHntx+l3ZEOdMXTKZ5/50ZPwbrMGORs06dskJr79KyoGr/aPdq1b+V\r\n7RgGRcalmuBbxJZMjm83Ue9FDXv2AYrHx7W/s8acwGZuTkJ+3BgSpFI4bR1V\r\nrlCoYJnymQmNnJ77uqDqDqenjdIGXtPVNme8SrYc31K1g4CirvymDBui0tB3\r\nRH3n/y1LHiSLwLXkXFDprUFD1UmdHJBELU7YWrT+xhqWRMIyUVw4NqKPtxfo\r\nfyAmVhCHAGskcOVkoLngMRamx012yKFLVyXJNE/H4T+plnntBNmSBuGlHpcj\r\nz5F2yKBBClhF8Ep137Raqmlj2HcMgFvdZPs=\r\n=i3PU\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"3894873450b9dff1b92031fcd1d00ed1ec3ba9ce","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.112715df5.0","@material/theme":"15.0.0-canary.112715df5.0","@material/feature-targeting":"15.0.0-canary.112715df5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.112715df5.0_1678732721095_0.18098850638281871","host":"s3://npm-registry-packages"}},"15.0.0-canary.d250911f2.0":{"name":"@material/shape","version":"15.0.0-canary.d250911f2.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.d250911f2.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"64906ea9cb1278dea469ba447c259870e8cb6957","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.d250911f2.0.tgz","fileCount":15,"integrity":"sha512-uboykSi2PQyZT/ig9VSweu/0Yf1Tlg+8pTcdogDRYdIUU7NhBgVIBGE/ElxkKxZMIAmIe2q+vlNHI6X1bEKONg==","signatures":[{"sig":"MEUCIQDlbitLi+mE8lFh7Y3l2MPpFKSldFQRLeMcdKO3b7SJHQIgPpX8950xWxkR2CsTKxwXTXfBG5oOd0w3vOzwRzobOls=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD3nzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmphRg//e2NxzTf4C+h6iDSnjyVnTx6CTTVp4XED1qvjt5XWPW+vrKMm\r\nq5gzsui5HC+Cfg+8sV7rdPU5QaGZho6kGL10/r8FXCMKUMzpDyfdpvn9TPNz\r\nC0Rr/EMs0dKRTEmPx1hs3PWsGxh6P3IGyzyzz9j+VgcR0NYDTeiZghtKicJg\r\nfIsmYDMX5tEQYtC3wT6Kcpqym8ljBOSZC/AIpLuObj6hHiB0vkeLb1Qbx/o8\r\nMTROP3vY14xV4VG+lvnjw/w85AbN4jpJjn4DAbqPzL6EFIJkIjoJWIKBDNPj\r\noMGrGVZbpsEknoYpR0oTmJleJ93aRTxT4AqH835vtfs9UUiOxx+bLa72G+Xy\r\nNtAhXw6LokFmva+7pqHIcV7L5FC4LWj0BBG67HUf98EbZKY9um7cHRqlyyKh\r\nT8LPRgRXLSHbUTGBr7BIgNTmYzi7091fC8WDPeAEwTwkEMHZlmmVTZAbAOEG\r\nJeXDg+JZHC6WS+3nMJBisLbXpv6b2vGyfE9ohW0ju7F3RdevpqlpKi6SLjHM\r\n4MyonXCYtCmLFLrsx4zWUkkAxm5b1pAS4oR0t4IEk2QFQj9BviyzSQwyKX3m\r\nu6pGyt87aT6jq6KUd3vmQLzeB/Z7i+WgCGn1NA7GnjxI/DUVY8jUbdHsAASj\r\npFJVWDFrQX1fZPnX7u8I9HifsTYLRDscTHM=\r\n=qmou\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"7b4ac246b31922fb4beb9ed168dba262e499c271","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.d250911f2.0","@material/theme":"15.0.0-canary.d250911f2.0","@material/feature-targeting":"15.0.0-canary.d250911f2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.d250911f2.0_1678735859608_0.2277512287883161","host":"s3://npm-registry-packages"}},"15.0.0-canary.7cd925c12.0":{"name":"@material/shape","version":"15.0.0-canary.7cd925c12.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.7cd925c12.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"096c287870ee6d403f0c97f941b7d8666f3d826c","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.7cd925c12.0.tgz","fileCount":15,"integrity":"sha512-qiQUphZbqybZdeTPodqZAKVAIi3+d6K4S2YH725/yA3Qj3+SrgBiCUK0fDMV7YeBiTxZbjKQ8No2+1rmzzzG1Q==","signatures":[{"sig":"MEYCIQDvXoWezWjkDiFWkRxwOgA6kDXMgS+rFNECshNMY1vQCgIhALZcNQ+a/mXrm8LvDbqUnEKYbyAJ8oanRoTBT0pV5jpn","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD3u0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq7ug//TB0VbFskJ2V5gTgFlYz68cehlFBBqJ20wPfotokv/AVq6zLe\r\nWNyXp8Bkhr7dB28J3116Xz8eE95jljl6SXtn4crmD/tT28DYe8GdhzWeTN7m\r\nHUStFYPToS5K4WGU4pTYnyp86S/ZOtTkvAewx3xZusbonXZUAY2c4CsXatUb\r\n3nCDvtcUdhtrN6s7ujw/FuWAnSQqTURQLQf+Wtq6bemh4OqwIOPeNGnw0aCW\r\nE+1g3XObSI8WTb9Fg37errgTgS61u841mLRB6sJUxIrCJAJKh2PR8zGKW3KF\r\nEcNoNTnR218GTTGOYoU82Qlu2nVINLYcj9wUXTc4bJq5VOWunqkAsowyKeyJ\r\nZvZFmi+zCwr2qWBVXj4l6UP7+co9BIbG92JFaI6/gaEwyiH9J65pv9jCMFLa\r\nCHLHti0SXP5WCE5K/3kKu29qEdHIqwsEcNQUEhhjtG6CeUO7JyAofELUbvyz\r\ng5ijsN0qR6QEPOBv0F4n5AE6d+r8PaUgNIxps0y5QwT3DD0vO+B50LzS62sQ\r\n9RQEUtq+WPkf2pa6N3zlPHWc0BvDI2SvLbKPJucQRqjJgRsJhVTY+jJyqEY4\r\nl+qo+HBsS8S9XKdEQRkxtA4zISdHUPngE3jayrxcfEZy8fNB61tAsi8mS3KG\r\nu2L8YsdV8waZjSe/T9An/V4VD/23eKEmlM4=\r\n=A9eS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"96310a5c80e3e92695b6d6e2933e9b0c82e58a20","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.7cd925c12.0","@material/theme":"15.0.0-canary.7cd925c12.0","@material/feature-targeting":"15.0.0-canary.7cd925c12.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.7cd925c12.0_1678736308582_0.3596581098873295","host":"s3://npm-registry-packages"}},"15.0.0-canary.b2ddacf73.0":{"name":"@material/shape","version":"15.0.0-canary.b2ddacf73.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.b2ddacf73.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2ee352c59fc3e5329e650a4de87392f00541bd80","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.b2ddacf73.0.tgz","fileCount":15,"integrity":"sha512-LPB5UXh5lAZ43ahQR/JIy56+lI7i0Jt/dvtFsTSEJPGxW21Q5C0rp3RMpAGCLltdXbiEBxTxoSnBzEwGmzNxkQ==","signatures":[{"sig":"MEUCIQDjJX2tYqPd6Gd0AeREP9/++fCegSq+i198Jm6oB6sxzQIgdgY7/+JQHBZZk6uzEz6q1PMUMsRwnCmVOSr7qY+vAtE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD3zBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoCxA//fTvD1C5fccRf6/9XprEwj6N76EE4rzucXv3vvqmtWdhialqd\r\nU9O+JI1BquES1yVytyL/M9kguI+K+CrLrZAYooy4SjI78N8OV0K1LgsF3Elg\r\nwyI2E0OH7Ix6+eJIV+iYb+Wh9YpwWTjoaVjRzD5satI03qVutJyb+tWgIXLz\r\nlmbcaTH+2Jn4mwRyz1pGUZUhJuj/j1v02aGbDLGf5eG+wFBJMORT2nvo9vCr\r\nja3tsishr/XoNuNEY8uWjk6C3pz5jJqekKASqm72REUkhNmrQzEOx2auf6Lf\r\nzbOOEMEVcp3flSEfp+nrOuma5KmTo6Y74wUctxe4Mbz3gESeg1EcNLSbPmE4\r\nLU5Luf0j35w9gwaENb3e0RxU5JH0V7SSqh9upcN3xlX0JGTUfTjdsbmNX/yq\r\nbZ6dcJWsmDjljq8pHzxPemkM1CQbWbSJCcSxg+9ljISYMVpIZtG1HL1pmcLC\r\nEkrj4Icil22fyUPh3BqdoF1l+LPVl8pQhaGPuEgXnV3QGXuPu2Mja6JaeErF\r\n/DKmtX/f7cNNN0bcxQK5csH4eBqy823Fn6oA5tplZaDir6mdyvfEKiCstyLm\r\nDsxuqYFa6Em9XQuUKezngvqHDyrHYLWFqqjEHyhgAgzepk9UThw9A3vBy390\r\nsNJTUNiSL9GeJqt/YEU5df2jNAGyUE1zEds=\r\n=NcCW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"860a6f0b439760b894931fa6cb354412764bd21f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.b2ddacf73.0","@material/theme":"15.0.0-canary.b2ddacf73.0","@material/feature-targeting":"15.0.0-canary.b2ddacf73.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.b2ddacf73.0_1678736577267_0.8473529825495132","host":"s3://npm-registry-packages"}},"15.0.0-canary.989ae2ecc.0":{"name":"@material/shape","version":"15.0.0-canary.989ae2ecc.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.989ae2ecc.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"546ffa357afa674fed11558e2720b2fe44220c8d","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.989ae2ecc.0.tgz","fileCount":15,"integrity":"sha512-QXeYWeFS/vts5HHn5Btu8675xeEPtr4UbELMC6t0qtCZuTAIPkn31FAo2X9pVnrhHT0ROxsQ01ULNGRokUG9ng==","signatures":[{"sig":"MEUCIQCtBtWrtq4gLKzeJrb1q+vx+KttsqBm71XRW03g6wN7kgIgBN4VxwHNsGADCel4VOhCSNR3A09LG9piu+w483OMspM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD37oACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp3fBAAmodaIliH3e9YQMZKA+Nodrh6ofKaPDY631pdKKC1kxH6n8mt\r\nunmN3w0cxVTkuJPXL+OmIFmHaHdQqwAN+Be+9qmaemDGRwV1inX3asRW03ms\r\nAWlgOwjpxMZ7f1KjdpvJYx98L8y3/o51xhuaspzyf+oWmkNqDV3D+yV76/ND\r\nrYwBBhA7I7wbjq5viosMYn7N3sJaFTNzj2FivMQGP0pxmRMPhORnIFbJEQGy\r\nLpT4OxJAhQbzGyOiABIShkDOCYy1WGERkyhBXoT8+/oLdDN2JdVjIdZAI/or\r\neCObguelasRBSHvVHFL1zsGigi+GGdA9RWOe/cuM14m9OgdjWU1joc15mH/x\r\nPapYfv6jTJZjFv8HiQl7VtCIByQeWr1NIbQ95Q7L+XlQEI197IQtNi778seM\r\nyC/8kSLfRV6Sy4zR/XYSYwmou5Tm+sRVB/3+dAbVAwVxmjrlgjrnttQGhSyJ\r\n4K1NU4MMTxjyRRifB6zEPcqfRfJVD0Qmk53Se0kJOysyJQwXzuXvFw/gayJ2\r\nQsOF7O5xMJLiODBvHygKu9iWvFzJoxul7fIVMAHI0jODf6rVG1V+14Db/7nX\r\nEBk5oTdNWdZE2jB5JsoH/NbOjXqu5c8XP83RIPcdPAfLUemNh17m0fAcHgNB\r\nHHHQewa4fWNU9tbgG0x6QU8s4wfjh+vh/CQ=\r\n=y1Zd\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"52e0f05ff74ddff1d986b27e08df13644c056b63","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.989ae2ecc.0","@material/theme":"15.0.0-canary.989ae2ecc.0","@material/feature-targeting":"15.0.0-canary.989ae2ecc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.989ae2ecc.0_1678737128159_0.964216691933407","host":"s3://npm-registry-packages"}},"15.0.0-canary.89c66483a.0":{"name":"@material/shape","version":"15.0.0-canary.89c66483a.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.89c66483a.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"00557a7675beff2fb3e0005aff61efe5868134f9","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.89c66483a.0.tgz","fileCount":15,"integrity":"sha512-HuXWx7oMId9/pUhK+OsamO0qwzfCFnazbBlKEjoTFvWjwK1Rjo5XET9evIkbor0iEPsbiTTHA0bT9oP+XGzXJQ==","signatures":[{"sig":"MEYCIQCpmvkOZcOwNxLJH+q6Jj6AiNB0pC/Srr7VvHnCMQ7FxQIhAOE15TKytCGCQ9hGPMdIB4iHs9O7Iyh0ZOV0HicTldfd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD4R9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmruXg/+KnAbNRn23K22JVqU+8tZEPQsZ2G/pGlmWnfxCeG+5oID0bvi\r\nS8r9lqnxNjeYMsqM+nN61mSnUsv/5FVIzv2KOE9jn0eyTpuenAlYeeq8V0de\r\nlMna6lWTONkbStal93kbFd1VKIiNi2ZrsvSAHbO5ZAvsC5f3KEbnTouzqzcX\r\nH+8YEiYmHJCmri0hVIdzwadQqnRDTVlGQzFqE0DYkkB666UirYagaEqnbju0\r\nMcLC3JsdOt4WIELpiX8xur5IMR1LJFFdDnDkj6PPFvMsivu8BWQWSUkpCDL3\r\n2ScGrCRtgjOL0UokqBmve5IvYduPnU63iCO+LgotjpnoQjIQGA16N5zapcR7\r\nlub6vC22VvtrtKJ8tsnqQmTWj9ALyykI/rAGR6W0KSbEjOpUqKsB6SNsrMTt\r\nWKaJyrj5H3v6NAdYxZf9fJS/f6/rgevnTv0LbpOkO/qpRvsD81wxbg4zuCyo\r\nUHbEb/V3+x+McRUqoPmW/6AMGQzd9Mw/sWMqxspHiOXceBUab5EeeCoVzhdZ\r\nzP4+RmImVhju51jwGkJVPsl2W6hQvUMhPl52iKpNvSzxsCuTDCikCOxISYta\r\nac+42L5Rr5LrGPx+s7QOpP3j6sqEXcF1LltZ6ZRQ2g5b3psUQeneBCL8rUDr\r\nL9IAGHOtmvvdkeohJRV/m5QR1EM3Oa30fcw=\r\n=NNep\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"1e255ddead4716271020e03e9b0b302eacbc4153","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.89c66483a.0","@material/theme":"15.0.0-canary.89c66483a.0","@material/feature-targeting":"15.0.0-canary.89c66483a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.89c66483a.0_1678738557236_0.6622664904429691","host":"s3://npm-registry-packages"}},"15.0.0-canary.6a85742c2.0":{"name":"@material/shape","version":"15.0.0-canary.6a85742c2.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.6a85742c2.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ecdbbcfa6c46a9118307029bee0354260445c6f4","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.6a85742c2.0.tgz","fileCount":15,"integrity":"sha512-v5Ynyt95Guwi2aFSTkX/tCteqeACY3H7BRam6wy4Fyao/TWDR7jcphjDQds28SWVqEa00R/3mxGJvNzM/9bBYA==","signatures":[{"sig":"MEYCIQC+epliSkeh7z6x/TarNUxiGPrQ4Cds9na9tvms18AlwwIhAJ0vcEHDOAk9JVYOB6aQWI75D+8RfefXA79C2A5cWv0b","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD+AdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrsFRAAh++BNj98XMJcc5x6CzGUl0QAbOeAIm9SBgH1K5he/uTAlHE3\r\nxVaKq5H4UZ4y0Y+ZuIqp1pJKHdTZd3XFS1YX/r0F+qMNtkoG+qC6KhaU2Ye7\r\nuPTj+Gp4V0i9X8tCXsLjgBDCuo8xaOLVAg+KCrnv4UA3xrGKt15XGeV82u7Q\r\n8rW874sGoS8XkwisbCqOsq0KDMJ3ZKI45BqPxNm7D3UD/ExakZe8NSNkLBD1\r\nKfYBC7JSodRmwlAj9No3t1/5liy6tXGwFE4ocOnQHogNfRR7P5Xz80NXB+0M\r\nUQgTCJX8Fjo9Hmdxvm7PHARAgtXc7msuHW8rdigtdP/9iRZhXO3fAwFxeqW0\r\nSHYwhVZRQFHoUP7tsf6EZZxJUlaVei5lQ/LkmNTptOO9v+2JLMYsDo8n4ggX\r\nS2135tz6bbyS7sGt8mr4A+/Cjv/R5K1f2hEu9C7Dz6XPK5hJ9YuezDletk2i\r\njDpYBn0N/tpoaQNhAMT9E0ruLXL7wbm4zlF3KNrsKeGyzdCVaQEjRnL5zdsD\r\n5MnYh3KD31zkdCf1JKVfeV1euZ6AMDns3xHxTUWL8PDXxKgKOtrGEdee7fkd\r\n4ls18W5sIoU6cP4EakA6/Vmrv3acX3a612OhUecA23Hs6BhSV5yNC0ujTciC\r\nO+C/lLwEpGkszKfaxPEVVCyk4xNLScZVcTo=\r\n=IQve\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"a2a15aaa59054337e585758eb160d9cab97224a2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.6a85742c2.0","@material/theme":"15.0.0-canary.6a85742c2.0","@material/feature-targeting":"15.0.0-canary.6a85742c2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.6a85742c2.0_1678762013261_0.6843419423360471","host":"s3://npm-registry-packages"}},"15.0.0-canary.bb6cd78d5.0":{"name":"@material/shape","version":"15.0.0-canary.bb6cd78d5.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.bb6cd78d5.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"54c0f56fe09361a38caf2baecdd03f20393cebe6","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.bb6cd78d5.0.tgz","fileCount":15,"integrity":"sha512-t/GLJ1mz9RgCNMnfFjjE1sNzm5IxKtrZyra8Djf4+UL81orSB8rLsQyfh3tQ3OHNx16BzSVDHPJhWe5xaYfmRw==","signatures":[{"sig":"MEUCIGCJAXXh6dm209ffcYkB20Dz/Qp9GYmzbl2+89iudgjXAiEAw0LaSCMrwrbp3KWUx2HZVruv5RGb93WGLLcmt24vbEw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkELnvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp8tA/+IbCEiju62uAdBd3/hJXcS5U2Fvz/eBqxDmd0r8H5HLIPktvt\r\nr4R44e468fdPnOdac9kPtwZkfE4tZj8ii1E/9aQjUqebkTPRiol6Ymi+6fGj\r\n3Tjz2wys9Fv4oVnY5PKixhyxJMEE9YcjHzHsFDsdIfONvKnA8L5lM+5PekAx\r\nsGhAO+Ol4R6QPZRQ72+PuwzUVxxwykP0Vcli4f54FsCuFeozU4mA96sT9gSg\r\nYUVG5DzaVOs5w12NEx3vt/OJhb8EETMAft+a1lHV8RKaG0pjnr8DUI3wKNDu\r\nlWfzLPegZCWlVz3OJxbqc9h9s5IoMSLhcN8EoB59zRAdMXqA8zWWlUGFMDv5\r\nzFp+54gYE/0Vt8vBy/XHMiJ9tNCPN7dWdG+DS7B5Mf2gbPjCoT3Q0MZiskSI\r\nKk0pYfrxTYY2Q6gzGcoeoXaCKSnypvb2UmSmVXnD8qjLVin+qxbMpi/b6UY3\r\nI8S6qviXcjeegHHBKk0ToA3JunyTtxbK/RkriOckTsDRQsKKGnvuFMeqIeHm\r\nIUKMISabgcCYmYiZZ9AIqyZDtKFSNgZ2jnaq57euQX01koQuUtPyhkAcIVrx\r\nMeL2bruOPW/EzRmzJxRNz4D5zhiFS/h7F2I+kmsJZaiu5npz1kVXQqtpSTkU\r\n9beB5Nd/vCk4oE4f+LpgX9GihkI9ZCRfqAQ=\r\n=kHlS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"fe016d599b297e4e276ef5b37b829b25f0607b93","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.bb6cd78d5.0","@material/theme":"15.0.0-canary.bb6cd78d5.0","@material/feature-targeting":"15.0.0-canary.bb6cd78d5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.bb6cd78d5.0_1678817774883_0.09568383326647556","host":"s3://npm-registry-packages"}},"15.0.0-canary.5f94aa37d.0":{"name":"@material/shape","version":"15.0.0-canary.5f94aa37d.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.5f94aa37d.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a0ff930585a320a0654352a48f2e981949d29884","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.5f94aa37d.0.tgz","fileCount":15,"integrity":"sha512-qoeX9ziZmjkbgLcVCt9JWAs26PUGYTEaITKAWVw/idwqmjuwuYGZNdV6hNdSpJIa1+9eK8SEAIVIWy0jpKVUyg==","signatures":[{"sig":"MEYCIQCAkCxh74H7g7nfabxSIlpg6SCqaPaLI6HdNgWkdiWFiAIhAI7JW1El/BA4NxuyWOVxjuDlWyVut8vRUyg2xv/XN8Bv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkELq8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmonpA//TAbr+VVjzUpAD3gmvFyHriBVuTczxO372meUxtJU4pLisOCA\r\nORzv/IsNDuWUiWzT/ZnE9oLeXZ139LbFJlcEnEWtDABcQgn7s2l8PTmPlSTV\r\nR0vX9j4lqLRjlJwoqpaYdlfuGUbD8JMKye4i8fY8GZ67TANrRPp/CLU4WQAK\r\nDB/yn1GEIsx4dEmEqVVZrWpBoXYZo2E9JR0xiyilfXkyajdyJjO2tzFD/jma\r\nlcgaXYsUoI6NQXPTUhD2e/mb3L4eC7FjSQBwFD5tSXJMatMCNY9bPhO/WLoR\r\n+l0yd2Xa8QwEAxQXySwMgnUG9TY3lXWqbe+dcdDs4+YaG09abF3so9lg5Ze7\r\ngIzZLxIJCh41B5aBQZpjsK3ukCXsH5Venr7juv+In6RHjvVps8WIacU7N0Tw\r\n9PLAOi9fiJ4R/vk3Q3786ruWfSsNKrR1D8m/4faLevPW+5tp99P+hJug6IzK\r\nhN7HRb9t9ioMJ5oWXDSl8G9qbTJf85W/h9LQqgXNxu1n5Kfw/1tnbiRwRE88\r\nbMYCEUv6U2rnp0JbME9fQ3xuxW1foabEkGS3gu5AX4Qp5bQ2PA2gGTXMsPLC\r\nKhQIlCT/a8wYfStntpSKGAZIoCpe0YTL7d9KM1chiU4XmdFFVWdMQQIf3NFw\r\nyPU1ZtzUgDrDiU4GgTefTOIFFbG5VkI4h40=\r\n=o6cw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"95db647ce856eab6b1eba2fb1794f3b0dbc3dd08","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.5f94aa37d.0","@material/theme":"15.0.0-canary.5f94aa37d.0","@material/feature-targeting":"15.0.0-canary.5f94aa37d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.5f94aa37d.0_1678817980272_0.28156664429616884","host":"s3://npm-registry-packages"}},"15.0.0-canary.1bd317240.0":{"name":"@material/shape","version":"15.0.0-canary.1bd317240.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.1bd317240.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3d2d565207643fdb318ed0dc5f5a288612f9a108","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.1bd317240.0.tgz","fileCount":15,"integrity":"sha512-cTo9NB6zpEKbu668CvMP0hs68myt7mlbQPeKj1o/0RmKwzyDxbRRQ0TadG1i3+np8iMxNr/8gFKADbnG4h6L8A==","signatures":[{"sig":"MEYCIQD7ukJBOlP92b+gyxb8CPT95CAfHxRbc51mzHFj0Qn3uAIhAJb1O9Uo6nQKQzl2pAjAswy8AEQhaxjqh1uBcb9pVUUE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkELufACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmruSg/8CLPO1Y4jPDzau0P8BXlfFlIByGZbzRou41lBRazSoXCciDkR\r\ny8B495UNuiT8VRZr/G3XDgHcLf9N4qbwoeFjNIhFjzCm2Pd4gJOHB1mBe+RP\r\nGNlI/jPeleZEAqQpSHA5VvEVLF8ih8LqrWuVMiCkLlYjMWFHrlpXTtXoA6YW\r\nvMxjQ3Fq6rMWx2d/yOt99gE6vWggI7oCsZxajzwjvOlHWbZW2U3Sy99Jozz4\r\nxue2f5FN6N0ovIbiNoeNaZ5b8srYALGeZUErVD9GcqpaeJ9YHGm9B8C7agzb\r\nyLjtg2qdupGVPynHXkrlQy9LreKpKfcezTtcU07rqZyfmtyTVSvlSiWIX5cG\r\ndV6AYLOjfpgD3m9/sM4Pl8GQdK0OdfqlqcaDqeERHMtyJLYe9zz0r14uMWMk\r\nVNE7Y6fdsoFk9dMCmirj3br2laTG91YInv+DtLnZ/K9eKtUTnOzA+kJDA+wj\r\nrBa6k0zuy3DPb2EHyUe4hTRIljI08gJbGxk3HBJ0U7uwAakeWjnuq0BwXuqa\r\n2H/LEAA6a8+oJUzpJGpe5tUTqqYoOlyW+WBO0Jo2hppFJsBe5e96uKwqZf5y\r\nk6ZUJh1mKy2Anxw++PvhGcSuC9XNwF5VVPSeweYzP63hIeBEYrGp2jwjPOlW\r\nkCchb4g56k87vNjvvdn5oFqM+qGbngMDcGA=\r\n=2Jd9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"eef3d63106c71dffbe823b04d07e86a84dfd4d42","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.1bd317240.0","@material/theme":"15.0.0-canary.1bd317240.0","@material/feature-targeting":"15.0.0-canary.1bd317240.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.1bd317240.0_1678818207503_0.4431687681375793","host":"s3://npm-registry-packages"}},"15.0.0-canary.d441d2a2a.0":{"name":"@material/shape","version":"15.0.0-canary.d441d2a2a.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.d441d2a2a.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"569f27e4feae72219b6a4a1cae6e11023f77716f","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.d441d2a2a.0.tgz","fileCount":15,"integrity":"sha512-EtH6fb5C9JI6PQ6JaYejuob0hjx4Gb7LlvcZF1zh/b6t72X+PQwrsJSgRRowjb2heaIyatZRXud6IiCbgrcqOA==","signatures":[{"sig":"MEUCIQDTonF2ePLkGrF282UqJuog7YrFz5AZnhNHbO9MYVApigIgX83BWC1qjsed/ChxFumd+dCMM5QCvGLHV+ycOHzuNrY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkELw7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoMhA//ZcTI51qP1UGtwOXE2JYZ7m6eA8IYggnV5WXt2GkZYkEFoWrU\r\nCjwmIigZ+0FYvEAMygbnCfhoKemXYIFSbm3Iro6jNXHUBFNGKpxzi4UGxQQ/\r\nG63P/LDb39VQ5ybt9KGqfa7JkXMaXB0w1CrhMPJu5l/IVRKypEWPNe28+X+i\r\nkrv6sWvTFAPQ/yLo0v+KtFe2+mdDmdsgVoTN2//2apo4GpisXdEywHHvxAG0\r\nRAFrMn/SyayYaIegl3fPX3LT7RsPJKbYqFOUOJotVLUTaFG3xxeUdsT4eWYy\r\ny6p0Gie0sHuXPm89eHdEoC2hDJYDQRQIfvc8FQCtV9kRlJEm6AvT3BhhduuB\r\nOHSRZ6LQpep3NGRyvY4OVOUNlE4OrCVJB+H38ouSRgZFJVPpFslk1bh8h4zn\r\ncmIyqZvpDwcbLLrhFovljJ80Up+AB9F2PBd+EZCeNx4pVe+5xgoLu/IbxAN4\r\nT5ixd2SQPX3TVaPMkvNitnAQDDFnxbeKAN/JrlrGBv/YoXA1IMxyAwZjENau\r\n0lmnxSgM7HzbX3UXHMA4lrSFBoBrHBGauiyrbaGmOANP7RmawmXXqsNFozvQ\r\nb/nfxnbi6V4TXEx0RJ9jCplmOQeI+cYfDAsTyqttacC7ejMZaU+w+yexCgu+\r\nANOHoScLYjofLQE+E0IrYhyYFdE0V2MuDTc=\r\n=Y8Ya\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"3a1d95c90b2fe34c5c04e44571f94badd66748b2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.d441d2a2a.0","@material/theme":"15.0.0-canary.d441d2a2a.0","@material/feature-targeting":"15.0.0-canary.d441d2a2a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.d441d2a2a.0_1678818363471_0.6395570736610867","host":"s3://npm-registry-packages"}},"15.0.0-canary.fff4066c6.0":{"name":"@material/shape","version":"15.0.0-canary.fff4066c6.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.fff4066c6.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bb75b67389ddbf69a9347cc4a719acf3937a8762","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.fff4066c6.0.tgz","fileCount":15,"integrity":"sha512-qbc8WnQ7dGAm63aJtRS+n8aKM1r9NoKWVp4xMDQOGt76CyEetNpy95LKvaggcm9w8ktYjKYiFUfIut5IAwM2Xg==","signatures":[{"sig":"MEUCIDV8gYRnAoS9fh3hXBWEscR+3bzmKpdhRbfDNnXjhMxJAiEA9hHqR/GuUDM1IKOXOcFc/Q+JMndyzqLwxI4dJEESb2g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkELxiACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrKPRAAg4tISHnPZZtUjqoqTkVYvK8mCjX1ktlqaYuiwjygASzc/c9l\r\n0LCBD8IhZcB1VCC6Bg1dQS4o9or7tv1qOglFZl00/788SBX1VDmqa5BeUIAJ\r\nAaQC8f3MI7zyLUYSwLFWaRlEs0gD/a2gJGVURjJKcnpiwqLRv0/aZad0W7tt\r\nysyR1j8OAfBclIb67acYLyZXeaQVfDH51P/N9S67GbRPzLvtNZwb5YTVA3Xq\r\nDhbREgmF8ajSjJXhPupzIemOXMUdfqxpX8ATNS+Bqb0Ip9faal+Gfs0Wbd1j\r\nCaSCmLjnS/EstPRcPrQ5R/Hs1+2busLq2vlZfG2YlHXujElS0dTFZC954ICI\r\nhd76sCDzDxG45+iYSnN41p1Zutlo5yw96THUh8r01oInBEmd65UzPLriWUD+\r\n9GbTEkVFyM9FiPUnyiC5jRtNts+CsXCpVc1qIkzD4hi0PT6FLS2Ij+xMKv8+\r\nIPWuwQtpPVfNc3ZV0S3iEuGjUnTXYFAhjZLj1P5GY+DgMcv9X2+s5L9lA9Ge\r\nY7PCXIyDAc9liA48mkET6ww99vEAhzPdrzoT8QbxvHfNAN+6opcZwIasN3ot\r\nbl2pQ9M6jyF28daWwxzXDCNZP2ZWQkL3gMIlAdGu4p2DLa1WVgsz5fytRxf6\r\n67liiTsPwZLi3MUUvuLliuwRNe5q2OW2EKI=\r\n=+xzD\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"9d24b185ab8c87061ad27f4e7791690a12e10135","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.fff4066c6.0","@material/theme":"15.0.0-canary.fff4066c6.0","@material/feature-targeting":"15.0.0-canary.fff4066c6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.fff4066c6.0_1678818402138_0.7007989236584271","host":"s3://npm-registry-packages"}},"15.0.0-canary.87809c710.0":{"name":"@material/shape","version":"15.0.0-canary.87809c710.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.87809c710.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b88ca6521f4e5596a1b9c163f47ae627303c57bf","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.87809c710.0.tgz","fileCount":15,"integrity":"sha512-+wLBnFnxB9MAJwkLwUSqAAFFZTQbG9gjCFVS18kWfJfadqifLZReFu3wropnMacoC8JBEuQfSykOzIXdjOSTRA==","signatures":[{"sig":"MEUCIBd4KAxLcHDRzphyCBPkxWoeS9H7otKjMRZcHIWgsWecAiEArcMEnwxeDa6g3rFTB2JrwODUVbM+NKJfqK01WqazLfE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEMAwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpb8Q/+LaWRjLr7ODc/x2ahJsdNdgd3kpmhV+Y7YHVmIy9TEoMNO2f5\r\nl++m6kQkqT64LaOPSOjfQYwWO+qVoGeVAUCRHoYI7k1OmW7bPfbMbpOL0s2n\r\nJDsHmtepcneuwVkwQEkjDPZpU4GjyKTUUME2PAwez5P/pAzHzzOcCUZjp6bt\r\n4wrC7ll8DDxM+EhxPZAPNr+bXnrYgKCzRDDkW3OtBmaCAAdVZgMpwEyCxuUD\r\nM3gM3T6WxlN0h0OdW4sFzAFfoVVG21WoOFoQQy0DqdgF35ncYHUa3BdNQ4dN\r\nHVSOIhw6IXP4yrl0b/3oLDl4KOrIQONrY9boxUr2BHk8zDllffdYAshzb7rf\r\n0y/lz72732qcyqExpeJrZz0TeqtMiw6Fi/pdsEsRkhgJS8UXl4kTF0QgaXpp\r\nlwQBjK6/XoefRPfXPRbHs8nrMm3QZ2fXznb36tJK56BfSgk0fkq/Y7aZcDCk\r\nbiuK886JNILIWIaRNzaBtxaJFajU7VBX1DgDTERbhEUhsBcfQngxHZdngGc1\r\nWAiLwVbhiBxxcRAqjkZVVD+T3Y8x9kcPN+tJD0wUaBwY/X7paUAbWarw6mDw\r\n6n60MpSRLupxpt35USF3t0nEqc/kZ3eoPHk1lTBwbsOsiPo5pyomoJRziWcs\r\ny14lcRDXcfJDoXtPzbUoKPNB0TlRMxgZLWk=\r\n=CV3W\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"ac65d4def7491c4e414883c6cab7e075c7374b4e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.87809c710.0","@material/theme":"15.0.0-canary.87809c710.0","@material/feature-targeting":"15.0.0-canary.87809c710.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.87809c710.0_1678819375888_0.686302400665181","host":"s3://npm-registry-packages"}},"15.0.0-canary.48d30012d.0":{"name":"@material/shape","version":"15.0.0-canary.48d30012d.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.48d30012d.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"96b2d4702574b473d798e2dbdaf63c6c07becf61","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.48d30012d.0.tgz","fileCount":15,"integrity":"sha512-1I1EV5Av0ztVvWn6L9X8+x4foNRILsBplpAqumgC8Q9v4gS9Bke7NW7ilvZxbODX/FCf9mQDTUi9Nevln+Bvyg==","signatures":[{"sig":"MEYCIQCigEPdLnIeV+OEo9zHC9miIViICzJ3oxUF2pgJz7+fRwIhAIGepapK4NItyp57DHFXaMWKN+skXcGsJct4+3FTHz/z","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEME1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo7Eg/+PAwdeveYlW2ix4ecQP9mMYIldPNzYbZRWtEYkBNOTxYm0bHO\r\nVBZaZiv+CwoIlTCQ2VxMzM9ECiXbbSaG3uTxPswzhe04jXiLKQnBfcte4AKj\r\nVnThJvXtP7Zdri+sEKBX7rgdd6rhZh5es5wvVo1rl8Zh6FZguOKXzNsfHPje\r\nTy3oHBUIkB0TBmrZjDezR9dBep5kykPnWn5mD2CDer1P129laKDj+Y2c+EXa\r\nlG72mQLC/s70UB8cA+U/c5mU7uVQnXy3XwkWtXS48ZNS4P4mdZVXXM5ySWfi\r\n+jo6XixV2q1mK0fV7L+DeNXD9alZaJSe58ytW+98mmWD391ojVlb/VNtTMNM\r\n0uocXMX1IKKdKHy2IK/TdNXslivokcTNLgGG2ZHpj4nJfdb9ekq8k7hYLvzv\r\nZbzJsQ0IqJWg9Bn394n2Hv09oDRAAGaLsqJSObqcoWtJpMJ2Pt9da5hrDHGd\r\nNBJETT/u4pnitCWcjed6dOvy1J1qoi5mpXK5tGd2yp+P4w8IJWrMnwHnXYEY\r\nGGKnVJE2q4F8iJ2QG5t/030lTlFX2RgLAHuZaJ7twMn0/DCkdwUCn5PpbV97\r\na1cEqsJlcJi1tEQULvEqQ1hFbbMo286oowq5fYCRhPmnwRMW8UBoIsdmGapr\r\nJI8ugmBbBU7EPjZo9iXNe8bu+lptNMGJers=\r\n=GN7I\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"f2e4b43d20ea58b52a223d31b8dcd3f813d1babf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.48d30012d.0","@material/theme":"15.0.0-canary.48d30012d.0","@material/feature-targeting":"15.0.0-canary.48d30012d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.48d30012d.0_1678819637208_0.0950004005573355","host":"s3://npm-registry-packages"}},"15.0.0-canary.419b23cc6.0":{"name":"@material/shape","version":"15.0.0-canary.419b23cc6.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.419b23cc6.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6db15b3acf5209aea7e2b9e7a593df7bdbf35329","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.419b23cc6.0.tgz","fileCount":15,"integrity":"sha512-P8YxlNbrhTVNAKRJMbljBHBZfxaj4lVhEH/aZkt0MCql+3Mqm2dpayT9wCn+e4zNBbp5QGZcOc1OWXm50viAzQ==","signatures":[{"sig":"MEQCIH/5IdKdMK680jHJt6BpI3PEuG692CzXGC4xc2CPOX4+AiA5YrvObbt55VOyccTJdM85QoQXm3KisRsJstWfrAl9Nw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEMPIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmptNg/9GHAfk/ZJcQfnU2b90hfcf7Bc71Wn122VepHIN/z3+amWM0gE\r\nXrg5ghUPSGDaARY4EauDEBuSZQ10GlNIN86amsJy4twzzeFdTTIuG/lUfXBw\r\n7J3S/O9+KmKLHtO1CryDLrIHtRqyZYYU8+F+F+6KNf1t/WqYKmfB18Gcst2M\r\nxM7qzUpCa9SdAM1NW3Vvaf0fxpI4eUQBO4X/+BSi8gBI03SHXxgIXj63inVU\r\n3A+uZtOR33U2lwFV+xLPsCuPSSYY1MUQV/8PXIWlA5N4xkANY6JTQrxEkMbb\r\nHeB6Lk7nBF8P2e7fAl7vxMAqP1UTnpNBYocxoIKhz7MQEtkPLTpp5igPppLI\r\nzRN3aOgGqAMmZZhQn7uKp8GwNyu2FYedX6GP8i1u5Gl73lpaMSsVuxtbCges\r\n1IvZDKqNJgIe4foMd//Uj1aBMSac6isPKm4c14sqZ8d+O9GtXoxHz0GAH9Sk\r\nBJZwzMHoFzB8o20bbTHhHsCxVBf7H2zaG/NUM3qiQycomL+W0Ie7BfSvdk8K\r\nj840gocZVSKXMDqUiuSx/qBX86XnWUPcNJZQ9qc/ryJcVhoG7+d/MG39ALvl\r\nptDPkXRNVY09G3toTik8dYMOOyKiBmr4UXKngZK4Pt4NZlLx36rZ3XQLlidB\r\nFrNRg3YlGZWPg4rxfDrVLLQMFkjl248idBY=\r\n=NOEZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"3b1188210d22a02ba5ae948779bf92655e47aac3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.419b23cc6.0","@material/theme":"15.0.0-canary.419b23cc6.0","@material/feature-targeting":"15.0.0-canary.419b23cc6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.419b23cc6.0_1678820296067_0.9509850769945436","host":"s3://npm-registry-packages"}},"15.0.0-canary.bf86521f4.0":{"name":"@material/shape","version":"15.0.0-canary.bf86521f4.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.bf86521f4.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f3e5fdbc5d0dff64b1684f6c9adf4b6bc40e5692","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.bf86521f4.0.tgz","fileCount":15,"integrity":"sha512-pNM8oQTlQfB3cYNNDx2ZAhAEdP1q6urmin7ALUl1vFkR6OzzZLMNJCi9JARC8Fv4x24Eo2B/M9bUThnBEWkdoQ==","signatures":[{"sig":"MEQCIFPc1VxRDUzrh7VtRcUrB6MRVPPbt2eNI8dHEHSDW0pzAiBl7WDDFS8UGmgLsRe9LvxwNb+FPReOGbbdr9kKx+gHRQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEP94ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqYAA//b0BhWrxrQ4zumDYC+NUbeOoKwqBZ9UZb7ZibRmUI1hpJkO7a\r\nFIqD0qQ8suEbaq/Bb4DNiLpzHeJW+XgwVEe5DdVcdr4UGYGiZGG31ha3Ax+I\r\nLYMlINn+yZdIPtdwF8f1IjuTseYP+UHIyTEm/Jlv5I5a6I3M59REe2XXNUgT\r\noaH+FIxrf7V2D5xuHAuooRUAULeZzJ3NAAFXhh36wJctbsV74v8JAiJMImBc\r\ntFhe+e+ol5jkO0rtHfuYJHqJbFdgwnGZJRUmUCgxc8hdSBIAkDRBpt/wrg1G\r\n8BCRBxcoArspda40HfU2uRfGO5lUDbiJFHd2USXLFhhxU4aKVAbJQxr7lc9+\r\nrLc1T7HKsS0UCl39I/DTHP4+MLZ4uAXSdcMd1+vRUR78L3/a2zSrWQg8M6HZ\r\nzxE/wnxjn1rOT1AoIxhSUbRmPDrvLsVl9WKu+QDmrCOiYH3/hr4Mj3ESb+q/\r\nW4HIF8Y7Bg/I4gHZpnXjgI7s6LW4jGEEHmwc7SvLUrX4/16OaEuIIrCAlb1J\r\ngjEHfFo/AtN+k+NBLIy0i+MieuhxbDTkwR0vp7Q+sQ3rGLtISxdrejOPKv9o\r\ngAXW5uDldff0gP2vDrH7ZE7HQo0huP8VYXUeHYEkuW213pmVTOejQpY7khko\r\n24V9RCvNs/T8pmT2MVzNr5xdf8HwKUwl6Ps=\r\n=68uf\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"8f5c1bf1449cde9c918f51bd033762d247655b49","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.bf86521f4.0","@material/theme":"15.0.0-canary.bf86521f4.0","@material/feature-targeting":"15.0.0-canary.bf86521f4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.bf86521f4.0_1678835576706_0.8995644903549884","host":"s3://npm-registry-packages"}},"15.0.0-canary.11f3d280e.0":{"name":"@material/shape","version":"15.0.0-canary.11f3d280e.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.11f3d280e.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"74d4ea8eb7f612db026eef91af40aa7e7d5b48a0","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.11f3d280e.0.tgz","fileCount":15,"integrity":"sha512-Mf9B7SE/0G3EHip1nOnBh1RMlgnD1dQJO9cmeCJSGsodlgs2eWl89leS+XszgDcXyYEv4RRtJiAeuwfNJzBnZw==","signatures":[{"sig":"MEUCIQD4PxfO1UO9nnSpBiHpE9K8+Fm8AOcHNtRhSe2CdmvQgQIgflRP7V+Hj4FPyHOoiGXHHz4pfjwodEdoGzQ9agEDxrE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEQ0HACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp2dg/7BiC/ksrKTzwo6+YGUNmdYb3wLnzgGKT+Zd73cONK0bR93CqF\r\noJ4nv4deeRC+SORkIG7C4kCXpTucZkHGb6bENIoIXxlxCQIHRkFKnhMUa5JI\r\nnjyVU8Ym6IRkoIG2TM1eKFu7qObptJeg/5ABMEDdHLtTT0bbsaZ3JeH9BmFg\r\nQ4itWDEoPNIvlpX43Rw6zw+e+qDukpVKWm6zGSTzqNpCG1cD5Lznhv14uYJv\r\n47FIrqXQKbpu0qRlhhJM5Bm8OJqGwrPWKs6Q7py3AdMhzHL6+vTxGjk9xvQs\r\nQk3kp8ziwZMChe10aIWUBtKuQCpx7niqQVKbVLpByeFCBVigtEeh9Rv1KcYA\r\nD8T8DXkgUX+uCc6r6z+6KlsphVqZB0vWzaqsgwiIzjE+jx3cvF2/mHdCQgAL\r\nX0p/Xjyv5FJLOR6IFLVVHihSWNzhkX2ofhf6z0j2P4CfxNhOcgzR2dW3k69P\r\n8LmcLnsNSlaJR028WGFTsAReYB2PUTb3Gwj0nyISzeA0pBn53IahAdT1QEcO\r\nXmOSC5Im6EsOn/6JUCh1M4B6vW84NLFc1wrusIc5/kdXZ+D7lODIgaZ7zYk2\r\ncwP24mtEfbYIJ8/UWedjhmHo1Ih5KKHutJEFm5GwhBMCyBvKbpXsa7RIkXPx\r\noQFIgdtC9wrG2zJQSU7lzFWTvFW//jVh8yM=\r\n=yBs9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"8e5a0971e8b535be016fdfe963b22dbcf1353e53","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.11f3d280e.0","@material/theme":"15.0.0-canary.11f3d280e.0","@material/feature-targeting":"15.0.0-canary.11f3d280e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.11f3d280e.0_1678839046873_0.5182776023049118","host":"s3://npm-registry-packages"}},"15.0.0-canary.b281a409a.0":{"name":"@material/shape","version":"15.0.0-canary.b281a409a.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.b281a409a.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3ee28edf19e100f83899e7f894b9f1d16b993113","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.b281a409a.0.tgz","fileCount":15,"integrity":"sha512-6ibMlVp884jVxLosb6tf6J5HdZMhqNSsvyqQzOmN3nmfjKKEMuLLm6us+2AQ3+T44PgLXV+QGuclKx1+N6SExg==","signatures":[{"sig":"MEUCIQD8grws7VnUinZMc6H9xSRO/LiN8peWT911mhGJxXLCzAIgKIMjGfNY7Lb/Q7kkSIZm2WK1RYKIQ+KZlTAGtNuPhho=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkGc/nACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrj/g//awa5Oe7a73U8MiXl9/XQtgIqfKrQSq0tHb06cRB/Wio4juaw\r\nkbrlTUf/lC4ZH4eYNZ4G6z4wEBuQIGhdzDzJOxJ/eaA0LbhBNlnUtctANzw1\r\nTpCgb8NbD2Bl8n4x0AxkUyR9bwvA2qwNV0iVsoA4qKtVIldS92T//9PhEB2s\r\n6uU+npNYd9OHCBFwlH4LM+X03DEYWmd1TUmoeOECW9B1/R0nldj+a6lMISFx\r\neWjrBCE+w8cZQK6E/dJvqUNOWYuLz2tkN4N4I9wkptKsRbHKm1FdeLRh1tG/\r\ncjsTMeXeHITKYOGHV1Nv/xWrW9RETFtej9T43lChT6kcMn/exHGQEsYsaF5O\r\n+7aJHTrqFsQPkXhpMDzrBT0eHUkfwZ3XKQSEprcl7fbBUcaNvtbsME/BQyOb\r\nGFx/doXMEJFlRpFpF8z+QFD0mC/iYSXflvevuhSnnSN9Ei4PB1TZTdsrJ9dQ\r\n/ES5oVtRji4XFJPq80ovZvTNpUQys5z0iRNU8k3bd63BuJVZqBgFnW0UxvyO\r\n9nTwyEd7PK7fvTssbbWo9RNwIgkmZIpXTNElO9l/s2I24lwYbyRXO6j5+3wb\r\nKndNiyX7YE5WgwrEPlQnIoeap4wRRwVIVyTv8mxSxEUkzFqzMI+oB06a2PE6\r\nvjXJqc/Rfag4R5gV90+/UiZ8IxByIoFGWY0=\r\n=M4U8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"b924c47aadd36bf60d7c29e466ab3899ae4085d6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.b281a409a.0","@material/theme":"15.0.0-canary.b281a409a.0","@material/feature-targeting":"15.0.0-canary.b281a409a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.b281a409a.0_1679413223018_0.681180228123798","host":"s3://npm-registry-packages"}},"15.0.0-canary.39e473690.0":{"name":"@material/shape","version":"15.0.0-canary.39e473690.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.39e473690.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"60f82c55973a34ed5d05122ee43b75f4a039dad9","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.39e473690.0.tgz","fileCount":15,"integrity":"sha512-YHqlvvijWcPf2iw2LN+BlyCwpXz0UAM1ffFRUg3Ej5nm6k5bwU9U0ts/AD9lCgnsO59m5ahxpFFUxrin9mV9zg==","signatures":[{"sig":"MEYCIQCZ7C+/yQOfBxP/gqLIkRPBQEONU7d5zIgrTMR66tmKFQIhAPdoYhYaKWS62TaOCFSmM4kRG6A0GpwTWigqVMNMHf77","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkGe50ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoojg//TrKTWK6KnAFgPXBQog9tuq4z7c49OY0LZd2bmCnhSzUgWIqw\r\n4AufQgoHglw/r+OhBMbajb/07wKoz75dv3e9CUKJYRpEh2AAuQkqxzYUHxUn\r\n4FYdaTgwtwapHuzWaClnGHe0E/XqVI9w42eDRbyaZc84rN+iLgeLsxHQ+qjl\r\nrYxLYQFnYRW8ugu6dLi9AyinTmI1GqB2CHF4c2bfpzlSn/0C6pe5NERekcw9\r\ngkv453k4e+ODykaz0u2xv0BCCqiiNanzwG+wF6t7DUFS7DFC1WOYX1F86h7H\r\nm5Fve91GkQuV9xu1QidCjIGJnLxm2/hGS8m1iuFhfwKERmC8nQ06sG8pRd/n\r\nLh7KaoLylzdIiZs1qhAFyFbaMt8nL3WTPqw3XzsjXe/QK0uCAvFIZlGjzANW\r\nho2b6nts/aKpq4UtCqiZGk4SLBqfeVbse/TCQ+5erO3cOqR0dHOJJs8bf6Aw\r\ndsV/AWtqRHmp/4Vvs7EkcgCRhkedjCZOhVuSU3QP8AztzweAhj+MDQk6PBRL\r\nNZR7V4Iv1bMwgRkJSYUWlBOxkGlTMUSuiZP1EXkeWJCrFP9W4uQW5cLlVi/C\r\nl0MUvHZPhLXGnwmmXyq4gNWm9mRvkMTFNacV3ItakMIgJvfALEd/czU7w1ue\r\nTzKNp5WbC1PlYwcDMA6L9xLXXUsXv06n9J8=\r\n=Vki3\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"2d372eedef7c583c60aff8d4cd51f8de971cb93d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.39e473690.0","@material/theme":"15.0.0-canary.39e473690.0","@material/feature-targeting":"15.0.0-canary.39e473690.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.39e473690.0_1679421044632_0.9835537890540988","host":"s3://npm-registry-packages"}},"15.0.0-canary.cedffb44c.0":{"name":"@material/shape","version":"15.0.0-canary.cedffb44c.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.cedffb44c.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"22bc3bf5883bba5004fd27111207797908d97ff7","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.cedffb44c.0.tgz","fileCount":15,"integrity":"sha512-xCsraLXupsZtzBHPBM3DWvFvaaQ+sJakcYjb+qxylUA5ekWWd194hSlHiQ4x7XXpVqHnGy/XDItWh4jrRjrhcg==","signatures":[{"sig":"MEQCIF+tqveI/5TVzS5O6yASIWLKu+WShibq3atNfocuhSWEAiB4dLC+BN2l0cGGTF918bUZYT02Bm1h8PbVOhQs4fIHbg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkGfAaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqZSxAAiyzTAEOexljFS6Lb5JYsvTS8E7qpbiZDTg0raNpIpMx4edF8\r\nCM60+xryB3X1f0PXYzlJxOmszmC+/7zinxH++vwyQfkvHdHKXSU4X5d1CQ7a\r\ndjCJ0l+oehuNvClQGMk+tV5GbHpwQw7NhB6bNiQASPpXnez+TyFwwa2lrXp3\r\ngVbzMutwNjHAXeSzcuElmrqc0USKiOJQKOdH9mBDhaePInnuDzgcGduDVljt\r\nqdgEi7l+304gFyyAFNuaV4DVFHbwVSQV3bdApF0u2biG/Sgv+7lJOHdIMEVO\r\ntOLl6zedlEZMo7TkUSQ7kxN4hk1Ek3mifmSJ9eMKSQd1xwjJhtT85m5VGLNN\r\nb0T/mI8J4jcrohmyTdJE4WNspnrkcifZPPEV0h8eqVbrYTTOkFYWmG0mfHcp\r\n78Y1mAwdDOtyucjmyRN4d8DXeT+uBwFDhDSKDnfvCGNyb4rqzr46qD1gNBBn\r\n01JXL6ojY9r8f20R5eXlMAPOtniUMUluV2CcCrmt2E+Z1lteJTpOuG43+Gfh\r\nn96tlyU5OjsSzaaTrvF+XEAoOByq6TIobeSFgPQnHRf1sqwhQZOqlZTrIo1o\r\nynNBBZ1dyobwy36XmROpHLWDdzY1RfoO6mlgi49nPiD8oduOZOZqjPCnJ3rQ\r\nFJJC0JGs2uk78IbVsV1mDeOmsaYH7VMMfOE=\r\n=vkqq\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"37783644942291b0c5d41f7499a79b5f61bfcbfa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.cedffb44c.0","@material/theme":"15.0.0-canary.cedffb44c.0","@material/feature-targeting":"15.0.0-canary.cedffb44c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.cedffb44c.0_1679421466120_0.03416304606062459","host":"s3://npm-registry-packages"}},"15.0.0-canary.36a4cba99.0":{"name":"@material/shape","version":"15.0.0-canary.36a4cba99.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.36a4cba99.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f1b3c320dbf23480d643c09a0120b29e963d1dbd","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.36a4cba99.0.tgz","fileCount":15,"integrity":"sha512-D+2Ri0Ik9DVC2tUS0dympsSprPgbiNWUvwmJanWrQi+60mAy/TMuYD0AzMivShUwW0P3x0nrvBtQcrdrQ0dEbQ==","signatures":[{"sig":"MEQCIG1vKxb91ZNAXuStNxeZ3HmOt2W8uMmF44VXmTnq98RdAiBcrCRMsQ+BMgzQrNsUujiLBMB4NBFAT4+Si423I3Vjag==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkIyitACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoXEQ//QAnDEC84q8QFpNaHIf8LfnALhx4rf0R8TeG7+5yFNu5/ztE6\r\nOl7RqXZP86Yq8eFi41fuDtKArbByspIMIMQU5S6hyJW2hBwi8LSOf4qPXETo\r\nTxbhr9cWXm+kCs9oJf4LXDmms0m9KRoH2Jt4tidN7LQuCeS9wgNZ5Sl0HSCm\r\nV8KvvCyDnBskOszyMr2lJI5hnQ8t79JruWxa+mdPUYnrJgNHYzApnR6JIzuB\r\nEolXgu0hYS+oFQpfwXZPxI+XQqPgZvsT/xH7SDAaOtzqyosXSFoMia93WHuM\r\ndEicdGvMGmE2ZGrk/2ZGwB1+TXnFREKLVO0f6L62afJMKxRr90x+cRhER+gw\r\nGZggRlOb9CDPgUcsGbtxVZqpZymEg3kPi6JrtHa9aKPTcbWJkwqlMbOiBBBM\r\njJD/KyEAhjDr0mGOpGpOqqFBcKCdMrftc56lMGa44x7s6iRSjGHyU8oKCgWU\r\nLD5aYqbmHz9VU40CHyik1mi+RPFzCotb/ggG28G1Wkamt/vovZRw6i3RYDPt\r\nB1xjPG73LU9B9qJnj9tlqRhV+10vY97OLcwinyit66SO+ntPfn4yHf+Tybrb\r\n5Vc5GExISYx19nXo7v+kBx+sOp9TAYJ1WgaZb5vIFNcVpuTvU9h08Ph8C3SK\r\nZhHPN+q+oF+KF2mYhgRemNl9ID5YdAwLVFg=\r\n=h5ZH\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"9895102e50a9e7eda73e0b0039246bc56c79a7bf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.36a4cba99.0","@material/theme":"15.0.0-canary.36a4cba99.0","@material/feature-targeting":"15.0.0-canary.36a4cba99.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.36a4cba99.0_1680025773038_0.7490583781949152","host":"s3://npm-registry-packages"}},"15.0.0-canary.ed7e82ded.0":{"name":"@material/shape","version":"15.0.0-canary.ed7e82ded.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.ed7e82ded.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6c5cf63c626573c8ecc9ed7cc59255572400a7f4","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.ed7e82ded.0.tgz","fileCount":15,"integrity":"sha512-+aNyOSuAapKUnBRH/Nf/eVfyT6D5zFkW+6mNRqvc1mRAtC4lGB3EY0GxhifZg5eNVquisV39do8yYQYIV5Lj0w==","signatures":[{"sig":"MEQCIAQ6z7rbiPkGGXMCIQjwZORK+idfUlqg9gJ/I3HFkLYkAiAEO1RplK6KsvoD3loEmWTvUf4r88K/Aa+XT7I/Bo3aEQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkI087ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq8TxAApI3Kvm94GBLXvkaGMDWnNSVitxD/M6//u5X7i9rsHqdQpeXU\r\nqnP9ji3t+p/5QKpT0ySYS08EDW6fYZn2PI3hJXnC9JE0V2wRdXKvbk4uVy6T\r\n1g3/ZkF0/3IOGRhc8YxGw6XilpOF+LVI1zLwNFqvWOfMQeU8a252MQdL4R1w\r\n1nFI0vmooKColu80YUJwkTa2sVR3JN0HewFzwRhVMq2fhaOLRYzPM1JrCRHn\r\nNbjG+doiBhye3o4Y9Xh3jR8D0nvjaRwJNXGH+V0Rwa2d3t252Pd++L+uZ0CF\r\nubdeXJVgHqqcTVYXSzWISy/b1+OBeRRwNymMloGmV4jC3WLpZQiZmFytqfo/\r\nu0IWZjX6AbrVPVKptFebI+T7+LBlWPP7scolGmFsxMNYxe8Dyho48lwbiHDN\r\nPzodUDItX9X8y4BpC7TgqIWKB0SkOkBRm7rc0X4jWOqqwsbgk/zYadR2i5TP\r\nrByeVO79uwGlciuacFZ++JqBml2MCC7vHiHCt8/gMxf/gGK5rBR8wYN7slLQ\r\nzoDuS7zZjU2PrgmztogunSCFJQaoHHRk8EYUYXqB5Ql6CnQJnvk/LHi2lSAb\r\nGjdFDU1cM/mS12P8eNp2IQzE7S+Mama2y1VwjWKzNF6PWcS4ABmkEjl+1JHK\r\nUsfhenqrrr2gqCf7PK5Wu3Ue5B5CHnfYPMs=\r\n=K3s4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"037c17ed14cf732acefb4bf7cb0a6c61f643b991","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.ed7e82ded.0","@material/theme":"15.0.0-canary.ed7e82ded.0","@material/feature-targeting":"15.0.0-canary.ed7e82ded.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.ed7e82ded.0_1680035643375_0.23371414644484667","host":"s3://npm-registry-packages"}},"15.0.0-canary.55093ee1e.0":{"name":"@material/shape","version":"15.0.0-canary.55093ee1e.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.55093ee1e.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fe8083c629598d9d1beecdb75698962f734f86bf","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.55093ee1e.0.tgz","fileCount":15,"integrity":"sha512-GUxrsERs75VyPZLhZEgyORLdElmDkVQzuVKrznbiDUiLwAqzn2dcaE5czt0qCHLp/UgOQ5Jdy51ebsLCHij3qw==","signatures":[{"sig":"MEUCICqCQINLSX61j3DkB8u1vT/X9+PhQDb4hlFtOEzDWwxAAiEAyvZ7t/0xFRFKlc8ZxVHFWDuYXPYVznaarBPmXG8Frc4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkJIfaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqupw//YGj9nm25O7ZE5N09EMOUBzcczz/zw0xhTEQ2H+W7KtRQgPww\r\nHrhaYJvPTCtYHRdO3RpUPBLNqqy3QIzeC416gBxLTxOW+cSSyMOsa6gC+Bmk\r\nXaLAp4qn81iZnOzIG8GaFXxMQO3Vw1NBJE8xtT7XMzizW11ZWz6QiEvffAPe\r\nuL7UigGNB2MXu0CKg/xYujAuKl3TRYmMEOcrbh7PQoffes1QZaIrlQahgKF6\r\nbdYUyoU4bnwLl45trEIq6ixFRFmIx3QGmjqx8uiYBtAyJfyoOt74RKweKYZ+\r\noItNdGZ1Auffr/Fp7k/L4vqSlmC5upXcmzadqiI3edHhbGlL+r4oJ+8mCEft\r\nnA7eyWsO/zlUkdYtEc9KuAEskZZ8e1rr2gw7D0Qom5n9ZUTL2B2kLmGjuGQ0\r\nkq1lLX0WHh1xd/cZY3laY9/p5pS3EaS+zRFz6TwAvTRJ1FwcuTdmkmnXZ1uO\r\nxYX/udeQGRQVMv/4bPkH53e/UC5VsvWZPAW4Xspgc2c/rGqP4Z0Ts9hnkQS8\r\n2Gh+MOUjCoR7Rab4zbWQVHavEqc3W00SIHE/hKweCfO/biFhrXkDjaBYgGU8\r\nMDupeKJS120k6kNEjIK3v7WTphPagYEcARR7jOTnY4VWyCPM9dmJQD+PTkMC\r\nFHMPA9sdTtVnLbxqv6EwRLVAPVV+cOyv4K4=\r\n=N80j\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"98de61151738b5091fc2b0e261c18efce05e87b8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.55093ee1e.0","@material/theme":"15.0.0-canary.55093ee1e.0","@material/feature-targeting":"15.0.0-canary.55093ee1e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.55093ee1e.0_1680115673893_0.5462890299586027","host":"s3://npm-registry-packages"}},"15.0.0-canary.0c53abc81.0":{"name":"@material/shape","version":"15.0.0-canary.0c53abc81.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.0c53abc81.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0ebc8e061587926ce8dd2582273db4e4bfa3fb0c","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.0c53abc81.0.tgz","fileCount":15,"integrity":"sha512-qP2rxqUppgrvbYjrFnHWLqz0BNfLecbEbXpxc7AoFBXdu3DKW6EdodWc/6XYnU411bZf5sSkLPaH6v959td54w==","signatures":[{"sig":"MEUCIFmJ3eLuUU4boIht74tUUr45v+758GwytXJfZYm6BQHEAiEA+4ni6LFqZSsRDtfCj6zS+IBdHDps2ikV/FFieqQR1c0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkL3SXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqlag/7B8yV7vFTRSA2DNxyP44IgqcW0ISKTkdI+O+zOVP45cGOlD6p\r\nCdY9VDNjHU46DWSCGOjb9jDKtPHpiuE7d9Mig2hul7sNGCN8xXTPPyvqNLFw\r\nl3OYQ7RMOSYdniKIw+qVZIAlCtJSWb06Jbc0wWZ6aI1yNEzR5g6UIiQiAV1f\r\nEjV0PwT7OJoxZ01e8M/jjFK6DZBlrFlxYEMmOEefOK6cOF7CyphSYgO88hzJ\r\nl8HOjT+p0cE65AdZXW76R5ESoAOUhBjLqMJO4F7RANWDl0u/r0XxOJiVwZti\r\nAt0S3RMIhVwKjl09YsdNqCubO+q/AH+UZieoWaLcOgmjoVA0RWUM5Sgf0N1r\r\njBWOT4i2YGABgwDUXjnpSrxgn2YQXH34BtLvQmztGPHlMz1gtN56iLMs+Fgb\r\nLntRTcClMU+j3vCSqDnIQUFUEXr2pv+pXygtRee4dL3oumSakKhlZGs428ta\r\nvGezoTaZD9XE4LsausvOCRzMNYJwYn0DIkg4zDwj8xnbGdJVZan7iHJ4f2tv\r\nVDCOk2nLSwV46zF72/c9GHz4iikGI9Yx7R+C0SgEWWagr5Zv6viTcwcVp6Px\r\nXXlNTf58zA6kDmMyo7z1rO64GbPuiKrM4j4dkUK27XQwGm8uML6tSGQz3I2F\r\nG2bWFUW84edC0AGxowpxYFpBMOjVjTKPZwE=\r\n=rCbD\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"6f7be5b2317c28dc06c5b0bf4a8cd44df591750d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.0c53abc81.0","@material/theme":"15.0.0-canary.0c53abc81.0","@material/feature-targeting":"15.0.0-canary.0c53abc81.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.0c53abc81.0_1680831639781_0.09269177422663444","host":"s3://npm-registry-packages"}},"15.0.0-canary.51311e69e.0":{"name":"@material/shape","version":"15.0.0-canary.51311e69e.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.51311e69e.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d7f01d2be18aa40bf468606e031ffcbeb3fa2b34","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.51311e69e.0.tgz","fileCount":15,"integrity":"sha512-8h7V2ZBNhWs9qz/V1HJKqpJUx94IlXKIcbDz+b52xogjASap9Vu8BjCGbhOqUEuFx/9CW9JiI/0kc+JvGyLbRw==","signatures":[{"sig":"MEUCIQDSxTazq6fdJimG4aBLn7+NwhC73iIe6EEzez3syDtvUAIgTWZrFkMhPRPEGgKhWik2MyTMwuRx1u54amW/NqUVg7M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkMFvZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr57Q//StrlK7NAXMEOfBp+LzwdIKZz2JalRxU9B9lJpk1uQtNYngzb\r\nsf6sJx/BT/HDwRPdFQuQUFsu5wN5l10ZQ0/EmJzTfGuJMVKRQRMWrAkYD1ge\r\nTovghv6QhbvKMrvu+Ohlpx0wCkalJZUHJGKR4u85hKNeTkP+DMxRuZmNcb9+\r\nfTOL0IyCRbQ3VcLKTuP0+b3CY8PsQj6cqwBxTrsUzuliexDXWaKjWi4KCFvO\r\nFYwboGS/h+fJlKjES0NUGXopjk1173LaGVAebm9qpSDntuZFwdguz2D+ZP4D\r\nKzzIL4JEENrg9HyLVUEff7UORdOvbUPEPUmAdXbu1jv5fBtflqObjS+xUC6X\r\nuoH8FBV2LLlvSPaZyuEZ48AcXyKqzGQyubU1oyerVJJZQ0t951f0/7Je4doW\r\n1MIPNlb/5+Q26TBvPlYn/l/d5q8A/ZqbjjBuTox8JSJIBLtzHd8PfMx17opU\r\nQOBPEwO4IjFmJGuXdFMB4MO1LTDg1zVP5qqOcm2/mV0f44vkGafRobDceE7i\r\nbbvCAZF7zARUDcewhw8zAL4lY6AHROHZ9SIznMXh6+mdkikCLq8n7j+WHo6j\r\n6xM31G36bAZP6AR0/KVkOY0cjpm5MJttZMs7hPiZuZBnf/aC+S5hpDL+ER+6\r\nEd/obArMHEt739y0L/WFIVPLwsYfPfL7gvo=\r\n=ILxR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"20cdc4f9c3bc9046fb111c8b65ba3e9609585dce","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.51311e69e.0","@material/theme":"15.0.0-canary.51311e69e.0","@material/feature-targeting":"15.0.0-canary.51311e69e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.51311e69e.0_1680890841189_0.4860782210871233","host":"s3://npm-registry-packages"}},"15.0.0-canary.113b1a38e.0":{"name":"@material/shape","version":"15.0.0-canary.113b1a38e.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.113b1a38e.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2b81a0af0c261451389f817cbcbe7d42effae169","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.113b1a38e.0.tgz","fileCount":15,"integrity":"sha512-Av9tZ3XsWCbePPe0utY3+hVzffAp0q2slY3Pd7jEoHd5XyU7oyj+TPebw5F2RKLH2c0w6N/Ze06cT+BZLhfdXQ==","signatures":[{"sig":"MEUCICli4zhuY36G9TJNuFD8WILmK+F4myhZow0ZQN3E6J1AAiEA1N0yR6GzGnmkYfmZjYW3SxaEqoa6325QS/IfvM4W400=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkNIVMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq3rA//dFHOG7x3dBj87bnXSYHeqjIIpT5u3srEwcUPP9zCDBuilmLh\r\nMF2YCwPXq4lUgtKGhWWuNlqhmr/HxSYB+FMW6wOga+/mdshqE1VvuE2uZucI\r\nr5ny3aDDsBWDdUOXQ2vOjse0ow85JxAFIe66OxGe1YwkJHTB7pNL8+Mg6PFn\r\n8x3ne1KVDDy/Y0f+tjeUxscGeSdzVTNEHf/g2EKnmj5M5wsC4apo5WD+6ech\r\nAL3I+j+xCqsNxVKe+CxOLFLypHJgWLiaA8kyducgLjlFwvSGF/m4CmgYx/3R\r\nafV39NjwlKuSuUJu48wU+Q9EiTGn+znTi6YZslLDGA2LwlMZIlJ0n2WewyGx\r\nGxzbJI5uUXsOG/XgKE8LHJ6pEbjkg/Biy2FU0hWd2gq4Ysiwpww40raY3vDR\r\nwelRJGKUJmgJVCBuWfJem3FqRsc+TMpJ7EE52uKy/Zxh1K6iE0vkgthuzD5l\r\n/nqKJYHUDjPXQwkh6MWtvvR4n2/IeCfc0lwbFb1rpLISqrV6hfWHUJTJUq+M\r\nwybY7GG3b1itQ18uMuETPRIF68vbBI5rbxNlqExB//eO4ZcILjZE/eSbHm2y\r\nRARhEOqyjIWQlpKQ+k1Ee2uedvuCZZ2wcGQll9QZ4I5nG40qeHT8AyN+LQdg\r\nUG5XVPuUROwMpbq0PzG/GJOfLH0PFKb/NFY=\r\n=aYOq\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"3613349b6481f716239e1a73c710c0d5fe44df72","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.113b1a38e.0","@material/theme":"15.0.0-canary.113b1a38e.0","@material/feature-targeting":"15.0.0-canary.113b1a38e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.113b1a38e.0_1681163596735_0.315923034096421","host":"s3://npm-registry-packages"}},"15.0.0-canary.ea2191426.0":{"name":"@material/shape","version":"15.0.0-canary.ea2191426.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.ea2191426.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"23d4577b41199496fd177a84b38fbf0c36aa5297","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.ea2191426.0.tgz","fileCount":15,"integrity":"sha512-lhVvSBG1N7N/5cnWyMMXGTAJtwAoXOzxyB/zO/5xG6wQtRE46jLPsaMbHWnxarKXXWuKKnpUFa+if2JAipTIGw==","signatures":[{"sig":"MEUCIQCR5tPZa9Ow2PlLsPKvcPVuIJJawYPneez68QTJ/k04fAIgaWLPUWOMyYlKutpExfYLzV58tPkpzQHASOaOwDArx4s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkNdc7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqkuw/+P69XpFqB/Yle1QYaa+g2vB+nO23KsHLQ0F2DUSDUxjsoRbEb\r\nw+vCmkGcHClHBmlZyJhTK3YX4GYk80bu/5DPxq1GH9jkNeIsZ4XNLbrfWqci\r\n5vGQZZ8+fPQU2/xESECPmTeILCQymeC6OI+7OCffjd5Nn7/TNUPaWSSS8RD3\r\nsSrl+Zw4mgQClrRvleKtApVzhKz6I/17PKoXo3/vUMACO+X1fGTv2AF7dDbW\r\ngDWVIsnbVu1om1gVhnWWv/gL0aHOjV63YesdPOMF3AWsVHnfW2+VOgUdy1rr\r\nZXzTtBVvtAtQMTv7Fte6ipCvlQV+CzdR06F8K8+gZvFm5le3X4HdKxeIexj0\r\nB9S0PnYMqQfS0Y0vvcOrAp/BxZ/m+RkYE7yf2+BW+rQbZx+wzsh7uhSZglq3\r\na6KQ0wdidYvYYZHp37lcWuZwCpE3YxFoIaYxp9uNvvvghpJ0NLmbpd1xMaNe\r\nSrZQ4FpVU8sXlFGX3KntlCj6SIFex1I/18EZd6ske0ZMxtMnqJvcJS+aJyju\r\nMQLGkvHQRVdob3OZ7tbBfn6df9uF5QaIW7mdj+4aHvcZwevXMZ0ocamsTRgF\r\nchkCMr4lsX0SnL9NBsISCjihYsVZ15++rpc5d5xskygpvTLZDxnLN2bqqaeV\r\nEfvsWk5J2GXc5favuZrUy0cq0+ZP8tF/0mQ=\r\n=jghI\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"8723a8c5fa13530d57b1651464ec28e9ed1d4bb2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.ea2191426.0","@material/theme":"15.0.0-canary.ea2191426.0","@material/feature-targeting":"15.0.0-canary.ea2191426.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.ea2191426.0_1681250106991_0.9646968820065385","host":"s3://npm-registry-packages"}},"15.0.0-canary.5a5c38538.0":{"name":"@material/shape","version":"15.0.0-canary.5a5c38538.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.5a5c38538.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bbb7f40dfcf388351dc42e6a8d6088919f0bc33b","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.5a5c38538.0.tgz","fileCount":15,"integrity":"sha512-ekjW/Sr0rd+LQ06P8VtnzjHPpuGhW8rD1yhIy3EsItlqzcfmPKTMb/4sztbVvwHwesMEx2b9l1ld/SVLzqIL4Q==","signatures":[{"sig":"MEYCIQDGY+8OybfkDAij9dyORg/l9ETtuahM/+Ob4GBEYJsIqQIhAILXa6rLo8lHg1Pbigxe/xlrtQS+xrU0dq/D8XJu/xar","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkNd9eACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq4Xw/8DSN16WuGX4a0Dc0aFGv9fBXahVa/swTfTB4/l6t1awH4q9hL\r\nRnNpIgvGGWGwJc5rKPVm7JmLB3flOuBe7ILmCYYbQqEfclcK2Y0JuLGy3Tic\r\nGJ+Ye/TnjcokbTeRMr98KOzT8asN35PvoBP8OUl1WsofIiHC528uchdAO2B8\r\nAZa86IV9VO2+4wgF/ACWkqQifIbNKY89QmxDXD1wrKtePMyeYaikbC2+Qu2F\r\nJdjmhHOqWOkooo+UMAPz3V/MmYrybEKGxWbCoejHmGvJ4dK9d58AL7UHCAGI\r\nfT5LQuMUGVMIujzpt9kw2bw5jBu8t02UTJt2Tm6mWw8DR4wECQenOc7SZdfm\r\nfRXTuWmXz6sqzdxscvj+V+HZ64GYDWgnqlySxxALjQmpzFJBBpP+UqnKa4x3\r\nmaEqD/BiKsDJZCNfFx3pxJPExsIzfGSJuhc/G/+VsQ37iwcqS6YtUrmsAzfh\r\nl1ijnCHXqu6YqLTkNvrs9C6KhJgrdvigfIdvjqM+yRGNC5/Gcj7H/VqAxwjE\r\nwi5sBz20JlxydbihkXCOq5PnS6eDckKFitvCLEcauroXTbaPmIqNCHspFGQq\r\nYxczNtZrcqzOLCXTkzG2O4apP4Cjn0kpmvlU3+q1Y+FFzdc2di+7kA/f3/HZ\r\n+uT7e/ctfupRGDohtzdql8pGD6C6eem4XNU=\r\n=897S\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"b05f00c0040fd0d1250297d4fa4236a5b6b00b9a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.5a5c38538.0","@material/theme":"15.0.0-canary.5a5c38538.0","@material/feature-targeting":"15.0.0-canary.5a5c38538.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.5a5c38538.0_1681252190560_0.3384621969967705","host":"s3://npm-registry-packages"}},"15.0.0-canary.e4b5ea7eb.0":{"name":"@material/shape","version":"15.0.0-canary.e4b5ea7eb.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.e4b5ea7eb.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"197ccb1db9c26123b63f93d145592efdec089660","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.e4b5ea7eb.0.tgz","fileCount":15,"integrity":"sha512-J/ZfS769TKX53ScoYrx0uqbr0XV2kmuuc1afqNfN8DftKvV7gmKTbZQPnSQxcJNQICCsKoPgy0HzFXvSqvbw8Q==","signatures":[{"sig":"MEQCIEvfDqI+jmlq8iSatEKoVMHWL4g+LcjYBMICafiYVrJ2AiBUzPKXvby7hcPY84UJ6WjHxnMYOp7FOQMzCbHebK821w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkNedQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr9qxAAoqJ7HAvQGE0CwhVVNc6WGcjJ/efXD+BXC2WJaflOmWiVOr5H\r\nFhX3XG+nWNEyMMVje6DdT2ksNaEhC+tbaFjkrMN+OEIcKmyJBn7Br2rGIVw8\r\npWs92X8QXKUFTxGM75mHGZZdH6Wf+KNRAl8UuudWX4KWDyMEk9Gd1qSCoSb8\r\nfB3ldw/ydUn2YLEmVJgJ4Rk4gt/ApYe9I6rPip9jsqU591fP7lTnQBbAGybB\r\nzUlWKTdzTBD25pT6+niv46GoLKeB843uNPXSv9ud/G2F07iFYwrnxs2VwcAP\r\n83DA617KzLBrMt143acbzFlM+KTrAgwQiS4Xe6p30596x/pDlBvY/fc/24MU\r\ncOVpYHt2PxUQk+Ms9Ozxl2CxuvWEESaSY8gFygiyiOh8BLA2S1O2Zg3n230E\r\nbb/1RpXzr/SIgvjhxZSDgelOWian2J06f3TXzTy2hixqFhMKXGJYiDdjENSS\r\nrwkUsrVzqIwd3OmZBAJDnQqq21NoDgv3x29b8OJ247KMJkKiERsegFeJiyu6\r\nb3ynwKL6QfGffl+HfutCg4LcXaMRkSYPiZdfunejRGHbvbbh8TrHgpp+8l3m\r\nC8BKZbWH39MwLjifAnDk3nftrORnMfuzfyWhvoX6dwlxqH6gBlP0/ftSD4Fv\r\njgAyNuIwFzBAJQRYiQcmAuo7he4b+sVyZbk=\r\n=NhzV\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"cfe1a97277f39a7f96340673857504470245556e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.e4b5ea7eb.0","@material/theme":"15.0.0-canary.e4b5ea7eb.0","@material/feature-targeting":"15.0.0-canary.e4b5ea7eb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.e4b5ea7eb.0_1681254223837_0.529655545505443","host":"s3://npm-registry-packages"}},"15.0.0-canary.a094dd9c1.0":{"name":"@material/shape","version":"15.0.0-canary.a094dd9c1.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.a094dd9c1.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8ee6a9987a1d0c38a3bcf0b756a6d64e3b8638fa","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.a094dd9c1.0.tgz","fileCount":15,"integrity":"sha512-sSX8DkDm+U0TlUIS9AB/cX73zHN/7AFSXQ8aDm8XhWpH41Vl6+ARvpWjbFiKqABaYd2DYqugk0Md9MySP5y99Q==","signatures":[{"sig":"MEYCIQDpfj9EWLFlwlZP6NHXt5twLJciDDPNkd7brUoWu6lLdAIhAOMe9yoBO6t9+Ry77nwXiQg7oazwA90EOjO5zSEY71lq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkOda4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr6XQ/+IzEwf/AO52bqp5igf20qgNr344bz5pOhRfk2Cx4P8fGI+Yed\r\ni2zi1BR1PcHF/rfGuuxoVBWudgmxxOgDDv5dWRXhY5VrbnILYAQiwusY26Zx\r\n0LVHlJiDCjikbM9imyW7iMfHX/4rVakdy+VKtGg7yOHVFLh27EfvpmR5kEoF\r\nxtG3eYBDxwvPmgU7YQ7Efg16gUW0/4s337nQQE16R+sHnUxCB+lU0kEm8vCk\r\nBFVt03s+CLS4fdcZtRS1GByu1ykNmx3Qi/uiNMMkHiQf2XSEI2vqbt+iWWD+\r\nsnBs/MbmNoaPh8pRIeAbOhdA1dzV+8hRb0Zpi1K3WvVGv0j/7RUDO5fqFjei\r\nwS4UnhvykGsGeCIp4uIXHfvJ8zzKDV0NunovjRaRJ9HkS2FiuaPkGSSyWqba\r\nuhPuqYKh1SBgjq3BsjwziDxff8ISptnsHdn4deprkry+oeF5TxMfbQYDwZ30\r\nTSm7pwGYhyCWugLCaZ9xNOPd7+WHO+tM9Vdn+fk0iqKif6Vu8WC9vWEIN60Q\r\nY8NoLfqoFFG5dJqzBR9VfRj0DF4DMHfa5Er8ooEP/fPGd7QMD39dogQfjd/K\r\n7zYzH0cIEXpGpaGXglqLPJeIVMd+V7/u8W1LorGCcybql20pXHWILF1UOscz\r\nyAlonHlF4/m6TydeNii5wg9/5QPEa6g0tEQ=\r\n=wA6c\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"aa5164e66f4afe6547ceeadc8a793bb4f489ff5f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.a094dd9c1.0","@material/theme":"15.0.0-canary.a094dd9c1.0","@material/feature-targeting":"15.0.0-canary.a094dd9c1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.a094dd9c1.0_1681512120550_0.23149979480681848","host":"s3://npm-registry-packages"}},"15.0.0-canary.f771b091c.0":{"name":"@material/shape","version":"15.0.0-canary.f771b091c.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.f771b091c.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cea73296f6654bd5a8d61f56740a6ccb896cf344","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.f771b091c.0.tgz","fileCount":15,"integrity":"sha512-RIWOuhIgpz+N4ZniBk+YbkepuRkP871Y+Sz2MuW/5ed+a6Zy4JjKhgusMdiHRc9AEkqorVZRwjWQFC1iknkGlQ==","signatures":[{"sig":"MEUCIQCB/M5L3Wfj+MIOu9Uo1DiaXqfMByZ9NhycDVruAoslOQIgbtuxE9O531urCQutMeu/YeH8/GwJwb6pz73lj58G2D0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkPWe6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpqqg/5AYq8HHg5EzsFokw9GeVV2J0utJMx3fKu6bPSM4H+0ujR5ygk\r\nk3CAfZNVynazFlp3EYxVEOizkClTggIzSLv7P4GtIyxI+KAvXkQ9iUNysCqc\r\n3KVLDnoErBCK6Z8KhsIswIF/az9OpF/OwUzT9R1EEyXAsoMyjXUpp4alsZbS\r\n8YHNV2Jd2QoUJ1AvrtOmPK/hFOiRq/MMICcAQX5YdnpuUOF/owfi1el3Tbd9\r\nBFrnp8XFdKsV7kSv1t0GvyLPXVS5kbkLiQ8uM1a3XfvBsOZh0ZZDHU4JKs7Y\r\nWQr4TcxAElmxUiF1m9LpIZHd5mVS7ZbSj9OunogJp3mGu8oyBVRH7cNpXqjs\r\n0qdx6Kv1QoyaK74WnlWVIou2/vfygoKEtD7t3ORkXcfrTaxKZXdXyK596TfK\r\nRTszYMjq0AKoygiQc9JfQUfWxnMOJ06FDkObDzwpM3n9gCtnTBMS5JZ1YzTk\r\nt62Qq5ESfMeO/c1j6lqZzO5q2Xo5zLOlgHTar6QtvCZs0FxBzvLqMhr8IPxD\r\nbHUVy72VbBXmYH/xPQMF3g2mHz0OUmLjuhryF6pAmfLevlDHA/Y01iK+/5fx\r\neMn7TYCgud3WBvgS/4uo5AKKRtmzCDsVFMJoV9Ad6AaUnH47UDK2CxQJITEL\r\nRILhIlV1MFkei1VZXzqrekEEYc5vBUBjUqQ=\r\n=npz6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"de0e292c8ebcab887041fc4a59b3c0172f4d4310","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.f771b091c.0","@material/theme":"15.0.0-canary.f771b091c.0","@material/feature-targeting":"15.0.0-canary.f771b091c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.f771b091c.0_1681745850624_0.9072663519986581","host":"s3://npm-registry-packages"}},"15.0.0-canary.79b1b612b.0":{"name":"@material/shape","version":"15.0.0-canary.79b1b612b.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.79b1b612b.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7dea4be7c8f2ef2a2acee4537a99fe129f45c3cd","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.79b1b612b.0.tgz","fileCount":15,"integrity":"sha512-J41vbE008/Bomt6IOqBmJmRWMHyLibQwBTqLguP3MHKg0VDnkaqNXxMSgRYbj/fDDAQ0P8YN1ZwUbYl6x8RdfA==","signatures":[{"sig":"MEQCIDqE989PkbMO7zm0N8KufMUZxMTdcqGPETvyuCpqlOFGAiBcEQ2/u/9EXEy3XZedIiGsjFYjkQxuCOZUZWm2U4o9Jw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkQHu0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrS4w/+I1CiwohxaT3z6dUD5aPgTNuY6jDkIGD6E5gXi/ul+rb0C5p7\r\n5yOIchEZ3UhX7q1PkUSel1PYQgFcZ1D8hje/GH23qnJqVuoLra3Ws42qmWlF\r\nhg5L6mDFxfdOXF3aW8A+OtoUuVGqEaEUstYukoeC0LiMls5ABr2iuXBB0fHC\r\nv56N2dVu2JEjctfu3RXGrG0sMj3kRs5EopWR1vuEtY9s2npwdD04GUf6D88w\r\n3YuQwBVYLIhFJ+qWPhLY8PFUayBNGrmlBWlh1HjUw6rN1mD+NQb3xD+K/MhT\r\ndgSGYTHmZKmH5YfT/USWs+p7XQCA5wOnpaha80GtGrNZ4+XcIxJt90gWlj9k\r\nTvkvnaCavtk5TRjlecs+X9pm9Q/GrRU+EGWsVTLvWA190gk6rSrnVJucBlTB\r\n9KPN4e77+7OcFAtTCsr3jt7tZchtty7Ka6Y9nFEj9c/o8ykj6Er8YInkXT+O\r\nSyHfd9hrnJIsJ9GjJ7CP38x9yZRSh/dhttfanKQ8cjyi+zjicpvdUsW7KPCW\r\nCh/sYDgUO9BYbFiC838VYTx0Cye8qfpONqH5yVguhDrucAQLeBVOOBixp5bl\r\nNnOpl6aKnH7h4Q1aAz3x8AQuIVqYsMUMQK2AwbHl3x/ssTS9Qv0j2vY7psM+\r\nI9460Vgg3YjS08OtEMYsZv1lBGa46bK0hqY=\r\n=MgK1\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"c8248a1b49ee37b1782b19aaa49b5626c914916a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.79b1b612b.0","@material/theme":"15.0.0-canary.79b1b612b.0","@material/feature-targeting":"15.0.0-canary.79b1b612b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.79b1b612b.0_1681947572467_0.9874871564793946","host":"s3://npm-registry-packages"}},"15.0.0-canary.6f50071e5.0":{"name":"@material/shape","version":"15.0.0-canary.6f50071e5.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.6f50071e5.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fb899dabdbe9dd143f33d106213268b72bd77e63","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.6f50071e5.0.tgz","fileCount":15,"integrity":"sha512-d/gI9IOZTZpya+PETL8FC1d2bnwvwg7IeTIjxUzX16UlGqQKUcoIS2IUwbMUQiKx6W1bq3OcLW4+4ADbY+SJkQ==","signatures":[{"sig":"MEQCIAOtsejbXLf23dGSXds1oI50WkOj9G/M3ZTCSFm4D85QAiAUqbPW7TF4jwcfpVRG7EZR/WD7BovXEy7ibCfCbyiz8w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkQX22ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpUChAAnxxb0YdsSMH3Z9v5VmAnzU5zhOQmDTtK+UMMjgJ237e3Ytvk\r\nxtrbvf7pdEW2H2DaVt7IjdcKuTDbMiCLtJaeQTna3PCmKkPyCQlKPFcjdEeE\r\n3LqSDEqpl6KriDVbn2Y1+ICIczLalnnz2J0RAF6uubTUW/QYtXgZFYWlYhLg\r\nGnORkgouS2u5VE7Bvb03JJ1jHLiFUZwHsUe05l/1jmeJSZ5W5Zd01/xnZcr7\r\n0pzMnMlHmriicnjYpT6wfaS2+4ZAQmiagpdRAK4Imwv65FEWdc/8Rl6gd8bO\r\n/5GEL8VIIOOBePpnp+YcQrkvkbPjaMCfNpW/G280nfFiFr6Bv1R6UFR3hK+o\r\ndCbuIbNbHmFdB2N0fMM82r1Y9MJKXU6iu0gz3p2qDi5rSsLGQV/za2Hkvxx/\r\nt8Ehin7Kgcc+tnVIZD1HuA48dqhEUZc67nF/99kijzOPz/3QeMMuKHtTn8Nc\r\n0tZ5n9a82RhU9zJTU2LTYSf2z5Ma/HtvNhM9uDt0Q7JIhs56MkYiVf3P9u0R\r\nfWpKcY4MXIPVKZvXaw0lr5nY63hWaxOAi/yFs+StuE4WzCsX1VHKnSblNV7Z\r\nYdL1HRDHzHUHif7bIm0BEf+GYLusfXuLMsq+/J+0RPRTsaLzPilvPGWAv8b4\r\nVCDmLSURGoHLmlARKfRQZGSAbxuTIbHNUOA=\r\n=E+5L\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"0a5eb7e7a96b7f207546983c0f79d6fdf23f5228","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.6f50071e5.0","@material/theme":"15.0.0-canary.6f50071e5.0","@material/feature-targeting":"15.0.0-canary.6f50071e5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.6f50071e5.0_1682013622615_0.4321539594880306","host":"s3://npm-registry-packages"}},"15.0.0-canary.ef754381c.0":{"name":"@material/shape","version":"15.0.0-canary.ef754381c.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.ef754381c.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8d643fe222715cc58bfd90172c52e27e58ea3fc0","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.ef754381c.0.tgz","fileCount":15,"integrity":"sha512-q72+BZk11DCcd8vv2yO48arv4s47A0ecLK+/Hf2OQ7QgjRaN9K+WGSN19J9p7P/ragCcsNjEgYPWBnTvuyG6uQ==","signatures":[{"sig":"MEUCIFIYMoS/4WHvts89lgkrr9rzxOCP1c1FwEQLS6S60/kRAiEAhd1SmunNp++nr9TCRaOn7KwqtRCR/hdky9FFasgAVX8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkRuuSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo92w//U/795iIi87pdJXZjB9Dab+SfmyLEWU3tYYdyikSOZ7luidsm\r\nD1emTatA0Mp/f3xNL/ZgyBmNpJJiynbf38nrc3GAh/z0EXtioCHU3NkOxPr2\r\ncVNaZRj00LI2TXVHZ0dc1GOxnqLWTKPfpsWGDChuvtwOQCkZjvioxt29vQ5Q\r\nVIOYhV892edwlLeo66BOZz9eOV18yBVmWFcHTljgKOFLOPyNfJnEpzeSpdkv\r\nk7i4585UekeUg9babbpflgT4zBLHLFR8HVI9dYWJG7Ie8XHoKtwF/pKkRppH\r\nVLDmnru7uJF6kuDeEFtwO8vOHorsdXPir5wgcg6qPj+x5e+MlyT3hMdlgR9s\r\nQx4MSu1gFU+ArxJj5QCvkSvYpiTncrRT2sp58tZp+1nGggaX7GsMKDDBrFpY\r\nilPMpKgqTq7sWlvaxrhUmyLkRK7iPKCpwI6W4oevVyrnpSa9QJHUQdyTqwWS\r\nLvmM1VF/AN1Fhlq/ggoEUHTdZnU8N1qq1/ySHxq4Jt69ISkskCSicQdufedJ\r\n8ST1ojUkYlE3QUMOloPjohLPUUxW3cGoNmbj9sQPeBL82AHvMmowhPRekmk6\r\nqIE/TnaVCrmXs2ySoSteLu+bI43ESwW+h4t05b6CnPF3bNhx8+hw8JNgAmrO\r\nxcYg2+nPrvpLGtYYfIdigKFMx9Liuw0DFsQ=\r\n=caSg\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"998bb9432e40056ce6ec836100d9a46f72ace249","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.ef754381c.0","@material/theme":"15.0.0-canary.ef754381c.0","@material/feature-targeting":"15.0.0-canary.ef754381c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.ef754381c.0_1682369426032_0.2893003628483082","host":"s3://npm-registry-packages"}},"15.0.0-canary.69ebf61ea.0":{"name":"@material/shape","version":"15.0.0-canary.69ebf61ea.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.69ebf61ea.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4ef855d03786110265be3e9bbda4afbe0fb80da2","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.69ebf61ea.0.tgz","fileCount":15,"integrity":"sha512-9PHO/OlZmUHxm1r4/Nzqw6SKak8ePy2B8Cg+wjgV5o4gd6SwHZUJ4b3mREouRFIw1FoQusxlg4jelxOcce1Uig==","signatures":[{"sig":"MEQCIFiFe2xQjmhypLfNIr36H1tA6w1KMtq9iH/dzhyuZYArAiA5fDOERD2sH/5SIZCxYYOT8EuR7avw4M53COaIHS3OMw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkSq7zACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrJZRAAggmpLi7WMhVkpSy4HYurp6SgiabmAQsogKDCBTkJYEDTz/70\r\noBs4LM/7b7lpXUuSESwmX9idvfxYX0UK9ue0ciWYF5wf35i0gUQy6aY6JHdR\r\n8O278fPDuXnAnHwC/jYQzlHtgZcvGSaDDb+0DRwcxWHVX1Y5dEjg8ELLlcZ6\r\nc+q73EEq10F0mIyzjSBgJO0x2GWS5i3KnVEqblwSYiVQ3N+XRmnVhSo6T2P8\r\nKyKmVnqrBjxMc8kMoRL70ydbKupF2x+9Zbly6Igqg8ey1KFLF9lpahGGDJFz\r\nbNeeRfb0z6EM2O5Ex6r6EkFVFCT/zN5VompyH3tdLz42wJVbLxUXZT9trSqY\r\n9qy6bGF087W2C5Ncy56NDV2d+szQKy6yEpiOihI6wjpoYrU0j7T6WPxcsUc6\r\nGH3fEl2FiKEdsNmXNaGEaKfPdW+S5nsBOUfDlx8jQ/7tLZCRThbovu6yJTqU\r\nP2aAslZv6LR9BIfMR5RLi2lxdi9iqkPcDwztUNQyN/m6iQC37YdgcBJ+L3yd\r\noOsX1tijVYmuUyJIcPeC+Pq2HlWPkYADMS9rTghsidqXu1Dud09VC1xwMJ2H\r\ns0o5foS9Pi4Z+lv+IE/N0gZTkU2Y3aq30uU3EV66Fp8DfEFSEkRumk66wsak\r\n2PdkNCQKegMi3e47spxYoE3A9NIalH4k24c=\r\n=ll97\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"e68ad025642429a51f137e9f3fc853364faf0622","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.69ebf61ea.0","@material/theme":"15.0.0-canary.69ebf61ea.0","@material/feature-targeting":"15.0.0-canary.69ebf61ea.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.69ebf61ea.0_1682616051235_0.8075008491543025","host":"s3://npm-registry-packages"}},"15.0.0-canary.b90be86de.0":{"name":"@material/shape","version":"15.0.0-canary.b90be86de.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.b90be86de.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"977260c2fbba4e7419415acb2eb5c1a619bee38f","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.b90be86de.0.tgz","fileCount":15,"integrity":"sha512-Ewsd71gdcXNn3u//SGqVCuNHRJm9B3yStJGNx8JaELDkwaeRjTxvzMRyGNYl+5HXUZWyQJWAIFdk2v6AuUVtJQ==","signatures":[{"sig":"MEQCIFzxDNzJ+GHgyblWlAw24SmF4NkpRKISGQ8Y+SAwuWfHAiBSW9pDPhUEMKyZ9F7HAFAXqYks2B3+yhtx8IvwuSaG0A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkTGLyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoQSRAAjI4D1R0kt2rds6d4oygIDYX5svbtm2NUZek87psZlbjUoH54\r\nIDOj68BGXDOQxpJK0vxNmWqnuHcwaWFqmTciOmvSX7XhAJAt/fj3XOqsqFwZ\r\nVF+3JnuAmYiK7aKCX43tgSkzZnijNB0JRxqOg/rbXxYdv5chvJr/jx5PVPjo\r\neAgCjEtDFh5i7MqD1rgZ2Yhn1GDBdzx/Dsqh4HEtUnDiYZvp0XjX+t6H7F6g\r\nLJDj6Xcrh1asHTN/AOKAyLqF8xgmKlOEqlcsy3I6voB0liri2VCIx6Tprt3Q\r\n8xz4rOvusPr6OmwOK4xUauZvhe5n70krWa1YDbqlWXjC1iZkTUlh6De9e6gN\r\n/HseW0dOZBNK9/ONcj/iwKsMggRIdewmzJzfYvq16ISkgo67WlBxuVp8MYGY\r\nM1veCbTC3yagYyUp7k8CWrvqAiWAS/bNNI9VBs8HAeNzsyJo6CFY9RuGoBrR\r\nF3olVyaZWPPSOqTy++is1QS6vf8398AUWz/d7uTu5+dSiocRT8mu1LbF58lo\r\nS7ky1JfrLoCc2e45gYLjZ6t++gAwB6yk3auBzvvaAK8aRkyQd1ofxsrmeqGp\r\nYuzbGtCrAOUsKabmcnnljBSagSoGgj5krOM5NUpjxl7SFkfyM0MyaUK39hEy\r\n7Iw9Z73cBNizAtG66tZsCxHXJbE+tdEznKU=\r\n=SiIy\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"903a4c00d6c4501b4eae8ac0007164ef4a97ce0e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.b90be86de.0","@material/theme":"15.0.0-canary.b90be86de.0","@material/feature-targeting":"15.0.0-canary.b90be86de.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.b90be86de.0_1682727666339_0.3675305878689241","host":"s3://npm-registry-packages"}},"15.0.0-canary.51f9c0c28.0":{"name":"@material/shape","version":"15.0.0-canary.51f9c0c28.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.51f9c0c28.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ecbf40a59fc3d662ae0c2179583e1347dd5c459b","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.51f9c0c28.0.tgz","fileCount":15,"integrity":"sha512-SdJEmNYyhvlITE2sZJuX3yygl/3l6N1Md4mKT2tclkY/eYf+HnHZRJvUpE2KnWMnIAvVdAljhU+eYZfalAvH7A==","signatures":[{"sig":"MEYCIQDSHIBZd6ASMxYyoOCMHE47DqcVxZvgUNHjPXfV0jB6GgIhAMZKMtJTIeli/oBguMNsz5bXBHEpEnZurml0FSF5E8Ya","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkTGU9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo7SA//RHqfAORViFQFKhd50jJMfoX8I7SQ4nNGzfctzs2AQWt5/ijS\r\nAZNPoS2q0oflA7OcVLnQGQqZh3sMRsQCO5qR0pND7UF+fNXunONmUsT2ZqK8\r\nabOAnVPFJJUjFos3MQDfWTIjwTg+Zh6CoDj/NSpp8rCBAEgiewBglbUh80xL\r\np3paJ0E5rYNLW9E4r449xv4c6RT3vchnY+ng9UEq0lpsiE6Kno5dKCC41Vao\r\nmhCXunSh3ghW5yHgtAzlz4l8Ut/QqVl22/J0cX60m+6QzEAff5GE5Jdui2cx\r\n0zp466sCN8S5V6P8vVp/FZdBDY2OTuoqPldOFa0GMeyKYj8Q9jgy85BiLrlT\r\nEQ4EV7voWT66nu3lbzfCV1DY4EW6OeZtMYlyvMImwJFo2bv/wENZFxFkUMVJ\r\n3lO0Oma8C0WfLVPR2c30z/txZ1sMTqICPWEo5sNHb61CKytVzrOeUddkYCUH\r\nsjIovB5Ldy04YfwcfT33XL849Z+evjNCcAaKropioLVEjSWH7ydZTIDQdVqp\r\nrbppv2jO1/lmEycanX1ApFj6eDw17SHlfqo7XeiEj028VWlGibXYWxi4lK03\r\nWr6IQ4MC5/oJeUZftueXicWjKpphr7zK3Wa1FtBnVpxR4/BNwhvb2TbEZQ+y\r\nl4Ok6OZkSIsnX12TRsMfLh8StIKEGGAfgxE=\r\n=we5L\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"87662f1719363ac8e600f73ed8a7795c25d8add6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.51f9c0c28.0","@material/theme":"15.0.0-canary.51f9c0c28.0","@material/feature-targeting":"15.0.0-canary.51f9c0c28.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.51f9c0c28.0_1682728253078_0.08568264409534421","host":"s3://npm-registry-packages"}},"15.0.0-canary.4e840d685.0":{"name":"@material/shape","version":"15.0.0-canary.4e840d685.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.4e840d685.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"701b959d4e0f32a0e546ee59dbff6096138edd48","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.4e840d685.0.tgz","fileCount":15,"integrity":"sha512-qS9Nj0S8hXBdoFtKi5OSsgK7ShaWE/rNYK+PTo/FsfC/qqLnpey89Im8Z+lHmiMJ1qDYUWw+uVM60QtGn2dAkw==","signatures":[{"sig":"MEYCIQDPnxa0f9XVIDm25oCDEAxg6VtbvJRKnhWG9w2oZeLwiQIhAJ/FcKGTL6GVj+iCJP64f3aFZUnOC3W2Zc3QMhGuwYFs","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32519},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"feb1f9f53257b520aff6dfe5dd1a15e319e73a40","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.4e840d685.0","@material/theme":"15.0.0-canary.4e840d685.0","@material/feature-targeting":"15.0.0-canary.4e840d685.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.4e840d685.0_1683041577963_0.15617010528778774","host":"s3://npm-registry-packages"}},"15.0.0-canary.10b8563e4.0":{"name":"@material/shape","version":"15.0.0-canary.10b8563e4.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.10b8563e4.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eda7f57a0c0dd9a015a2218de29d18e3efc416ab","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.10b8563e4.0.tgz","fileCount":15,"integrity":"sha512-jtaIZnaxBxPzTcvUFbisAQiuy74SAS2phKMi8xr8ESmJEiAP5R1UAB2L4cZqjlByFfy85tutCHJz7SPa0cswfQ==","signatures":[{"sig":"MEUCIQCYtXf5tHRRyMwZevzm6JPe/nMkE/RmbdMNgLuhLt2VugIgP/lVvmEV1ThHVOWJIHYEV8ygCMhFIxhnzTwdkhi8LUM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkUZ+hACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpDPg//Y2yMHtr3bOjdsM8OeS+Bn/XtsP2gP+k0Hae5cW+pDZV4G0aP\r\ndV8aWlpvyKzbQvSHt96q6NKZLXY5m1vq0iNZq9ZDxlXfKqnzJ+zAt30tn2mx\r\nkWMyL3Xai9yvahv51StLf9NFWsJ0Ms1kZjiVtZMW6ZGknf72BArorNTsEK3/\r\nDj0rjJF4BO7gnAV40mEVMDlcff+IQ3Qm26rLy5G5QTtUduGfq4reQsNjlIUq\r\ni2IxGmuOxvdmNqWXiuYALSJpc66knyVyHthxrm8vgqc0fGYGkMRj6mbaxhOj\r\nt2vqankmaJqOGQLKFJCzWJzbuVYYGSTBpvz2wqVLftCFertNTUqrvQKl/z4r\r\n00CElYqkIoEQDrkpTRNpYLfB6RF2qijH53k+jE1iXs7SoCQB94StcpggLqff\r\ngKByEmhASNM0JER0gSmx+/5vnciAhxRlcKmqNEo+9Qu8R1q8WVhbCTSae9JT\r\nvqd9ERf8okdsZ5cLXnMOmg7tZTPE11d3iVsbUSX1Wl6z/gYcGWm1Z7gvMzZu\r\nOjWLPOQbG8U4sMTDUhXmkaO1Tfc5raIJQBAXYm7Gyh3HE0Xgj6cT4yCOfIA5\r\nMOSmy3x/r0TkBs0I+G7YMFQ7D+6xaHOR3VTd2MKj77bO+HmMrWik/RsOfuJ3\r\nqeBaAo0Nayu711D7EdL3rHbc1tSIdDSyMGI=\r\n=N4Af\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"5f71dcbe45f5245c72c0fabae0162af558c5c395","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.10b8563e4.0","@material/theme":"15.0.0-canary.10b8563e4.0","@material/feature-targeting":"15.0.0-canary.10b8563e4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.10b8563e4.0_1683070880875_0.8285966985966227","host":"s3://npm-registry-packages"}},"15.0.0-canary.736b7fda4.0":{"name":"@material/shape","version":"15.0.0-canary.736b7fda4.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.736b7fda4.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a76773329d3682c561497533a226a7fe63cecdba","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.736b7fda4.0.tgz","fileCount":15,"integrity":"sha512-dESjgzkP0QgNXquk4x9LEGpolDMwVKD5V2Qmfl9avHvx74HKvYsYVfodOKAJvVSVjzqTMedWwrRClkx1CqGiTw==","signatures":[{"sig":"MEQCIGoCqnl4SWFj7gNqYUrrKCKZApdoTPkYjp7nxBPESJqZAiB36XMk4YIu5fgQw7FBroMVHgisRtMc58Ll/KH28SlyZw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkUnkDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp7nA//ciuCHKezAp/6N0XsZbPEHmyb846HnkPJpj3A3y7wZcWP9jeF\r\n2ydMTDLav6QiFKCsEcqpVeizzO3HHFKhXUCFPa/N6jJTkeVcpA5quhpe7DQG\r\nyY0kGAB5gag5pf/ys96yEn4n9OqZcOiNGlUmbEHrzGUMtYygS70DdZHYVrn3\r\n9bmc9Sr9WLu5+hbIDhzh6ri2GamDVcJOT3pScbw5cStfZsrrvosdcjNAPsrd\r\neyy6z8qHLodY9fSNP6L7QNAXRG4/+sPwInAzrY1qx0PVrqg0JkEQ+wdSyZVZ\r\nlsc8/upGf0rgJyqAOqZ+dFNwcJB4//5jsLDko2sq5iTC0uqXY5qI3HozsRUt\r\nNzVAuxF6rlxjrvnophndnXzuPif0+g8k5R5s5MLnZMhpGKrjlumTZzni14aN\r\nOwcjg/oPurPjFWe1W0UTTPRUsUiNPCN9TCENCBMgTh0DmIYZDjQ3Lo5lcsov\r\nohhy3qJ/6D6Je2synhKZpRvspmAel7swJpYPC5hyBWwNbbpH2uwWA53QypDv\r\nZ+wUCGYCCIpf1qhbhu150jjkmRjWAEwceS/DZ1I093YonR9+9bkZrcHUR2DB\r\njHpN67ugXU+oAXgWyNF+wyceA+lp+plECXt9YURjuVLrcw97VqQCQLGIItaK\r\nva0m8xA+xQs7RLtRtIq1vv3a3DU8uLB7bwM=\r\n=GbmR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"b9ef54594aa8f93612aed085460f035d0aba61bd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.736b7fda4.0","@material/theme":"15.0.0-canary.736b7fda4.0","@material/feature-targeting":"15.0.0-canary.736b7fda4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.736b7fda4.0_1683126530929_0.3001429051795119","host":"s3://npm-registry-packages"}},"15.0.0-canary.0e533c5a1.0":{"name":"@material/shape","version":"15.0.0-canary.0e533c5a1.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.0e533c5a1.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9f1d8a51ffc4d0cad28c4577087752c85392a237","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.0e533c5a1.0.tgz","fileCount":15,"integrity":"sha512-cQpq1NdTS37VMPNbzGbtCtTBchv0Mzf+iQf0u+P8vMe9A3sfOaFiWCh0mukBSiPHSn8rycRgpScP9FLFX+EG5w==","signatures":[{"sig":"MEYCIQCPwbuwiEuBLu6Ck8hq+dXsAtCskiiQx1NStLYwcNAobwIhANtIWyngS07vc9V3oGECrqk+jfiXJekrfRBOSeGpV/S4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32519},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"6b9b4497cc6457c9e92ab3abdaad626c73e610a4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.0e533c5a1.0","@material/theme":"15.0.0-canary.0e533c5a1.0","@material/feature-targeting":"15.0.0-canary.0e533c5a1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.0e533c5a1.0_1683305739804_0.40086999614859375","host":"s3://npm-registry-packages"}},"15.0.0-canary.5f01c15a2.0":{"name":"@material/shape","version":"15.0.0-canary.5f01c15a2.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.5f01c15a2.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3f85155a3bf8097a680865c0a0c9f9fd5781a798","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.5f01c15a2.0.tgz","fileCount":15,"integrity":"sha512-51mAJH610zdQ/A+omDDBTX9o/ERnHQIWQQTqvYyfd8FqNpsHAPIbQbczx5/kUEQ9D/8omJ6JCENb5E8eJl51VA==","signatures":[{"sig":"MEQCID+bwuefc/frlYccfLaVtMT8Ff4yMad9koQxrAGnSbWzAiBvAMzxa6WGISvJYF+XxUM7Z0Yw3/LUtSV8+YZ2O98X5Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32519},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"7bb1c5dfc575b36654ae046d1f4ab3b27e8c8f9d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.5f01c15a2.0","@material/theme":"15.0.0-canary.5f01c15a2.0","@material/feature-targeting":"15.0.0-canary.5f01c15a2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.5f01c15a2.0_1683307546320_0.7200444373797372","host":"s3://npm-registry-packages"}},"15.0.0-canary.3b5b55e31.0":{"name":"@material/shape","version":"15.0.0-canary.3b5b55e31.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.3b5b55e31.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"990341fb8623be1b7e5cf21d4d890ca6c55482ce","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.3b5b55e31.0.tgz","fileCount":15,"integrity":"sha512-7OMwJr/iWt8secMFtgtzIcMoZo8N/axgGD6yXhAc2wWbdnh0N2h6cqB+aInQeG2oPuOqO7ofEEghSC0TIh7siA==","signatures":[{"sig":"MEYCIQD9U3BU/87b78Jy76JGQp17xmpae+Sr0ps2nkB6YSCcjwIhALWqXkHYP4tNfKfHxgmKA2ke/Kia5IoAeXxQE7TXBBm6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32519},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"c262d9ee39655e869886d1584551a096ae56dabc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.3b5b55e31.0","@material/theme":"15.0.0-canary.3b5b55e31.0","@material/feature-targeting":"15.0.0-canary.3b5b55e31.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.3b5b55e31.0_1683311904491_0.6720242279900333","host":"s3://npm-registry-packages"}},"15.0.0-canary.d0788120f.0":{"name":"@material/shape","version":"15.0.0-canary.d0788120f.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.d0788120f.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2f379d71f86feb9b02489474cf33d380fe172bd4","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.d0788120f.0.tgz","fileCount":15,"integrity":"sha512-3mzmGcwyluLsXGLju5r5MzYAysLv07vcWdIT/qjGiCbEUXeNaYswlEFuq8EzdhAls4yqgdsjtNS82m3IBeASpw==","signatures":[{"sig":"MEUCIQCCxbnliVJ32ZAwIxpbtAAV6wMKQhCLMeyJro+HGsGvkwIgDXqAcgYpPqVdAMp6I94VkP1FzCq0JOOs2JMBuPn3ELI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32519},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"7eccbee262206623b89c40dadb4e11abe30d5e45","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.d0788120f.0","@material/theme":"15.0.0-canary.d0788120f.0","@material/feature-targeting":"15.0.0-canary.d0788120f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.d0788120f.0_1683620550518_0.8379861205483083","host":"s3://npm-registry-packages"}},"15.0.0-canary.f52358dd0.0":{"name":"@material/shape","version":"15.0.0-canary.f52358dd0.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.f52358dd0.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9ec17ee653bf6941086ed1c7ccad906d8845b6c1","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.f52358dd0.0.tgz","fileCount":15,"integrity":"sha512-eDjRVjz+AzOp2sUsLqGy3SowhRXsGkrJ0J1fgJ/+qFoOrobVXl4OvHM2sLdg7xdBf/dbzx324dKjz5r0sB1+ZA==","signatures":[{"sig":"MEQCIBQkq6TkUmOFy5qi7A/8No3oVfqv/oSDQ1cMFBdx1R8oAiB8zR+mQfz62DrpWrWB7qirMg4MXsKRv68orD6NT12Vag==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32519},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"a4baf07a9736a6e1fa40001f7198ae1865d67392","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.f52358dd0.0","@material/theme":"15.0.0-canary.f52358dd0.0","@material/feature-targeting":"15.0.0-canary.f52358dd0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.f52358dd0.0_1683901792645_0.35801481563831206","host":"s3://npm-registry-packages"}},"15.0.0-canary.d3c3fbaa3.0":{"name":"@material/shape","version":"15.0.0-canary.d3c3fbaa3.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.d3c3fbaa3.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e5cb3839fb2a990837be4a74421fe92dc9ae84d8","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.d3c3fbaa3.0.tgz","fileCount":15,"integrity":"sha512-QYnmIEMCBRGcja/4S9CC5+9zXGccagkvC4pG0cw29Ovo8fd4UwDDKPNrD8dnrDSRBgoG0NVInAODv2QPnLWJEA==","signatures":[{"sig":"MEYCIQDOedQK3+0M4uDaDDY1blbOIs6QycKCuBGp6XfpreCv0gIhALxVsOhFXNHpKQiOs5+iTJXA72BpHFK/auxYZe2hhoJ2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32519},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"3b7f31c254605439f8fef56301c46f7bcbf3a9fe","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.d3c3fbaa3.0","@material/theme":"15.0.0-canary.d3c3fbaa3.0","@material/feature-targeting":"15.0.0-canary.d3c3fbaa3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.d3c3fbaa3.0_1683914393256_0.6698749602052105","host":"s3://npm-registry-packages"}},"15.0.0-canary.576d3d2c8.0":{"name":"@material/shape","version":"15.0.0-canary.576d3d2c8.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.576d3d2c8.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3bfb77d60bd67102e607a06b8f664bd44ff0de65","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.576d3d2c8.0.tgz","fileCount":15,"integrity":"sha512-AYcQjpeWq/lJoBtUdjSeOf9nVCqGrsNTzuBqwKcQ+bPHkhHsD8h5YK6yD//DR2fTT0TFidvOY3NsYqcP460B0Q==","signatures":[{"sig":"MEUCIBe6R/SoHWw+mkNZYh+wQLEXV3wij2z2P8TpAANtLPQcAiEA5sNN+wspqw6SNlSQk5qR7T8OP011NsEX60wPDavtcOU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32519},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"6ace19a21b6654f14cad48fc007198859874c910","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.576d3d2c8.0","@material/theme":"15.0.0-canary.576d3d2c8.0","@material/feature-targeting":"15.0.0-canary.576d3d2c8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.576d3d2c8.0_1684202369648_0.9491043064986155","host":"s3://npm-registry-packages"}},"15.0.0-canary.19bb36a46.0":{"name":"@material/shape","version":"15.0.0-canary.19bb36a46.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.19bb36a46.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"773175b0ecf580a4f1ba1aaf9aedbc664850a214","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.19bb36a46.0.tgz","fileCount":15,"integrity":"sha512-yCsCPf2L4WgGw+fhvfTUxJV7NddFajXkUN9ZWyNMN7SbjXm3gz59YdHMq/JB3iH5L6qzTwYbO1JFD7RlUn85sg==","signatures":[{"sig":"MEUCIQC4o++hQ1MNDQtiUhaB3a+SB5U4yyjpyJ9fQeN/mzrMswIgZHmqmqV166yF30pikAR8KFDXmnELzJdwW87hojDV0S4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32519},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"75157be315eeaa02f70ed69f97e44a7d40d53e42","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.19bb36a46.0","@material/theme":"15.0.0-canary.19bb36a46.0","@material/feature-targeting":"15.0.0-canary.19bb36a46.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.19bb36a46.0_1684266807708_0.44712029170921763","host":"s3://npm-registry-packages"}},"15.0.0-canary.aa5ac7fe5.0":{"name":"@material/shape","version":"15.0.0-canary.aa5ac7fe5.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.aa5ac7fe5.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b29b460c4e32a3b635fdf9cb2664a1d04083b99a","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.aa5ac7fe5.0.tgz","fileCount":15,"integrity":"sha512-YCNeIbHGgSXYLrWpEYVNp6WFOUyOEMPWKcOyvjOaDC3D81HmZlfijI84TE9kgyHuCGYWtUYY7vwpqXNethsMLg==","signatures":[{"sig":"MEUCIQDtUZjO5bs6nKbIXOGlSNHJcStjDfQ38jIrJKEdAYiezwIgFwOtE2UJGboBCllHfUcNPn3QV5swXfPrLLNus8brD6U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32519},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"83e86542dd6facc8ffe487d31111412ee18b5bde","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.aa5ac7fe5.0","@material/theme":"15.0.0-canary.aa5ac7fe5.0","@material/feature-targeting":"15.0.0-canary.aa5ac7fe5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.aa5ac7fe5.0_1684776294966_0.7712904982451836","host":"s3://npm-registry-packages"}},"15.0.0-canary.90291f2e2.0":{"name":"@material/shape","version":"15.0.0-canary.90291f2e2.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.90291f2e2.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c98da35d7a2c343d44decdd199dd1fad114fc8f4","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.90291f2e2.0.tgz","fileCount":15,"integrity":"sha512-UEB168x8ovLvH4eoBtRnoCT9QvnxB/ZMpOKW1+C+xWisis6Wy9AX0wKT5T6wIpffYYCaBJuhI+ExX2134rAxJw==","signatures":[{"sig":"MEQCID6TynFbP2Y4KOV2oDscGlVcs/uzCZ32rNt6OLlReeSXAiBHiIP8Bb1jgQzFKLAg4TCexDikevJfSSP+q/Lu3injNw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32519},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"a1c306471717b15ae8f0b481703ed1b46162df25","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.90291f2e2.0","@material/theme":"15.0.0-canary.90291f2e2.0","@material/feature-targeting":"15.0.0-canary.90291f2e2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.90291f2e2.0_1684863727037_0.6310150565956814","host":"s3://npm-registry-packages"}},"15.0.0-canary.446734f27.0":{"name":"@material/shape","version":"15.0.0-canary.446734f27.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.446734f27.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f49386b0fcc2c8efbd6325b93ea4338c77e099ea","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.446734f27.0.tgz","fileCount":15,"integrity":"sha512-mta+NtfAJgtb4AlFh75NjEWQCmNP4JSNgNlIUr41GVchWHwkAhUzcJR4jUqJ2XS95cyiQT6nYcnvspKIcAGDNA==","signatures":[{"sig":"MEYCIQDgmHcNfN2zdekGKULbUwlxzmgnZnePr5lGd5RWUobt6QIhAMA8SobqjmpssGREVnWgkv+KH7cF7y+bFR+ocRajI4Ye","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32519},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"a2536a849aada5f06aa85deaa7be06f44f620023","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.446734f27.0","@material/theme":"15.0.0-canary.446734f27.0","@material/feature-targeting":"15.0.0-canary.446734f27.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.446734f27.0_1685483261845_0.9355968442622948","host":"s3://npm-registry-packages"}},"15.0.0-canary.19de312d8.0":{"name":"@material/shape","version":"15.0.0-canary.19de312d8.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.19de312d8.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"49a1d1ed4b0013e157559fa4cc11a0943a9f5071","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.19de312d8.0.tgz","fileCount":15,"integrity":"sha512-ykdS5NTpWytwiTcxzC0YAJzrraTeGp0vw6tcq7Z64x7HrbZqG+LI3WttOEh3NN+igFIeZGex+4yzYZdstJdKIg==","signatures":[{"sig":"MEYCIQCR+zeR9d654JI/Lm0TRREhzZTEgXTFg8OrNeiYvyqieAIhAL6QLV9hgSlV1aADXqP2bCnVtamaB/h2n+Lm1HGA6FxQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32519},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"dc3811573a34ccafa5c09bcf14574bfb95373958","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.19de312d8.0","@material/theme":"15.0.0-canary.19de312d8.0","@material/feature-targeting":"15.0.0-canary.19de312d8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.19de312d8.0_1686071860740_0.8178016273308057","host":"s3://npm-registry-packages"}},"15.0.0-canary.6081d829b.0":{"name":"@material/shape","version":"15.0.0-canary.6081d829b.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.6081d829b.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1f2033b5353417231ad51fb2cea58f5890aac542","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.6081d829b.0.tgz","fileCount":15,"integrity":"sha512-rNHNjk5X2g5fKBAEu/D/C3vLaF5VK/Ew0yY7tV/dyhocsMmlIHeOXH9GgKEX/wkiG/0z7zpmoEVxKbcP5bNnpQ==","signatures":[{"sig":"MEUCIQDirJNzka0UX1/6o/CXIceO9c4A0pmSE3VzZY7ePameSgIgX2wMYaPzozHzxN53XWBQuDeyvk/lzMXJbSIUMD6Vow4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32519},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"033569cc4deafe32dad2bf8cbd1de8789bc85668","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.6081d829b.0","@material/theme":"15.0.0-canary.6081d829b.0","@material/feature-targeting":"15.0.0-canary.6081d829b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.6081d829b.0_1686100409289_0.06117324461800111","host":"s3://npm-registry-packages"}},"15.0.0-canary.b26c34a68.0":{"name":"@material/shape","version":"15.0.0-canary.b26c34a68.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.b26c34a68.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a9d0d8d2299f3ddf768b711a6c6b87d543bf1ef6","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.b26c34a68.0.tgz","fileCount":15,"integrity":"sha512-OaOZeHc9JZCxVpSw9xuLPtL6uCboKXMIB0M9KHVNe/NgMXGq9pUB3gYf0wxyutCdNZOIYTe0WCgU2mKu/fujaw==","signatures":[{"sig":"MEUCIGKBXQVJJAkgEcDX/Tv6JLHRM1rlkQyLVLhWNVpjxlHdAiEA4ExI14fVpuQns4Dtlf5ixf0cGJntKIqQdcammrKdwtM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32519},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"28919516866e588c52e4e6358c3c4d2523993b74","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.b26c34a68.0","@material/theme":"15.0.0-canary.b26c34a68.0","@material/feature-targeting":"15.0.0-canary.b26c34a68.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.b26c34a68.0_1686169011063_0.48940733321474705","host":"s3://npm-registry-packages"}},"15.0.0-canary.4fe911371.0":{"name":"@material/shape","version":"15.0.0-canary.4fe911371.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.4fe911371.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e4a803b3c739796ff711c23765f7cc9afd488f32","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.4fe911371.0.tgz","fileCount":15,"integrity":"sha512-HMFLddFxrY8B+vAnaQoNZh5XBFhRF3xuLAQPwZEfw8CaRHpHQ6rxfqj6Rw1vJRz9r1pkgW9Vb/B8caTnYTQB+g==","signatures":[{"sig":"MEUCIDBT11fiOEzf8Cx51YzzO/rGKq1NvYT3PfQljSCBrr1QAiEAw/OAnHVSVHyRAmESrE/t2HpXEfwqmfbyGuHl7NbNtLU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32519},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"a9de53a24d5e0f79f94310f061cdf2ab718df7f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.4fe911371.0","@material/theme":"15.0.0-canary.4fe911371.0","@material/feature-targeting":"15.0.0-canary.4fe911371.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.4fe911371.0_1686179123363_0.4688471868237907","host":"s3://npm-registry-packages"}},"15.0.0-canary.a9ff9866f.0":{"name":"@material/shape","version":"15.0.0-canary.a9ff9866f.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.a9ff9866f.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5154a1f3462384862dce4005f4d4265757977197","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.a9ff9866f.0.tgz","fileCount":15,"integrity":"sha512-s0QoeMohEluqjByt+JdUhomWMCAOVz+RRf44J4ldbZqKofUwfakpaGCQg/kZSZ/5COD3iDh3SsBFvgBXO1GjQg==","signatures":[{"sig":"MEQCIHiZxDMyQYV8h1AUNt82IEY7C0zydFw4FMtG7blpxN6kAiAhmCMWrMHmXSeqlVC+tYsHS3lq8u40gZTwKRtuJ5g5cQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32519},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"5bed0ec6cdad0c38b52e8ac98994b2809d9c8f50","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.a9ff9866f.0","@material/theme":"15.0.0-canary.a9ff9866f.0","@material/feature-targeting":"15.0.0-canary.a9ff9866f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.a9ff9866f.0_1686656260432_0.10958908461534778","host":"s3://npm-registry-packages"}},"15.0.0-canary.b994146f6.0":{"name":"@material/shape","version":"15.0.0-canary.b994146f6.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.b994146f6.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ad1ea5c82bff40b2e76a13ec107010e7d568c862","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.b994146f6.0.tgz","fileCount":15,"integrity":"sha512-sINM3gr3aLgdvqZVfqfXV5EB77owLLJjy+2NqchJ8ZPqucCJ+F/BsCBfLA2Wu3O4Sc9IpAEn/o1hzYm/CWAFAw==","signatures":[{"sig":"MEUCIQDlOKMsM/xRyI6WfCrCytvonXOvhTWajXNnm/MpLv3lyAIgbL2/ZHJ3haQYNchl9AlznipTSYLwVISYDrlxIvqZoyE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32519},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"e537228a5d88e4fb9c651aa15b1d56bd81bc63bd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.b994146f6.0","@material/theme":"15.0.0-canary.b994146f6.0","@material/feature-targeting":"15.0.0-canary.b994146f6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.b994146f6.0_1686776580577_0.055478862149991315","host":"s3://npm-registry-packages"}},"15.0.0-canary.1fb4b1a06.0":{"name":"@material/shape","version":"15.0.0-canary.1fb4b1a06.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.1fb4b1a06.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c87035358263885d1bbf43a67cceb0bb895b2831","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.1fb4b1a06.0.tgz","fileCount":15,"integrity":"sha512-UElkSqx3gGbjdLVrCcYG3BVeOb+DOAxxHx4nP0ODb7rAEQXPPQjtQzVJMEAhX5NVQlhN6irSOAX5ej9sfioJnA==","signatures":[{"sig":"MEYCIQDEdmVcOuAqNxxXcEYxfyJaPhUL/VlgE4+sz3fMZsqyhgIhAL0u0VhXGiz9e5ZF9N7LoJHB09TLyz250sA9aFsqkBGt","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32519},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"1d1b86822f3fc9f22a5fdfc1c381d5a4ae983829","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.1fb4b1a06.0","@material/theme":"15.0.0-canary.1fb4b1a06.0","@material/feature-targeting":"15.0.0-canary.1fb4b1a06.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.1fb4b1a06.0_1687892196696_0.43314841788234304","host":"s3://npm-registry-packages"}},"15.0.0-canary.c64a2776e.0":{"name":"@material/shape","version":"15.0.0-canary.c64a2776e.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.c64a2776e.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"60ee11f0fede0191c761199116fc14722c2faa7b","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.c64a2776e.0.tgz","fileCount":15,"integrity":"sha512-2mf1ESUfHE6/JIXSB6MqF2WXwWqFiJ45Ub1Zm8p0VOunCbNbpEOqjF9wGEjM0fFXEBldXwvtTMMwRnd3q/382Q==","signatures":[{"sig":"MEQCIHHFzzsKSs8dO7mHd7Xah4F4LngF0KK0kqnMct/ssnDAAiBqzW6qIDKVkWxyJdm2Tqr3JG36vLITSObzjDA+e11UCQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32519},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"271b0c446646af573f67960820b6b2a86a9bda88","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.c64a2776e.0","@material/theme":"15.0.0-canary.c64a2776e.0","@material/feature-targeting":"15.0.0-canary.c64a2776e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.c64a2776e.0_1687896952214_0.04864840224792011","host":"s3://npm-registry-packages"}},"15.0.0-canary.b05d9eb7c.0":{"name":"@material/shape","version":"15.0.0-canary.b05d9eb7c.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.b05d9eb7c.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"941a6e6ca9280eaa711791cb785ef93748766b5c","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.b05d9eb7c.0.tgz","fileCount":15,"integrity":"sha512-FrKSI+MOoRocp2OtsKbZl9thy+uQ41umFCjj4H1Qi80m5L88DOH2VvfbrGQdbiUNiB5VGZ/CZ077Tmx88N2zXg==","signatures":[{"sig":"MEUCIB/VTCQi9sA7hNS3iT36JGxz/o6/hbzpD1B4HuJAkc08AiEAh0pXcTL15IUHLf+wWBq3NMHd5/iKUieic7mALmrULSk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32519},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"854245f23fe0f7b3dd1163ecefd940b26718c134","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.b05d9eb7c.0","@material/theme":"15.0.0-canary.b05d9eb7c.0","@material/feature-targeting":"15.0.0-canary.b05d9eb7c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.b05d9eb7c.0_1688055789133_0.593033771729589","host":"s3://npm-registry-packages"}},"15.0.0-canary.2a9697dc5.0":{"name":"@material/shape","version":"15.0.0-canary.2a9697dc5.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.2a9697dc5.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"82a5c0b8cbfa5915fd1129361df753229fcb5286","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.2a9697dc5.0.tgz","fileCount":15,"integrity":"sha512-H12LJQB69JCfDURHxwweZ6FibGMHuGwla5bKkoQ+Su42Kq3IM+qMOKdvSVmO+3RW+aod8pTKujQrlJMj3BCuVQ==","signatures":[{"sig":"MEUCIE8W46eEJ9lVDO/8CnThyI62rg6KdtUgQJR+tX6vqLFoAiEA5wzsl7OgXhzifoGrUr9qcfixb6Y0hKrPsQ1SzpQN7k4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32519},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"fad1e5223c83a5b7a83a6ef81f7ebdc83a85672a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.2a9697dc5.0","@material/theme":"15.0.0-canary.2a9697dc5.0","@material/feature-targeting":"15.0.0-canary.2a9697dc5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.2a9697dc5.0_1688163202686_0.00787597162836029","host":"s3://npm-registry-packages"}},"15.0.0-canary.0c52adeab.0":{"name":"@material/shape","version":"15.0.0-canary.0c52adeab.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.0c52adeab.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"45c62ecc91c8bbe8b5992a2818a6a1538259d0ca","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.0c52adeab.0.tgz","fileCount":15,"integrity":"sha512-D7RVsZ9ZLik2S0glc6syK9BufTN95IxTbOUEI3Qvi40kSH5kk3wvqZMw6eyv54Vp2+uZkXOz4yeJFIy0/FDPdA==","signatures":[{"sig":"MEQCIAQ9Bdm/3wAJOioI7nPMJYCvvKSwktWFqrZE1Q+1B5SOAiB2unnujK8aWHocW8DtYFf444Lewnbde33yOawZ0N0n9A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32519},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"972024dd57885ff944ec073de0cd956353bfa7e3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.0c52adeab.0","@material/theme":"15.0.0-canary.0c52adeab.0","@material/feature-targeting":"15.0.0-canary.0c52adeab.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.0c52adeab.0_1688574312090_0.38546432278925136","host":"s3://npm-registry-packages"}},"15.0.0-canary.83355c322.0":{"name":"@material/shape","version":"15.0.0-canary.83355c322.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.83355c322.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"38c9660a7532750deacd958989361bd8d44f55a7","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.83355c322.0.tgz","fileCount":15,"integrity":"sha512-K9MCIs6b4FiCpXIxT0XwLa/D/qG0LHGop2MmdZ+L3ab/WdR/v2t6tkg3HGCwropYrtpc5NbzHiD3ykfsbUnwNg==","signatures":[{"sig":"MEUCIQD4x/t7A7ORQwakVhX39OHrHOZxBwkaJjnpk3aYvEnl9gIgduVeLdYvVnZYGMOVa/e1m0+F/YKvvkZ1KtWlXadWGnQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32519},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"173401c2dd65fb3babae5b8e998c0a0032ff819d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.83355c322.0","@material/theme":"15.0.0-canary.83355c322.0","@material/feature-targeting":"15.0.0-canary.83355c322.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.83355c322.0_1689001482986_0.8613543730759385","host":"s3://npm-registry-packages"}},"15.0.0-canary.bc9ae6c9c.0":{"name":"@material/shape","version":"15.0.0-canary.bc9ae6c9c.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.bc9ae6c9c.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c597f8e439dc40799d2de3cfa62006faaf334a20","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.bc9ae6c9c.0.tgz","fileCount":15,"integrity":"sha512-Dsvr771ZKC46ODzoixLdGwlLEQLfxfLrtnRojXABoZf5G3o9KtJU+J+5Ld5aa960OAsCzzANuaub4iR88b1guA==","signatures":[{"sig":"MEYCIQC9Ax6l5/gEMB0sPYz9kVQMzTLvXSvIXcFvmZGDrO2jTgIhAOZ2VdrVCWq6rBggzH/8yqGcDRVib8fSvz5nVrUgJqvj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32519},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"9f0b9b80c267d99daa258e635481fecc4cbf0acd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.bc9ae6c9c.0","@material/theme":"15.0.0-canary.bc9ae6c9c.0","@material/feature-targeting":"15.0.0-canary.bc9ae6c9c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.bc9ae6c9c.0_1691097615231_0.5475538119030685","host":"s3://npm-registry-packages"}},"15.0.0-canary.3c44cd956.0":{"name":"@material/shape","version":"15.0.0-canary.3c44cd956.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.3c44cd956.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b96623353a14a36c0cc1d027024372ee876faf1a","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.3c44cd956.0.tgz","fileCount":15,"integrity":"sha512-AY+ArFfBkJQRk4NX2oAUB6NewjbFLUvAdg0jeE2kSgQjBRSUxadsB2s3Y4NuuK+Q3W2mqOXl0wHIdGQz23PZBA==","signatures":[{"sig":"MEUCIB0yJe9H5LsYc4dVDTKfUOHAKjYMSVcTt0wSoChkhg1xAiEA85Swr/BSN/llKg9Ck28D20YGCnJHg45TLdj8gvsx21s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32519},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"6e39da189328fcabc7040a629e312efe5f7cea80","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.3c44cd956.0","@material/theme":"15.0.0-canary.3c44cd956.0","@material/feature-targeting":"15.0.0-canary.3c44cd956.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.3c44cd956.0_1691430392841_0.5192552416455307","host":"s3://npm-registry-packages"}},"15.0.0-canary.02702296e.0":{"name":"@material/shape","version":"15.0.0-canary.02702296e.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.02702296e.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2bea174968284b239d9e251f1835d20ecec5b9d7","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.02702296e.0.tgz","fileCount":15,"integrity":"sha512-00Mlq57P1RI4cP3x0gqPUq4eiJhZZ/H1/wGbVx5m1MN/4TLctfNG+F1nme+NtfrLyOzs54yDbaaPkliUJqJlyw==","signatures":[{"sig":"MEQCIFNdsDEXnpQdvcSjAGhgE6mO8Km8mXlVU+5HYiRBRWDIAiBlyB+J/sfbIRJucRgFRZXcV5WSEk26eT/KzpKiM6c6zQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32519},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"22335673bc742932498b2538321ed9dcfd692879","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.02702296e.0","@material/theme":"15.0.0-canary.02702296e.0","@material/feature-targeting":"15.0.0-canary.02702296e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.02702296e.0_1692965064153_0.3122851896265484","host":"s3://npm-registry-packages"}},"15.0.0-canary.872b65832.0":{"name":"@material/shape","version":"15.0.0-canary.872b65832.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.872b65832.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9db4f2214f94aca2618e31c6a09e621a88ed1090","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.872b65832.0.tgz","fileCount":15,"integrity":"sha512-zMi9iyZF9LamqYzCH9KBbpky19ewNtqcTQdcqk70vuldBzdaTV1bJclRhbFvP58wiBW2WYQjAJh6F+fj68yvYQ==","signatures":[{"sig":"MEUCIGKk61MmQgUaxbLh/pD8FOtvHlbDBK90U7PKaPaymXp9AiEAxVv0qb2wkkobm0XmkNejKf83gxFOdQdYzf1bnw8o8Ng=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32519},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"be0901c091f812355b2d192c49bd051d8daf7a98","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.872b65832.0","@material/theme":"15.0.0-canary.872b65832.0","@material/feature-targeting":"15.0.0-canary.872b65832.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.872b65832.0_1693397551891_0.7201957611242418","host":"s3://npm-registry-packages"}},"15.0.0-canary.89b2e4122.0":{"name":"@material/shape","version":"15.0.0-canary.89b2e4122.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.89b2e4122.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"36ba3803a9709e610eb4b3c665d3766b2bbe2c83","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.89b2e4122.0.tgz","fileCount":15,"integrity":"sha512-TYccsXqBqjZa/zrfRQo/jFAs96/ssJ2rEZv4WsI8YiUHiKkineXrlwTj78amyPwv/5HXKHJBvenFkB6/QcwSdQ==","signatures":[{"sig":"MEUCIQCrWa6XTUcRhYG32UNzfcbTvT9ThLregSSQz4dyurGslwIgW6+9pXWpa9NkRKs+p8RiWZz6XmHm/z5Y5ys58LHUlMc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32519},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"68bd55db9489546e515443239f477836e16db19b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.89b2e4122.0","@material/theme":"15.0.0-canary.89b2e4122.0","@material/feature-targeting":"15.0.0-canary.89b2e4122.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.89b2e4122.0_1693497968665_0.3153244403495581","host":"s3://npm-registry-packages"}},"15.0.0-canary.7a3942e7a.0":{"name":"@material/shape","version":"15.0.0-canary.7a3942e7a.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.7a3942e7a.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e48eb5fdd4252257d25703f0084d17f6703b20c3","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.7a3942e7a.0.tgz","fileCount":15,"integrity":"sha512-Gv7KXpXDnuN/1/jH4fojHsJuAULSlcDjT2EkF4CkP480XkO3CL5qZoktWWmUze48x9L+N53aN1XDZLivOywf4g==","signatures":[{"sig":"MEYCIQDvGFxfFvdjwUc7OK8qH56J1qyMvtKbof29W8T3T2DjLwIhAIfR3Uk1xYmt06Vf+N5xLyAcDiY63T+tMh0+XHW3PCTP","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32519},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"e61dc0a16a5b376c778548e5a6cecb56f5c5704d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.7a3942e7a.0","@material/theme":"15.0.0-canary.7a3942e7a.0","@material/feature-targeting":"15.0.0-canary.7a3942e7a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.7a3942e7a.0_1693507134751_0.348950200356408","host":"s3://npm-registry-packages"}},"15.0.0-canary.54feb3020.0":{"name":"@material/shape","version":"15.0.0-canary.54feb3020.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.54feb3020.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b790240248a2e68adfe50e5b71ff6b9d8cf1cf51","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.54feb3020.0.tgz","fileCount":15,"integrity":"sha512-DYSH1OjEbZa3kBA37hj5t6b114gAPuIXe04YwhOTpSCDN1A1z0efBH3xBGf96fvYYt+rvazvqMLoO5Gl02Nxxg==","signatures":[{"sig":"MEYCIQCuGuU4RyPUrTh4APaU8uThhY3JBfZoUzmrfBjLiQWDuQIhAJJptHhVkb3vBCuGpcVPmwJDSwsn6OhnCqYbyVwAjJ75","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32519},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"5dc5cb94463af21f898ddd58cc4d9e4fbf803222","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.54feb3020.0","@material/theme":"15.0.0-canary.54feb3020.0","@material/feature-targeting":"15.0.0-canary.54feb3020.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.54feb3020.0_1694466267440_0.6074197740629117","host":"s3://npm-registry-packages"}},"15.0.0-canary.6cda3ce8d.0":{"name":"@material/shape","version":"15.0.0-canary.6cda3ce8d.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.6cda3ce8d.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bc4c20be8f80d39b6e55575d15a7a07037ead3ff","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.6cda3ce8d.0.tgz","fileCount":15,"integrity":"sha512-4/o6JPvjYLHlHX09cDs8iEmlOWz41Fn+ebBs2n4QcHMLXTCwF5jBoqagO+o5tKNseQOm3bJeimnuZgk0BkHylg==","signatures":[{"sig":"MEUCIQC0wLOxfXhRfXarmHq33tQri8a4OccNmL2iK52EQSQEVQIgbk0QoqmTgdewsyq5qdoulMmG57vfOaovZ4agOCqUrAU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32519},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"adb36c6339e7bf37fe1e8ca96526a9673ca602e7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.6cda3ce8d.0","@material/theme":"15.0.0-canary.6cda3ce8d.0","@material/feature-targeting":"15.0.0-canary.6cda3ce8d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.6cda3ce8d.0_1694483066003_0.38239535533445324","host":"s3://npm-registry-packages"}},"15.0.0-canary.205b20b36.0":{"name":"@material/shape","version":"15.0.0-canary.205b20b36.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.205b20b36.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3f449e68a1728c876e944602fa593fe555085d8a","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.205b20b36.0.tgz","fileCount":15,"integrity":"sha512-Uz10DffreykhqzuszYGhvHFcu27MRptp2qi8+/6fqFS4h9v8u8xVkI7MZwCiM6/GmkHF7+qF/n5obL6HDLC8Gg==","signatures":[{"sig":"MEUCIQCKNOghoGKyhgZZ5HMr1upHy6JbSEK60rYz6Yq1DSh0FgIgTElJtEfGOwyymCn3Du7ZksRSK1fgLoiIKNbp81ONUXA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32519},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"00fdcf619c34c502844acb0f2485e99595aa138d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.205b20b36.0","@material/theme":"15.0.0-canary.205b20b36.0","@material/feature-targeting":"15.0.0-canary.205b20b36.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.205b20b36.0_1694625353279_0.3032413784968695","host":"s3://npm-registry-packages"}},"15.0.0-canary.22bf82024.0":{"name":"@material/shape","version":"15.0.0-canary.22bf82024.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.22bf82024.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"96d66fb1881c0826e93bea5409ca5eac0abbdd37","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.22bf82024.0.tgz","fileCount":15,"integrity":"sha512-95T/ROy8LpSkfkDoikXu7vraAN6r68RX9Ji8AlSHx6PwPcUmGdE8Uw3/ArhHcL4KSSWPJ/qmXAgPm0gVmgZoBQ==","signatures":[{"sig":"MEQCIAkuteJlS3+Tg3bndM4v5h05Thzg3uCrBqmB5EoZADexAiBJ63yH6b7fQmUQnvkaeRHc9DGmoud+jPlV9Hug9L+GxA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32519},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"eda4fad2a8a727b69db60b828bd92df7a8956143","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.22bf82024.0","@material/theme":"15.0.0-canary.22bf82024.0","@material/feature-targeting":"15.0.0-canary.22bf82024.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.22bf82024.0_1695028279201_0.9547746922055456","host":"s3://npm-registry-packages"}},"15.0.0-canary.a246a4439.0":{"name":"@material/shape","version":"15.0.0-canary.a246a4439.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.a246a4439.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"15ea064ada9d057400f9600bad385b49529f407d","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.a246a4439.0.tgz","fileCount":15,"integrity":"sha512-rcWPlCoHyP79ozeEKk73KWt9WTWdh6R68+n75l08TSTvnWZB5RRTmsI9BMkz55O9OJD/8H8ZsOxBe4x2QXUT7w==","signatures":[{"sig":"MEUCIAJuMOEneXGajie/8bXjakdXuWAsgEwVd/3FJKmHczzSAiEA2Wv7hGEjz3iLY8cpYhyTW7tdksB46x+1nfUVDocnd7Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32519},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"40201df8b7e53b61aead4acdfa34b48fb1d155b8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.a246a4439.0","@material/theme":"15.0.0-canary.a246a4439.0","@material/feature-targeting":"15.0.0-canary.a246a4439.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.a246a4439.0_1695059106574_0.8740818890416056","host":"s3://npm-registry-packages"}},"15.0.0-canary.d153db62b.0":{"name":"@material/shape","version":"15.0.0-canary.d153db62b.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.d153db62b.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3785db8ee4261db913d5a8adf5cd841e88fcc698","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.d153db62b.0.tgz","fileCount":15,"integrity":"sha512-OnK0EwNpQDbqwpHiIYM9X71rLuYZi86C1s9fC/9G5aB4SWEprTPq/KzCRqATeg3nu94WLuwKfR0NtIgAG220Wg==","signatures":[{"sig":"MEUCIGkBJcZNo7sDJTwy6mDzaf+vamYD79JFhV3PX1G0MErwAiEAl/S7C5kP8Mw6A6s4ddARVoA8FPG/sUmOF5Qa5I9kNrw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32519},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"4ca05c144c691cd06cd5926fe0bc54818e462202","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.d153db62b.0","@material/theme":"15.0.0-canary.d153db62b.0","@material/feature-targeting":"15.0.0-canary.d153db62b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.d153db62b.0_1695150865810_0.7482317472563225","host":"s3://npm-registry-packages"}},"15.0.0-canary.2528c1c3b.0":{"name":"@material/shape","version":"15.0.0-canary.2528c1c3b.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.2528c1c3b.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"04cda4a5866acef4c91625563e18965176b91da7","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.2528c1c3b.0.tgz","fileCount":15,"integrity":"sha512-/fwlSVcnHI0KmjaDThV+MVrexnhhibJpqgpXsnsB51jg0B4S7bfogZwzo6iFyFI2LGaupySd4T087GdqBhVf5A==","signatures":[{"sig":"MEUCIEyTjT5M5Z1WkP9oxb0W6Dsv7dqBT/F2ob2mf3VEzBpkAiEAiQ+I82/WgSnY5MM3KW7kbL8eUnGXhtNWAF6flmGa4yY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32519},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"98b5b57bd5356f48610a254e8c4acff388d5fb7b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.2528c1c3b.0","@material/theme":"15.0.0-canary.2528c1c3b.0","@material/feature-targeting":"15.0.0-canary.2528c1c3b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.2528c1c3b.0_1695233138977_0.2544264240001961","host":"s3://npm-registry-packages"}},"15.0.0-canary.1728a6dcf.0":{"name":"@material/shape","version":"15.0.0-canary.1728a6dcf.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.1728a6dcf.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2c3c3a2a6c6fe9a4c9f5eb13490dbe9c4d3166e9","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.1728a6dcf.0.tgz","fileCount":15,"integrity":"sha512-t2PCWqrPM1nh17nbw56whB+dEC5ery/7kyXdDzvk64Ps+1MYtkpbPS1yUHQLnf2zs+G3EdQOywb5nzCI2yxFfg==","signatures":[{"sig":"MEUCIQC1vaMVDOGs1INJTgORfVMcF3TbYphPHmD/+BYJ7wYLQgIgN2alctvBQLIl1VPcx2l+Ra0DOklTdO+hIE2N12eYRhU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32519},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"3828aedf4f344a948780a69956ca4f069cef3daa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.1728a6dcf.0","@material/theme":"15.0.0-canary.1728a6dcf.0","@material/feature-targeting":"15.0.0-canary.1728a6dcf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.1728a6dcf.0_1695691353125_0.41287344526556824","host":"s3://npm-registry-packages"}},"15.0.0-canary.ebb636f3d.0":{"name":"@material/shape","version":"15.0.0-canary.ebb636f3d.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.ebb636f3d.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"486ec10561a7fd66c3f6ce4459712fcd5f5752bd","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.ebb636f3d.0.tgz","fileCount":15,"integrity":"sha512-M6/0zp3q1I0zsdu/O5VgGR/oW/wsfwMURDz7RVhGkeShBqAhVTHjPHanff1S6QKzx061TMc/zcUqrvp4OgCV3w==","signatures":[{"sig":"MEUCIQDl2CWzVnLq0hr1LITzXBAE2iEif6hCmv9IpDjCUQ+R/QIgaNgITltXbfkMcg94R5+IAeqeN7VHMHf0RigyJeHFKV4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32519},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"6f62607a00dd885ebbe422b247dc4acc1ded22cb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.ebb636f3d.0","@material/theme":"15.0.0-canary.ebb636f3d.0","@material/feature-targeting":"15.0.0-canary.ebb636f3d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.ebb636f3d.0_1696016629070_0.9407493582430819","host":"s3://npm-registry-packages"}},"15.0.0-canary.c0d21ecc9.0":{"name":"@material/shape","version":"15.0.0-canary.c0d21ecc9.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.c0d21ecc9.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"83567336abb59dc3b707d24e9e5d8b6a97aa1122","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.c0d21ecc9.0.tgz","fileCount":15,"integrity":"sha512-P5g7CrTPTFPSkNQz0J/82eH+Z4oXLYMY5k/G1DIRXM8UuaUICTZ4ceywVRRWmC7E3RQW0S8hNIe4vaD/HEJLiQ==","signatures":[{"sig":"MEYCIQDMuxzozXXLpyEagc4lItSAnhs+J2eJEr0jbBCSCAEOxQIhAKmHIRoKrJ9zeN1OgDeyVrWud61ssgvsAvpqO7JW4xwK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32519},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"0a932ea790a12d359ce4ec7c5c4c7aec7edf565d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.c0d21ecc9.0","@material/theme":"15.0.0-canary.c0d21ecc9.0","@material/feature-targeting":"15.0.0-canary.c0d21ecc9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.c0d21ecc9.0_1696880170719_0.6807102488021872","host":"s3://npm-registry-packages"}},"15.0.0-canary.127a44b28.0":{"name":"@material/shape","version":"15.0.0-canary.127a44b28.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.127a44b28.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9c650eef6917d20c455d9a5b7a04f0164449d192","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.127a44b28.0.tgz","fileCount":15,"integrity":"sha512-HijiHCc5UYh4Lx9KbO323jwP7wzgMUO871Bai0JLaUGSX73H0rSa8z9tJkmAB5C35N5UYrMW2SaXjDbnMtFugA==","signatures":[{"sig":"MEUCIA/Ab1XVrlSSqO8V4Bh+U1G+i5+n9ch78L4kVe/DX+7YAiEAqxhlZM7xsLRlUi6zA+WUO40Fz0BspXV4B4DHNo1rxkE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32519},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"88d1fc2c5354e751ea3ab567d26bb1886ee152d3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.127a44b28.0","@material/theme":"15.0.0-canary.127a44b28.0","@material/feature-targeting":"15.0.0-canary.127a44b28.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.127a44b28.0_1697140760251_0.19585567630270972","host":"s3://npm-registry-packages"}},"15.0.0-canary.0ad128337.0":{"name":"@material/shape","version":"15.0.0-canary.0ad128337.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.0ad128337.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"df8488c136949a0ccefa5807d431dd5058d8ff2d","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.0ad128337.0.tgz","fileCount":15,"integrity":"sha512-lYiQSFSx3P8B976m/puuPTlBv7/Y/gflSpw1RmIJpH+cfCsfc0Y6bzgWOy1WQdbtiYeRn7017RxryguFNiqMcQ==","signatures":[{"sig":"MEUCIDPKvykSQH/8BGQz2srK+8j1/2vlXKyoW8A2IFxGnOFnAiEAtzJ/7GtztWXdCS+21QCtxPmFwEKEpO9ELapRj9j10KU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32519},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"bb76f531b61a52aae34c7a1efa45824fd32e49f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.0ad128337.0","@material/theme":"15.0.0-canary.0ad128337.0","@material/feature-targeting":"15.0.0-canary.0ad128337.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.0ad128337.0_1697741470286_0.1394308358103009","host":"s3://npm-registry-packages"}},"15.0.0-canary.9cec94097.0":{"name":"@material/shape","version":"15.0.0-canary.9cec94097.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.9cec94097.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d0b0266d27dca9ff46e114c3ebad5d92cfb7e66e","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.9cec94097.0.tgz","fileCount":15,"integrity":"sha512-q46e9G2wpA78/5tp3lJu+PcsaGN1p0Gc1p0T7OibVbBq5rOwYwirsy3w2MW5ZHC3bO5nCr8brJ4ZpSpY6SNfqg==","signatures":[{"sig":"MEYCIQDLuwy4+AfUc7z+fUt2w9Hxk+dklgbaFi/Hm7zW5u58tgIhAMsJ1BoXmEg0SaUq9VcdNtafLnItb8/H+rP9mH0cA5fT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32519},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"1a8019402daf97efb72456551503dfb3fa31466b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.9cec94097.0","@material/theme":"15.0.0-canary.9cec94097.0","@material/feature-targeting":"15.0.0-canary.9cec94097.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.9cec94097.0_1697756925347_0.2260718992861641","host":"s3://npm-registry-packages"}},"15.0.0-canary.c51a0bbcc.0":{"name":"@material/shape","version":"15.0.0-canary.c51a0bbcc.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.c51a0bbcc.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d7962f2fbdc23136a52cec9ce3b25db5acca1445","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.c51a0bbcc.0.tgz","fileCount":15,"integrity":"sha512-HFTdK+wGhlbC+bZDrnZiFQrvXI3qT1wsLA3Bs6VVLvfFppkCM1o56spdSe78UhkoAemsrry/sc+8dN+tBr/U3w==","signatures":[{"sig":"MEUCIE84gnFsldlglLZB75OwtWcgHr1SQleaYM+FtqsmKBv2AiEA1/AE6ry0/6W6h8mxg3X6iqvWWUjJjFjle91YNcxeAF0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32519},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"e65c7fe6dcc6d6069f00d4d2f8c55e61710d046b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.c51a0bbcc.0","@material/theme":"15.0.0-canary.c51a0bbcc.0","@material/feature-targeting":"15.0.0-canary.c51a0bbcc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.c51a0bbcc.0_1700081895915_0.008258721391476875","host":"s3://npm-registry-packages"}},"15.0.0-canary.d76666ad4.0":{"name":"@material/shape","version":"15.0.0-canary.d76666ad4.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.d76666ad4.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5c6b4d3f3a538db579397c46cf97a3a2628211c5","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.d76666ad4.0.tgz","fileCount":15,"integrity":"sha512-BoTwB4/EfsiymGTxFYmX5AjtYcn5iap/o0mfn/ut5krWYb2CttKCPQ50DBAvvf18wTbMdzZ/xFCHtAVzi9RIDw==","signatures":[{"sig":"MEUCIEGg+4w7+WDMcoRQ6GbleLdPjOcN7fS6pfelBXaAKCykAiEAvtHESfpDDmpiPk/eRmfNzN1pXM5WQJP8xAIax61V+fk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32519},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"8fc3640e389fda0098b42091a9a1ab8653fc6470","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.d76666ad4.0","@material/theme":"15.0.0-canary.d76666ad4.0","@material/feature-targeting":"15.0.0-canary.d76666ad4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.d76666ad4.0_1701123160197_0.7652453306899487","host":"s3://npm-registry-packages"}},"15.0.0-canary.8656bf0e0.0":{"name":"@material/shape","version":"15.0.0-canary.8656bf0e0.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.8656bf0e0.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"099feed25034d867319cbc1323280fd7beb3f974","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.8656bf0e0.0.tgz","fileCount":15,"integrity":"sha512-ojoYD7+1frQ5/FCVXgaKqyqwVCQwOF94sDHO6TEPyPjUW5FFN6UWQVD4zt8jP527VVRYnpaBOwN/tuawdZmd2g==","signatures":[{"sig":"MEUCIQCfizXMlMzebTTXh+7zO4rs7sRaa6pfu6utLAaQhI0LVwIgeyo456Fvl/4m1ZEtG5gwOjMi+MWZWyd9FzeiJTMP7fE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32519},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"36cab37e468233da3044a10c1df388f634163cc1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.8656bf0e0.0","@material/theme":"15.0.0-canary.8656bf0e0.0","@material/feature-targeting":"15.0.0-canary.8656bf0e0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.8656bf0e0.0_1702415891684_0.037177142891400505","host":"s3://npm-registry-packages"}},"15.0.0-canary.7f224ddd4.0":{"name":"@material/shape","version":"15.0.0-canary.7f224ddd4.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.7f224ddd4.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f4cb9f8f779449b12d69d8a303bab54211db7e52","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.7f224ddd4.0.tgz","fileCount":15,"integrity":"sha512-8z8l1W3+cymObunJoRhwFPKZ+FyECfJ4MJykNiaZq7XJFZkV6xNmqAVrrbQj93FtLsECn9g4PjjIomguVn/OEw==","signatures":[{"sig":"MEQCIByMRiHeaTZSpuQo5eV9q3v8wCgrCOEZsUsYqXAEqqvpAiA3LMfqDaRsgEMwMs/IbjUTu1fAxezCzJIn7n1rvcYhfQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32519},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"ff8ff3ce455054f1532d1ae0983f40634a524886","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.7f224ddd4.0","@material/theme":"15.0.0-canary.7f224ddd4.0","@material/feature-targeting":"15.0.0-canary.7f224ddd4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.7f224ddd4.0_1703743718574_0.728105653942462","host":"s3://npm-registry-packages"}},"15.0.0-canary.a0b8a90c0.0":{"name":"@material/shape","version":"15.0.0-canary.a0b8a90c0.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.a0b8a90c0.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1d0ec9f83892a8d69ea861a9048c3588219f44dd","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.a0b8a90c0.0.tgz","fileCount":15,"integrity":"sha512-6hBuLZfijJhSp0fjb3D59D0J8p98JT5nUlWRYZqdUcnlb0E1EERaviORtxk5vYtAkZr1ZlY0AZXkmJh1X69AaA==","signatures":[{"sig":"MEUCIQCFaO2njMWw0UHhzV+hO0YSuxznUKVu0sUgsbnCwQc7NAIgG1PEpF8KUQxQ7V4o0fF3zhoDGH6FIVKA30KlPMOkiTI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32519},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"85d5965379b080c9f852ecbbd95031e363636dfd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.a0b8a90c0.0","@material/theme":"15.0.0-canary.a0b8a90c0.0","@material/feature-targeting":"15.0.0-canary.a0b8a90c0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.a0b8a90c0.0_1707333540655_0.08838785509985536","host":"s3://npm-registry-packages"}},"15.0.0-canary.e50b478eb.0":{"name":"@material/shape","version":"15.0.0-canary.e50b478eb.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.e50b478eb.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"668b0a8858574575491866c0f28b3d3aeead32ad","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.e50b478eb.0.tgz","fileCount":15,"integrity":"sha512-LMtfa7vgtPbHSvYVxt/CQdKraBPdARzDZ6xlObn3FaFqV4+okMc6TNG+b6gI/YEpcfRpRN+hS9UDzTZtR1RFjQ==","signatures":[{"sig":"MEYCIQCLARsn94rZ3mmGcvMqzGOAp65VOxZ37/tDmGQgj1tJtwIhAL8nmBk6K6LLgz/DCYIlUKbhBaPGeK/BRXp1bsQ+bP96","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32519},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"4691455eaee76f99b18be70913c9fefb7cf3c2ae","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.e50b478eb.0","@material/theme":"15.0.0-canary.e50b478eb.0","@material/feature-targeting":"15.0.0-canary.e50b478eb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.e50b478eb.0_1707415652097_0.3125032920423654","host":"s3://npm-registry-packages"}},"15.0.0-canary.c43b3438b.0":{"name":"@material/shape","version":"15.0.0-canary.c43b3438b.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.c43b3438b.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8003617360ad5912752b6f58661914e39ff48005","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.c43b3438b.0.tgz","fileCount":15,"integrity":"sha512-DKqMhz5/ZIw34JYqsrBRgPDoEnYw95CzhOboVaKbItDYwqLLIusw6Dtd26yszW7gOTHCQgYY4L2GY+/KZSij1Q==","signatures":[{"sig":"MEYCIQDI0rCETlc/joGSvXlmXKaP3Xlv+3jbU9Xd2L4/5Ia25QIhAOP7Kfmis+Q1OcJrt6oAV/mXyLn1ryBvEbWANSaewdBY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32519},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"e69adcf897de97b302f026f07bbc2571b1a488ca","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.c43b3438b.0","@material/theme":"15.0.0-canary.c43b3438b.0","@material/feature-targeting":"15.0.0-canary.c43b3438b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.c43b3438b.0_1708719422601_0.2553873820364283","host":"s3://npm-registry-packages"}},"15.0.0-canary.819498d8c.0":{"name":"@material/shape","version":"15.0.0-canary.819498d8c.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.819498d8c.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1c7f869dd20df7a53c46dbd92b8f6c75507e4a61","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.819498d8c.0.tgz","fileCount":15,"integrity":"sha512-g8DBVgce0lpVoGkETQbwGXaWnmzMcdBEWV/nPMJBVOY4KZt6fIWG5gMaI4iXKRqQFJWha73ibnrxH5OVLbldqA==","signatures":[{"sig":"MEUCIDXX/XYAe/3ipwokm4iQWuSjKSEgZmrxfBzbz5sKuPgCAiEA51Tc1VoEJbSlJN+pZO+zPcCkpF5dvC6XpXe/Cr1nFW4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32519},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"886876a8252aacefe1942b13ba9251af9204bcdd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.819498d8c.0","@material/theme":"15.0.0-canary.819498d8c.0","@material/feature-targeting":"15.0.0-canary.819498d8c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.819498d8c.0_1710515651106_0.6897571175814492","host":"s3://npm-registry-packages"}},"15.0.0-canary.453a6248a.0":{"name":"@material/shape","version":"15.0.0-canary.453a6248a.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.453a6248a.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"511844402f5895d7b70db84577bb4c0fe9950289","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.453a6248a.0.tgz","fileCount":15,"integrity":"sha512-mDFv7wHGr2E0w+Lj3zw18LoxaXN+Ox88IUsWibs29wv/9QQpen6JdedWdd4R2Y+TJZ37tZKt6L+Iablzmrd6jQ==","signatures":[{"sig":"MEUCIHihO9b2rK8BXpJxk1AeJmn2gOdfEM7BceH9CTRJIhvSAiEA/3WOVGa0naJ+iWlG7hQxU0dMjk7eTSNBHvMsbfSH19Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32519},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"1eea6443d63f2bc64fe8f6f86664b54266c41244","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.453a6248a.0","@material/theme":"15.0.0-canary.453a6248a.0","@material/feature-targeting":"15.0.0-canary.453a6248a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.453a6248a.0_1711386783594_0.5421898263200164","host":"s3://npm-registry-packages"}},"15.0.0-canary.68edc03c6.0":{"name":"@material/shape","version":"15.0.0-canary.68edc03c6.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.68edc03c6.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"74cf76df478941ee3d3199dd49d9372e2034ff99","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.68edc03c6.0.tgz","fileCount":15,"integrity":"sha512-or7ST0WSwTifv9oqBAriN8PcYpS22o9C7ujeLrsVnWcJrX+unAO/FxRpp3VkkSunb3r9SHp8hqF4mYBM0jnA/Q==","signatures":[{"sig":"MEQCIF9ZCMgpTTAjo7i5MRdvnGi7TqqvI4B3Ya6jErzuYpbcAiA+qlNY0XxvFugFCIOTtyhUREa1wQAHv4zNbMalOg2Rxw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32519},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"04046ad51f4d581f93e797ec929d219422dd0235","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.68edc03c6.0","@material/theme":"15.0.0-canary.68edc03c6.0","@material/feature-targeting":"15.0.0-canary.68edc03c6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.68edc03c6.0_1712603115036_0.21723807381927696","host":"s3://npm-registry-packages"}},"15.0.0-canary.5bebc0064.0":{"name":"@material/shape","version":"15.0.0-canary.5bebc0064.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.5bebc0064.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"37c5e8fe44e8148d8c4bad7161d6a592644867cf","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.5bebc0064.0.tgz","fileCount":15,"integrity":"sha512-Yg0oZzAqgASnVXfFb0braqpU2wVrSjGKiB3e7Qt/wzLVGIA1K2jh8Gm4NhP3OZTrppQzO1q62qGCeVsJ4hORhg==","signatures":[{"sig":"MEYCIQC/8GAUGgr/lc4zixF3m8OwyNIqiPMOucaRXci1cHwruwIhALbG7GmhhLAHcQCssyJTf+hgj7+AOspVtfuhxbqrABZT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32519},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"ff39e65972de013a29dd14429e111139bc616366","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.5bebc0064.0","@material/theme":"15.0.0-canary.5bebc0064.0","@material/feature-targeting":"15.0.0-canary.5bebc0064.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.5bebc0064.0_1712871593483_0.9437273593859583","host":"s3://npm-registry-packages"}},"15.0.0-canary.311f29a60.0":{"name":"@material/shape","version":"15.0.0-canary.311f29a60.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.311f29a60.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9dd54fabd4d278ee2ac3617bfd4102c5e04edbe3","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.311f29a60.0.tgz","fileCount":15,"integrity":"sha512-E3/WnOiUpaAVaMYaIFkx84rLUW8otMm71dhoHPSQvhtp2iCd1rXfBN56LGjJolP50iF6Ch6APoARS36EbuehgQ==","signatures":[{"sig":"MEUCIAlZBFmvizZmhZQDx0XVI8Q6nU4QTpk+epvc9Ov9xS75AiEAtGxTiKofPntMm7PFGkHcoOgAsqcsz2CCYQMXi2vyvzc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32519},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"7bc0264e163e842f0f96c1dbf7a468c022db1497","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.311f29a60.0","@material/theme":"15.0.0-canary.311f29a60.0","@material/feature-targeting":"15.0.0-canary.311f29a60.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.311f29a60.0_1713895145177_0.41453406051826613","host":"s3://npm-registry-packages"}},"15.0.0-canary.65c10a622.0":{"name":"@material/shape","version":"15.0.0-canary.65c10a622.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.65c10a622.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8a80dcf2ed23cfa9e4300f5e69d1532b2781e697","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.65c10a622.0.tgz","fileCount":15,"integrity":"sha512-OXkth7k43DItY8r4rxUfgy29GQOILehW18eP6Qujj5oRPcAVLqkGtXOQbJ4eTGRmktOjYtCN3BOMz7JW4In9Cw==","signatures":[{"sig":"MEQCIFDG0EEr0dsFpP04J5BvKyX2bSMD8ALdsP5BtAYC0ticAiBH8A9fNVUonpdMMoz/grhfJzmgshOk5Jc93r3+/tN5Yg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32519},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"1f3126503c812250084b65b6edbb26f25ef4a174","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.65c10a622.0","@material/theme":"15.0.0-canary.65c10a622.0","@material/feature-targeting":"15.0.0-canary.65c10a622.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.65c10a622.0_1714070894427_0.44257942794795757","host":"s3://npm-registry-packages"}},"15.0.0-canary.4b35cb7d0.0":{"name":"@material/shape","version":"15.0.0-canary.4b35cb7d0.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.4b35cb7d0.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ed7de5496d2d94062ebdb96fc36fb59ddce594a0","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.4b35cb7d0.0.tgz","fileCount":15,"integrity":"sha512-ZpfD8PSbYqSOJBSEnqEzLhY36LiQPCFZszXDH6cQnkWwb7gmo0gqpLl6gdsLiSNWYCaDwWCz0vK/hOyJeG5uIw==","signatures":[{"sig":"MEUCIQDv3lSez4WotBEZfHaSILc00MqepuOcoBcCQOM17ibtWAIgGrMViVqkOUhtqkvHsEQTEHdm5lgWmympDP/QNBKqf3k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32519},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"cba29aaa21c1bc2b1f1a02e5ddfa4a5110d9ef63","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.4b35cb7d0.0","@material/theme":"15.0.0-canary.4b35cb7d0.0","@material/feature-targeting":"15.0.0-canary.4b35cb7d0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.4b35cb7d0.0_1714651337331_0.26001004006344575","host":"s3://npm-registry-packages"}},"15.0.0-canary.f80ac92b0.0":{"name":"@material/shape","version":"15.0.0-canary.f80ac92b0.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.f80ac92b0.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a0a6fe7d121425fd183acedf15e77ec9232641ed","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.f80ac92b0.0.tgz","fileCount":15,"integrity":"sha512-xpgXc7Jkf+mKKNirdypaeNTh8Z+jMWuvcHHtNCHPPW/kCKaxN8lqJFSwf+1EjhJnXhMM+4ZPGjAi/z+QbHmItQ==","signatures":[{"sig":"MEUCIA5VLwS1MmScvf1Pngb+1x21wNU9R+PRmCuF3T4z25p/AiEAyMAIHFV912lY8BmjoTjdWNDIClrKDCd4h/A31B5n+2U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32519},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"514a3afe9efc5bcebf1ace1e335357184ee1a9e0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.f80ac92b0.0","@material/theme":"15.0.0-canary.f80ac92b0.0","@material/feature-targeting":"15.0.0-canary.f80ac92b0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.f80ac92b0.0_1714651958322_0.9170488325651849","host":"s3://npm-registry-packages"}},"15.0.0-canary.2f5b899bc.0":{"name":"@material/shape","version":"15.0.0-canary.2f5b899bc.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.2f5b899bc.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"38e5aea486fa6277cb645b3df978d7a2b455b1dd","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.2f5b899bc.0.tgz","fileCount":15,"integrity":"sha512-mbzASrHwvUUknWRHUSb+xHAniatQIVu4qa2d6nAGWZsHGH9qd6FHNOGyUYxdGT7KAFZVQR+N5bG/+y/Obuex2Q==","signatures":[{"sig":"MEUCIQDhSeD71j2q2XyuLRPljwM/LKs9btkR8szbCDiGt3SMCQIgaKRthlppFsj8mvXropeSktMC9tWQNC/V222rZq8zsQM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32519},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"751553ca74ad43074c963487257a8862de87844b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.2f5b899bc.0","@material/theme":"15.0.0-canary.2f5b899bc.0","@material/feature-targeting":"15.0.0-canary.2f5b899bc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.2f5b899bc.0_1716213257493_0.9394909223427743","host":"s3://npm-registry-packages"}},"15.0.0-canary.cfec83c74.0":{"name":"@material/shape","version":"15.0.0-canary.cfec83c74.0","keywords":["material components","material design","shape"],"license":"MIT","_id":"@material/shape@15.0.0-canary.cfec83c74.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aa4ac74f992358af5786d8f8f26ca76f86b270c5","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.cfec83c74.0.tgz","fileCount":15,"integrity":"sha512-YBW3+QFHAfdTtOKeIIsrgChtCB4bP/do23/jDaoaEGbg8c9CyELrydk4wqfDSaI0gqmws903P1vGS5RwU1Xqfg==","signatures":[{"sig":"MEUCICNO1vJmZpw9nZ6Dznte4hw3okTRggqDAZpkuILGdcvkAiEAqKVSgzmP1LpRmn6WW1rQcaBD+LdA5AGZuJFxmZm0scg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32519},"readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n","gitHead":"0ec8b129344ebbe45f00b6ad892b682b054ea892","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.cfec83c74.0","@material/theme":"15.0.0-canary.cfec83c74.0","@material/feature-targeting":"15.0.0-canary.cfec83c74.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_15.0.0-canary.cfec83c74.0_1716231373251_0.2994064691999234","host":"s3://npm-registry-packages"}},"15.0.0-canary.423edc3dc.0":{"name":"@material/shape","description":"Shape utilities for Material Components for the web","version":"15.0.0-canary.423edc3dc.0","license":"MIT","keywords":["material components","material design","shape"],"repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-shape"},"publishConfig":{"access":"public"},"sideEffects":false,"dependencies":{"@material/feature-targeting":"15.0.0-canary.423edc3dc.0","@material/rtl":"15.0.0-canary.423edc3dc.0","@material/theme":"15.0.0-canary.423edc3dc.0","tslib":"^2.1.0"},"gitHead":"19b2c5a95782b4928b3aecb29a1075c42aee53e5","readme":"<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\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/shape@15.0.0-canary.423edc3dc.0","_nodeVersion":"14.21.3","_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","dist":{"integrity":"sha512-CfP4UZQtUrP1cyNXUN8XG/x7LppxhGqtLSG4KqDF0+qvdGRiO16R3eMuUWVMBdFqg79JSlIHZooIgkjJevxVcw==","shasum":"0f38d641c4c2d7536209f209a91234d17f82fd8e","tarball":"https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.423edc3dc.0.tgz","fileCount":15,"unpackedSize":32519,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDi73othJmgu8QUL6DOOqEneGMhvgUfyCEQSqKkn0iWkAiEAw9sbIPzm9myrylbXBzEUgqY8wHNpXCNfUCmpBIOKnEY="}]},"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/shape_15.0.0-canary.423edc3dc.0_1719425503234_0.5521248531567327"},"_hasShrinkwrap":false}},"time":{"created":"2018-04-23T22:40:42.820Z","modified":"2024-06-26T18:11:43.745Z","0.35.0":"2018-04-23T22:40:42.918Z","0.39.0":"2018-08-27T17:40:03.606Z","0.40.0":"2018-09-24T20:00:30.714Z","0.40.1":"2018-10-08T20:53:57.623Z","0.41.0":"2018-10-29T20:21:38.004Z","0.42.0":"2018-12-04T22:54:36.723Z","0.43.0":"2019-01-07T19:48:46.747Z","0.44.1":"2019-02-19T23:02:41.277Z","1.0.0-0":"2019-02-27T23:59:04.810Z","1.0.0-1":"2019-03-04T23:32:58.388Z","1.0.0":"2019-03-06T21:07:40.816Z","1.1.1":"2019-04-08T20:13:47.565Z","3.0.0-alpha.0":"2019-06-12T04:06:33.399Z","3.0.0-alpha.1":"2019-06-12T19:01:57.293Z","3.0.0":"2019-06-25T22:27:48.168Z","3.1.0":"2019-07-22T22:02:21.407Z","4.0.0-alpha.0":"2019-08-07T21:09:03.291Z","4.0.0-canary.0":"2019-09-05T04:37:38.334Z","4.0.0-canary.1":"2019-09-09T20:20:29.404Z","4.0.0-canary.79d881baf.0":"2019-09-13T02:21:22.738Z","4.0.0-canary.e851d4f40.0":"2019-09-13T04:07:01.459Z","4.0.0-canary.905884690.0":"2019-09-16T23:47:55.223Z","4.0.0-canary.199534d61.0":"2019-09-27T18:57:34.426Z","4.0.0-canary.22d7ad2fb.0":"2019-10-15T18:57:02.693Z","4.0.0-canary.735147131.0":"2019-10-16T01:23:19.958Z","4.0.0-canary.062ade5c0.0":"2019-10-17T01:01:23.749Z","4.0.0-canary.774ad4f8.0":"2019-10-17T04:04:10.996Z","4.0.0-canary.5916d18c.0":"2019-10-18T20:08:18.985Z","4.0.0-canary.d4141c95.0":"2019-10-24T01:38:00.559Z","4.0.0-canary.2b878b3e.0":"2019-10-25T02:10:25.739Z","4.0.0-canary.b06c0efe.0":"2019-10-26T01:34:53.438Z","4.0.0-canary.01628efa.0":"2019-10-29T00:02:44.327Z","4.0.0-canary.b5c6d66b.0":"2019-10-29T17:56:24.997Z","4.0.0-canary.cdf858ea.0":"2019-11-01T17:58:36.502Z","4.0.0-canary.719b57e1.0":"2019-11-01T20:01:16.921Z","4.0.0-canary.97cbbdc2.0":"2019-11-01T20:28:51.668Z","4.0.0-canary.8e36b3b7.0":"2019-11-01T21:00:53.696Z","4.0.0-canary.62d3a09b.0":"2019-11-01T21:10:27.579Z","4.0.0":"2019-11-02T18:11:32.549Z","5.0.0-canary.b5eb51e94.0":"2019-11-07T18:33:24.097Z","5.0.0-canary.58500806e.0":"2019-11-08T15:35:25.090Z","5.0.0-canary.66299b646.0":"2019-11-08T20:33:27.160Z","5.0.0-canary.821871e04.0":"2019-11-08T21:27:56.309Z","5.0.0-canary.491fddc31.0":"2019-11-08T22:06:57.577Z","5.0.0-canary.b0cecf145.0":"2019-11-09T18:42:09.185Z","5.0.0-canary.afe0dd1bc.0":"2019-11-11T15:37:25.344Z","5.0.0-canary.b4cfdc40b.0":"2019-11-14T15:58:14.672Z","5.0.0-canary.525989b5d.0":"2019-11-14T23:30:34.245Z","5.0.0-canary.7084b403a.0":"2019-11-15T01:05:38.200Z","5.0.0-canary.3cbee6dac.0":"2019-11-15T22:32:33.698Z","5.0.0-canary.591a6ad44.0":"2019-11-18T23:48:16.584Z","5.0.0-canary.5729943ba.0":"2019-11-20T05:19:06.267Z","5.0.0-canary.e89750dc7.0":"2019-11-27T02:09:29.774Z","5.0.0-canary.3e560b33a.0":"2019-11-27T02:10:12.755Z","5.0.0-canary.7fd17ce5e.0":"2019-11-27T02:10:27.388Z","5.0.0-canary.ec729683b.0":"2019-11-27T15:54:33.484Z","5.0.0-canary.b8bc4a26e.0":"2019-11-27T19:16:30.733Z","5.0.0-canary.f978109c3.0":"2019-12-02T17:07:04.184Z","5.0.0-canary.ad9dfe706.0":"2019-12-03T23:17:44.313Z","5.0.0-canary.5e45d77f3.0":"2019-12-03T23:18:54.310Z","5.0.0-canary.d10e8cdf3.0":"2019-12-03T23:19:44.911Z","5.0.0-canary.a5dbd8a2a.0":"2019-12-03T23:54:42.101Z","5.0.0-canary.ba879b68b.0":"2019-12-04T20:22:24.328Z","5.0.0-canary.aa0eba489.0":"2019-12-06T01:58:52.301Z","5.0.0-canary.cb7b71a86.0":"2019-12-06T23:55:38.449Z","5.0.0-canary.50f110a6c.0":"2019-12-10T16:59:16.196Z","5.0.0-canary.878a08b7c.0":"2019-12-11T20:16:03.850Z","5.0.0-canary.397905b4e.0":"2019-12-12T02:47:00.778Z","5.0.0-canary.1fbf5bd1d.0":"2019-12-12T18:58:59.539Z","5.0.0-canary.b723dfa78.0":"2019-12-12T20:09:25.671Z","5.0.0-canary.1c494e567.0":"2019-12-12T23:36:27.364Z","5.0.0-canary.c9e98a125.0":"2019-12-17T18:09:23.366Z","5.0.0-canary.5ffe8f7e3.0":"2019-12-17T22:33:02.462Z","5.0.0-canary.47949b08e.0":"2019-12-18T17:40:15.996Z","5.0.0-canary.b240bcc1b.0":"2019-12-18T19:16:23.577Z","5.0.0-canary.391674a26.0":"2019-12-18T19:16:40.170Z","5.0.0-canary.c4837746c.0":"2019-12-18T19:34:32.439Z","5.0.0-canary.e41a70425.0":"2019-12-18T23:19:46.412Z","5.0.0-canary.bac43eb43.0":"2019-12-18T23:23:37.143Z","5.0.0-canary.2e491de55.0":"2019-12-19T10:49:25.508Z","5.0.0-canary.ae101c144.0":"2019-12-19T16:24:28.354Z","5.0.0-canary.a51c31f26.0":"2019-12-19T17:14:00.069Z","5.0.0-canary.21fc4e13b.0":"2019-12-19T21:26:49.705Z","5.0.0-canary.d2ae6e17d.0":"2019-12-19T22:23:52.147Z","5.0.0-canary.ba30399ad.0":"2019-12-20T01:09:24.305Z","5.0.0-canary.a08ccec35.0":"2019-12-20T23:26:27.444Z","5.0.0-canary.a2f75105e.0":"2019-12-23T19:47:17.036Z","5.0.0-canary.c054a24c7.0":"2019-12-23T21:49:40.628Z","5.0.0-canary.c6808c51c.0":"2019-12-23T21:54:22.987Z","5.0.0-canary.7bce9cf77.0":"2019-12-26T18:45:15.923Z","5.0.0-canary.c92f038c3.0":"2019-12-30T22:02:42.304Z","5.0.0-canary.1f1ac7558.0":"2020-01-02T20:53:45.371Z","5.0.0-canary.ec26e799c.0":"2020-01-02T21:42:05.399Z","5.0.0-canary.0a40ced40.0":"2020-01-03T17:09:01.888Z","5.0.0-canary.3adf84899.0":"2020-01-03T18:22:04.121Z","5.0.0-canary.0d42ee650.0":"2020-01-03T21:36:39.771Z","5.0.0-canary.7be9e4a04.0":"2020-01-06T17:04:01.541Z","5.0.0-canary.847dd1ada.0":"2020-01-06T19:25:54.811Z","5.0.0-canary.39df7e5df.0":"2020-01-07T00:55:08.727Z","5.0.0-canary.f1a2581ab.0":"2020-01-07T14:59:12.387Z","5.0.0-canary.7c7ddf347.0":"2020-01-07T15:15:11.123Z","5.0.0-canary.a1c84d4b5.0":"2020-01-07T18:09:43.033Z","5.0.0-canary.ec9f16578.0":"2020-01-07T19:39:12.596Z","5.0.0-canary.b602226ce.0":"2020-01-07T20:14:53.496Z","5.0.0-canary.b2d2dc08c.0":"2020-01-07T21:25:39.295Z","5.0.0-canary.61f2d7580.0":"2020-01-07T21:39:19.397Z","5.0.0-canary.d1be53a2e.0":"2020-01-07T22:16:31.433Z","5.0.0-canary.9b0d06e32.0":"2020-01-07T22:18:58.618Z","5.0.0-canary.730c807a0.0":"2020-01-07T22:20:36.300Z","5.0.0-canary.2213152cd.0":"2020-01-08T17:21:50.630Z","5.0.0-canary.5750f7169.0":"2020-01-08T17:56:24.816Z","5.0.0-canary.f7abc7a43.0":"2020-01-08T18:27:23.862Z","5.0.0-canary.bf7b4a061.0":"2020-01-08T18:41:13.440Z","5.0.0-canary.784fa7903.0":"2020-01-08T19:09:58.323Z","5.0.0-canary.823c050ba.0":"2020-01-08T20:10:24.257Z","5.0.0-canary.70c708dee.0":"2020-01-08T20:21:38.116Z","5.0.0-canary.5ed9d13d0.0":"2020-01-08T21:42:15.557Z","5.0.0-canary.4819cc7e5.0":"2020-01-08T21:57:40.040Z","5.0.0-canary.fe3ffd2c3.0":"2020-01-08T22:15:51.850Z","5.0.0-canary.c0e850090.0":"2020-01-08T22:22:52.914Z","5.0.0-canary.615f86f38.0":"2020-01-08T22:39:36.857Z","5.0.0-canary.1eb032637.0":"2020-01-08T22:59:36.908Z","5.0.0-canary.5bc5ebfea.0":"2020-01-08T23:00:27.522Z","5.0.0-canary.1112b8def.0":"2020-01-09T22:09:48.809Z","5.0.0-canary.aab102017.0":"2020-01-10T00:11:56.650Z","5.0.0-canary.426913342.0":"2020-01-10T01:43:49.898Z","5.0.0-canary.d4ea9a706.0":"2020-01-10T17:24:57.102Z","5.0.0-canary.7d4ee2996.0":"2020-01-10T17:56:23.298Z","5.0.0-canary.981ec9b6f.0":"2020-01-10T19:26:16.664Z","5.0.0-canary.737da83fc.0":"2020-01-10T21:18:26.550Z","5.0.0-canary.aca8e6c18.0":"2020-01-13T19:31:08.442Z","5.0.0-canary.c38d84e21.0":"2020-01-13T22:13:02.953Z","5.0.0-canary.a4db5fbad.0":"2020-01-14T02:15:02.191Z","5.0.0-canary.faa9af310.0":"2020-01-14T16:52:18.981Z","5.0.0-canary.60354c577.0":"2020-01-14T22:45:35.694Z","5.0.0-canary.d07c78daa.0":"2020-01-14T23:38:10.077Z","5.0.0-canary.8ddd5c6dc.0":"2020-01-15T01:42:41.436Z","5.0.0-canary.a9511d870.0":"2020-01-15T19:09:54.053Z","5.0.0-canary.7c8583c4c.0":"2020-01-15T22:47:21.178Z","5.0.0-canary.5d4b82bac.0":"2020-01-15T22:47:31.588Z","5.0.0-canary.57d0186e4.0":"2020-01-16T18:17:12.080Z","5.0.0-canary.071a6ab70.0":"2020-01-16T18:23:35.905Z","5.0.0-canary.22e0cb618.0":"2020-01-16T18:46:44.169Z","5.0.0-canary.f16f15b8f.0":"2020-01-17T00:06:39.757Z","5.0.0-canary.aa8e43e9a.0":"2020-01-17T00:36:26.725Z","5.0.0-canary.fe1f3ca07.0":"2020-01-17T01:00:01.071Z","5.0.0-canary.d405af26b.0":"2020-01-17T18:16:50.111Z","5.0.0-canary.6e857aae2.0":"2020-01-17T18:20:29.400Z","5.0.0-canary.e2e764f7c.0":"2020-01-17T18:35:40.572Z","5.0.0-canary.7ef986a87.0":"2020-01-17T19:30:30.851Z","5.0.0-canary.29402e2d4.0":"2020-01-17T20:39:27.703Z","5.0.0-canary.2b3ec563c.0":"2020-01-17T23:11:10.733Z","5.0.0-canary.e8a993677.0":"2020-01-21T16:49:23.838Z","5.0.0-canary.cd4903304.0":"2020-01-21T21:37:04.893Z","5.0.0-canary.7e4b04b25.0":"2020-01-21T22:45:34.576Z","5.0.0-canary.ebc296937.0":"2020-01-21T23:44:34.007Z","5.0.0-canary.cf33f113d.0":"2020-01-22T01:22:02.548Z","5.0.0-canary.e1d5f1be5.0":"2020-01-22T16:55:06.982Z","5.0.0-canary.6b6a4ff92.0":"2020-01-22T17:57:19.493Z","5.0.0-canary.6092f71ee.0":"2020-01-22T21:16:37.540Z","5.0.0-canary.d8d95020f.0":"2020-01-22T23:09:11.847Z","5.0.0-canary.b7facc628.0":"2020-01-23T18:12:08.901Z","5.0.0-canary.63f357dbf.0":"2020-01-23T21:55:00.031Z","5.0.0-canary.f2426d26e.0":"2020-01-23T23:54:59.352Z","5.0.0-canary.7f5e0c23f.0":"2020-01-24T16:47:16.928Z","5.0.0-canary.3fc3ab520.0":"2020-01-24T17:20:31.222Z","5.0.0-canary.80a4d326f.0":"2020-01-24T20:45:29.278Z","5.0.0-canary.ef7de4def.0":"2020-01-24T21:31:49.966Z","5.0.0-canary.93e2288b6.0":"2020-01-28T16:55:25.651Z","5.0.0-canary.34ef15f67.0":"2020-01-28T17:23:47.250Z","5.0.0-canary.d3d176ba5.0":"2020-01-28T17:29:08.668Z","5.0.0-canary.32c1df133.0":"2020-01-28T19:43:04.358Z","5.0.0-canary.f3adce86f.0":"2020-01-28T21:48:33.937Z","5.0.0-canary.a4423f890.0":"2020-01-29T21:09:12.386Z","5.0.0-canary.9351f167d.0":"2020-01-29T21:55:15.950Z","5.0.0-canary.29b89dbc1.0":"2020-01-29T22:16:25.996Z","5.0.0-canary.45985457b.0":"2020-01-29T23:32:29.784Z","5.0.0-canary.a1a0deb3e.0":"2020-01-30T17:36:52.464Z","5.0.0-canary.181486643.0":"2020-01-30T20:55:43.827Z","5.0.0-canary.3a85313ac.0":"2020-01-31T16:22:51.870Z","5.0.0-canary.b6c7f624b.0":"2020-01-31T17:02:42.083Z","5.0.0-canary.b3f70ebde.0":"2020-01-31T20:09:48.164Z","5.0.0-canary.3e782d8f8.0":"2020-02-02T01:12:24.302Z","5.0.0-canary.535398572.0":"2020-02-03T18:11:00.817Z","5.0.0-canary.5ff33802c.0":"2020-02-04T18:03:29.723Z","5.0.0-canary.1eb29491c.0":"2020-02-04T21:00:05.647Z","5.0.0-canary.4c7154b26.0":"2020-02-05T16:02:25.463Z","5.0.0-canary.ab5f49a2c.0":"2020-02-05T23:32:49.485Z","5.0.0-canary.c541ebe15.0":"2020-02-06T22:29:28.611Z","5.0.0-canary.98f7faa05.0":"2020-02-07T19:20:56.995Z","5.0.0-canary.b4727e43a.0":"2020-02-07T19:55:07.966Z","5.0.0-canary.91d9d5a65.0":"2020-02-07T22:58:57.015Z","5.0.0-canary.d5c006ed1.0":"2020-02-10T16:48:14.644Z","5.0.0-canary.559f1a570.0":"2020-02-10T17:24:20.379Z","5.0.0-canary.ad3bbf782.0":"2020-02-10T19:11:04.197Z","5.0.0-canary.570d8e49c.0":"2020-02-10T20:42:56.663Z","5.0.0-canary.48b06b89a.0":"2020-02-11T18:42:49.015Z","5.0.0-canary.612443dfb.0":"2020-02-11T19:48:30.394Z","5.0.0-canary.8c11ea2a3.0":"2020-02-12T08:51:06.814Z","5.0.0-canary.b2f3d311e.0":"2020-02-13T21:43:15.645Z","5.0.0-canary.4f488d0ee.0":"2020-02-13T23:05:52.742Z","6.0.0-canary.fe79de07d.0":"2020-02-13T23:23:06.847Z","5.0.0":"2020-02-14T00:08:30.435Z","6.0.0-canary.5e313b1f2.0":"2020-02-14T23:47:41.058Z","6.0.0-canary.6a56f387c.0":"2020-02-18T19:43:09.774Z","6.0.0-canary.bdfd52632.0":"2020-02-19T20:22:08.832Z","6.0.0-canary.ad2e4376a.0":"2020-02-20T23:15:52.686Z","6.0.0-canary.765caef18.0":"2020-02-21T17:32:50.385Z","6.0.0-canary.949562303.0":"2020-02-21T20:37:23.285Z","6.0.0-canary.7ec96974e.0":"2020-02-24T18:57:35.443Z","6.0.0-canary.265ecbad5.0":"2020-02-25T21:00:17.182Z","5.1.0":"2020-02-25T21:37:26.522Z","6.0.0-canary.2cf87456f.0":"2020-02-25T21:38:32.046Z","6.0.0-canary.781434a92.0":"2020-02-25T23:27:33.591Z","6.0.0-canary.d6f60c98b.0":"2020-02-28T22:03:07.916Z","6.0.0-canary.69edc6e28.0":"2020-02-28T22:11:41.846Z","6.0.0-canary.9372e4939.0":"2020-03-03T19:09:13.545Z","6.0.0-canary.9cf5e9842.0":"2020-03-03T23:25:20.744Z","6.0.0-canary.3657f8863.0":"2020-03-04T17:43:43.388Z","6.0.0-canary.98b843417.0":"2020-03-05T18:30:35.660Z","6.0.0-canary.17b9699c4.0":"2020-03-05T19:21:55.191Z","6.0.0-canary.6ee035572.0":"2020-03-09T16:46:04.249Z","6.0.0-canary.bd33cb56b.0":"2020-03-09T17:21:27.634Z","6.0.0-canary.9ebee4ceb.0":"2020-03-09T21:13:23.036Z","6.0.0-canary.26c049afa.0":"2020-03-10T17:01:59.464Z","6.0.0-canary.a731fd0a4.0":"2020-03-10T20:31:55.909Z","6.0.0-canary.1db5c9fc8.0":"2020-03-10T20:35:57.781Z","6.0.0-canary.4971637f4.0":"2020-03-10T22:57:43.569Z","6.0.0-canary.1ae8130ce.0":"2020-03-10T23:05:00.008Z","6.0.0-canary.8639c2690.0":"2020-03-11T06:32:47.330Z","6.0.0-canary.d5808057f.0":"2020-03-11T16:25:05.834Z","6.0.0-canary.b3f58203d.0":"2020-03-11T19:37:32.799Z","6.0.0-canary.bec065920.0":"2020-03-12T20:20:06.428Z","6.0.0-canary.776291ef0.0":"2020-03-17T19:20:26.019Z","6.0.0-canary.ece19f3dd.0":"2020-03-17T22:00:51.007Z","6.0.0-canary.4dc45af6c.0":"2020-03-18T01:47:33.165Z","6.0.0-canary.6b48781bf.0":"2020-03-18T15:34:20.696Z","6.0.0-canary.a88c8e4dc.0":"2020-03-19T17:35:28.767Z","6.0.0-canary.cafe18860.0":"2020-03-20T14:53:06.176Z","6.0.0-canary.35a32aaea.0":"2020-03-20T19:58:38.733Z","6.0.0-canary.e75deb854.0":"2020-03-20T22:14:42.726Z","6.0.0-canary.2cc6966f6.0":"2020-03-24T18:43:00.819Z","6.0.0-canary.8707953b6.0":"2020-03-24T18:46:43.200Z","6.0.0-canary.10af6cf39.0":"2020-03-25T18:17:57.552Z","6.0.0-canary.7d8f9c8d7.0":"2020-03-27T18:04:29.957Z","6.0.0-canary.d6315efe2.0":"2020-03-27T19:56:02.134Z","6.0.0-canary.a3016368d.0":"2020-03-27T21:19:09.323Z","6.0.0-canary.4b45b6620.0":"2020-03-31T15:55:52.156Z","6.0.0-canary.e84b9c8.0":"2020-04-01T16:55:33.945Z","6.0.0-canary.e33c49e.0":"2020-04-02T00:09:03.882Z","6.0.0-canary.f1f8e60.0":"2020-04-02T19:13:20.222Z","6.0.0-canary.1e17c49b3.0":"2020-04-03T18:03:32.726Z","6.0.0-canary.6a40ef217.0":"2020-04-03T19:24:13.822Z","6.0.0-canary.5f24faacb.0":"2020-04-08T15:35:40.662Z","6.0.0-canary.82fa986b9.0":"2020-04-08T15:41:13.911Z","6.0.0-canary.9930d9cc5.0":"2020-04-08T19:32:06.786Z","6.0.0-canary.6601d24af.0":"2020-04-09T00:29:33.052Z","6.0.0-canary.05f5e1583.0":"2020-04-09T00:46:47.810Z","6.0.0-canary.bce00e186.0":"2020-04-09T15:22:12.411Z","6.0.0-canary.927fa902c.0":"2020-04-09T18:46:06.551Z","6.0.0-canary.eb28b6ecc.0":"2020-04-10T19:30:39.344Z","6.0.0-canary.816a43b42.0":"2020-04-10T20:52:21.994Z","6.0.0-canary.008c4d319.0":"2020-04-13T16:33:32.872Z","6.0.0-canary.cbb3f28ca.0":"2020-04-14T05:05:38.129Z","6.0.0-canary.f172b0f90.0":"2020-04-14T23:10:01.959Z","6.0.0-canary.c02642273.0":"2020-04-15T16:16:58.742Z","6.0.0-canary.8a299b568.0":"2020-04-15T22:43:01.094Z","6.0.0-canary.490fbdc09.0":"2020-04-16T05:59:26.463Z","6.0.0-canary.f838c6e55.0":"2020-04-16T14:26:21.200Z","6.0.0-canary.ce6cb7024.0":"2020-04-16T17:18:46.536Z","6.0.0-canary.0ab62a65b.0":"2020-04-16T18:54:00.000Z","6.0.0-canary.ca61b656f.0":"2020-04-16T19:59:40.647Z","6.0.0-canary.45a6615e3.0":"2020-04-16T20:32:38.217Z","6.0.0-canary.4b04cdb0f.0":"2020-04-17T17:40:43.742Z","6.0.0-canary.b273afa93.0":"2020-04-17T23:02:37.681Z","6.0.0-canary.b70bc601e.0":"2020-04-17T23:21:13.880Z","6.0.0-canary.c4b4bba96.0":"2020-04-18T00:17:27.647Z","6.0.0-canary.6c1ebc721.0":"2020-04-20T19:58:00.225Z","6.0.0-canary.9cff4318f.0":"2020-04-20T20:55:30.202Z","6.0.0-canary.7b4482402.0":"2020-04-20T22:19:55.321Z","6.0.0-canary.deda86d8c.0":"2020-04-21T01:14:30.218Z","6.0.0-canary.d10412cb2.0":"2020-04-21T18:18:03.628Z","6.0.0-canary.c141801d5.0":"2020-04-21T19:41:39.304Z","6.0.0-canary.28d10a96e.0":"2020-04-22T22:06:51.106Z","7.0.0-canary.8540808be.0":"2020-04-23T17:25:34.564Z","6.0.0":"2020-04-23T17:26:05.131Z","7.0.0-canary.2673adb74.0":"2020-04-23T22:45:18.216Z","7.0.0-canary.b10d0d7f1.0":"2020-04-24T00:20:49.721Z","7.0.0-canary.3bd8c1bac.0":"2020-04-24T21:05:42.750Z","7.0.0-canary.b83c8dc22.0":"2020-04-24T21:18:32.237Z","7.0.0-canary.1b3dd846d.0":"2020-04-25T00:43:37.825Z","7.0.0-canary.29debfea7.0":"2020-04-27T12:31:47.844Z","7.0.0-canary.28d32f8e0.0":"2020-04-27T14:06:24.598Z","7.0.0-canary.af71cfdd6.0":"2020-04-28T23:17:09.080Z","7.0.0-canary.99d2fc961.0":"2020-04-29T10:43:38.146Z","7.0.0-canary.0e052b24f.0":"2020-04-30T01:29:09.670Z","7.0.0-canary.ff4bc632a.0":"2020-04-30T08:27:28.546Z","7.0.0-canary.b0f83d2fd.0":"2020-04-30T14:32:17.845Z","7.0.0-canary.e59906a57.0":"2020-05-01T15:41:58.150Z","7.0.0-canary.c02712b59.0":"2020-05-01T18:25:26.861Z","7.0.0-canary.15d65448e.0":"2020-05-01T19:22:12.250Z","7.0.0-canary.142b1549e.0":"2020-05-01T22:35:29.841Z","7.0.0-canary.524b7b812.0":"2020-05-03T20:47:15.178Z","7.0.0-canary.bd8ca9678.0":"2020-05-04T17:18:41.940Z","7.0.0-canary.2553e86fe.0":"2020-05-04T17:30:45.014Z","7.0.0-canary.03dec929e.0":"2020-05-04T23:33:23.573Z","7.0.0-canary.d92d8c93e.0":"2020-05-05T16:58:38.267Z","7.0.0-canary.09f591967.0":"2020-05-05T21:03:53.700Z","7.0.0-canary.3846ce311.0":"2020-05-06T14:09:06.225Z","7.0.0-canary.ed7f32463.0":"2020-05-06T16:06:57.058Z","7.0.0-canary.8135cc085.0":"2020-05-06T19:54:44.570Z","7.0.0-canary.deb212de4.0":"2020-05-06T22:18:22.431Z","7.0.0-canary.f83e00898.0":"2020-05-07T16:49:07.231Z","7.0.0-canary.047e6b337.0":"2020-05-08T18:38:02.668Z","7.0.0-canary.119e21426.0":"2020-05-08T20:22:01.342Z","7.0.0-canary.2f052d824.0":"2020-05-08T21:06:52.303Z","7.0.0-canary.e84444387.0":"2020-05-08T21:31:11.602Z","7.0.0-canary.893eb1876.0":"2020-05-11T14:12:40.054Z","7.0.0-canary.a5aeb3001.0":"2020-05-11T14:28:30.430Z","7.0.0-canary.610c68d97.0":"2020-05-11T19:32:00.130Z","7.0.0-canary.ed52af767.0":"2020-05-11T20:26:51.113Z","7.0.0-canary.058cfd23c.0":"2020-05-11T21:24:42.901Z","7.0.0-canary.0a371b4fe.0":"2020-05-12T23:17:42.208Z","7.0.0-canary.2139200b3.0":"2020-05-13T14:46:54.079Z","7.0.0-canary.744d751a0.0":"2020-05-14T04:42:25.335Z","7.0.0-canary.ad0c0c103.0":"2020-05-14T14:51:05.531Z","7.0.0-canary.fd8f8f2b7.0":"2020-05-18T17:53:15.634Z","7.0.0-canary.730920fbb.0":"2020-05-18T19:43:38.127Z","7.0.0-canary.bcdad99bb.0":"2020-05-19T03:17:38.498Z","7.0.0-canary.4497b86ed.0":"2020-05-19T03:50:24.893Z","7.0.0-canary.2e60575da.0":"2020-05-19T16:08:53.028Z","7.0.0-canary.e3eacefcc.0":"2020-05-19T17:37:44.112Z","7.0.0-canary.b065a4d2b.0":"2020-05-20T14:36:05.474Z","7.0.0-canary.4ebce8d78.0":"2020-05-20T20:50:04.496Z","7.0.0-canary.b0fdca492.0":"2020-05-20T23:02:27.585Z","7.0.0-canary.c67667e8e.0":"2020-05-21T14:12:06.292Z","7.0.0-canary.62b5f37db.0":"2020-05-21T16:40:50.519Z","7.0.0-canary.2e218dbf8.0":"2020-05-21T17:01:41.780Z","7.0.0-canary.7fd792bb9.0":"2020-05-21T17:14:13.587Z","7.0.0-canary.a66493cd8.0":"2020-05-21T17:17:43.814Z","7.0.0-canary.da05f66e1.0":"2020-05-21T17:19:32.464Z","7.0.0-canary.740860e78.0":"2020-05-21T17:26:15.992Z","7.0.0-canary.5cea2610f.0":"2020-05-21T17:28:20.381Z","7.0.0-canary.cf7747ef7.0":"2020-05-21T17:28:37.889Z","7.0.0-canary.862d0d7bc.0":"2020-05-21T17:31:19.815Z","7.0.0-canary.0008c8a91.0":"2020-05-21T19:32:44.022Z","7.0.0-canary.541638fa2.0":"2020-05-21T19:47:41.178Z","7.0.0-canary.6167cd075.0":"2020-05-21T20:20:38.753Z","7.0.0-canary.863ac1b0f.0":"2020-05-21T20:59:17.396Z","7.0.0-canary.d30a214ac.0":"2020-05-21T21:03:28.125Z","7.0.0-canary.62abbc8d7.0":"2020-05-21T21:28:17.035Z","7.0.0-canary.49bf31d5c.0":"2020-05-21T21:31:35.938Z","7.0.0-canary.8e17857d0.0":"2020-05-21T21:32:31.355Z","7.0.0-canary.c113fc942.0":"2020-05-21T22:46:00.761Z","7.0.0-canary.912d9021d.0":"2020-05-26T18:44:54.950Z","7.0.0-canary.68a2af131.0":"2020-05-26T19:07:03.850Z","7.0.0-canary.01de07011.0":"2020-05-26T19:52:15.847Z","7.0.0-canary.51d4535fe.0":"2020-05-26T21:34:24.476Z","7.0.0-canary.b86d826b7.0":"2020-05-26T22:13:16.628Z","7.0.0-canary.d91794c7e.0":"2020-05-26T23:54:34.075Z","7.0.0-canary.8c6d7e076.0":"2020-05-27T18:58:56.809Z","7.0.0-canary.5b5f62f93.0":"2020-05-27T19:15:58.195Z","7.0.0-canary.d9972abb1.0":"2020-05-27T20:20:24.692Z","7.0.0-canary.6556eda2b.0":"2020-05-27T20:29:36.132Z","7.0.0-canary.32aa23641.0":"2020-05-27T21:37:51.168Z","7.0.0-canary.654934dfa.0":"2020-05-28T00:36:28.527Z","7.0.0-canary.41910b8b8.0":"2020-05-28T00:50:56.904Z","7.0.0-canary.d66d22bf9.0":"2020-05-28T19:54:51.156Z","7.0.0-canary.8904f3cbe.0":"2020-05-29T16:49:55.517Z","7.0.0-canary.51512a4ac.0":"2020-05-29T19:14:43.104Z","7.0.0-canary.0743288fb.0":"2020-05-29T20:04:50.695Z","7.0.0-canary.06ef147b5.0":"2020-05-29T20:40:30.352Z","7.0.0-canary.8073a20a9.0":"2020-05-29T23:25:21.278Z","7.0.0-canary.72ff42330.0":"2020-06-01T16:44:03.088Z","7.0.0-canary.9ea52070f.0":"2020-06-01T16:48:52.450Z","7.0.0-canary.d86ad3b60.0":"2020-06-01T17:48:39.796Z","7.0.0-canary.b9776b1d0.0":"2020-06-01T18:25:49.583Z","7.0.0-canary.ba6f7c294.0":"2020-06-02T17:02:32.594Z","7.0.0-canary.cf3b664ab.0":"2020-06-02T18:23:22.509Z","7.0.0-canary.4ba3c9a31.0":"2020-06-02T23:52:02.312Z","7.0.0-canary.388b042c7.0":"2020-06-03T13:46:21.835Z","7.0.0-canary.cca1ca84d.0":"2020-06-03T16:03:04.497Z","7.0.0-canary.9b0b5f2e0.0":"2020-06-03T18:57:24.177Z","7.0.0-canary.0a7895f4d.0":"2020-06-03T21:08:53.343Z","7.0.0-canary.7461aad68.0":"2020-06-03T22:12:10.582Z","7.0.0-canary.a0dc2b5c4.0":"2020-06-04T21:13:49.726Z","7.0.0-canary.2b420c5b3.0":"2020-06-08T16:14:11.671Z","7.0.0-canary.8fa22aacc.0":"2020-06-08T18:04:23.635Z","7.0.0-canary.21c4e4ed8.0":"2020-06-08T18:44:06.770Z","7.0.0-canary.dfde46516.0":"2020-06-08T19:41:38.436Z","7.0.0-canary.05cc5c206.0":"2020-06-08T20:56:45.199Z","7.0.0-canary.3ee488f1c.0":"2020-06-09T14:53:45.251Z","7.0.0-canary.b83d720ee.0":"2020-06-09T17:26:06.348Z","7.0.0-canary.afb1c11a9.0":"2020-06-09T20:16:25.053Z","7.0.0-canary.39e6f71e2.0":"2020-06-09T23:39:41.043Z","7.0.0-canary.d4c66dc7d.0":"2020-06-11T17:46:32.604Z","7.0.0-canary.be4a19f9f.0":"2020-06-12T06:08:19.947Z","7.0.0-canary.a6ac8f629.0":"2020-06-15T21:30:39.932Z","7.0.0-canary.9833dc287.0":"2020-06-16T19:49:20.205Z","7.0.0-canary.3aa33998e.0":"2020-06-16T20:21:14.504Z","7.0.0-canary.d2b54d183.0":"2020-06-18T01:15:41.212Z","7.0.0-canary.f2a488e95.0":"2020-06-18T15:04:13.766Z","7.0.0-canary.bd8d1aafa.0":"2020-06-18T15:16:23.045Z","7.0.0-canary.1321eb968.0":"2020-06-19T19:21:25.890Z","7.0.0-canary.db5cc0382.0":"2020-06-19T19:27:41.152Z","7.0.0-canary.6ac9bf031.0":"2020-06-19T19:48:19.362Z","7.0.0-canary.c21b5c367.0":"2020-06-19T20:10:32.122Z","7.0.0-canary.bfdd7fd39.0":"2020-06-19T20:19:53.146Z","7.0.0-canary.10b505785.0":"2020-06-19T20:21:20.935Z","7.0.0-canary.6483d3f44.0":"2020-06-19T20:37:32.312Z","7.0.0-canary.30a74e921.0":"2020-06-19T20:39:50.319Z","7.0.0-canary.c20727498.0":"2020-06-19T20:42:41.677Z","7.0.0-canary.4e360ae94.0":"2020-06-19T20:59:24.652Z","7.0.0-canary.8550fa53b.0":"2020-06-19T21:01:50.136Z","7.0.0-canary.93ade142e.0":"2020-06-19T21:02:53.185Z","7.0.0-canary.a0032f5bb.0":"2020-06-19T21:27:57.282Z","7.0.0-canary.3f342e721.0":"2020-06-19T21:30:17.536Z","7.0.0-canary.ff89457cc.0":"2020-06-19T21:31:15.727Z","7.0.0-canary.4a1855cf8.0":"2020-06-19T21:34:01.248Z","7.0.0-canary.8602f1b4d.0":"2020-06-22T17:23:34.286Z","7.0.0-canary.69f9f0982.0":"2020-06-22T21:14:32.616Z","7.0.0-canary.369a293f0.0":"2020-06-22T21:16:52.750Z","7.0.0-canary.f1432b5c6.0":"2020-06-22T21:25:10.078Z","7.0.0-canary.4757a16b4.0":"2020-06-22T21:53:25.758Z","7.0.0-canary.f8f472762.0":"2020-06-22T21:57:18.616Z","7.0.0-canary.7e4d55c34.0":"2020-06-22T22:29:16.176Z","7.0.0-canary.bd1dbc91f.0":"2020-06-23T14:27:59.509Z","7.0.0-canary.31523bc62.0":"2020-06-23T14:33:28.815Z","7.0.0-canary.a96b6d4d6.0":"2020-06-23T14:39:56.014Z","7.0.0-canary.ef3a09533.0":"2020-06-23T14:48:14.906Z","7.0.0-canary.080965f39.0":"2020-06-23T15:17:40.715Z","7.0.0-canary.1bd67b65d.0":"2020-06-23T16:00:04.605Z","7.0.0-canary.18ca31248.0":"2020-06-23T18:25:01.698Z","7.0.0-canary.39cf00836.0":"2020-06-23T18:47:58.267Z","7.0.0-canary.1bfda9e05.0":"2020-06-23T19:00:20.313Z","7.0.0-canary.08731bd95.0":"2020-06-23T19:02:56.024Z","7.0.0":"2020-06-23T19:10:34.779Z","8.0.0-canary.a3212b209.0":"2020-06-23T19:11:32.642Z","8.0.0-canary.15e81fe98.0":"2020-06-23T19:41:09.802Z","8.0.0-canary.004c9d392.0":"2020-06-23T22:55:59.094Z","8.0.0-canary.03bde00f5.0":"2020-06-24T00:31:33.302Z","8.0.0-canary.599b8c319.0":"2020-06-24T14:56:38.428Z","8.0.0-canary.87e3be418.0":"2020-06-24T17:53:17.527Z","8.0.0-canary.035cf2a6f.0":"2020-06-24T18:38:33.687Z","8.0.0-canary.2fed2c12f.0":"2020-06-25T20:01:49.245Z","8.0.0-canary.38197b443.0":"2020-06-25T21:22:32.489Z","8.0.0-canary.69a35e80c.0":"2020-06-26T17:38:40.113Z","8.0.0-canary.df7154fb3.0":"2020-06-26T18:16:47.791Z","8.0.0-canary.d5618602a.0":"2020-06-26T21:48:16.764Z","8.0.0-canary.e590b376b.0":"2020-06-26T23:23:37.091Z","8.0.0-canary.0c9d6bd2d.0":"2020-06-29T17:15:13.061Z","8.0.0-canary.c1fec4246.0":"2020-06-29T17:30:37.229Z","8.0.0-canary.c678a9d34.0":"2020-06-29T17:51:36.243Z","8.0.0-canary.521afaf6e.0":"2020-06-30T15:05:25.394Z","8.0.0-canary.a2ad48839.0":"2020-06-30T19:14:16.968Z","8.0.0-canary.ec2385881.0":"2020-06-30T21:46:50.838Z","8.0.0-canary.610c26c4a.0":"2020-07-01T14:56:04.785Z","8.0.0-canary.e2ea4a99e.0":"2020-07-01T19:27:06.981Z","8.0.0-canary.a78ceb112.0":"2020-07-01T19:38:50.393Z","8.0.0-canary.b0c456d33.0":"2020-07-06T22:41:07.373Z","8.0.0-canary.2e5711e04.0":"2020-07-08T16:47:56.554Z","8.0.0-canary.811fc5d24.0":"2020-07-08T17:15:41.233Z","8.0.0-canary.6ed717ddd.0":"2020-07-08T19:43:59.117Z","8.0.0-canary.d850de590.0":"2020-07-09T18:05:28.910Z","8.0.0-canary.e07a70841.0":"2020-07-09T18:35:16.948Z","8.0.0-canary.37947ed6c.0":"2020-07-09T20:36:04.399Z","8.0.0-canary.5d443afec.0":"2020-07-09T20:51:40.919Z","8.0.0-canary.9ac1ed914.0":"2020-07-09T21:20:42.130Z","8.0.0-canary.1e7cb6198.0":"2020-07-09T22:12:29.313Z","8.0.0-canary.843f636c0.0":"2020-07-10T17:42:44.346Z","8.0.0-canary.b2edaeead.0":"2020-07-10T18:07:09.788Z","8.0.0-canary.5dac1f624.0":"2020-07-13T16:34:21.118Z","8.0.0-canary.4497acef8.0":"2020-07-14T14:19:57.291Z","8.0.0-canary.e6e23019d.0":"2020-07-14T20:10:34.831Z","8.0.0-canary.d548d7a92.0":"2020-07-14T21:13:05.831Z","8.0.0-canary.58ce529cc.0":"2020-07-14T21:15:09.735Z","8.0.0-canary.a0f1202dc.0":"2020-07-14T21:34:20.252Z","8.0.0-canary.ad4df58c1.0":"2020-07-15T00:09:22.516Z","8.0.0-canary.01db89053.0":"2020-07-16T16:39:08.820Z","8.0.0-canary.fb5a4cdeb.0":"2020-07-20T19:19:55.040Z","8.0.0-canary.8df0f517c.0":"2020-07-20T23:55:41.354Z","8.0.0-canary.abcdbcfeb.0":"2020-07-21T00:50:13.986Z","8.0.0-canary.7bd5075de.0":"2020-07-21T18:47:12.159Z","8.0.0-canary.405a29a20.0":"2020-07-22T22:23:07.632Z","8.0.0-canary.f3693ac4c.0":"2020-07-22T22:33:39.968Z","8.0.0-canary.12a109680.0":"2020-07-22T23:03:32.360Z","8.0.0-canary.bbd06696e.0":"2020-07-22T23:52:57.426Z","8.0.0-canary.4951e7651.0":"2020-07-23T01:49:44.477Z","8.0.0-canary.75deebbef.0":"2020-07-23T17:46:07.263Z","8.0.0-canary.95aff33ee.0":"2020-07-23T18:47:25.860Z","8.0.0-canary.9d9f47473.0":"2020-07-23T19:58:53.364Z","8.0.0-canary.00dfbf6be.0":"2020-07-23T20:59:29.627Z","8.0.0-canary.b87e522d2.0":"2020-07-23T21:23:36.422Z","8.0.0-canary.5b3e150e5.0":"2020-07-24T01:24:05.282Z","8.0.0-canary.f0ae11786.0":"2020-07-24T01:43:33.479Z","8.0.0-canary.fb4ee66c0.0":"2020-07-24T02:10:51.041Z","8.0.0-canary.5511e0aeb.0":"2020-07-24T16:56:46.768Z","8.0.0-canary.8388a9bf6.0":"2020-07-24T20:13:17.397Z","8.0.0-canary.ac405eae1.0":"2020-07-27T15:06:23.488Z","8.0.0-canary.75553837c.0":"2020-07-27T15:12:22.763Z","8.0.0-canary.b96fbfc7a.0":"2020-07-27T15:37:58.183Z","8.0.0-canary.61f1a8d85.0":"2020-07-27T15:47:10.734Z","8.0.0-canary.81dc33377.0":"2020-07-27T15:59:07.732Z","8.0.0-canary.ffd9ede58.0":"2020-07-27T16:32:32.572Z","8.0.0-canary.52dc55acf.0":"2020-07-27T17:08:35.349Z","8.0.0-canary.d4274ff05.0":"2020-07-27T19:50:44.987Z","8.0.0-canary.b82d0696d.0":"2020-07-27T19:58:00.007Z","8.0.0-canary.c2852000d.0":"2020-07-27T20:58:15.605Z","8.0.0-canary.f86f83f54.0":"2020-07-27T21:54:01.125Z","8.0.0-canary.41eb1684c.0":"2020-07-28T17:50:22.665Z","8.0.0-canary.9e2f6c450.0":"2020-07-28T22:39:10.209Z","8.0.0-canary.e6950b55a.0":"2020-07-28T22:52:22.360Z","8.0.0-canary.5e51ee38e.0":"2020-07-28T23:15:50.850Z","8.0.0-canary.a3898ffcf.0":"2020-07-29T00:36:17.313Z","8.0.0-canary.bc5cc6c96.0":"2020-07-29T00:49:08.439Z","8.0.0-canary.9bdeaf928.0":"2020-07-29T01:20:44.307Z","8.0.0-canary.fde2c1f9d.0":"2020-07-29T01:34:52.103Z","8.0.0-canary.6b3876d5d.0":"2020-07-29T01:38:49.261Z","8.0.0-canary.30ce17873.0":"2020-07-29T17:14:43.966Z","8.0.0-canary.f6bb43bf0.0":"2020-07-29T18:25:29.824Z","8.0.0-canary.6af75f6ab.0":"2020-07-30T00:01:24.126Z","8.0.0-canary.42d7a65aa.0":"2020-07-30T00:10:25.143Z","8.0.0-canary.85abdabb7.0":"2020-07-30T00:15:14.592Z","8.0.0-canary.49fb20ca3.0":"2020-07-30T01:27:33.682Z","8.0.0-canary.962d4abbb.0":"2020-07-30T16:10:16.938Z","8.0.0-canary.2fcee40cb.0":"2020-07-30T17:21:25.468Z","8.0.0-canary.bd5987f5a.0":"2020-07-30T17:46:04.643Z","8.0.0-canary.005e86a9b.0":"2020-07-30T17:59:59.150Z","8.0.0-canary.e309c7c68.0":"2020-07-30T18:08:39.915Z","8.0.0-canary.935a51cc0.0":"2020-07-30T18:20:18.883Z","8.0.0-canary.74839da7b.0":"2020-07-30T18:31:13.945Z","8.0.0-canary.f041a48c9.0":"2020-07-30T22:59:29.406Z","8.0.0-canary.fbb1381e1.0":"2020-07-31T15:50:21.977Z","8.0.0-canary.7f61d5785.0":"2020-07-31T17:22:58.252Z","8.0.0-canary.e1bc84d10.0":"2020-08-03T17:50:42.982Z","8.0.0-canary.096a7a066.0":"2020-08-03T17:53:42.136Z","8.0.0-canary.aa3a3e5a4.0":"2020-08-03T17:54:09.095Z","8.0.0-canary.5903d39af.0":"2020-08-03T17:54:21.128Z","8.0.0-canary.72258f898.0":"2020-08-04T01:17:14.924Z","8.0.0-canary.1b44b43c8.0":"2020-08-04T16:48:08.794Z","8.0.0-canary.e9d2e2f96.0":"2020-08-04T20:24:07.464Z","8.0.0-canary.b9dff0a19.0":"2020-08-05T03:48:45.174Z","8.0.0-canary.2bd09a706.0":"2020-08-05T03:53:47.185Z","8.0.0-canary.e0560522f.0":"2020-08-05T17:19:48.322Z","8.0.0-canary.08ca4d0ec.0":"2020-08-05T17:39:20.556Z","8.0.0-canary.08090126b.0":"2020-08-06T19:32:34.153Z","8.0.0-canary.e8bf5b2ac.0":"2020-08-06T21:49:59.722Z","8.0.0-canary.e3b746208.0":"2020-08-06T22:26:38.117Z","8.0.0-canary.96a640534.0":"2020-08-06T22:41:30.618Z","8.0.0-canary.9f9aac825.0":"2020-08-07T20:51:17.859Z","8.0.0-canary.fc65fd00b.0":"2020-08-10T15:20:16.701Z","8.0.0-canary.02e372c5f.0":"2020-08-10T15:48:42.129Z","8.0.0-canary.66669e3b6.0":"2020-08-10T15:52:29.900Z","8.0.0-canary.6d1ea9761.0":"2020-08-11T14:30:54.102Z","8.0.0-canary.79414bf9f.0":"2020-08-11T19:01:52.011Z","8.0.0-canary.85a5272df.0":"2020-08-11T20:08:04.043Z","8.0.0-canary.fda053eb8.0":"2020-08-12T20:04:02.690Z","8.0.0-canary.760873445.0":"2020-08-12T21:43:10.130Z","8.0.0-canary.2f4711a30.0":"2020-08-12T21:53:07.014Z","8.0.0-canary.2d72f3659.0":"2020-08-12T22:00:45.945Z","8.0.0-canary.1fee70a5e.0":"2020-08-12T23:28:34.838Z","8.0.0-canary.023f3fa34.0":"2020-08-13T01:12:19.269Z","8.0.0-canary.80f3a9e5d.0":"2020-08-13T01:29:04.121Z","8.0.0-canary.a1dcfe97c.0":"2020-08-13T08:49:50.531Z","8.0.0-canary.af332d5be.0":"2020-08-13T21:17:14.105Z","8.0.0-canary.7dd4567c4.0":"2020-08-14T00:50:50.447Z","8.0.0-canary.ff870005a.0":"2020-08-14T01:16:05.436Z","8.0.0-canary.150f427a0.0":"2020-08-14T13:29:42.603Z","8.0.0-canary.bcc58290a.0":"2020-08-14T23:22:24.400Z","8.0.0-canary.4f55400bb.0":"2020-08-17T16:38:27.915Z","8.0.0-canary.000d64815.0":"2020-08-17T17:04:11.552Z","8.0.0-canary.defa599a8.0":"2020-08-17T20:31:44.350Z","8.0.0-canary.66b8ed7e6.0":"2020-08-18T18:36:41.973Z","8.0.0-canary.e2b1033df.0":"2020-08-19T18:42:00.326Z","8.0.0-canary.2e8c3dd2e.0":"2020-08-19T19:23:47.987Z","8.0.0-canary.b2e80a5d9.0":"2020-08-19T22:20:49.816Z","8.0.0-canary.ff88df637.0":"2020-08-19T22:32:50.912Z","8.0.0-canary.32fb314cd.0":"2020-08-20T10:37:25.973Z","8.0.0-canary.546277d32.0":"2020-08-20T16:43:01.067Z","8.0.0-canary.da72839f4.0":"2020-08-20T17:59:43.800Z","8.0.0-canary.346069ccb.0":"2020-08-20T18:18:26.115Z","8.0.0-canary.e27c5802f.0":"2020-08-20T19:15:03.127Z","8.0.0-canary.f4532b9c8.0":"2020-08-20T19:57:39.240Z","8.0.0-canary.fbf73c2a6.0":"2020-08-20T21:06:16.121Z","8.0.0-canary.cf800124f.0":"2020-08-20T21:52:31.048Z","8.0.0-canary.95e4eeea7.0":"2020-08-20T23:28:44.740Z","8.0.0-canary.91ab1c62a.0":"2020-08-21T15:11:39.006Z","8.0.0-canary.58eaa9f02.0":"2020-08-21T20:00:13.605Z","8.0.0-canary.238216fc4.0":"2020-08-24T15:40:44.234Z","8.0.0-canary.a1c65593d.0":"2020-08-25T03:03:44.739Z","8.0.0-canary.708cc09c4.0":"2020-08-25T15:56:19.610Z","8.0.0-canary.19bea2ad3.0":"2020-08-26T18:49:10.159Z","8.0.0-canary.911014711.0":"2020-08-27T16:07:55.823Z","8.0.0-canary.d3387f54c.0":"2020-09-03T20:55:10.495Z","8.0.0-canary.2ccf996cc.0":"2020-09-03T20:55:37.847Z","8.0.0-canary.744bfe5d8.0":"2020-09-03T20:56:30.457Z","8.0.0-canary.78da96eaf.0":"2020-09-08T19:12:44.040Z","8.0.0-canary.b0ed593cc.0":"2020-09-09T06:15:56.640Z","8.0.0-canary.85a1fa9ea.0":"2020-09-10T21:10:33.316Z","8.0.0-canary.0bc41a9c7.0":"2020-09-11T17:49:37.896Z","8.0.0-canary.fc0eb5013.0":"2020-09-11T19:55:36.120Z","8.0.0-canary.319bf66de.0":"2020-09-11T23:10:05.206Z","8.0.0-canary.5bfc305ec.0":"2020-09-13T23:00:08.666Z","8.0.0-canary.83d83f131.0":"2020-09-14T00:32:34.811Z","8.0.0-canary.40d8e4726.0":"2020-09-14T23:29:56.905Z","8.0.0-canary.c25d70a31.0":"2020-09-15T02:28:42.966Z","8.0.0-canary.d52b165b5.0":"2020-09-15T14:54:12.307Z","8.0.0-canary.a831d4799.0":"2020-09-15T17:51:49.612Z","8.0.0-canary.a306aa488.0":"2020-09-17T00:58:36.200Z","8.0.0-canary.fd608ff66.0":"2020-09-17T14:25:45.693Z","8.0.0-canary.3e435ba57.0":"2020-09-17T14:42:54.749Z","8.0.0-canary.c250ec52a.0":"2020-09-17T20:10:28.535Z","8.0.0-canary.e34e411b1.0":"2020-09-17T20:17:50.010Z","8.0.0-canary.4e9343929.0":"2020-09-17T20:43:16.233Z","8.0.0-canary.4e5c350c2.0":"2020-09-21T21:14:03.530Z","8.0.0-canary.16c563ef7.0":"2020-09-22T19:46:07.807Z","8.0.0-canary.fd8af3d43.0":"2020-09-23T19:32:11.946Z","8.0.0-canary.d4cd83a85.0":"2020-09-25T00:35:34.638Z","8.0.0-canary.199aecdfb.0":"2020-09-25T15:51:22.274Z","8.0.0-canary.38ef4501f.0":"2020-09-30T18:24:22.221Z","8.0.0-canary.774dcfc8e.0":"2020-10-01T09:54:16.593Z","8.0.0-canary.0f60323a8.0":"2020-10-08T21:10:00.563Z","8.0.0-canary.d71622574.0":"2020-10-09T16:31:53.669Z","8.0.0-canary.7a9afaf4b.0":"2020-10-09T22:54:02.826Z","8.0.0-canary.8a39352c8.0":"2020-10-12T17:46:18.368Z","8.0.0-canary.790ca85fd.0":"2020-10-12T21:56:42.528Z","8.0.0-canary.174c0becf.0":"2020-10-14T02:15:42.808Z","8.0.0-canary.c71ebfa02.0":"2020-10-14T04:17:42.787Z","8.0.0-canary.2ab716cbd.0":"2020-10-16T00:04:15.438Z","8.0.0-canary.43c1c5e2f.0":"2020-10-19T14:08:00.050Z","8.0.0-canary.ccc64eea3.0":"2020-10-26T22:51:32.782Z","8.0.0-canary.a79cdd019.0":"2020-10-27T16:31:09.114Z","8.0.0-canary.596e98424.0":"2020-10-28T16:03:41.193Z","8.0.0-canary.05d5facc2.0":"2020-10-28T16:12:12.014Z","8.0.0-canary.291b3553d.0":"2020-10-28T17:44:57.748Z","8.0.0-canary.dbc449b09.0":"2020-10-28T18:12:41.710Z","8.0.0-canary.4794b25da.0":"2020-10-28T18:41:20.598Z","8.0.0-canary.c61db90a5.0":"2020-10-28T18:59:40.269Z","8.0.0-canary.6d9648ab2.0":"2020-10-29T20:32:25.857Z","8.0.0-canary.5511c5254.0":"2020-10-30T18:00:12.008Z","8.0.0-canary.bd6e302a4.0":"2020-11-02T17:04:49.290Z","9.0.0-canary.d6b5cd418.0":"2020-11-02T22:58:59.903Z","8.0.0":"2020-11-02T22:59:24.053Z","9.0.0-canary.fdf9a2634.0":"2020-11-03T23:21:37.146Z","9.0.0-canary.4a86f30a0.0":"2020-11-03T23:28:01.243Z","9.0.0-canary.fc8b045f1.0":"2020-11-03T23:37:06.502Z","9.0.0-canary.a0b2db26b.0":"2020-11-04T00:09:11.327Z","9.0.0-canary.419e03572.0":"2020-11-04T01:33:01.178Z","9.0.0-canary.a432ad542.0":"2020-11-06T01:45:51.644Z","9.0.0-canary.e2e8aef1e.0":"2020-11-06T02:05:17.195Z","9.0.0-canary.ec6b68b34.0":"2020-11-06T18:56:40.252Z","9.0.0-canary.b39094d14.0":"2020-11-06T21:15:59.003Z","9.0.0-canary.8648b8258.0":"2020-11-12T10:44:45.271Z","9.0.0-canary.240c5f74f.0":"2020-11-12T20:20:45.969Z","9.0.0-canary.6cf6ba4f4.0":"2020-11-16T18:49:53.952Z","9.0.0-canary.07f3e01b7.0":"2020-11-16T21:45:38.469Z","9.0.0-canary.23491cf85.0":"2020-11-17T00:17:13.640Z","9.0.0-canary.b659d4fc3.0":"2020-11-17T00:25:04.507Z","9.0.0-canary.d8a3aed67.0":"2020-11-17T15:27:23.299Z","9.0.0-canary.482ff9091.0":"2020-11-17T17:58:00.798Z","9.0.0-canary.99cfb6bd5.0":"2020-11-18T18:43:58.724Z","9.0.0-canary.b98d15d90.0":"2020-11-18T22:34:48.628Z","9.0.0-canary.30c11bfc2.0":"2020-11-19T01:25:57.061Z","9.0.0-canary.1b731d51b.0":"2020-11-19T18:52:17.507Z","9.0.0-canary.4ae94ff78.0":"2020-11-19T18:55:24.902Z","9.0.0-canary.7ad038e1d.0":"2020-11-19T19:18:28.605Z","9.0.0-canary.a41527604.0":"2020-11-19T20:00:04.081Z","9.0.0-canary.7b0e2b377.0":"2020-11-20T22:55:31.196Z","9.0.0-canary.c927a5d05.0":"2020-11-23T19:47:31.934Z","9.0.0-canary.b349b5185.0":"2020-11-24T17:08:58.351Z","9.0.0-canary.9083b7d61.0":"2020-11-24T21:15:30.829Z","9.0.0-canary.eff7b46ac.0":"2020-11-24T23:31:04.651Z","9.0.0-canary.ae27b44b0.0":"2020-11-25T15:32:49.015Z","9.0.0-canary.2fbba2554.0":"2020-11-30T17:40:15.397Z","9.0.0-canary.6d8574fe1.0":"2020-11-30T17:51:19.153Z","9.0.0-canary.fd22355f7.0":"2020-11-30T22:59:26.835Z","9.0.0-canary.c4ab98722.0":"2020-12-02T00:56:30.769Z","9.0.0-canary.977585650.0":"2020-12-02T14:41:54.880Z","9.0.0-canary.c7edfc7b6.0":"2020-12-02T14:49:34.256Z","9.0.0-canary.4f3347306.0":"2020-12-02T15:07:26.480Z","9.0.0-canary.37fbae10d.0":"2020-12-02T18:16:19.899Z","9.0.0-canary.11da3c0db.0":"2020-12-02T20:22:19.145Z","9.0.0-canary.489d4c219.0":"2020-12-03T15:29:33.240Z","9.0.0-canary.6557a69d9.0":"2020-12-03T15:41:25.923Z","9.0.0-canary.4ea1b7c69.0":"2020-12-03T15:58:03.569Z","9.0.0-canary.eaeb78ce3.0":"2020-12-03T17:01:15.509Z","9.0.0-canary.1c156d69d.0":"2020-12-03T20:44:39.981Z","9.0.0-canary.832668d33.0":"2020-12-04T18:05:49.711Z","9.0.0-canary.4321323e4.0":"2020-12-07T11:28:55.068Z","9.0.0-canary.2d5f32d41.0":"2020-12-07T16:41:48.835Z","9.0.0-canary.8239afc64.0":"2020-12-07T19:49:23.768Z","9.0.0-canary.6871336f1.0":"2020-12-08T16:01:22.844Z","9.0.0-canary.9f718da94.0":"2020-12-08T16:13:08.853Z","9.0.0-canary.1fccb1418.0":"2020-12-08T16:28:11.791Z","9.0.0-canary.afb68894e.0":"2020-12-08T16:32:10.404Z","9.0.0-canary.fd88d40c2.0":"2020-12-08T16:45:42.847Z","9.0.0-canary.ba9e3109c.0":"2020-12-08T19:05:13.977Z","9.0.0-canary.1085c3b2d.0":"2020-12-09T19:11:02.883Z","9.0.0-canary.c5dda809d.0":"2020-12-09T20:49:52.822Z","9.0.0-canary.f5f1bd86a.0":"2020-12-09T21:07:46.109Z","9.0.0-canary.00f38200f.0":"2020-12-11T15:44:54.939Z","9.0.0-canary.ac41a5729.0":"2020-12-11T16:28:13.328Z","9.0.0-canary.7fe0e4f05.0":"2020-12-11T17:05:27.960Z","9.0.0-canary.9244508bd.0":"2020-12-11T19:07:28.980Z","9.0.0-canary.384a8eeb1.0":"2020-12-16T17:01:43.738Z","9.0.0-canary.eabf9d5c2.0":"2020-12-16T18:27:37.663Z","9.0.0-canary.30fdfd06e.0":"2020-12-16T19:07:23.250Z","9.0.0-canary.9590a8f90.0":"2020-12-22T17:42:00.563Z","9.0.0-canary.f89d8b8f2.0":"2020-12-22T23:04:55.806Z","9.0.0-canary.fb194dd35.0":"2020-12-28T20:45:32.079Z","9.0.0-canary.64f36e287.0":"2020-12-28T21:08:23.535Z","9.0.0-canary.b7bbe7022.0":"2020-12-29T18:47:53.971Z","9.0.0":"2020-12-29T19:46:05.565Z","10.0.0-canary.776c18681.0":"2020-12-30T00:40:00.484Z","10.0.0-canary.671d72d95.0":"2020-12-30T20:11:52.243Z","10.0.0-canary.b4f5a1c9e.0":"2020-12-30T21:46:19.741Z","10.0.0-canary.a94bd8deb.0":"2020-12-30T22:04:09.630Z","10.0.0-canary.5d128511b.0":"2020-12-30T22:09:36.773Z","10.0.0-canary.365c69360.0":"2021-01-05T17:48:06.576Z","10.0.0-canary.700a8261a.0":"2021-01-05T21:00:22.892Z","10.0.0-canary.766981c15.0":"2021-01-05T22:40:07.710Z","10.0.0-canary.b28c576d9.0":"2021-01-05T22:49:52.823Z","10.0.0-canary.968735356.0":"2021-01-06T15:50:44.218Z","10.0.0-canary.c5e18b020.0":"2021-01-06T19:44:14.774Z","10.0.0-canary.bcff8a66a.0":"2021-01-06T20:26:10.623Z","10.0.0-canary.79328c9ff.0":"2021-01-07T02:34:05.830Z","10.0.0-canary.121e1f303.0":"2021-01-07T23:19:41.132Z","10.0.0-canary.abdd10065.0":"2021-01-08T17:51:19.944Z","10.0.0-canary.089de519c.0":"2021-01-08T22:20:31.889Z","10.0.0-canary.163119837.0":"2021-01-08T23:45:19.364Z","10.0.0-canary.b8a1a58e4.0":"2021-01-11T16:24:08.211Z","10.0.0-canary.7584267ff.0":"2021-01-12T01:12:06.888Z","10.0.0-canary.251ac04c0.0":"2021-01-12T19:55:07.629Z","10.0.0-canary.772cc1068.0":"2021-01-14T00:06:47.677Z","10.0.0-canary.fe13dd130.0":"2021-01-14T01:10:11.032Z","10.0.0-canary.c7c5da28f.0":"2021-01-14T01:33:54.113Z","10.0.0-canary.b2faa116a.0":"2021-01-19T19:26:39.704Z","10.0.0-canary.0c95c9f7b.0":"2021-01-19T22:53:53.897Z","10.0.0-canary.5268222c4.0":"2021-01-20T19:18:57.723Z","10.0.0-canary.2ed2d829b.0":"2021-01-20T23:08:06.589Z","10.0.0-canary.df00c2b30.0":"2021-01-21T19:55:01.674Z","10.0.0-canary.fd61b0476.0":"2021-01-21T20:09:36.751Z","10.0.0-canary.3fb3a0265.0":"2021-01-22T00:04:53.416Z","10.0.0-canary.07deaec27.0":"2021-01-22T16:56:25.337Z","10.0.0-canary.d2959b16c.0":"2021-01-22T18:52:12.708Z","10.0.0-canary.75f3bfe7c.0":"2021-01-22T22:51:35.119Z","10.0.0-canary.b9adb7a0f.0":"2021-01-22T23:35:44.749Z","10.0.0-canary.d29ec2862.0":"2021-01-25T16:23:56.099Z","10.0.0-canary.96be07c68.0":"2021-01-26T00:10:11.536Z","10.0.0-canary.e383944e9.0":"2021-01-26T01:45:01.023Z","10.0.0-canary.623af861e.0":"2021-01-26T03:45:18.808Z","10.0.0-canary.6863fd43a.0":"2021-01-26T21:32:29.991Z","10.0.0-canary.ea55b87ca.0":"2021-01-26T23:45:59.449Z","10.0.0-canary.e902ff05f.0":"2021-01-27T00:04:07.598Z","10.0.0-canary.2c9fc538a.0":"2021-01-27T00:27:14.543Z","10.0.0-canary.6bf56aaa4.0":"2021-01-27T01:20:01.943Z","10.0.0-canary.994873795.0":"2021-01-27T14:50:49.688Z","10.0.0-canary.96878e1d0.0":"2021-01-27T18:02:17.712Z","10.0.0-canary.3c117cdcc.0":"2021-01-27T18:32:25.612Z","10.0.0-canary.b411e7033.0":"2021-01-27T22:03:21.093Z","10.0.0-canary.a9ac16b4a.0":"2021-01-27T23:03:34.015Z","10.0.0-canary.fec7b42ca.0":"2021-01-28T19:14:43.300Z","10.0.0-canary.8e66dbfee.0":"2021-02-01T23:20:27.955Z","10.0.0-canary.637d15da6.0":"2021-02-02T18:49:19.165Z","10.0.0-canary.fb793939e.0":"2021-02-02T23:42:46.311Z","10.0.0-canary.15a4d40dd.0":"2021-02-03T02:18:37.721Z","10.0.0-canary.7a003acf0.0":"2021-02-04T02:34:02.261Z","10.0.0-canary.05f249666.0":"2021-02-04T17:50:15.591Z","10.0.0-canary.1a3a39629.0":"2021-02-04T18:43:11.274Z","10.0.0-canary.8b1cdb1be.0":"2021-02-04T22:34:57.017Z","10.0.0-canary.8271f00f7.0":"2021-02-04T23:00:42.495Z","10.0.0-canary.533092a90.0":"2021-02-05T03:46:49.259Z","11.0.0-canary.633a9fc7a.0":"2021-02-05T16:17:22.007Z","10.0.0":"2021-02-05T16:18:50.579Z","11.0.0-canary.b5227247d.0":"2021-02-05T17:42:07.250Z","11.0.0-canary.95322b11e.0":"2021-02-05T23:31:42.299Z","11.0.0-canary.1f318ff0f.0":"2021-02-06T00:04:54.730Z","11.0.0-canary.ab12cf7a3.0":"2021-02-08T15:03:12.573Z","11.0.0-canary.98db2c5ec.0":"2021-02-08T15:34:10.107Z","11.0.0-canary.1f86b9f6d.0":"2021-02-08T17:17:18.199Z","11.0.0-canary.aac8f5d9a.0":"2021-02-08T18:00:14.741Z","11.0.0-canary.750e18fc7.0":"2021-02-08T21:41:19.790Z","11.0.0-canary.b62b1266d.0":"2021-02-09T21:52:41.192Z","11.0.0-canary.a6b3101fb.0":"2021-02-11T23:16:49.461Z","11.0.0-canary.ed88df700.0":"2021-02-12T00:06:54.373Z","11.0.0-canary.d30efe6b4.0":"2021-02-12T02:41:56.392Z","11.0.0-canary.0393bdc4b.0":"2021-02-12T04:30:57.874Z","11.0.0-canary.7cd26af4d.0":"2021-02-12T15:59:24.718Z","11.0.0-canary.71fe9a067.0":"2021-02-12T16:30:38.014Z","11.0.0-canary.0fd56a86b.0":"2021-02-13T00:11:30.475Z","11.0.0-canary.f19bbc4af.0":"2021-02-16T22:16:13.600Z","11.0.0-canary.f9cac96cc.0":"2021-02-17T16:09:51.025Z","11.0.0-canary.79ce0878b.0":"2021-02-17T19:25:08.590Z","11.0.0-canary.d6e507b5b.0":"2021-02-17T19:57:57.633Z","11.0.0-canary.f2658381b.0":"2021-02-17T22:44:46.930Z","11.0.0-canary.97c4d4035.0":"2021-02-18T02:34:52.197Z","11.0.0-canary.f5bb4648c.0":"2021-02-18T16:05:27.724Z","11.0.0-canary.302c7a960.0":"2021-02-18T18:37:43.785Z","11.0.0-canary.aa0aaf026.0":"2021-02-18T19:23:27.401Z","11.0.0-canary.07ff0c452.0":"2021-02-18T19:42:30.920Z","11.0.0-canary.bed7ecd3e.0":"2021-02-18T23:27:36.905Z","11.0.0-canary.06dead2d6.0":"2021-02-19T00:36:57.293Z","11.0.0-canary.cddb03553.0":"2021-02-19T03:13:13.686Z","11.0.0-canary.d6d8d0476.0":"2021-02-19T05:36:36.488Z","11.0.0-canary.0b4a4b2eb.0":"2021-02-19T15:45:42.599Z","11.0.0-canary.3201cae47.0":"2021-02-19T23:00:41.293Z","11.0.0-canary.f1b1fd5d3.0":"2021-02-22T19:49:11.025Z","11.0.0-canary.7899e0fe0.0":"2021-02-22T22:45:42.523Z","11.0.0-canary.f19c86d13.0":"2021-02-22T23:30:40.106Z","11.0.0-canary.60e892d79.0":"2021-02-23T01:13:54.103Z","11.0.0-canary.c96bfa495.0":"2021-02-23T19:32:53.672Z","11.0.0-canary.fa9b59f67.0":"2021-02-23T19:34:15.045Z","11.0.0-canary.869e3497c.0":"2021-02-23T19:34:35.283Z","11.0.0-canary.8ecd7c9a9.0":"2021-02-23T19:50:39.263Z","11.0.0-canary.9c85d505b.0":"2021-02-23T22:15:36.857Z","11.0.0-canary.9f2e85fb8.0":"2021-02-24T01:47:50.611Z","11.0.0-canary.19c4f29ef.0":"2021-02-25T19:22:06.980Z","11.0.0-canary.63df6e9bf.0":"2021-02-25T19:37:06.988Z","11.0.0-canary.981ad970a.0":"2021-02-26T00:07:23.479Z","11.0.0-canary.f9c9e39d6.0":"2021-02-26T18:38:34.436Z","11.0.0-canary.c97d7d881.0":"2021-03-01T20:52:55.456Z","11.0.0-canary.bf670dad7.0":"2021-03-03T00:20:54.843Z","11.0.0-canary.c7d98fcde.0":"2021-03-03T20:31:49.892Z","11.0.0-canary.4fef8bc1e.0":"2021-03-03T23:24:11.916Z","11.0.0-canary.afae3a3ec.0":"2021-03-03T23:42:12.872Z","11.0.0-canary.0a0b10f22.0":"2021-03-04T00:00:38.601Z","11.0.0-canary.6f678a91a.0":"2021-03-04T18:40:00.928Z","11.0.0-canary.f5f1b613c.0":"2021-03-04T20:49:05.679Z","11.0.0-canary.606e767ef.0":"2021-03-04T21:45:31.871Z","11.0.0-canary.f77a4dd1a.0":"2021-03-06T04:39:52.647Z","11.0.0-canary.2d6ba2c23.0":"2021-03-08T22:44:08.377Z","11.0.0-canary.7522dcaca.0":"2021-03-09T00:27:30.633Z","11.0.0-canary.5c0ab7401.0":"2021-03-09T22:52:18.905Z","11.0.0-canary.59010b6dc.0":"2021-03-10T16:57:10.809Z","11.0.0-canary.9e52f5544.0":"2021-03-10T23:24:53.113Z","11.0.0-canary.a678806f5.0":"2021-03-11T01:49:35.890Z","11.0.0-canary.b2d22df5b.0":"2021-03-11T17:02:41.797Z","11.0.0-canary.81911b707.0":"2021-03-11T18:23:12.461Z","11.0.0-canary.9eeb35c38.0":"2021-03-11T19:36:45.954Z","11.0.0-canary.12be3e95a.0":"2021-03-11T20:01:22.082Z","11.0.0-canary.e683bdf4a.0":"2021-03-11T20:08:41.388Z","11.0.0-canary.a07b6d486.0":"2021-03-11T20:33:03.822Z","11.0.0-canary.1e0653477.0":"2021-03-11T20:40:10.448Z","11.0.0-canary.148e8cfcc.0":"2021-03-11T22:44:08.546Z","11.0.0-canary.73a227194.0":"2021-03-12T00:23:53.800Z","11.0.0-canary.f8579b7ea.0":"2021-03-13T02:02:35.374Z","11.0.0-canary.d2a39d300.0":"2021-03-16T00:34:49.054Z","11.0.0-canary.7cf67823e.0":"2021-03-16T18:19:59.795Z","11.0.0-canary.67d780c79.0":"2021-03-16T19:47:39.568Z","11.0.0-canary.0f358ddae.0":"2021-03-16T22:12:12.150Z","11.0.0-canary.67eb0df80.0":"2021-03-16T22:39:22.306Z","11.0.0-canary.941ca3b3c.0":"2021-03-16T22:41:14.544Z","11.0.0-canary.3344d12ad.0":"2021-03-17T10:01:37.362Z","11.0.0-canary.6072ed604.0":"2021-03-17T22:59:20.331Z","11.0.0-canary.d3a6862af.0":"2021-03-18T16:19:33.582Z","11.0.0-canary.40dd242d5.0":"2021-03-18T21:16:48.494Z","11.0.0-canary.ec8f8465f.0":"2021-03-18T21:43:46.332Z","11.0.0-canary.da38969ec.0":"2021-03-18T22:17:24.076Z","11.0.0-canary.f5246264d.0":"2021-03-19T00:37:48.872Z","11.0.0-canary.03d34bbad.0":"2021-03-19T00:51:02.163Z","11.0.0-canary.cbc57c600.0":"2021-03-19T00:59:34.004Z","11.0.0-canary.d6c5bcf37.0":"2021-03-19T01:11:50.601Z","11.0.0-canary.fefc668d7.0":"2021-03-19T01:33:38.841Z","11.0.0-canary.faa7d3226.0":"2021-03-19T17:43:49.556Z","11.0.0-canary.c60449bc8.0":"2021-03-19T18:04:58.624Z","11.0.0-canary.5f0fc444a.0":"2021-03-19T18:37:31.353Z","11.0.0-canary.4567a750d.0":"2021-03-20T02:07:34.806Z","11.0.0-canary.0cde52f5a.0":"2021-03-23T00:02:39.555Z","11.0.0-canary.48f4b67fb.0":"2021-03-23T19:53:34.599Z","11.0.0-canary.0b8cff734.0":"2021-03-23T20:04:28.596Z","11.0.0-canary.8943b991f.0":"2021-03-23T20:29:27.953Z","11.0.0-canary.3955d8d3d.0":"2021-03-24T19:16:09.518Z","11.0.0-canary.23ea2d85e.0":"2021-03-25T17:32:30.616Z","11.0.0-canary.e3ec22f45.0":"2021-03-25T17:56:14.110Z","11.0.0-canary.4ceb42220.0":"2021-03-26T07:57:17.167Z","11.0.0-canary.dc9c84023.0":"2021-03-30T17:48:13.441Z","11.0.0-canary.56fc26962.0":"2021-03-31T00:20:43.378Z","11.0.0-canary.bc318250e.0":"2021-03-31T01:33:34.198Z","11.0.0-canary.edaee19aa.0":"2021-03-31T02:11:20.166Z","11.0.0-canary.24609b822.0":"2021-03-31T20:56:45.256Z","11.0.0-canary.b6cddc2b7.0":"2021-04-01T15:04:41.716Z","11.0.0-canary.94937c78c.0":"2021-04-01T21:00:46.338Z","11.0.0-canary.e7202cb57.0":"2021-04-01T22:47:13.390Z","11.0.0-canary.1f636b205.0":"2021-04-02T22:23:48.379Z","11.0.0-canary.94f50b260.0":"2021-04-05T15:04:45.880Z","11.0.0-canary.a4009b80a.0":"2021-04-05T22:00:14.257Z","11.0.0-canary.15604bd0d.0":"2021-04-05T22:41:58.214Z","11.0.0-canary.76da7876c.0":"2021-04-07T01:44:16.705Z","11.0.0-canary.6bcb6cbd2.0":"2021-04-07T18:53:47.836Z","11.0.0-canary.c91e8d141.0":"2021-04-07T18:57:43.715Z","11.0.0-canary.f77c50860.0":"2021-04-08T15:35:39.509Z","11.0.0-canary.367d88bdb.0":"2021-04-08T16:38:32.235Z","11.0.0-canary.0ec437d3b.0":"2021-04-08T19:35:17.739Z","11.0.0-canary.b2fa996a1.0":"2021-04-09T15:10:43.048Z","11.0.0-canary.24255c408.0":"2021-04-09T20:12:03.271Z","11.0.0-canary.7d6a4bb72.0":"2021-04-09T22:53:27.825Z","11.0.0-canary.352b295c1.0":"2021-04-12T18:15:30.084Z","11.0.0-canary.ab99b8064.0":"2021-04-13T14:43:24.615Z","11.0.0-canary.8f0a11e32.0":"2021-04-14T20:02:57.406Z","11.0.0-canary.f5c6db8fc.0":"2021-04-15T18:04:05.631Z","11.0.0-canary.3793a3143.0":"2021-04-15T18:31:02.919Z","11.0.0-canary.bc104bae7.0":"2021-04-15T19:46:05.425Z","12.0.0-canary.3f342c3f4.0":"2021-04-15T22:53:59.525Z","11.0.0":"2021-04-15T22:58:18.142Z","12.0.0-canary.2ebfc5374.0":"2021-04-16T20:44:55.937Z","12.0.0-canary.5631828e1.0":"2021-04-17T07:46:47.971Z","12.0.0-canary.bd685395b.0":"2021-04-19T18:41:17.787Z","12.0.0-canary.b52196498.0":"2021-04-19T19:57:47.961Z","12.0.0-canary.8ba3e298c.0":"2021-04-21T14:08:29.926Z","12.0.0-canary.c629eab71.0":"2021-04-21T19:56:56.973Z","12.0.0-canary.8ace3b810.0":"2021-04-21T20:37:48.242Z","12.0.0-canary.70beaf42d.0":"2021-04-21T20:49:24.987Z","12.0.0-canary.cad489689.0":"2021-04-22T16:49:14.038Z","12.0.0-canary.d928692b5.0":"2021-04-23T17:34:23.102Z","12.0.0-canary.8f68de8f3.0":"2021-04-23T18:13:07.954Z","12.0.0-canary.05753cf77.0":"2021-04-23T23:43:06.279Z","12.0.0-canary.ef43e6d96.0":"2021-04-23T23:49:26.790Z","12.0.0-canary.197f64fa2.0":"2021-04-26T17:09:48.418Z","12.0.0-canary.55ad2d7d8.0":"2021-04-27T01:19:50.477Z","12.0.0-canary.ec4ac5234.0":"2021-04-27T07:58:35.286Z","12.0.0-canary.b0579acdb.0":"2021-04-27T08:36:20.536Z","12.0.0-canary.81e2d4ff3.0":"2021-04-27T20:57:42.304Z","12.0.0-canary.c8edee52c.0":"2021-04-27T21:46:07.264Z","12.0.0-canary.f5b6110d6.0":"2021-04-27T22:07:19.074Z","12.0.0-canary.cee9b9e22.0":"2021-04-28T00:12:35.842Z","12.0.0-canary.96e83fca7.0":"2021-04-28T02:47:53.575Z","12.0.0-canary.4c497bd19.0":"2021-04-28T17:53:35.664Z","12.0.0-canary.105b15b96.0":"2021-04-28T21:44:45.633Z","12.0.0-canary.6e20259e3.0":"2021-04-28T21:49:15.075Z","12.0.0-canary.0f79a5d74.0":"2021-04-28T22:43:03.176Z","12.0.0-canary.84f3db9ed.0":"2021-04-29T14:17:52.749Z","12.0.0-canary.8fc29273c.0":"2021-04-29T21:23:40.849Z","12.0.0-canary.c50d20bab.0":"2021-04-29T23:01:40.622Z","12.0.0-canary.474836ad0.0":"2021-05-01T03:37:43.828Z","12.0.0-canary.f5ad92287.0":"2021-05-03T18:22:18.368Z","12.0.0-canary.af453daf8.0":"2021-05-03T18:53:28.660Z","12.0.0-canary.1f1918c24.0":"2021-05-03T19:22:35.365Z","12.0.0-canary.33148231f.0":"2021-05-03T19:38:49.642Z","12.0.0-canary.06b76fa74.0":"2021-05-03T19:45:47.666Z","12.0.0-canary.7c5000473.0":"2021-05-03T22:41:30.114Z","12.0.0-canary.de997644b.0":"2021-05-04T17:28:12.646Z","12.0.0-canary.d4d7f1cc2.0":"2021-05-04T17:55:02.326Z","12.0.0-canary.be999eb08.0":"2021-05-04T18:00:06.043Z","12.0.0-canary.eda1705fc.0":"2021-05-04T19:10:21.485Z","12.0.0-canary.718c90178.0":"2021-05-04T19:27:44.957Z","12.0.0-canary.0e3917299.0":"2021-05-04T19:30:27.062Z","12.0.0-canary.836b3c7db.0":"2021-05-04T20:33:54.484Z","12.0.0-canary.53d4e6d59.0":"2021-05-04T20:49:33.080Z","12.0.0-canary.18d147e27.0":"2021-05-04T20:58:06.345Z","12.0.0-canary.b9984794e.0":"2021-05-04T23:02:56.287Z","12.0.0-canary.b76f5fc9d.0":"2021-05-04T23:06:18.656Z","12.0.0-canary.055d4f10a.0":"2021-05-04T23:21:26.171Z","12.0.0-canary.5b6a46016.0":"2021-05-05T16:16:21.825Z","12.0.0-canary.33c9a737a.0":"2021-05-05T17:27:10.333Z","12.0.0-canary.9bc0effaf.0":"2021-05-05T20:59:49.559Z","12.0.0-canary.a1e0f2af5.0":"2021-05-05T21:40:57.607Z","12.0.0-canary.06930c96b.0":"2021-05-05T23:39:08.678Z","12.0.0-canary.03f525f9f.0":"2021-05-06T00:30:00.233Z","12.0.0-canary.e82ba2a26.0":"2021-05-06T15:56:11.073Z","12.0.0-canary.fc7c4e5ce.0":"2021-05-06T17:29:22.381Z","12.0.0-canary.65c04514d.0":"2021-05-06T18:43:13.432Z","12.0.0-canary.c97779ca6.0":"2021-05-06T21:43:04.680Z","12.0.0-canary.869d890d4.0":"2021-05-07T15:18:36.881Z","12.0.0-canary.ec22e1da9.0":"2021-05-10T18:23:33.209Z","12.0.0-nightly.7427449f0.0":"2021-05-10T18:45:03.031Z","12.0.0-canary.957cc3bf5.0":"2021-05-10T21:56:50.097Z","12.0.0-canary.88a33cd70.0":"2021-05-11T00:08:59.309Z","12.0.0-canary.d20dc6dba.0":"2021-05-11T00:24:30.187Z","12.0.0-canary.0ce2fdb02.0":"2021-05-11T00:58:39.150Z","12.0.0-canary.cb162da37.0":"2021-05-11T01:58:29.619Z","12.0.0-canary.573dc7ffd.0":"2021-05-11T02:17:21.004Z","12.0.0-canary.d5f6ad3fe.0":"2021-05-11T23:22:38.535Z","12.0.0-canary.25751d2ed.0":"2021-05-12T16:19:51.146Z","12.0.0-canary.a23ecb682.0":"2021-05-12T18:23:01.129Z","12.0.0-canary.33a954852.0":"2021-05-13T15:07:45.263Z","12.0.0-canary.a4484849b.0":"2021-05-13T15:31:01.969Z","12.0.0-canary.b4c3f513e.0":"2021-05-13T16:07:52.103Z","12.0.0-canary.1a8d06483.0":"2021-05-13T16:13:44.847Z","12.0.0-canary.8e6081836.0":"2021-05-14T21:40:42.899Z","12.0.0-canary.a2b0f4cee.0":"2021-05-14T21:53:55.259Z","12.0.0-canary.e8e39ad19.0":"2021-05-18T20:13:13.695Z","12.0.0-canary.4bb5eea2b.0":"2021-05-19T15:28:22.116Z","12.0.0-canary.ccce99cd6.0":"2021-05-20T00:56:53.371Z","12.0.0-canary.14767a8db.0":"2021-05-20T20:50:51.577Z","12.0.0-canary.22c6dcff9.0":"2021-05-24T15:18:39.756Z","12.0.0-canary.fadab3372.0":"2021-05-24T16:05:50.076Z","12.0.0-canary.caa73aeee.0":"2021-05-25T14:14:30.066Z","12.0.0-canary.ec31ae1ed.0":"2021-05-25T20:35:27.021Z","12.0.0-canary.8530d3514.0":"2021-05-27T16:04:57.466Z","12.0.0-canary.00b5899dc.0":"2021-06-01T22:45:39.389Z","12.0.0-canary.f1525ea3e.0":"2021-06-03T13:54:29.036Z","12.0.0-canary.464a00286.0":"2021-06-03T14:46:10.182Z","12.0.0-canary.474de7878.0":"2021-06-03T15:14:18.189Z","12.0.0-canary.b87ebf74d.0":"2021-06-03T17:46:22.129Z","12.0.0-canary.2daa49b35.0":"2021-06-04T16:14:11.772Z","12.0.0-canary.08db3d737.0":"2021-06-04T19:41:31.740Z","12.0.0-canary.5823407a7.0":"2021-06-08T00:48:22.996Z","12.0.0-canary.23b0c5e22.0":"2021-06-08T16:22:15.228Z","12.0.0-canary.2952c6a76.0":"2021-06-08T17:40:52.566Z","12.0.0-canary.f12425f88.0":"2021-06-10T01:06:10.292Z","12.0.0-canary.e543628c3.0":"2021-06-10T01:07:11.128Z","12.0.0-canary.e0c346286.0":"2021-06-10T16:35:39.218Z","12.0.0-canary.f43af5633.0":"2021-06-10T20:35:51.968Z","12.0.0-canary.8415ae585.0":"2021-06-11T16:05:52.344Z","12.0.0-canary.598fcccc8.0":"2021-06-11T21:46:15.123Z","12.0.0-canary.5d0605188.0":"2021-06-14T17:39:11.581Z","12.0.0-canary.f147a2271.0":"2021-06-14T19:18:09.050Z","12.0.0-canary.33579e00b.0":"2021-06-15T00:22:00.282Z","12.0.0-canary.a6909c0e6.0":"2021-06-15T18:29:57.204Z","12.0.0-canary.c18b5925b.0":"2021-06-15T21:03:37.843Z","12.0.0-canary.7ea2e830d.0":"2021-06-15T22:50:59.904Z","12.0.0-canary.271fff902.0":"2021-06-15T22:51:09.037Z","12.0.0-canary.d96f0a1e0.0":"2021-06-16T21:06:18.011Z","12.0.0-canary.a6183801a.0":"2021-06-16T22:05:27.457Z","12.0.0-canary.940550232.0":"2021-06-17T19:40:14.744Z","12.0.0-canary.f705e8048.0":"2021-06-18T15:24:31.150Z","12.0.0-canary.08d791f37.0":"2021-06-18T21:11:47.307Z","12.0.0-canary.e38d7440f.0":"2021-06-21T17:40:30.349Z","12.0.0-canary.75900a5a9.0":"2021-06-21T18:37:00.080Z","12.0.0-canary.33e6f50e9.0":"2021-06-23T00:12:07.170Z","12.0.0-canary.8c685301d.0":"2021-06-23T18:24:40.549Z","12.0.0-canary.8c7d994ae.0":"2021-06-23T19:27:27.435Z","12.0.0-canary.4ccd39bdd.0":"2021-06-24T16:14:57.835Z","12.0.0-canary.17553e9f8.0":"2021-06-28T22:52:35.662Z","12.0.0-canary.4c80072fd.0":"2021-06-29T18:40:56.056Z","12.0.0-canary.796811db7.0":"2021-07-01T00:03:15.309Z","12.0.0-canary.70e1efdca.0":"2021-07-01T17:06:36.929Z","12.0.0-canary.435866d32.0":"2021-07-02T18:21:17.169Z","12.0.0-canary.d0f9f3f2e.0":"2021-07-03T00:00:06.859Z","12.0.0-canary.adeac0549.0":"2021-07-08T15:09:19.051Z","12.0.0-canary.068fd5028.0":"2021-07-08T19:03:42.417Z","12.0.0-canary.5dfec7a14.0":"2021-07-12T20:04:02.748Z","12.0.0-canary.07a73750c.0":"2021-07-12T20:25:32.869Z","12.0.0-canary.3e4c6dca1.0":"2021-07-13T01:51:23.190Z","12.0.0-canary.ea77795b1.0":"2021-07-13T15:49:26.817Z","12.0.0-canary.15a179fad.0":"2021-07-13T18:09:23.580Z","12.0.0-canary.c73142a1b.0":"2021-07-13T18:44:17.711Z","12.0.0-canary.d923db73a.0":"2021-07-13T20:54:00.568Z","12.0.0-canary.22d29cbb4.0":"2021-07-13T22:50:34.439Z","12.0.0-canary.2749604bc.0":"2021-07-14T16:22:30.079Z","12.0.0-canary.e1703bed9.0":"2021-07-14T21:48:12.055Z","12.0.0-canary.de48eff0d.0":"2021-07-15T17:08:13.694Z","12.0.0-canary.4f060adc5.0":"2021-07-15T19:22:00.842Z","12.0.0-canary.bd25779b2.0":"2021-07-15T20:42:24.346Z","12.0.0-canary.9f68a932e.0":"2021-07-15T22:07:02.044Z","12.0.0-canary.4eecdeaf0.0":"2021-07-16T14:58:02.727Z","12.0.0-canary.7239684d4.0":"2021-07-16T15:59:14.773Z","12.0.0-canary.d5f1f7c72.0":"2021-07-16T16:13:53.082Z","12.0.0-canary.4d95812f9.0":"2021-07-16T19:43:00.376Z","12.0.0-canary.38d1846cc.0":"2021-07-19T18:42:06.189Z","12.0.0-canary.3f691eccf.0":"2021-07-20T16:08:51.344Z","12.0.0-canary.ebb5c73bb.0":"2021-07-20T16:56:55.886Z","12.0.0-nightly.778a0e8a.0":"2021-07-20T21:05:34.364Z","12.0.0-canary.791311bba.0":"2021-07-20T22:07:39.929Z","12.0.0-canary.85e9a6ac3.0":"2021-07-21T15:36:02.215Z","12.0.0-canary.6b0442278.0":"2021-07-21T18:49:56.709Z","12.0.0-canary.5f00e454a.0":"2021-07-22T17:06:30.220Z","12.0.0-canary.90e08fc6b.0":"2021-07-22T23:38:13.296Z","12.0.0-canary.cf5b9eb86.0":"2021-07-23T18:12:08.481Z","12.0.0-canary.3f36ac75c.0":"2021-07-23T18:32:19.834Z","12.0.0-canary.ea1e1b850.0":"2021-07-24T20:55:53.258Z","12.0.0-canary.22f390c43.0":"2021-07-27T19:00:00.336Z","12.0.0":"2021-07-27T19:49:56.388Z","13.0.0-canary.ae85f7eba.0":"2021-07-27T19:51:35.543Z","13.0.0-canary.5981207f7.0":"2021-07-27T23:18:17.787Z","13.0.0-canary.83bdd0222.0":"2021-07-28T17:25:40.044Z","13.0.0-canary.28656298a.0":"2021-07-29T18:12:59.058Z","13.0.0-canary.9e797daaf.0":"2021-07-29T18:35:14.685Z","13.0.0-canary.adb9f1ad8.0":"2021-07-30T19:04:50.930Z","13.0.0-canary.cc5377458.0":"2021-07-30T21:33:30.229Z","13.0.0-canary.a395972cf.0":"2021-08-03T21:23:27.716Z","13.0.0-canary.7c96e6b98.0":"2021-08-03T22:13:45.861Z","13.0.0-canary.a80c8b2c2.0":"2021-08-04T23:59:52.973Z","13.0.0-canary.3dd611091.0":"2021-08-05T03:56:30.102Z","13.0.0-canary.5dee37ff6.0":"2021-08-05T17:42:24.156Z","13.0.0-canary.bf405d22a.0":"2021-08-05T20:18:13.192Z","13.0.0-canary.b47dd37a6.0":"2021-08-05T20:50:01.589Z","13.0.0-canary.6c82b965b.0":"2021-08-06T16:15:00.138Z","13.0.0-canary.4ca11fe76.0":"2021-08-06T17:07:19.240Z","13.0.0-canary.510cf90f2.0":"2021-08-09T17:17:25.538Z","13.0.0-canary.17580ebf7.0":"2021-08-09T18:17:38.975Z","13.0.0-canary.7249a3060.0":"2021-08-09T18:21:26.042Z","13.0.0-canary.4c405863b.0":"2021-08-10T17:40:59.223Z","13.0.0-canary.f4241a42a.0":"2021-08-11T16:59:25.005Z","13.0.0-canary.0ad12ed3c.0":"2021-08-11T21:28:54.430Z","13.0.0-canary.077dcfcfe.0":"2021-08-12T17:55:15.636Z","13.0.0-canary.e3346766f.0":"2021-08-13T19:45:12.948Z","13.0.0-canary.2fb068fb0.0":"2021-08-13T19:48:37.185Z","13.0.0-canary.fb76c5069.0":"2021-08-16T20:08:15.151Z","13.0.0-canary.457d89aad.0":"2021-08-17T15:21:58.322Z","13.0.0-canary.0de2f2edc.0":"2021-08-17T20:54:09.896Z","13.0.0-canary.1f9259b9d.0":"2021-08-17T22:14:03.533Z","13.0.0-canary.3b9290351.0":"2021-08-18T05:23:44.106Z","13.0.0-canary.43d2eed2a.0":"2021-08-18T16:02:23.100Z","13.0.0-canary.0a9069300.0":"2021-08-19T16:17:46.800Z","13.0.0-canary.7da413ed8.0":"2021-08-20T15:48:52.091Z","13.0.0-canary.e1e69fd8e.0":"2021-08-20T19:32:25.854Z","13.0.0-canary.f5afc16df.0":"2021-08-20T20:26:34.235Z","13.0.0-canary.28d0d75bb.0":"2021-08-20T22:20:17.933Z","13.0.0-canary.21ece5360.0":"2021-08-20T23:44:25.090Z","13.0.0-canary.8de07c02a.0":"2021-08-23T15:26:37.045Z","13.0.0-canary.65aa63b0c.0":"2021-08-24T15:28:39.012Z","13.0.0-canary.15981e9d9.0":"2021-08-24T16:17:04.610Z","13.0.0-canary.fa7520f62.0":"2021-08-24T22:27:56.986Z","13.0.0-canary.ce25bc3ec.0":"2021-08-24T22:48:28.132Z","13.0.0-canary.12f5622e1.0":"2021-08-24T23:18:12.858Z","13.0.0-canary.d97f8f133.0":"2021-08-25T18:33:10.977Z","13.0.0-canary.d86fb6fac.0":"2021-08-25T18:53:51.416Z","13.0.0-canary.e8554dbbf.0":"2021-08-25T21:59:22.406Z","13.0.0-canary.877e3fb0d.0":"2021-08-26T15:38:07.560Z","13.0.0-canary.6236f3576.0":"2021-08-26T16:05:42.468Z","13.0.0-canary.1d19158a1.0":"2021-08-26T17:09:06.062Z","13.0.0-canary.6adc9e83f.0":"2021-08-30T22:44:24.835Z","13.0.0-canary.d082790f0.0":"2021-09-01T21:54:17.418Z","13.0.0-canary.e2c4f0196.0":"2021-09-02T02:11:14.279Z","13.0.0-canary.611db508e.0":"2021-09-02T03:15:06.401Z","13.0.0-canary.d4706933f.0":"2021-09-02T15:37:40.946Z","13.0.0-canary.c16fe03ce.0":"2021-09-02T17:44:42.443Z","13.0.0-canary.9203a958a.0":"2021-09-02T23:46:20.307Z","13.0.0-canary.fddd5ae93.0":"2021-09-03T07:29:49.731Z","13.0.0-canary.117599a8b.0":"2021-09-03T07:31:25.113Z","13.0.0-canary.e4180d07b.0":"2021-09-03T07:31:54.751Z","13.0.0-canary.42d175efc.0":"2021-09-03T15:42:47.258Z","13.0.0-canary.72464476c.0":"2021-09-07T15:34:07.408Z","13.0.0-canary.37d4db866.0":"2021-09-09T14:33:22.382Z","13.0.0-canary.6df682e74.0":"2021-09-09T15:43:07.745Z","13.0.0-canary.b49359c35.0":"2021-09-09T17:35:24.632Z","13.0.0-canary.470bd34e8.0":"2021-09-09T18:00:58.916Z","13.0.0-canary.d48a01771.0":"2021-09-09T18:10:17.477Z","13.0.0-canary.13db34b34.0":"2021-09-09T18:25:16.159Z","13.0.0-canary.864798678.0":"2021-09-09T18:36:39.946Z","13.0.0-canary.d04bda3fb.0":"2021-09-10T15:21:27.031Z","13.0.0-canary.5533f73d3.0":"2021-09-13T23:03:32.262Z","13.0.0-canary.08398f880.0":"2021-09-13T23:34:14.133Z","13.0.0-canary.818f4ee93.0":"2021-09-15T17:50:10.916Z","13.0.0-canary.8355e14dc.0":"2021-09-15T19:12:10.302Z","13.0.0-canary.d4e16a6c4.0":"2021-09-15T21:58:56.604Z","13.0.0-canary.65125b3a6.0":"2021-09-16T21:17:13.578Z","13.0.0-canary.80a583365.0":"2021-09-17T20:35:33.091Z","13.0.0-canary.83900936a.0":"2021-09-17T23:24:06.010Z","13.0.0-canary.860ad06a1.0":"2021-09-17T23:35:45.753Z","13.0.0-canary.3b8d4429e.0":"2021-09-20T17:47:21.417Z","13.0.0-canary.2da3606b9.0":"2021-09-20T19:37:29.294Z","13.0.0-canary.e8c598d1e.0":"2021-09-20T21:11:39.681Z","13.0.0-canary.1340ee9f7.0":"2021-09-22T17:57:39.622Z","13.0.0-canary.65084baff.0":"2021-09-23T21:25:13.541Z","13.0.0-canary.c79aa0cdd.0":"2021-09-24T13:41:39.348Z","13.0.0":"2021-09-24T19:45:36.738Z","14.0.0-canary.198431fcd.0":"2021-09-24T19:46:21.910Z","14.0.0-canary.9a02b6ef8.0":"2021-09-25T13:10:47.223Z","14.0.0-canary.758ce31d9.0":"2021-09-27T17:29:01.184Z","14.0.0-canary.86b50ef74.0":"2021-09-28T17:42:44.655Z","14.0.0-canary.b2fe3528b.0":"2021-09-29T22:56:39.936Z","14.0.0-canary.586e740dd.0":"2021-09-30T16:31:03.894Z","14.0.0-canary.2ac92d766.0":"2021-10-05T19:28:18.106Z","14.0.0-canary.353ca7e9f.0":"2021-10-08T18:46:42.295Z","14.0.0-canary.c78ff0429.0":"2021-10-11T17:21:49.422Z","14.0.0-canary.261f2db59.0":"2021-10-20T16:59:24.214Z","14.0.0-canary.9803d2dc1.0":"2021-10-20T19:21:37.046Z","14.0.0-canary.348665978.0":"2021-10-21T14:50:24.506Z","14.0.0-canary.b2b979a8a.0":"2021-10-28T15:12:00.630Z","14.0.0-canary.1af7c1c4a.0":"2021-10-28T17:52:34.730Z","14.0.0-canary.4afd353cd.0":"2021-10-29T15:01:19.406Z","14.0.0-canary.a986df922.0":"2021-10-29T21:34:48.620Z","14.0.0-canary.c3cdff07b.0":"2021-11-09T19:05:40.283Z","14.0.0-canary.468392606.0":"2021-11-11T19:39:54.068Z","14.0.0-canary.828f9803b.0":"2021-11-11T19:50:36.893Z","14.0.0-canary.8795cba87.0":"2021-11-11T19:56:34.155Z","14.0.0-canary.cd7f8cace.0":"2021-11-11T19:58:14.061Z","14.0.0-canary.207230eb8.0":"2021-11-11T22:24:11.303Z","14.0.0-canary.991fb99f7.0":"2021-11-11T22:36:13.479Z","14.0.0-canary.15db4f164.0":"2021-11-12T17:29:35.070Z","14.0.0-canary.8fcad5a3c.0":"2021-11-12T19:13:35.608Z","14.0.0-canary.f81fb1d23.0":"2021-11-12T22:40:03.531Z","14.0.0-canary.783f6fd5a.0":"2021-11-16T05:49:47.606Z","14.0.0-canary.d57ec74c7.0":"2021-11-16T16:16:12.524Z","14.0.0-canary.554c71829.0":"2021-11-16T16:19:03.252Z","14.0.0-canary.3ef470efe.0":"2021-11-16T16:23:54.917Z","14.0.0-canary.61a28b2b5.0":"2021-11-17T18:59:00.719Z","14.0.0-canary.fae6c652d.0":"2021-11-18T16:24:45.093Z","14.0.0-canary.978a3b5bb.0":"2021-11-19T19:39:01.055Z","14.0.0-canary.e6f43cf44.0":"2021-11-22T17:34:54.782Z","14.0.0-canary.39cf14bc3.0":"2021-11-22T23:04:17.375Z","14.0.0-canary.93134d453.0":"2021-11-23T15:38:51.287Z","14.0.0-canary.bbd11268f.0":"2021-11-23T22:32:03.222Z","14.0.0-canary.3db9c4d3d.0":"2021-11-24T15:37:11.619Z","14.0.0-canary.78305b6d5.0":"2021-11-24T19:50:26.246Z","14.0.0-canary.43d08ba77.0":"2021-11-30T22:55:50.430Z","14.0.0-canary.17a072535.0":"2021-12-02T18:05:01.491Z","14.0.0-canary.5d809696c.0":"2021-12-08T17:44:08.675Z","14.0.0-canary.b6510c8c1.0":"2021-12-08T18:06:13.414Z","14.0.0-canary.f460e23da.0":"2021-12-10T15:25:08.990Z","14.0.0-canary.7d8ea4624.0":"2021-12-10T19:29:01.150Z","14.0.0-canary.8fffcb5dd.0":"2021-12-14T08:54:48.787Z","14.0.0-canary.21e1cb9be.0":"2021-12-14T19:39:36.690Z","14.0.0-canary.ba78e8724.0":"2021-12-15T22:12:46.386Z","14.0.0-canary.e3e073c00.0":"2021-12-20T21:09:29.942Z","14.0.0-canary.3366a71d7.0":"2021-12-22T12:32:13.300Z","14.0.0-canary.c047f7c19.0":"2022-01-05T16:45:35.441Z","14.0.0-canary.05db65ec0.0":"2022-01-06T17:14:01.957Z","14.0.0-canary.6ca8b8f85.0":"2022-01-07T16:00:51.654Z","14.0.0-canary.173ee7a7a.0":"2022-01-10T16:54:00.255Z","14.0.0-canary.b704e4dfc.0":"2022-01-10T18:32:49.551Z","14.0.0-canary.c14e977ee.0":"2022-01-11T15:49:22.858Z","14.0.0-canary.b094eaa4e.0":"2022-01-14T18:42:07.216Z","14.0.0-canary.390220e42.0":"2022-01-17T16:45:56.171Z","14.0.0-canary.4b5391f8b.0":"2022-01-19T23:52:34.097Z","14.0.0-canary.cef6bc623.0":"2022-01-20T00:17:16.313Z","14.0.0-canary.0379179c4.0":"2022-01-20T18:54:11.007Z","14.0.0-canary.e62f3dabf.0":"2022-01-21T23:03:08.742Z","14.0.0-canary.3e20c1de8.0":"2022-01-25T15:31:37.157Z","14.0.0-canary.9f9d928b2.0":"2022-01-27T18:13:01.356Z","14.0.0-canary.a2bcb065c.0":"2022-01-28T19:36:51.730Z","14.0.0-canary.4e66fb2e1.0":"2022-01-28T19:41:15.205Z","14.0.0-canary.9736ddce9.0":"2022-01-29T09:49:41.601Z","14.0.0-canary.cc4ed13cc.0":"2022-02-04T18:22:31.847Z","14.0.0-canary.dcba26fe1.0":"2022-02-04T21:56:57.745Z","14.0.0-canary.ec54d9046.0":"2022-02-07T15:46:24.585Z","14.0.0-canary.ea9b5b463.0":"2022-02-09T17:53:27.426Z","14.0.0-canary.96ea061c1.0":"2022-02-09T18:59:00.301Z","14.0.0-canary.e00181e59.0":"2022-02-10T20:06:19.419Z","14.0.0-canary.037285f9b.0":"2022-02-11T18:29:17.492Z","14.0.0-canary.1aaa68dda.0":"2022-02-16T19:48:47.986Z","14.0.0-canary.ab4aba1af.0":"2022-02-17T18:16:08.522Z","14.0.0-canary.e58552c6e.0":"2022-02-18T18:03:52.798Z","14.0.0-canary.868793776.0":"2022-02-22T19:35:08.241Z","14.0.0-canary.fdc37a445.0":"2022-02-28T18:45:59.935Z","14.0.0-canary.43c7d87dc.0":"2022-03-01T15:32:58.584Z","14.0.0-canary.23043acd0.0":"2022-03-02T20:27:16.266Z","14.0.0-canary.6505e61c5.0":"2022-03-03T20:00:15.255Z","14.0.0-canary.16c166154.0":"2022-03-08T23:22:11.649Z","14.0.0-canary.bdf1d3771.0":"2022-03-14T14:28:17.075Z","14.0.0-canary.cf4292778.0":"2022-03-15T00:29:25.814Z","14.0.0-canary.bbd43e0e0.0":"2022-03-16T20:49:54.323Z","14.0.0-canary.1b6afad86.0":"2022-03-16T21:03:25.345Z","14.0.0-canary.bdf9d4af9.0":"2022-03-16T21:17:41.512Z","14.0.0-canary.32b391398.0":"2022-03-17T17:58:59.132Z","14.0.0-canary.ae8a6a3a3.0":"2022-03-18T16:39:03.407Z","14.0.0-canary.cbd9358a6.0":"2022-03-18T22:51:50.161Z","14.0.0-canary.dcfe49c98.0":"2022-03-21T18:43:53.465Z","14.0.0-canary.f31a833fa.0":"2022-03-23T00:50:33.192Z","14.0.0-canary.4b92e210a.0":"2022-03-24T20:18:23.592Z","14.0.0-canary.a657abb61.0":"2022-03-24T20:39:45.597Z","14.0.0-canary.443f63f50.0":"2022-03-25T23:04:24.892Z","14.0.0-canary.eb382f318.0":"2022-03-29T17:34:44.909Z","14.0.0-canary.344d52823.0":"2022-03-29T18:43:05.487Z","14.0.0-canary.4e372fb49.0":"2022-04-07T20:32:44.431Z","14.0.0-canary.3e30054fb.0":"2022-04-13T22:14:03.141Z","14.0.0-canary.8c4da223a.0":"2022-04-19T15:24:00.216Z","14.0.0-canary.7de8965cc.0":"2022-04-19T20:23:12.553Z","14.0.0-canary.641ed0851.0":"2022-04-20T16:05:30.142Z","14.0.0-canary.e88f83024.0":"2022-04-20T17:47:28.968Z","14.0.0-canary.7321d6254.0":"2022-04-20T20:11:02.556Z","14.0.0-canary.3ab956515.0":"2022-04-25T15:01:41.746Z","14.0.0-canary.53b3cad2f.0":"2022-04-27T12:45:08.221Z","14.0.0":"2022-04-28T16:55:40.684Z","15.0.0-canary.432c815e5.0":"2022-04-28T16:56:48.610Z","15.0.0-canary.a0f01f669.0":"2022-05-06T20:14:28.374Z","15.0.0-canary.276cb39a4.0":"2022-05-06T21:31:18.565Z","15.0.0-canary.4fe98ed70.0":"2022-05-06T21:55:51.747Z","15.0.0-canary.58b130a3d.0":"2022-05-06T21:58:11.190Z","15.0.0-canary.ae278a2fe.0":"2022-05-09T15:24:30.741Z","15.0.0-canary.bebf5bfdf.0":"2022-05-11T02:40:08.600Z","15.0.0-canary.e6072cd6a.0":"2022-05-11T20:18:16.183Z","15.0.0-canary.5b40eb988.0":"2022-05-12T02:44:02.209Z","15.0.0-canary.6a61d62f6.0":"2022-05-12T20:26:39.646Z","15.0.0-canary.05930a453.0":"2022-05-13T18:47:17.805Z","15.0.0-canary.c0a11ef0d.0":"2022-05-18T22:00:51.525Z","15.0.0-canary.2f9b268c0.0":"2022-05-20T19:32:27.685Z","15.0.0-canary.7741345b8.0":"2022-05-20T20:02:35.364Z","15.0.0-canary.f807e793f.0":"2022-05-20T22:21:37.095Z","15.0.0-canary.9f53d4a8a.0":"2022-05-23T14:57:28.897Z","15.0.0-canary.77cf00e37.0":"2022-05-31T17:39:36.968Z","15.0.0-canary.3c7b844c2.0":"2022-06-07T22:20:42.798Z","15.0.0-canary.df47894db.0":"2022-06-13T17:08:27.256Z","15.0.0-canary.b18a873dc.0":"2022-06-14T06:29:41.023Z","15.0.0-canary.ba9c29637.0":"2022-06-14T18:57:19.492Z","15.0.0-canary.9bfd12f01.0":"2022-06-22T19:22:27.806Z","15.0.0-canary.764de225d.0":"2022-06-29T16:26:59.237Z","15.0.0-canary.31e517cea.0":"2022-07-01T18:28:19.938Z","15.0.0-canary.9ea4e8e9c.0":"2022-07-01T22:54:55.023Z","15.0.0-canary.cd5bafabb.0":"2022-07-06T17:54:19.417Z","15.0.0-canary.a02fe49d3.0":"2022-07-06T18:51:00.393Z","15.0.0-canary.826a3d8be.0":"2022-07-06T19:30:58.726Z","15.0.0-canary.ef276aa93.0":"2022-07-07T17:02:34.442Z","15.0.0-canary.59cf61d6b.0":"2022-07-07T17:31:20.817Z","15.0.0-canary.8647092f7.0":"2022-07-07T20:38:35.126Z","15.0.0-canary.02ecd4d85.0":"2022-07-11T16:39:10.572Z","15.0.0-canary.63d3a146e.0":"2022-07-12T11:36:58.788Z","15.0.0-canary.88db01990.0":"2022-07-12T11:39:58.313Z","15.0.0-canary.6432d8fd7.0":"2022-07-14T07:28:52.417Z","15.0.0-canary.085f9b25c.0":"2022-07-14T16:34:54.101Z","15.0.0-canary.39f9424b3.0":"2022-07-14T17:05:11.749Z","15.0.0-canary.ae9fce587.0":"2022-07-14T18:08:07.929Z","15.0.0-canary.1ebddc343.0":"2022-07-15T08:49:18.040Z","15.0.0-canary.c5018840c.0":"2022-07-18T09:43:08.444Z","15.0.0-canary.551b40d18.0":"2022-07-18T10:00:58.242Z","15.0.0-canary.cf9f12371.0":"2022-07-18T10:05:01.276Z","15.0.0-canary.2797ff8b6.0":"2022-07-19T00:24:07.126Z","15.0.0-canary.110fafa17.0":"2022-07-20T07:46:38.868Z","15.0.0-canary.386ef1d2f.0":"2022-07-20T18:19:45.503Z","15.0.0-canary.c3924efef.0":"2022-07-20T18:29:25.074Z","15.0.0-canary.cf5c5907c.0":"2022-07-20T21:21:49.258Z","15.0.0-canary.0617e2319.0":"2022-07-20T21:40:03.969Z","15.0.0-canary.a743b7967.0":"2022-07-20T21:57:07.739Z","15.0.0-canary.69fd619d0.0":"2022-07-20T22:09:14.323Z","15.0.0-canary.2a6ddc1cf.0":"2022-07-29T16:04:33.267Z","15.0.0-canary.86efd56f6.0":"2022-08-02T14:45:33.742Z","15.0.0-canary.ccfc24d19.0":"2022-08-03T18:13:30.450Z","15.0.0-canary.e4570146f.0":"2022-08-03T18:40:37.685Z","15.0.0-canary.6683a36cb.0":"2022-08-03T19:20:39.456Z","15.0.0-canary.10196647d.0":"2022-08-03T21:53:42.250Z","15.0.0-canary.b20d3d73c.0":"2022-08-04T22:42:51.549Z","15.0.0-canary.47c0c6b1e.0":"2022-08-09T15:20:22.478Z","15.0.0-canary.0e3dc8e38.0":"2022-08-11T18:45:53.916Z","15.0.0-canary.d5a11f1c8.0":"2022-08-30T23:01:14.862Z","15.0.0-canary.bac992a95.0":"2022-09-01T07:05:35.335Z","15.0.0-canary.d25f3404c.0":"2022-09-01T09:44:24.273Z","15.0.0-canary.920d8a79e.0":"2022-09-01T20:20:54.372Z","15.0.0-canary.c363f267b.0":"2022-09-01T21:18:13.596Z","15.0.0-canary.a4eb4937a.0":"2022-09-06T18:19:44.233Z","15.0.0-canary.4299717da.0":"2022-09-07T16:15:37.192Z","15.0.0-canary.fa7d8d44b.0":"2022-09-07T19:18:44.214Z","15.0.0-canary.a40e3c768.0":"2022-09-09T20:03:54.200Z","15.0.0-canary.18cdc9a00.0":"2022-09-12T21:02:52.293Z","15.0.0-canary.7ab3cd3c8.0":"2022-09-13T22:39:08.185Z","15.0.0-canary.2860d244d.0":"2022-09-16T22:54:47.986Z","15.0.0-canary.e8726533c.0":"2022-09-20T20:17:39.421Z","15.0.0-canary.00d8de0aa.0":"2022-09-21T15:20:05.357Z","15.0.0-canary.271aedc30.0":"2022-09-21T15:35:52.698Z","15.0.0-canary.9f17ff2cb.0":"2022-09-21T18:08:10.688Z","15.0.0-canary.d3344c16f.0":"2022-09-22T09:24:21.370Z","15.0.0-canary.94f20ccb8.0":"2022-09-22T20:47:40.477Z","15.0.0-canary.81e4cb7b2.0":"2022-09-23T15:08:03.625Z","15.0.0-canary.aa85f9413.0":"2022-09-26T17:56:19.804Z","15.0.0-canary.7134a7752.0":"2022-09-26T21:57:31.350Z","15.0.0-canary.70b8ac16e.0":"2022-09-27T22:44:47.678Z","15.0.0-canary.c20d74405.0":"2022-09-27T23:31:09.242Z","15.0.0-canary.f033fc8d1.0":"2022-09-27T23:57:13.683Z","15.0.0-canary.8d7ae912a.0":"2022-09-28T07:55:58.932Z","15.0.0-canary.db414b864.0":"2022-09-28T14:52:35.476Z","15.0.0-canary.28cc6791f.0":"2022-09-28T18:06:46.068Z","15.0.0-canary.a515a2d18.0":"2022-09-28T18:55:38.411Z","15.0.0-canary.ce9523167.0":"2022-09-29T20:31:03.811Z","15.0.0-canary.b2310f7dc.0":"2022-09-30T00:13:43.830Z","15.0.0-canary.a44241e54.0":"2022-09-30T08:21:00.214Z","15.0.0-canary.0ce81e115.0":"2022-09-30T18:18:04.052Z","15.0.0-canary.3cc30f6ad.0":"2022-10-04T17:19:10.548Z","15.0.0-canary.d9cf98e60.0":"2022-10-04T19:03:36.834Z","15.0.0-canary.d71935c8b.0":"2022-10-06T08:14:44.521Z","15.0.0-canary.49c56a25d.0":"2022-10-06T18:50:48.951Z","15.0.0-canary.07acddef3.0":"2022-10-07T21:37:15.544Z","15.0.0-canary.1c74eb2c0.0":"2022-10-07T21:55:02.305Z","15.0.0-canary.dadfb713e.0":"2022-10-08T05:05:31.104Z","15.0.0-canary.395f1ce61.0":"2022-10-08T05:07:31.131Z","15.0.0-canary.e741b5c82.0":"2022-10-10T17:37:44.202Z","15.0.0-canary.582f3cc1c.0":"2022-10-11T04:48:39.983Z","15.0.0-canary.b1a6e3e88.0":"2022-10-12T12:01:59.876Z","15.0.0-canary.c9b1a31e4.0":"2022-10-12T16:58:04.793Z","15.0.0-canary.13e9b0d1f.0":"2022-10-12T19:20:36.992Z","15.0.0-canary.1dc797e7f.0":"2022-10-14T09:41:06.544Z","15.0.0-canary.ed4009397.0":"2022-10-14T16:50:54.766Z","15.0.0-canary.95ef196bc.0":"2022-10-14T23:13:33.549Z","15.0.0-canary.13eea1b2d.0":"2022-10-17T03:51:12.069Z","15.0.0-canary.ef9b2babb.0":"2022-10-17T09:17:34.156Z","15.0.0-canary.cec7fb987.0":"2022-10-17T10:55:56.201Z","15.0.0-canary.4fff58b08.0":"2022-10-17T15:22:03.211Z","15.0.0-canary.587d8f871.0":"2022-10-17T15:56:44.967Z","15.0.0-canary.edf4b98d0.0":"2022-10-17T16:40:04.826Z","15.0.0-canary.024ac5f16.0":"2022-10-17T22:41:56.961Z","15.0.0-canary.c8bdf6144.0":"2022-10-18T18:23:01.583Z","15.0.0-canary.bacda4885.0":"2022-10-18T18:42:18.469Z","15.0.0-canary.92b2556cf.0":"2022-10-19T01:13:01.892Z","15.0.0-canary.cc804509a.0":"2022-10-19T01:16:49.420Z","15.0.0-canary.982bedae9.0":"2022-10-19T01:36:40.134Z","15.0.0-canary.ee40081f4.0":"2022-10-19T20:11:25.499Z","15.0.0-canary.98f1b54e2.0":"2022-10-20T22:56:21.313Z","15.0.0-canary.e74b7ba7e.0":"2022-10-21T17:05:25.954Z","15.0.0-canary.ab55c07d2.0":"2022-10-22T18:18:49.840Z","15.0.0-canary.fc539db34.0":"2022-10-24T18:58:46.967Z","15.0.0-canary.e340b04c5.0":"2022-10-25T23:44:39.958Z","15.0.0-canary.2c1a8f8fd.0":"2022-10-26T17:29:59.422Z","15.0.0-canary.ecfee946f.0":"2022-10-26T20:14:48.719Z","15.0.0-canary.73ca9dbb0.0":"2022-10-31T17:32:00.878Z","15.0.0-canary.357f2e5f1.0":"2022-10-31T18:48:54.190Z","15.0.0-canary.eb103d4b5.0":"2022-10-31T19:55:59.522Z","15.0.0-canary.af5f01223.0":"2022-11-01T18:36:30.133Z","15.0.0-canary.58733ef41.0":"2022-11-02T18:10:19.371Z","15.0.0-canary.909b48215.0":"2022-11-03T04:07:24.543Z","15.0.0-canary.7f17127d5.0":"2022-11-03T18:18:45.537Z","15.0.0-canary.da95e2a05.0":"2022-11-04T16:58:40.662Z","15.0.0-canary.4832e2750.0":"2022-11-04T20:56:38.668Z","15.0.0-canary.215506426.0":"2022-11-05T01:05:36.187Z","15.0.0-canary.4cf917476.0":"2022-11-05T18:03:42.267Z","15.0.0-canary.eef14bd32.0":"2022-11-06T17:24:12.089Z","15.0.0-canary.6faa29fe9.0":"2022-11-07T03:13:03.446Z","15.0.0-canary.9af09b967.0":"2022-11-07T18:27:16.300Z","15.0.0-canary.0f54fbb93.0":"2022-11-08T21:56:12.958Z","15.0.0-canary.a8d47f9fe.0":"2022-11-09T04:17:15.968Z","15.0.0-canary.66a1e75e6.0":"2022-11-09T09:35:10.414Z","15.0.0-canary.5e5c2afc0.0":"2022-11-09T11:52:51.306Z","15.0.0-canary.3e3f43359.0":"2022-11-09T20:02:28.584Z","15.0.0-canary.3f667fac6.0":"2022-11-09T22:05:36.678Z","15.0.0-canary.faa28c1c5.0":"2022-11-11T16:35:24.565Z","15.0.0-canary.a868c7866.0":"2022-11-11T16:36:06.103Z","15.0.0-canary.602fe8efa.0":"2022-11-11T17:11:25.188Z","15.0.0-canary.558c2be62.0":"2022-11-11T22:44:53.710Z","15.0.0-canary.b5c13a7a8.0":"2022-11-14T15:58:07.769Z","15.0.0-canary.a6e1c0702.0":"2022-11-14T17:26:36.925Z","15.0.0-canary.b6f8a06de.0":"2022-11-15T09:27:52.520Z","15.0.0-canary.0163f3ba5.0":"2022-11-15T18:01:35.661Z","15.0.0-canary.66c5cbb94.0":"2022-11-15T19:29:37.793Z","15.0.0-canary.b01136063.0":"2022-11-16T00:15:23.435Z","15.0.0-canary.01da0cabb.0":"2022-11-16T09:12:44.431Z","15.0.0-canary.4ac393164.0":"2022-11-16T16:14:55.689Z","15.0.0-canary.6048fb563.0":"2022-11-16T16:17:07.491Z","15.0.0-canary.3777b03cb.0":"2022-11-16T18:40:58.947Z","15.0.0-canary.f7f56fff7.0":"2022-11-16T19:55:33.440Z","15.0.0-canary.7c73f6134.0":"2022-11-16T19:59:09.237Z","15.0.0-canary.f1e037150.0":"2022-11-16T20:04:46.770Z","15.0.0-canary.40b18d043.0":"2022-11-16T22:58:22.332Z","15.0.0-canary.86bde5c06.0":"2022-11-16T23:08:32.579Z","15.0.0-canary.bb7751002.0":"2022-11-16T23:59:44.190Z","15.0.0-canary.63aca9af6.0":"2022-11-17T19:00:45.081Z","15.0.0-canary.56482dc2e.0":"2022-11-17T21:54:48.739Z","15.0.0-canary.953e689f3.0":"2022-11-17T22:04:16.996Z","15.0.0-canary.b5606a793.0":"2022-11-18T10:20:46.373Z","15.0.0-canary.8c5675942.0":"2022-11-18T15:15:47.627Z","15.0.0-canary.697fbdebd.0":"2022-11-18T17:00:15.206Z","15.0.0-canary.d58410453.0":"2022-11-18T19:24:39.394Z","15.0.0-canary.7971d6ad5.0":"2022-11-19T08:44:51.114Z","15.0.0-canary.a0ae73b0e.0":"2022-11-21T10:53:19.542Z","15.0.0-canary.96f472604.0":"2022-11-21T12:52:16.903Z","15.0.0-canary.18b8f31e1.0":"2022-11-21T16:01:59.277Z","15.0.0-canary.912f33ce4.0":"2022-11-21T17:53:34.025Z","15.0.0-canary.1e1b1c369.0":"2022-11-23T19:00:10.685Z","15.0.0-canary.a2ec49244.0":"2022-11-23T19:30:34.270Z","15.0.0-canary.a7458ba0b.0":"2022-11-23T20:16:03.420Z","15.0.0-canary.7c35e5036.0":"2022-11-24T08:39:06.804Z","15.0.0-canary.4356e05c5.0":"2022-11-24T09:56:20.409Z","15.0.0-canary.cb605f8af.0":"2022-11-24T10:15:01.029Z","15.0.0-canary.05fb07f9f.0":"2022-11-24T17:13:22.543Z","15.0.0-canary.a911b386b.0":"2022-11-28T16:46:57.625Z","15.0.0-canary.2aa8050b4.0":"2022-11-28T19:11:11.097Z","15.0.0-canary.323904a9f.0":"2022-11-29T15:33:30.681Z","15.0.0-canary.168a629a4.0":"2022-11-29T16:48:24.461Z","15.0.0-canary.65c411674.0":"2022-11-29T17:37:49.494Z","15.0.0-canary.a86d36fd2.0":"2022-11-30T02:13:48.070Z","15.0.0-canary.3a1f46c66.0":"2022-11-30T12:06:36.459Z","15.0.0-canary.32d8a9648.0":"2022-12-01T17:28:46.195Z","15.0.0-canary.03618ab70.0":"2022-12-01T20:54:08.544Z","15.0.0-canary.68aaed940.0":"2022-12-01T21:23:46.004Z","15.0.0-canary.f0a0bbc75.0":"2022-12-02T09:01:22.878Z","15.0.0-canary.dd99c8764.0":"2022-12-02T14:00:36.874Z","15.0.0-canary.fabdcca3a.0":"2022-12-02T15:06:31.656Z","15.0.0-canary.2d26722d2.0":"2022-12-02T16:26:10.726Z","15.0.0-canary.eaa0c3a86.0":"2022-12-02T17:42:15.383Z","15.0.0-canary.79a613bbd.0":"2022-12-06T14:25:17.131Z","15.0.0-canary.c871fe61e.0":"2022-12-07T07:51:35.388Z","15.0.0-canary.9eaee7936.0":"2022-12-07T20:02:29.801Z","15.0.0-canary.1d37bf601.0":"2022-12-07T20:40:55.095Z","15.0.0-canary.a5fe069d5.0":"2022-12-09T18:43:49.021Z","15.0.0-canary.ce8b5326f.0":"2022-12-09T23:30:26.233Z","15.0.0-canary.43f5323bc.0":"2022-12-12T16:45:55.735Z","15.0.0-canary.5490e32e7.0":"2022-12-12T17:01:47.066Z","15.0.0-canary.817002c29.0":"2022-12-13T21:53:36.094Z","15.0.0-canary.313a1326a.0":"2022-12-14T10:28:25.197Z","15.0.0-canary.a69c14e10.0":"2022-12-14T11:18:34.101Z","15.0.0-canary.f43e0ceb5.0":"2022-12-14T16:44:29.071Z","15.0.0-canary.34767110.0":"2022-12-14T17:22:04.932Z","15.0.0-canary.1f99f3c50.0":"2022-12-15T14:25:12.028Z","15.0.0-canary.cfd69490f.0":"2022-12-16T20:08:12.323Z","15.0.0-canary.94ad8d986.0":"2022-12-19T19:26:45.664Z","15.0.0-canary.604264203.0":"2022-12-21T21:40:30.545Z","15.0.0-canary.85bcff6af.0":"2022-12-22T10:24:51.490Z","15.0.0-canary.ece3e8d21.0":"2022-12-22T17:11:55.114Z","15.0.0-canary.278ad53d1.0":"2022-12-27T17:04:44.200Z","15.0.0-canary.a7d8389e1.0":"2022-12-27T19:03:29.163Z","15.0.0-canary.8175d5eff.0":"2022-12-28T01:51:14.101Z","15.0.0-canary.16abb41ed.0":"2022-12-28T19:38:08.544Z","15.0.0-canary.e21dcb86d.0":"2022-12-29T14:01:54.310Z","15.0.0-canary.20ab6f5a8.0":"2022-12-29T19:40:40.194Z","15.0.0-canary.b9806f623.0":"2022-12-29T23:05:31.832Z","15.0.0-canary.50c9f550e.0":"2023-01-03T15:47:26.759Z","15.0.0-canary.af490a848.0":"2023-01-03T15:56:38.849Z","15.0.0-canary.7cf487c98.0":"2023-01-03T17:38:27.530Z","15.0.0-canary.a52be2d5e.0":"2023-01-03T19:12:52.272Z","15.0.0-canary.e38ba17c5.0":"2023-01-03T22:32:08.998Z","15.0.0-canary.49041a6c3.0":"2023-01-04T15:17:24.018Z","15.0.0-canary.c492898c2.0":"2023-01-04T17:36:45.681Z","15.0.0-canary.d7a2277de.0":"2023-01-04T21:35:21.522Z","15.0.0-canary.fd95ca7ef.0":"2023-01-05T01:02:30.534Z","15.0.0-canary.1eb44faf9.0":"2023-01-05T09:09:03.574Z","15.0.0-canary.adcdb7db9.0":"2023-01-05T16:21:17.373Z","15.0.0-canary.067af7eff.0":"2023-01-06T23:15:49.703Z","15.0.0-canary.21d1196a7.0":"2023-01-09T10:42:41.880Z","15.0.0-canary.8d2d8d3c4.0":"2023-01-09T22:23:38.215Z","15.0.0-canary.f476fdece.0":"2023-01-10T16:14:21.686Z","15.0.0-canary.fc6ee6c32.0":"2023-01-10T16:27:38.894Z","15.0.0-canary.73537ab0f.0":"2023-01-10T18:11:14.068Z","15.0.0-canary.684e33d25.0":"2023-01-10T19:18:14.286Z","15.0.0-canary.0e89aab6b.0":"2023-01-11T16:17:12.349Z","15.0.0-canary.b0103d10a.0":"2023-01-11T19:12:07.650Z","15.0.0-canary.50e7a5312.0":"2023-01-11T20:53:46.462Z","15.0.0-canary.202823f54.0":"2023-01-11T21:35:24.540Z","15.0.0-canary.199fe2a2a.0":"2023-01-11T21:55:18.362Z","15.0.0-canary.8c0786d6f.0":"2023-01-12T14:35:54.173Z","15.0.0-canary.8a74f7c6d.0":"2023-01-17T19:24:11.764Z","15.0.0-canary.b4687fdc1.0":"2023-01-19T19:48:57.016Z","15.0.0-canary.b836b9892.0":"2023-01-24T22:38:51.421Z","15.0.0-canary.e8912fd37.0":"2023-01-26T18:29:24.909Z","15.0.0-canary.16fbd30ff.0":"2023-01-26T18:34:30.445Z","15.0.0-canary.033ae083a.0":"2023-01-26T19:26:29.218Z","15.0.0-canary.3a705fa1d.0":"2023-01-27T22:43:16.718Z","15.0.0-canary.d6bea2ff2.0":"2023-01-31T15:29:41.274Z","15.0.0-canary.0c94182c8.0":"2023-02-01T17:43:47.057Z","15.0.0-canary.15b221540.0":"2023-02-01T17:52:05.777Z","15.0.0-canary.eeebb8bba.0":"2023-02-01T18:21:51.209Z","15.0.0-canary.6a4b3f834.0":"2023-02-01T18:57:56.491Z","15.0.0-canary.b177b40e2.0":"2023-02-02T03:33:37.205Z","15.0.0-canary.d9f821042.0":"2023-02-02T17:37:29.921Z","15.0.0-canary.47c7deb19.0":"2023-02-03T09:08:33.031Z","15.0.0-canary.a16dbd1a6.0":"2023-02-04T06:14:09.085Z","15.0.0-canary.93416f87a.0":"2023-02-07T13:23:36.008Z","15.0.0-canary.49b8e7442.0":"2023-02-07T23:09:00.828Z","15.0.0-canary.de38de758.0":"2023-02-09T15:41:56.795Z","15.0.0-canary.4d62de70c.0":"2023-02-09T22:02:36.364Z","15.0.0-canary.6fcd8d418.0":"2023-02-13T11:49:28.806Z","15.0.0-canary.066d9439b.0":"2023-02-15T19:57:15.252Z","15.0.0-canary.7ab32468c.0":"2023-02-21T18:33:33.981Z","15.0.0-canary.fa27ba61d.0":"2023-02-27T16:18:59.089Z","15.0.0-canary.311ab4d4a.0":"2023-02-27T16:40:52.735Z","15.0.0-canary.901c83e77.0":"2023-02-27T18:05:38.656Z","15.0.0-canary.5cb8e2174.0":"2023-03-01T16:35:17.296Z","15.0.0-canary.f32339937.0":"2023-03-06T15:15:07.252Z","15.0.0-canary.7644d63d5.0":"2023-03-06T22:27:01.881Z","15.0.0-canary.d96330c08.0":"2023-03-08T11:41:20.523Z","15.0.0-canary.c99cae77c.0":"2023-03-08T23:42:26.118Z","15.0.0-canary.6023b1cd3.0":"2023-03-09T14:25:58.415Z","15.0.0-canary.274610c77.0":"2023-03-09T14:58:08.213Z","15.0.0-canary.a274583b9.0":"2023-03-09T19:52:12.505Z","15.0.0-canary.da22ca960.0":"2023-03-09T20:17:41.743Z","15.0.0-canary.304a94e8b.0":"2023-03-09T20:44:33.315Z","15.0.0-canary.6c265915c.0":"2023-03-09T21:46:49.449Z","15.0.0-canary.de5224633.0":"2023-03-09T23:55:18.433Z","15.0.0-canary.8879557e6.0":"2023-03-10T14:07:28.379Z","15.0.0-canary.23073a303.0":"2023-03-10T14:14:20.080Z","15.0.0-canary.51c7d4014.0":"2023-03-10T16:46:55.326Z","15.0.0-canary.1175a5be0.0":"2023-03-10T20:47:35.906Z","15.0.0-canary.7adf3af80.0":"2023-03-11T01:24:29.955Z","15.0.0-canary.82554d770.0":"2023-03-11T01:36:49.674Z","15.0.0-canary.93fc524b7.0":"2023-03-13T08:38:12.763Z","15.0.0-canary.50be0fbae.0":"2023-03-13T17:43:43.316Z","15.0.0-canary.6b5ffccd9.0":"2023-03-13T17:47:01.116Z","15.0.0-canary.1c8013f4e.0":"2023-03-13T18:01:54.729Z","15.0.0-canary.112715df5.0":"2023-03-13T18:38:41.317Z","15.0.0-canary.d250911f2.0":"2023-03-13T19:30:59.826Z","15.0.0-canary.7cd925c12.0":"2023-03-13T19:38:28.859Z","15.0.0-canary.b2ddacf73.0":"2023-03-13T19:42:57.415Z","15.0.0-canary.989ae2ecc.0":"2023-03-13T19:52:08.300Z","15.0.0-canary.89c66483a.0":"2023-03-13T20:15:57.384Z","15.0.0-canary.6a85742c2.0":"2023-03-14T02:46:53.463Z","15.0.0-canary.bb6cd78d5.0":"2023-03-14T18:16:15.129Z","15.0.0-canary.5f94aa37d.0":"2023-03-14T18:19:40.412Z","15.0.0-canary.1bd317240.0":"2023-03-14T18:23:27.712Z","15.0.0-canary.d441d2a2a.0":"2023-03-14T18:26:03.650Z","15.0.0-canary.fff4066c6.0":"2023-03-14T18:26:42.295Z","15.0.0-canary.87809c710.0":"2023-03-14T18:42:56.067Z","15.0.0-canary.48d30012d.0":"2023-03-14T18:47:17.422Z","15.0.0-canary.419b23cc6.0":"2023-03-14T18:58:16.316Z","15.0.0-canary.bf86521f4.0":"2023-03-14T23:12:56.935Z","15.0.0-canary.11f3d280e.0":"2023-03-15T00:10:47.084Z","15.0.0-canary.b281a409a.0":"2023-03-21T15:40:23.167Z","15.0.0-canary.39e473690.0":"2023-03-21T17:50:44.833Z","15.0.0-canary.cedffb44c.0":"2023-03-21T17:57:46.298Z","15.0.0-canary.36a4cba99.0":"2023-03-28T17:49:33.202Z","15.0.0-canary.ed7e82ded.0":"2023-03-28T20:34:03.540Z","15.0.0-canary.55093ee1e.0":"2023-03-29T18:47:54.081Z","15.0.0-canary.0c53abc81.0":"2023-04-07T01:40:39.944Z","15.0.0-canary.51311e69e.0":"2023-04-07T18:07:21.422Z","15.0.0-canary.113b1a38e.0":"2023-04-10T21:53:16.956Z","15.0.0-canary.ea2191426.0":"2023-04-11T21:55:07.142Z","15.0.0-canary.5a5c38538.0":"2023-04-11T22:29:50.761Z","15.0.0-canary.e4b5ea7eb.0":"2023-04-11T23:03:44.018Z","15.0.0-canary.a094dd9c1.0":"2023-04-14T22:42:00.694Z","15.0.0-canary.f771b091c.0":"2023-04-17T15:37:30.787Z","15.0.0-canary.79b1b612b.0":"2023-04-19T23:39:32.637Z","15.0.0-canary.6f50071e5.0":"2023-04-20T18:00:22.814Z","15.0.0-canary.ef754381c.0":"2023-04-24T20:50:26.188Z","15.0.0-canary.69ebf61ea.0":"2023-04-27T17:20:51.401Z","15.0.0-canary.b90be86de.0":"2023-04-29T00:21:06.544Z","15.0.0-canary.51f9c0c28.0":"2023-04-29T00:30:53.276Z","15.0.0-canary.4e840d685.0":"2023-05-02T15:32:58.146Z","15.0.0-canary.10b8563e4.0":"2023-05-02T23:41:21.034Z","15.0.0-canary.736b7fda4.0":"2023-05-03T15:08:51.086Z","15.0.0-canary.0e533c5a1.0":"2023-05-05T16:55:39.970Z","15.0.0-canary.5f01c15a2.0":"2023-05-05T17:25:46.555Z","15.0.0-canary.3b5b55e31.0":"2023-05-05T18:38:24.794Z","15.0.0-canary.d0788120f.0":"2023-05-09T08:22:30.701Z","15.0.0-canary.f52358dd0.0":"2023-05-12T14:29:52.786Z","15.0.0-canary.d3c3fbaa3.0":"2023-05-12T17:59:53.435Z","15.0.0-canary.576d3d2c8.0":"2023-05-16T01:59:29.799Z","15.0.0-canary.19bb36a46.0":"2023-05-16T19:53:27.869Z","15.0.0-canary.aa5ac7fe5.0":"2023-05-22T17:24:55.115Z","15.0.0-canary.90291f2e2.0":"2023-05-23T17:42:07.257Z","15.0.0-canary.446734f27.0":"2023-05-30T21:47:42.000Z","15.0.0-canary.19de312d8.0":"2023-06-06T17:17:40.974Z","15.0.0-canary.6081d829b.0":"2023-06-07T01:13:29.470Z","15.0.0-canary.b26c34a68.0":"2023-06-07T20:16:51.327Z","15.0.0-canary.4fe911371.0":"2023-06-07T23:05:23.588Z","15.0.0-canary.a9ff9866f.0":"2023-06-13T11:37:40.589Z","15.0.0-canary.b994146f6.0":"2023-06-14T21:03:00.758Z","15.0.0-canary.1fb4b1a06.0":"2023-06-27T18:56:36.857Z","15.0.0-canary.c64a2776e.0":"2023-06-27T20:15:52.426Z","15.0.0-canary.b05d9eb7c.0":"2023-06-29T16:23:09.321Z","15.0.0-canary.2a9697dc5.0":"2023-06-30T22:13:22.856Z","15.0.0-canary.0c52adeab.0":"2023-07-05T16:25:12.325Z","15.0.0-canary.83355c322.0":"2023-07-10T15:04:43.127Z","15.0.0-canary.bc9ae6c9c.0":"2023-08-03T21:20:15.440Z","15.0.0-canary.3c44cd956.0":"2023-08-07T17:46:33.048Z","15.0.0-canary.02702296e.0":"2023-08-25T12:04:24.371Z","15.0.0-canary.872b65832.0":"2023-08-30T12:12:32.052Z","15.0.0-canary.89b2e4122.0":"2023-08-31T16:06:08.882Z","15.0.0-canary.7a3942e7a.0":"2023-08-31T18:38:54.939Z","15.0.0-canary.54feb3020.0":"2023-09-11T21:04:27.648Z","15.0.0-canary.6cda3ce8d.0":"2023-09-12T01:44:26.223Z","15.0.0-canary.205b20b36.0":"2023-09-13T17:15:53.458Z","15.0.0-canary.22bf82024.0":"2023-09-18T09:11:19.423Z","15.0.0-canary.a246a4439.0":"2023-09-18T17:45:06.883Z","15.0.0-canary.d153db62b.0":"2023-09-19T19:14:25.995Z","15.0.0-canary.2528c1c3b.0":"2023-09-20T18:05:39.176Z","15.0.0-canary.1728a6dcf.0":"2023-09-26T01:22:33.442Z","15.0.0-canary.ebb636f3d.0":"2023-09-29T19:43:49.309Z","15.0.0-canary.c0d21ecc9.0":"2023-10-09T19:36:10.935Z","15.0.0-canary.127a44b28.0":"2023-10-12T19:59:20.545Z","15.0.0-canary.0ad128337.0":"2023-10-19T18:51:10.645Z","15.0.0-canary.9cec94097.0":"2023-10-19T23:08:45.512Z","15.0.0-canary.c51a0bbcc.0":"2023-11-15T20:58:16.174Z","15.0.0-canary.d76666ad4.0":"2023-11-27T22:12:40.399Z","15.0.0-canary.8656bf0e0.0":"2023-12-12T21:18:11.867Z","15.0.0-canary.7f224ddd4.0":"2023-12-28T06:08:38.739Z","15.0.0-canary.a0b8a90c0.0":"2024-02-07T19:19:00.846Z","15.0.0-canary.e50b478eb.0":"2024-02-08T18:07:32.246Z","15.0.0-canary.c43b3438b.0":"2024-02-23T20:17:02.838Z","15.0.0-canary.819498d8c.0":"2024-03-15T15:14:11.234Z","15.0.0-canary.453a6248a.0":"2024-03-25T17:13:03.739Z","15.0.0-canary.68edc03c6.0":"2024-04-08T19:05:15.176Z","15.0.0-canary.5bebc0064.0":"2024-04-11T21:39:53.637Z","15.0.0-canary.311f29a60.0":"2024-04-23T17:59:05.350Z","15.0.0-canary.65c10a622.0":"2024-04-25T18:48:14.598Z","15.0.0-canary.4b35cb7d0.0":"2024-05-02T12:02:17.494Z","15.0.0-canary.f80ac92b0.0":"2024-05-02T12:12:38.525Z","15.0.0-canary.2f5b899bc.0":"2024-05-20T13:54:17.633Z","15.0.0-canary.cfec83c74.0":"2024-05-20T18:56:13.461Z","15.0.0-canary.423edc3dc.0":"2024-06-26T18:11:43.386Z"},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"keywords":["material components","material design","shape"],"license":"MIT","homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"readme":"","readmeFilename":""}